OpenSource/jenkins
1
0 Fork 0
mirror of https://github.com/jenkinsci/jenkins.git synced 2026-10-26 19:15:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refresh the status icons (#23904)

Browse Source
This commit is contained in:
Markus Winter authored and GitHub committed 2026-07-12 09:46:52 +01:00
1 parent 45a78b5208
commit 751195849a
17 files changed
+98 -100
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

core/src/main/resources/jenkins/model/Jenkins/_legend.jelly
+2 -37
View File
@@ -35,13 +35,6 @@ THE SOFTWARE.
${%blue}
</dd>
<dt>
<l:icon src="symbol-status-blue-anime" />
</dt>
<dd>
${%blue_anime}
</dd>
<dt>
<l:icon src="symbol-status-yellow" />
</dt>
@@ -49,13 +42,6 @@ THE SOFTWARE.
${%yellow}
</dd>
<dt>
<l:icon src="symbol-status-yellow-anime" />
</dt>
<dd>
${%yellow_anime}
</dd>
<dt>
<l:icon src="symbol-status-red" />
</dt>
@@ -64,10 +50,10 @@ THE SOFTWARE.
</dd>
<dt>
<l:icon src="symbol-status-red-anime" />
<l:icon src="symbol-status-disabled-anime" />
</dt>
<dd>
${%red_anime}
${%running}
</dd>
<dt>
@@ -77,13 +63,6 @@ THE SOFTWARE.
${%lightgrey}
</dd>
<dt>
<l:icon src="symbol-status-nobuilt-anime" />
</dt>
<dd>
${%lightgrey_anime}
</dd>
<dt>
<l:icon src="symbol-status-aborted" />
</dt>
@@ -91,26 +70,12 @@ THE SOFTWARE.
${%darkgrey}
</dd>
<dt>
<l:icon src="symbol-status-aborted-anime" />
</dt>
<dd>
${%darkgrey_anime}
</dd>
<dt>
<l:icon src="symbol-status-disabled" />
</dt>
<dd>
${%grey}
</dd>
<dt>
<l:icon src="symbol-status-disabled-anime" />
</dt>
<dd>
${%grey_anime}
</dd>
</dl>
<h2 class="jenkins-dialog__subtitle">${%Project Health}</h2>
core/src/main/resources/jenkins/model/Jenkins/_legend.properties
+1
View File
@@ -38,3 +38,4 @@ health-61to80=Project health is over 60% and up to 80%
health-41to60=Project health is over 40% and up to 60%
health-21to40=Project health is over 20% and up to 40%
health-00to20=Project health is 20% or less
running=A build is in progress.
src/main/scss/abstracts/_theme.scss
+8
View File
@@ -64,6 +64,14 @@ $semantics: (
--primary-active: var(--accent-color);
// Status icon colors
--status-background-opacity: 0.125;
--status-border-opacity: 0.25;
@media (prefers-contrast: more) {
--status-background-opacity: 0;
--status-border-opacity: 1;
}
--weather-icon-color: var(--accent-color);
--unstable-build-icon-color: var(--orange);
src/main/scss/components/_cards.scss
-4
View File
@@ -130,10 +130,6 @@ $card-padding: 1rem;
width: 3rem;
height: 3rem;
margin-bottom: 0.5rem;
* {
stroke-width: 40px;
}
}
div {
src/main/scss/components/_icons.scss
+14
View File
@@ -116,6 +116,20 @@
}
}
.app-status-icon-running {
animation: pulse-scale 2.5s both ease-in-out infinite;
opacity: 0.25;
transition: var(--elastic-transition);
transform-origin: center;
@keyframes pulse-scale {
50% {
scale: 2.25;
opacity: 1;
}
}
}
@keyframes pulse-animation {
0%,
100% {
war/src/main/resources/images/symbols/status-aborted-anime.svg
+6 -5
View File
@@ -1,5 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-256 -256 512 512">
<ellipse opacity="0.4" cx="0" cy="0" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path d="M0 -210C-115.98 -210 -210 -115.98 -210 0" fill="transparent" stroke="var(--text-color-secondary)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin"/>
<path fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M-64 64l128-128"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="aborted">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--accent-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--accent-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<circle cx="256" cy="256" r="40" fill="var(--accent-color)" class="app-status-icon-running"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 603 B

After

Width:  |  Height:  |  Size: 576 B

war/src/main/resources/images/symbols/status-aborted.svg
+5 -3
View File
@@ -1,4 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M192 320l128-128" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="aborted">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--skipped-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--skipped-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<path fill="none" stroke="var(--skipped-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M192 320l128-128"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 383 B

After

Width:  |  Height:  |  Size: 621 B

war/src/main/resources/images/symbols/status-blue-anime.svg
+6 -5
View File
@@ -1,5 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-256 -256 512 512">
<ellipse opacity="0.4" cx="0" cy="0" rx="210" ry="210" fill="none" stroke="var(--success-color)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path d="M0 -210C-115.98 -210 -210 -115.98 -210 0" fill="transparent" stroke="var(--success-color)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin"/>
<path d="M80 -67L-32 67L-80 13.4" fill="transparent" stroke="var(--success-color)" stroke-width="36" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="aborted">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--accent-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--accent-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<circle cx="256" cy="256" r="40" fill="var(--accent-color)" class="app-status-icon-running"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 598 B

After

Width:  |  Height:  |  Size: 584 B

war/src/main/resources/images/symbols/status-blue.svg
+6 -4
View File
@@ -1,4 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--success-color)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path d="M336 189L224 323L176 269.4" fill="transparent" stroke="var(--success-color)" stroke-width="36" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="success">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--success-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--success-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<path d="M336 189L224 323L176 269.4" fill="transparent" stroke="var(--success-color)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 386 B

After

Width:  |  Height:  |  Size: 637 B

war/src/main/resources/images/symbols/status-disabled-anime.svg
+5 -5
View File
@@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-256 -256 512 512">
<ellipse opacity="0.4" cx="0" cy="0" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path d="M0 -210C-115.98 -210 -210 -115.98 -210 0" fill="transparent" stroke="var(--text-color-secondary)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin"/>
<ellipse cx="0" cy="0" rx="100" ry="100" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M-64 64l128-128" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="aborted">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--accent-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--accent-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<circle cx="256" cy="256" r="40" fill="var(--accent-color)" class="app-status-icon-running"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 764 B

After

Width:  |  Height:  |  Size: 576 B

war/src/main/resources/images/symbols/status-disabled.svg
+6 -4
View File
@@ -1,5 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<ellipse cx="256" cy="256" rx="100" ry="100" fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path fill="none" stroke="var(--text-color-secondary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M192 320l128-128" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="disabled">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--skipped-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--skipped-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<ellipse cx="256" cy="256" rx="100" ry="100" fill="none" stroke="var(--skipped-color)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/>
<path fill="none" stroke="var(--skipped-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M192 320l128-128"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 548 B

After

Width:  |  Height:  |  Size: 777 B

war/src/main/resources/images/symbols/status-nobuilt-anime.svg
+6 -7
View File
@@ -1,7 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-256 -256 512 512">
<ellipse opacity="0.4" cx="0" cy="0" rx="210" ry="210" fill="none" stroke="var(--blue)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path d="M0 -210C-115.98 -210 -210 -115.98 -210 0" fill="transparent" stroke="var(--blue)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin"/>
<circle cx="0" cy="0" r="30" fill="var(--blue)" />
<circle cx="96" cy="0" r="30" fill="var(--blue)" />
<circle cx="-96" cy="0" r="30" fill="var(--blue)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="aborted">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--accent-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--accent-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<circle cx="256" cy="256" r="40" fill="var(--accent-color)" class="app-status-icon-running"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 583 B

After

Width:  |  Height:  |  Size: 576 B

war/src/main/resources/images/symbols/status-nobuilt.svg
+8 -6
View File
@@ -1,6 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--blue)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<circle cx="256" cy="256" r="30" fill="var(--blue)" />
<circle cx="352" cy="256" r="30" fill="var(--blue)" />
<circle cx="160" cy="256" r="30" fill="var(--blue)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="nobuilt">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--skipped-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--skipped-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<circle cx="256" cy="256" r="30" fill="var(--skipped-color)"/>
<circle cx="352" cy="256" r="30" fill="var(--skipped-color)"/>
<circle cx="160" cy="256" r="30" fill="var(--skipped-color)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 388 B

After

Width:  |  Height:  |  Size: 677 B

war/src/main/resources/images/symbols/status-red-anime.svg
+6 -5
View File
@@ -1,5 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-256 -256 512 512">
<ellipse opacity="0.4" cx="0" cy="0" rx="210" ry="210" fill="none" stroke="var(--red)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path d="M0 -210C-115.98 -210 -210 -115.98 -210 0" fill="transparent" stroke="var(--red)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin"/>
<path fill="none" stroke="var(--red)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M64 64L-64 -64M-64 64 64 -64"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="aborted">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--accent-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--accent-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<circle cx="256" cy="256" r="40" fill="var(--accent-color)" class="app-status-icon-running"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 565 B

After

Width:  |  Height:  |  Size: 584 B

war/src/main/resources/images/symbols/status-red.svg
+6 -4
View File
@@ -1,4 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--red)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path fill="none" stroke="var(--red)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M320 320L192 192M192 320l128-128"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="failure">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--error-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--error-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<path fill="none" stroke="var(--error-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 320L192 192M192 320l128-128"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 364 B

After

Width:  |  Height:  |  Size: 630 B

war/src/main/resources/images/symbols/status-yellow-anime.svg
+6 -6
View File
@@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="-256 -256 512 512">
<ellipse opacity="0.4" cx="0" cy="0" rx="210" ry="210" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path d="M0 -210C-115.98 -210 -210 -115.98 -210 0" fill="transparent" stroke="var(--orange)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin"/>
<path d="M-5.74 -89.95L0 31.95l5.73-121.95a5.74 5.74 0 00-5.79-6h0a5.74 5.74 0 00-5.68 6z" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" />
<ellipse cx="0" cy="94" rx="26" ry="26" fill="var(--orange)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="aborted">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--accent-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--accent-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<circle cx="256" cy="256" r="40" fill="var(--accent-color)" class="app-status-icon-running"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 711 B

After

Width:  |  Height:  |  Size: 584 B

war/src/main/resources/images/symbols/status-yellow.svg
+7 -5
View File
@@ -1,5 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<ellipse cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
<path d="M250.26 166.05L256 288l5.73-121.95a5.74 5.74 0 00-5.79-6h0a5.74 5.74 0 00-5.68 6z" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" />
<ellipse cx="256" cy="350" rx="26" ry="26" fill="var(--orange)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1" role="img" aria-label="unstable">
<circle cx="256" cy="256" r="230" fill="var(--card-background)"/>
<circle cx="256" cy="256" r="250" fill="var(--warning-color)" opacity="var(--status-background-opacity)" style="transition: var(--standard-transition);"/>
<circle cx="256" cy="256" r="240" fill="none" stroke="var(--warning-color)" stroke-width="20" stroke-opacity="var(--status-border-opacity)"/>
<path d="M250.26 166.05L256 288l5.73-121.95a5.74 5.74 0 00-5.79-6h0a5.74 5.74 0 00-5.68 6z" fill="none" stroke="var(--warning-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
<ellipse cx="256" cy="350" rx="26" ry="26" fill="var(--warning-color)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 507 B

After

Width:  |  Height:  |  Size: 761 B