Skip to content

Commit

Permalink
Init
Browse files Browse the repository at this point in the history
  • Loading branch information
@janfaracik
janfaracik committed Feb 18, 2024
1 parent 824f64c commit 8fa4c21
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 105 deletions.
74 changes: 17 additions & 57 deletions core/src/main/resources/hudson/PluginManager/_table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,23 +204,9 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
}
}

function addDependencyInfoRow(pluginTR, infoTR) {
infoTR.classList.add("plugin-dependency-info");
pluginTR.parentNode.insertBefore(infoTR, pluginTR.nextElementSibling);
}
function removeDependencyInfoRow(pluginTR) {
var nextRow = pluginTR.nextElementSibling;
if (nextRow && nextRow.classList.contains("plugin-dependency-info")) {
nextRow.remove();
}
}

function populateEnableDisableInfo(pluginTR, infoContainer) {
var pluginMetadata = pluginTR.jenkinsPluginMetadata;

// Remove all existing class info
infoContainer.removeAttribute("class");
infoContainer.classList.add("enable-state-info");
infoContainer.classList.add("plugin-dependency-info")

if (pluginTR.classList.contains("has-disabled-dependency")) {
var dependenciesDiv = pluginMetadata.dependenciesDiv;
Expand Down Expand Up @@ -299,6 +285,7 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
function populateUninstallInfo(pluginTR, infoContainer) {
// Remove all existing class info
infoContainer.removeAttribute("class");
infoContainer.classList.add("plugin-dependency-info");
infoContainer.classList.add("uninstall-state-info");

if (pluginTR.classList.contains("has-dependents")) {
Expand Down Expand Up @@ -352,6 +339,7 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
}
}

dependentsDiv.classList.add('distant-axis')
dependentsDiv.style.display = "inherit";
return dependentsDiv;
}
Expand Down Expand Up @@ -397,57 +385,29 @@ Behaviour.specify("#filter-box", "_table", 0, function (e) {
});
}

//
var infoTR = document.createElement("tr");
var infoTD = document.createElement("td");
var infoDiv = document.createElement("div");
infoTR.appendChild(infoTD);
infoTD.appendChild(infoDiv);
infoTD.setAttribute("colspan", "6"); // This is the cell that all info will be added to.
infoDiv.style.display = "inherit";

// We don't want the info row to appear immediately. We wait for e.g. 1 second and if the mouse
// is still in there (hasn't left the cell) then we show. The following code is for clearing the
// show timeout where the mouse has left before the timeout has fired.
var showInfoTimeout = undefined;
function clearShowInfoTimeout() {
if (showInfoTimeout) {
clearTimeout(showInfoTimeout);
}
showInfoTimeout = undefined;
}

// Handle mouse in/out of the enable/disable cell (left most cell).
if (enableTD) {
enableTD.addEventListener("mouseenter", function () {
showInfoTimeout = setTimeout(function () {
showInfoTimeout = undefined;
infoDiv.textContent = "";
if (populateEnableDisableInfo(pluginTR, infoDiv)) {
addDependencyInfoRow(pluginTR, infoTR);
}
}, 1000);
});
enableTD.addEventListener("mouseleave", function () {
clearShowInfoTimeout();
removeDependencyInfoRow(pluginTR);
const button = enableTD.querySelector(`[data-type="app-tooltip-wrapper"]`);
const shinyNewDiv = document.createElement("div");

if (populateEnableDisableInfo(pluginTR, shinyNewDiv)) {
button.setAttribute("data-html-tooltip", shinyNewDiv.outerHTML);
Behaviour.applySubtree(button, true);
}
});
}

// Handle mouse in/out of the uninstall cell (right most cell).
if (uninstallTD) {
uninstallTD.addEventListener("mouseenter", function () {
showInfoTimeout = setTimeout(function () {
showInfoTimeout = undefined;
infoDiv.textContent = "";
if (populateUninstallInfo(pluginTR, infoDiv)) {
addDependencyInfoRow(pluginTR, infoTR);
}
}, 1000);
});
uninstallTD.addEventListener("mouseleave", function () {
clearShowInfoTimeout();
removeDependencyInfoRow(pluginTR);
const button = uninstallTD.querySelector(`[data-type="app-tooltip-wrapper"]`);
const shinyNewDiv = document.createElement("div");

if (populateUninstallInfo(pluginTR, shinyNewDiv)) {
button.setAttribute("data-html-tooltip", shinyNewDiv.outerHTML);
Behaviour.applySubtree(button, true);
}
});
}
}
Expand Down
40 changes: 22 additions & 18 deletions core/src/main/resources/hudson/PluginManager/installed.jelly
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,16 +156,18 @@ THE SOFTWARE.
</td>
<j:set var="state" value="${p.enabled?'true':null}"/>
<td class="jenkins-table__cell--tight enable" data="${state}">
<div class="jenkins-table__cell__button-wrapper">
<span class="jenkins-toggle-switch">
<input type="checkbox" checked="${state}"
class="plugin-manager-toggle-switch"
url="plugin/${p.shortName}"
disabled="${readOnlyMode ? 'true' : null}"
original="${p.active?'true':'false'}"/>
<label class="attach-previous"></label>
</span>
</div>
<span data-type="app-tooltip-wrapper">
<div class="jenkins-table__cell__button-wrapper">
<span class="jenkins-toggle-switch">
<input type="checkbox" checked="${state}"
class="plugin-manager-toggle-switch"
url="plugin/${p.shortName}"
disabled="${readOnlyMode ? 'true' : null}"
original="${p.active?'true':'false'}"/>
<label class="attach-previous"></label>
</span>
</div>
</span>
</td>
<l:isAdmin>
<td class="jenkins-table__cell--tight">
Expand Down Expand Up @@ -218,14 +220,16 @@ THE SOFTWARE.
</j:forEach>
</div>
</j:if>
<button data-action="uninstall"
type="button"
class="jenkins-table__button jenkins-!-destructive-color"
tooltip="${%Uninstall} ${p.updateInfo.displayName ?: p.displayName}"
data-href="plugin/${p.shortName}/doUninstall"
data-message="${%uninstall-title(p.updateInfo.displayName ?: p.displayName)}">
<l:icon src="symbol-close-circle"/>
</button>
<span data-type="app-tooltip-wrapper">
<button data-action="uninstall"
type="button"
class="jenkins-table__button jenkins-!-destructive-color"
tooltip="${%Uninstall} ${p.updateInfo.displayName ?: p.displayName}"
data-href="plugin/${p.shortName}/doUninstall"
data-message="${%uninstall-title(p.updateInfo.displayName ?: p.displayName)}">
<l:icon src="symbol-close-circle"/>
</button>
</span>
</j:otherwise>
</j:choose>
</div>
Expand Down
55 changes: 25 additions & 30 deletions war/src/main/scss/pages/_plugin-manager.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,39 +72,34 @@
float: right;
}

.plugin-dependency-info .title,
.plugin-dependency-info .subtitle {
opacity: 0.7;
}

.plugin-dependency-info .title {
margin-bottom: 5px;
font-size: larger;
font-weight: bolder;
}

.plugin-dependency-info span {
margin: 5px 5px 0 0;
background-color: var(--accent-color);
display: inline-block;
padding: 0.2em 0.6em 0.3em;
font-size: var(--font-size-xs);
font-weight: 700;
line-height: 1;
color: var(--white);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;
}
}

.app-plugin-manager__sidebar {
position: sticky;
top: calc(40px + 1.6rem);
.plugin-dependency-info {
display: flex;
flex-direction: column;
gap: 0.4375rem;
padding-block: 0.3rem;
max-width: 350px;

.subtitle {
opacity: 0.85;
color: var(--text-color-secondary);
}

h1 {
margin-top: 1rem !important;
margin-bottom: 0.1rem !important;
.distant-axis {
display: flex;
gap: 0.4375rem;
flex-wrap: wrap;

span {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: color-mix(in srgb, var(--text-color-secondary) 7.5%, transparent);
border: 1px solid color-mix(in srgb, var(--text-color-secondary) 2%, transparent);
padding: 0.15rem 0.65rem;
border-radius: 100px;
}
}
}

0 comments on commit 8fa4c21

Please sign in to comment.