mirror of
https://github.com/jenkinsci/jenkins.git
synced 2026-10-26 19:15:09 +00:00
Refine badges in Jenkins (#11254)
Co-authored-by: Kris Stern <krisstern@outlook.com>
This commit is contained in:
Jan FaracikandKris Stern authored and GitHub committed
1 parent
45c28429d2
commit
17abe4f60b
15 files changed
+80
-78
No files matched your search
@@ -131,7 +131,7 @@ THE SOFTWARE.
|
||||
<j:forEach var="label" items="${p.categories}">
|
||||
<j:if test="${!it.isMetaLabel(label)}">
|
||||
<a href="?filter=${app.updateCenter.getCategoryDisplayName(label)}"
|
||||
class="jenkins-table__link jenkins-table__badge">
|
||||
class="jenkins-badge">
|
||||
${app.updateCenter.getCategoryDisplayName(label)}
|
||||
</a>
|
||||
</j:if>
|
||||
|
||||
@@ -123,12 +123,7 @@ window.displayBuilds = function (data) {
|
||||
a1.appendChild(span1);
|
||||
td2.appendChild(a1);
|
||||
var a2 = document.createElement("a");
|
||||
a2.classList.add(
|
||||
"jenkins-table__link",
|
||||
"jenkins-table__badge",
|
||||
"model-link",
|
||||
"inside",
|
||||
);
|
||||
a2.classList.add("jenkins-badge", "model-link");
|
||||
a2.href = rootUrl + "/" + e.url;
|
||||
a2.textContent = e.displayName;
|
||||
td2.appendChild(a2);
|
||||
|
||||
@@ -36,11 +36,7 @@ THE SOFTWARE.
|
||||
<l:icon src="${tab.iconFileName}" />
|
||||
</j:if>
|
||||
${tab.displayName}
|
||||
<j:if test="${tab.badge != null}">
|
||||
<div class="pill jenkins-!-${tab.badge.severity}-color" aria-label="${tab.badge.tooltip}">
|
||||
${tab.badge.text}
|
||||
</div>
|
||||
</j:if>
|
||||
<l:badge badge="${tab.badge}" />
|
||||
</a>
|
||||
</j:forEach>
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ THE SOFTWARE.
|
||||
<j:choose>
|
||||
<j:when test="${lfBuild!=null}">
|
||||
${lfBuild.timestampString}
|
||||
<a href="${jobBaseUrl}${job.shortUrl}lastFailedBuild/" class="jenkins-table__link jenkins-table__badge model-link inside">${lfBuild.displayName}</a>
|
||||
<a href="${jobBaseUrl}${job.shortUrl}lastFailedBuild/" class="jenkins-badge model-link">${lfBuild.displayName}</a>
|
||||
</j:when>
|
||||
<j:otherwise>
|
||||
${%N/A}
|
||||
|
||||
@@ -29,7 +29,7 @@ THE SOFTWARE.
|
||||
<j:choose>
|
||||
<j:when test="${lstBuild!=null}">
|
||||
${lstBuild.timestampString}
|
||||
<a href="${jobBaseUrl}${job.shortUrl}lastStableBuild/" class="jenkins-table__link jenkins-table__badge model-link inside">${lstBuild.displayName}</a>
|
||||
<a href="${jobBaseUrl}${job.shortUrl}lastStableBuild/" class="jenkins-badge model-link">${lstBuild.displayName}</a>
|
||||
</j:when>
|
||||
<j:otherwise>
|
||||
${%N/A}
|
||||
|
||||
@@ -29,7 +29,7 @@ THE SOFTWARE.
|
||||
<j:choose>
|
||||
<j:when test="${lsBuild!=null}">
|
||||
${lsBuild.timestampString}
|
||||
<a href="${jobBaseUrl}${job.shortUrl}lastSuccessfulBuild/" class="jenkins-table__link jenkins-table__badge model-link inside">${lsBuild.displayName}</a>
|
||||
<a href="${jobBaseUrl}${job.shortUrl}lastSuccessfulBuild/" class="jenkins-badge model-link">${lsBuild.displayName}</a>
|
||||
</j:when>
|
||||
<j:otherwise>
|
||||
${%N/A}
|
||||
|
||||
@@ -41,11 +41,7 @@ THE SOFTWARE.
|
||||
<l:icon src="${tab.iconFileName}" />
|
||||
</j:if>
|
||||
${tab.displayName}
|
||||
<j:if test="${tab.badge != null}">
|
||||
<div class="pill jenkins-!-${tab.badge.severity}-color" aria-label="${tab.badge.tooltip}">
|
||||
${tab.badge.text}
|
||||
</div>
|
||||
</j:if>
|
||||
<l:badge badge="${tab.badge}" />
|
||||
</a>
|
||||
</j:forEach>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
{{#if this.categories }}
|
||||
<div class="app-plugin-manager__categories">
|
||||
{{#each this.categories }}
|
||||
<a href="?filter={{ this }}" class="jenkins-table__link jenkins-table__badge">
|
||||
<a href="?filter={{ this }}" class="jenkins-badge">
|
||||
{{ this }}
|
||||
</a>
|
||||
{{/each}}
|
||||
|
||||
@@ -22,9 +22,9 @@
|
||||
|
||||
@each $key, $value in theme.$semantics {
|
||||
.jenkins-\!-#{$key}-color {
|
||||
--color: #{$value};
|
||||
--color: var(--#{$key}-color);
|
||||
|
||||
color: #{$value} !important;
|
||||
color: var(--#{$key}-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,35 @@
|
||||
@use "../abstracts/mixins";
|
||||
|
||||
a.jenkins-badge,
|
||||
button.jenkins-badge {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.jenkins-badge {
|
||||
@include mixins.item;
|
||||
|
||||
--item-background: color-mix(
|
||||
in sRGB,
|
||||
var(--color, var(--accent-color)) 7.5%,
|
||||
var(--background)
|
||||
);
|
||||
--item-background--hover: color-mix(
|
||||
in sRGB,
|
||||
var(--color, var(--accent-color)) 12.5%,
|
||||
var(--background)
|
||||
);
|
||||
--item-background--active: color-mix(
|
||||
in sRGB,
|
||||
var(--color, var(--accent-color)) 17.5%,
|
||||
var(--background)
|
||||
);
|
||||
--item-box-shadow--focus: color-mix(
|
||||
in sRGB,
|
||||
var(--color, var(--accent-color)) 10%,
|
||||
var(--background)
|
||||
);
|
||||
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -7,18 +38,19 @@
|
||||
font-weight: 400;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
padding: 0 0.4rem;
|
||||
background: color-mix(
|
||||
in sRGB,
|
||||
var(--text-color-secondary) 12.5%,
|
||||
transparent
|
||||
);
|
||||
padding: 0 0.375rem;
|
||||
gap: 0.35rem;
|
||||
pointer-events: none;
|
||||
text-box: cap alphabetic;
|
||||
|
||||
&[class*="color"] {
|
||||
background: color-mix(in sRGB, var(--color) 85%, transparent);
|
||||
color: var(--white) !important;
|
||||
box-shadow: inset 0 -1px 2px var(--color, var(--text-color-secondary));
|
||||
text-shadow: 0 1px 1px rgb(0 0 0 / 0.1);
|
||||
backdrop-filter: blur(2.5px);
|
||||
&::before {
|
||||
border: var(--jenkins-border-width) solid
|
||||
oklch(from currentColor l c h / 0.17);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -102,12 +102,19 @@
|
||||
}
|
||||
|
||||
.jenkins-badge {
|
||||
--item-background: var(--color, var(--accent-color));
|
||||
|
||||
position: absolute;
|
||||
top: calc(16%);
|
||||
right: calc(16%);
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
padding: 0;
|
||||
|
||||
&::before {
|
||||
border: var(--jenkins-border--subtle);
|
||||
background-clip: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -105,6 +105,7 @@
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -284,6 +284,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.jenkins-badge {
|
||||
padding: 0.125rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
// Deprecated - use .jenkins-badge instead
|
||||
&__badge {
|
||||
@include mixins.item;
|
||||
|
||||
|
||||
@@ -129,11 +129,6 @@ $border-radius: 19px;
|
||||
&:not(.jenkins-button--tertiary) {
|
||||
pointer-events: none;
|
||||
font-weight: var(--font-bold-weight);
|
||||
|
||||
.pill::before {
|
||||
border: var(--jenkins-border-width) solid
|
||||
color-mix(in sRGB, var(--color, currentColor) 20%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.jenkins-button--tertiary {
|
||||
@@ -156,43 +151,10 @@ $border-radius: 19px;
|
||||
&::after {
|
||||
inset: 1.5px;
|
||||
}
|
||||
|
||||
.pill::before {
|
||||
border: var(--jenkins-border-width) solid
|
||||
color-mix(in sRGB, var(--color, currentColor) 20%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.pill {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
font-size: 12px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
padding-inline: 6px;
|
||||
text-box: cap alphabetic;
|
||||
height: 20px;
|
||||
z-index: 0;
|
||||
.jenkins-badge {
|
||||
margin-right: -0.25rem;
|
||||
transition: border var(--standard-transition);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: color-mix(
|
||||
in sRGB,
|
||||
var(--color, var(--background)) 5%,
|
||||
var(--background)
|
||||
);
|
||||
border: var(--jenkins-border-width) solid
|
||||
color-mix(in sRGB, var(--color, currentColor) 10%, transparent);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,16 @@
|
||||
#plugins {
|
||||
.app-plugin-manager__categories {
|
||||
margin: 0.5rem 0;
|
||||
display: flex;
|
||||
gap: 0.4375rem;
|
||||
flex-wrap: wrap;
|
||||
margin-block: 0.5rem;
|
||||
|
||||
a {
|
||||
margin: 0 1.25rem 0 0 !important;
|
||||
font-size: 0.75rem;
|
||||
.jenkins-badge {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user