diff --git a/.editorconfig b/.editorconfig
index af8f0cf310a8..049d90619a70 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,6 +1,6 @@
root = true
-[*.{js, scss, css, hbs}]
+[*.{js, scss, css, hbs, svg}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
diff --git a/core/src/main/resources/hudson/model/AbstractBuild/index.jelly b/core/src/main/resources/hudson/model/AbstractBuild/index.jelly
index 8444984d49cd..aba425c3420b 100644
--- a/core/src/main/resources/hudson/model/AbstractBuild/index.jelly
+++ b/core/src/main/resources/hudson/model/AbstractBuild/index.jelly
@@ -76,7 +76,7 @@ THE SOFTWARE.
<j:choose>
<j:when test="${dep.from!=null}">
<a href="${rootURL}/${dep.from.url}" class="model-link inside">
- <l:icon class="${dep.from.buildStatusIconClassName} icon-sm" alt="${dep.from.iconColor.description}"/>${dep.from.displayName}</a>
+ <l:icon src="symbol-status-${dep.from.iconColor.iconName}" class="icon-sm" alt="${dep.from.iconColor.description}"/>${dep.from.displayName}</a>
</j:when>
<j:otherwise>
?
@@ -86,7 +86,7 @@ THE SOFTWARE.
→ <!-- right arrow -->
<a href="${rootURL}/${dep.to.url}" class="model-link inside">
- <l:icon class="${dep.to.buildStatusIconClassName} icon-sm" alt="${dep.to.iconColor.description}" />${dep.to.displayName}</a>
+ <l:icon src="symbol-status-${dep.to.iconColor.iconName}" class="icon-sm" alt="${dep.to.iconColor.description}" />${dep.to.displayName}</a>
(<a href="${rootURL}/${dep.project.url}changes?from=${dep.fromId}&to=${dep.toId}">${%detail}</a>)
</li>
diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
index 4021ab4109a4..56201d48dab8 100644
--- a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
+++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly
@@ -31,6 +31,14 @@ THE SOFTWARE.
<l:breadcrumb title="${%Build Time Trend}" />
<st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
<l:main-panel>
+ <template id="jenkins-build-status-icons">
+ <l:icon src="symbol-status-blue" id="blue" />
+ <l:icon src="symbol-status-yellow" id="yellow" />
+ <l:icon src="symbol-status-red" id="red" />
+ <l:icon src="symbol-status-nobuilt" id="nobuilt" />
+ <l:icon src="symbol-status-aborted" id="aborted" />
+ <l:icon src="symbol-status-disabled" id="disabled" />
+ </template>
<h1>${%Build Time Trend}</h1>
<div align="center">
<img class="build-time-graph" src="buildTimeGraph/png" width="500" height="400" lazymap="buildTimeGraph/map" alt="[${%Build time graph}]" />
diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
index 105cdbc06ed2..eadcb5970622 100644
--- a/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
+++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js
@@ -67,76 +67,11 @@ window.buildTimeTrend_displayBuilds = function (data) {
/**
* Generate SVG Icon
*/
-function generateSVGIcon(iconName, iconSizeClass) {
- const imagesURL = document.head.getAttribute("data-imagesurl");
-
- const isInProgress = iconName.endsWith("anime");
- let buildStatus = "never-built";
- switch (iconName) {
- case "red":
- case "red-anime":
- buildStatus = "last-failed";
- break;
- case "yellow":
- case "yellow-anime":
- buildStatus = "last-unstable";
- break;
- case "blue":
- case "blue-anime":
- buildStatus = "last-successful";
- break;
- case "grey":
- case "grey-anime":
- case "disabled":
- case "disabled-anime":
- buildStatus = "last-disabled";
- break;
- case "aborted":
- case "aborted-anime":
- buildStatus = "last-aborted";
- break;
- case "nobuilt":
- case "nobuilt-anime":
- buildStatus = "never-built";
- break;
- }
+function generateSVGIcon(iconName) {
+ const icons = document.querySelector("#jenkins-build-status-icons");
+ iconName = iconName.replace("-anime", "");
- const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
- svg1.setAttribute("class", "svg-icon");
- svg1.setAttribute("viewBox", "0 0 24 24");
- const use1 = document.createElementNS("http://www.w3.org/2000/svg", "use");
- use1.setAttribute(
- "href",
- imagesURL +
- "/build-status/build-status-sprite.svg#build-status-" +
- (isInProgress ? "in-progress" : "static"),
- );
- svg1.appendChild(use1);
-
- const svg2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
- svg2.setAttribute(
- "class",
- "svg-icon icon-" + iconName + " " + (iconSizeClass || "icon-sm"),
- );
- svg2.setAttribute("viewBox", "0 0 24 24");
- const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
- use2.setAttribute(
- "href",
- imagesURL + "/build-status/build-status-sprite.svg#" + buildStatus,
- );
- svg2.appendChild(use2);
-
- const span = document.createElement("span");
- span.classList.add("build-status-icon__wrapper", "icon-" + iconName);
-
- let span2 = document.createElement("span");
- span2.classList.add("build-status-icon__outer");
- span2.appendChild(svg1);
-
- span.appendChild(span2);
- span.appendChild(svg2);
-
- return span;
+ return icons.content.querySelector(`#${iconName}`).cloneNode(true);
}
/**
@@ -155,7 +90,7 @@ window.displayBuilds = function (data) {
td1.classList.add("jenkins-table__cell--tight", "jenkins-table__icon");
var div1 = document.createElement("div");
div1.classList.add("jenkins-table__cell__button-wrapper");
- var svg = generateSVGIcon(e.iconName, p.dataset.iconSizeClass);
+ var svg = generateSVGIcon(e.iconName);
div1.appendChild(svg);
td1.appendChild(div1);
tr.appendChild(td1);
diff --git a/core/src/main/resources/hudson/model/Job/index.jelly b/core/src/main/resources/hudson/model/Job/index.jelly
index 23a454b4d52e..0fb537e267d7 100644
--- a/core/src/main/resources/hudson/model/Job/index.jelly
+++ b/core/src/main/resources/hudson/model/Job/index.jelly
@@ -33,7 +33,7 @@ THE SOFTWARE.
<j:set var="lastBuild" value="${it.lastBuild}" />
<j:if test="${lastBuild != null}">
<a href="${rootURL + '/' + lastBuild.url}" class="jenkins-!-display-contents" tabindex="-1">
- <l:icon class="${lastBuild.buildStatusIconClassName}" tooltip="${lastBuild.iconColor.description}"/>
+ <l:icon src="symbol-status-${lastBuild.iconColor.iconName}" tooltip="${lastBuild.iconColor.description}"/>
</a>
</j:if>
<h1 class="job-index-headline page-headline">
diff --git a/core/src/main/resources/hudson/model/Run/statusIcon.jelly b/core/src/main/resources/hudson/model/Run/statusIcon.jelly
index 6ef664c98efe..650605c7e025 100644
--- a/core/src/main/resources/hudson/model/Run/statusIcon.jelly
+++ b/core/src/main/resources/hudson/model/Run/statusIcon.jelly
@@ -31,6 +31,6 @@ THE SOFTWARE.
<st:compress xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
<st:setHeader name="X-Building" value="${it.building}" />
<l:ajax>
- <l:icon alt="${it.iconColor.description}" class="${it.buildStatusIconClassName} icon-xlg" tooltip="${it.iconColor.description}"/>
+ <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}" class="icon-xlg" tooltip="${it.iconColor.description}"/>
</l:ajax>
</st:compress>
diff --git a/core/src/main/resources/hudson/views/StatusColumn/column.jelly b/core/src/main/resources/hudson/views/StatusColumn/column.jelly
index 5297d99809a3..5ac989e40521 100644
--- a/core/src/main/resources/hudson/views/StatusColumn/column.jelly
+++ b/core/src/main/resources/hudson/views/StatusColumn/column.jelly
@@ -23,6 +23,18 @@ THE SOFTWARE.
-->
<?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:t="/lib/hudson">
- <t:ballColorTd it="${job.iconColor}" />
-</j:jelly>
\ No newline at end of file
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+ <td class="jenkins-table__cell--tight jenkins-table__icon" data="${job.iconColor.ordinal()}">
+ <div class="jenkins-table__cell__button-wrapper">
+ <j:choose>
+ <j:when test="${job.iconColor.iconName != null}">
+ <l:icon src="symbol-status-${job.iconColor.iconName}" tooltip="${job.iconColor.description}" />
+ </j:when>
+ <j:otherwise>
+ <!-- This is for special conditions, such as folders -->
+ <l:icon src="${job.iconColor.iconClassName}" />
+ </j:otherwise>
+ </j:choose>
+ </div>
+ </td>
+</j:jelly>
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
index 366071ebf7fa..d203b8a98344 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
+++ b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
@@ -39,7 +39,7 @@ THE SOFTWARE.
<div class="pane build-name">
<div class="build-icon">
<a class="build-status-link" href="${h.getConsoleUrl(build)}" tooltip="${build.iconColor.description} > ${%Console Output}">
- <l:icon class="${build.buildStatusIconClassName} icon-sm" />
+ <l:icon src="symbol-status-${build.iconColor.iconName}" />
</a>
</div>
<a class="model-link inside build-link display-name" update-parent-class=".build-row" href="${link}">${build.displayName}</a>
diff --git a/core/src/main/resources/jenkins/model/Jenkins/_legend.jelly b/core/src/main/resources/jenkins/model/Jenkins/_legend.jelly
index 9ae7a079e739..90d8e8b89a13 100644
--- a/core/src/main/resources/jenkins/model/Jenkins/_legend.jelly
+++ b/core/src/main/resources/jenkins/model/Jenkins/_legend.jelly
@@ -29,87 +29,87 @@ THE SOFTWARE.
<dl class="app-icon-legend">
<dt>
- <l:icon class="icon-blue icon-lg"/>
+ <l:icon src="symbol-status-blue" />
</dt>
<dd>
${%blue}
</dd>
<dt>
- <l:icon class="icon-blue-anime icon-lg"/>
+ <l:icon src="symbol-status-blue-anime" />
</dt>
<dd>
${%blue_anime}
</dd>
<dt>
- <l:icon class="icon-yellow icon-lg"/>
+ <l:icon src="symbol-status-yellow" />
</dt>
<dd>
${%yellow}
</dd>
<dt>
- <l:icon class="icon-yellow-anime icon-lg"/>
+ <l:icon src="symbol-status-yellow-anime" />
</dt>
<dd>
${%yellow_anime}
</dd>
<dt>
- <l:icon class="icon-red icon-lg"/>
+ <l:icon src="symbol-status-red" />
</dt>
<dd>
${%red}
</dd>
<dt>
- <l:icon class="icon-red-anime icon-lg"/>
+ <l:icon src="symbol-status-red-anime" />
</dt>
<dd>
${%red_anime}
</dd>
<dt>
- <l:icon class="icon-nobuilt icon-lg"/>
+ <l:icon src="symbol-status-nobuilt" />
</dt>
<dd>
${%lightgrey}
</dd>
<dt>
- <l:icon class="icon-nobuilt-anime icon-lg"/>
+ <l:icon src="symbol-status-nobuilt-anime" />
</dt>
<dd>
${%lightgrey_anime}
</dd>
<dt>
- <l:icon class="icon-disabled icon-lg"/>
+ <l:icon src="symbol-status-aborted" />
</dt>
<dd>
- ${%grey}
+ ${%darkgrey}
</dd>
<dt>
- <l:icon class="icon-disabled-anime icon-lg"/>
+ <l:icon src="symbol-status-aborted-anime" />
</dt>
<dd>
- ${%grey_anime}
+ ${%darkgrey_anime}
</dd>
<dt>
- <l:icon class="icon-aborted icon-lg"/>
+ <l:icon src="symbol-status-disabled" />
</dt>
<dd>
- ${%darkgrey}
+ ${%grey}
</dd>
<dt>
- <l:icon class="icon-aborted-anime icon-lg"/>
+ <l:icon src="symbol-status-disabled-anime" />
</dt>
<dd>
- ${%darkgrey_anime}
+ ${%grey_anime}
</dd>
</dl>
diff --git a/core/src/main/resources/lib/hudson/buildCaption.jelly b/core/src/main/resources/lib/hudson/buildCaption.jelly
index b8fab1554e31..2f29e2808f4b 100644
--- a/core/src/main/resources/lib/hudson/buildCaption.jelly
+++ b/core/src/main/resources/lib/hudson/buildCaption.jelly
@@ -29,7 +29,7 @@ THE SOFTWARE.
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
<div class="jenkins-app-bar">
<div class="jenkins-app-bar__content jenkins-build-caption">
- <l:icon alt="${it.iconColor.description}" class="${it.buildStatusIconClassName} icon-xlg"
+ <l:icon alt="${it.iconColor.description}" src="symbol-status-${it.iconColor.iconName}"
tooltip="${it.iconColor.description}"/>
<h1>
<d:invokeBody trim="true"/>
diff --git a/core/src/main/resources/lib/hudson/buildLink.jelly b/core/src/main/resources/lib/hudson/buildLink.jelly
index 18ccfc1ec675..ad23bfbbd763 100644
--- a/core/src/main/resources/lib/hudson/buildLink.jelly
+++ b/core/src/main/resources/lib/hudson/buildLink.jelly
@@ -52,7 +52,7 @@ THE SOFTWARE.
</j:when>
<j:otherwise>
<a href="${attrs.href ?: rootURL+'/'+r.url}" class="model-link">
- <l:icon alt="${r.iconColor.description}" class="${r.buildStatusIconClassName} icon-sm" style="margin-left: 0; position: relative; top: -0.1rem;"/><span class="jenkins-icon-adjacent">${jobName_}#<!-- -->${number}</span></a>
+ <l:icon alt="${r.iconColor.description}" src="symbol-status-${r.iconColor.iconName}" class="icon-sm" style="margin-left: 0; position: relative; top: -0.1rem;"/><span class="jenkins-icon-adjacent">${jobName_}#<!-- -->${number}</span></a>
</j:otherwise>
</j:choose>
</j:otherwise>
diff --git a/core/src/main/resources/lib/hudson/buildListTable.jelly b/core/src/main/resources/lib/hudson/buildListTable.jelly
index cd617715838e..608af80d421b 100644
--- a/core/src/main/resources/lib/hudson/buildListTable.jelly
+++ b/core/src/main/resources/lib/hudson/buildListTable.jelly
@@ -30,6 +30,15 @@ THE SOFTWARE.
A collection of builds to be displayed.
</st:attribute>
</st:documentation>
+ <template id="jenkins-build-status-icons">
+ <l:icon src="symbol-status-blue" id="blue" />
+ <l:icon src="symbol-status-yellow" id="yellow" />
+ <l:icon src="symbol-status-red" id="red" />
+ <l:icon src="symbol-status-nobuilt" id="nobuilt" />
+ <l:icon src="symbol-status-aborted" id="aborted" />
+ <l:icon src="symbol-status-disabled" id="disabled" />
+ <l:icon src="symbol-terminal" id="console" />
+ </template>
<t:setIconSize/>
<st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
diff --git a/core/src/main/resources/lib/hudson/jobLink.jelly b/core/src/main/resources/lib/hudson/jobLink.jelly
index 0aaa0dcc7d5a..af40d22b37ae 100644
--- a/core/src/main/resources/lib/hudson/jobLink.jelly
+++ b/core/src/main/resources/lib/hudson/jobLink.jelly
@@ -31,7 +31,7 @@ THE SOFTWARE.
</st:attribute>
</st:documentation>
- <l:icon alt="${job.iconColor.description}" class="${job.buildStatusIconClassName} icon-sm"/>
+ <l:icon alt="${job.iconColor.description}" src="symbol-status-${job.iconColor.iconName}" class="icon-sm"/>
<a href="${h.getRelativeLinkTo(job)}" class="model-link jenkins-icon-adjacent">
<l:breakable value="${job.fullDisplayName}"/>
</a>
diff --git a/core/src/main/resources/lib/hudson/projectView.jelly b/core/src/main/resources/lib/hudson/projectView.jelly
index e2bae523dfcf..27d5cf967c6d 100644
--- a/core/src/main/resources/lib/hudson/projectView.jelly
+++ b/core/src/main/resources/lib/hudson/projectView.jelly
@@ -93,7 +93,15 @@ THE SOFTWARE.
<div class="jenkins-jobs-list__item">
<a class="jenkins-jobs-list__item__details" href="${jobBaseUrl}${job.shortUrl}">
<div class="jenkins-jobs-list__item__icons">
- <t:ballColorTd it="${job.iconColor}" />
+ <j:choose>
+ <j:when test="${job.iconColor.iconName != null}">
+ <l:icon src="symbol-status-${job.iconColor.iconName}" tooltip="${job.iconColor.description}" />
+ </j:when>
+ <j:otherwise>
+ <!-- This is for special conditions, such as folders -->
+ <l:icon src="${job.iconColor.iconClassName}" />
+ </j:otherwise>
+ </j:choose>
</div>
<div class="jenkins-jobs-list__item__details__text">
<p class="jenkins-jobs-list__item__label">${job.displayName}</p>
diff --git a/war/src/main/resources/images/symbols/status-aborted-anime.svg b/war/src/main/resources/images/symbols/status-aborted-anime.svg
new file mode 100644
index 000000000000..308e6d7578c7
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-aborted-anime.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+ <ellipse opacity="0.4" 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 d="M256 46C140.02 46 46 140.02 46 256" 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="M192 320l128-128"/>
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-aborted.svg b/war/src/main/resources/images/symbols/status-aborted.svg
new file mode 100644
index 000000000000..fee388a4f27b
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-aborted.svg
@@ -0,0 +1,4 @@
+<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>
diff --git a/war/src/main/resources/images/symbols/status-blue-anime.svg b/war/src/main/resources/images/symbols/status-blue-anime.svg
new file mode 100644
index 000000000000..b11da163e9f7
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-blue-anime.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+ <ellipse opacity="0.4" 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="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--success-color)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+ <path d="M336 189L224 323L176 269.4" fill="transparent" stroke="var(--success-color)" stroke-width="36" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-blue.svg b/war/src/main/resources/images/symbols/status-blue.svg
new file mode 100644
index 000000000000..2427dd5286dc
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-blue.svg
@@ -0,0 +1,4 @@
+<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>
diff --git a/war/src/main/resources/images/symbols/status-disabled-anime.svg b/war/src/main/resources/images/symbols/status-disabled-anime.svg
new file mode 100644
index 000000000000..138edc7a9ec3
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-disabled-anime.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+ <ellipse opacity="0.4" 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 d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--text-color-secondary)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+ <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>
diff --git a/war/src/main/resources/images/symbols/status-disabled.svg b/war/src/main/resources/images/symbols/status-disabled.svg
new file mode 100644
index 000000000000..32aa7eaef687
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-disabled.svg
@@ -0,0 +1,5 @@
+<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>
diff --git a/war/src/main/resources/images/symbols/status-nobuilt-anime.svg b/war/src/main/resources/images/symbols/status-nobuilt-anime.svg
new file mode 100644
index 000000000000..9a534d34d237
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-nobuilt-anime.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+ <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--blue)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+ <path d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--blue)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+ <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>
diff --git a/war/src/main/resources/images/symbols/status-nobuilt.svg b/war/src/main/resources/images/symbols/status-nobuilt.svg
new file mode 100644
index 000000000000..a2ba0f13edbc
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-nobuilt.svg
@@ -0,0 +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(--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>
diff --git a/war/src/main/resources/images/symbols/status-red-anime.svg b/war/src/main/resources/images/symbols/status-red-anime.svg
new file mode 100644
index 000000000000..76b3bca95af1
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-red-anime.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+ <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--red)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+ <path d="M256 46C140.02 46 46 140.02 46 256" 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="M320 320L192 192M192 320l128-128"/>
+</svg>
diff --git a/war/src/main/resources/images/symbols/status-red.svg b/war/src/main/resources/images/symbols/status-red.svg
new file mode 100644
index 000000000000..547dc4a13f2d
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-red.svg
@@ -0,0 +1,4 @@
+<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>
diff --git a/war/src/main/resources/images/symbols/status-yellow-anime.svg b/war/src/main/resources/images/symbols/status-yellow-anime.svg
new file mode 100644
index 000000000000..c241c3c88024
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-yellow-anime.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+ <ellipse opacity="0.4" cx="256" cy="256" rx="210" ry="210" fill="none" stroke="var(--orange)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="36" />
+ <path d="M256 46C140.02 46 46 140.02 46 256" fill="transparent" stroke="var(--orange)" stroke-width="36" stroke-miterlimit="10" stroke-linecap="round" data-symbol-animation="spin" />
+ <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>
diff --git a/war/src/main/resources/images/symbols/status-yellow.svg b/war/src/main/resources/images/symbols/status-yellow.svg
new file mode 100644
index 000000000000..57aab84b73de
--- /dev/null
+++ b/war/src/main/resources/images/symbols/status-yellow.svg
@@ -0,0 +1,5 @@
+<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>
diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss
index ecda3df84a4e..2abd6d4ef10a 100644
--- a/war/src/main/scss/base/_style.scss
+++ b/war/src/main/scss/base/_style.scss
@@ -866,13 +866,22 @@ table.progress-bar.red td.progress-bar-done {
/* Unknown */
+[data-symbol-animation] {
+ animation: spin 1s linear infinite;
+ transform-origin: center;
+
+ @media (prefers-reduced-motion) {
+ animation-duration: 3s;
+ }
+}
+
@keyframes spin {
from {
- transform: rotate(0deg) translateZ(0);
+ transform: rotate(0deg);
}
to {
- transform: rotate(360deg) translateZ(0);
+ transform: rotate(360deg);
}
}
diff --git a/war/src/main/scss/components/_app-bar.scss b/war/src/main/scss/components/_app-bar.scss
index 1e5af8727f88..0cff962e7967 100644
--- a/war/src/main/scss/components/_app-bar.scss
+++ b/war/src/main/scss/components/_app-bar.scss
@@ -81,8 +81,7 @@
overflow: hidden;
text-overflow: ellipsis;
- .build-status-icon__wrapper,
- .build-status-icon__wrapper svg {
+ svg {
width: 2rem !important;
height: 2rem !important;
}
diff --git a/war/src/main/scss/components/_side-panel-widgets.scss b/war/src/main/scss/components/_side-panel-widgets.scss
index 9d6933953efb..037674f61b88 100644
--- a/war/src/main/scss/components/_side-panel-widgets.scss
+++ b/war/src/main/scss/components/_side-panel-widgets.scss
@@ -156,6 +156,7 @@
.build-row-cell .pane.build-name .build-icon {
position: absolute;
+ margin-top: 2px;
z-index: 1;
}
diff --git a/war/src/main/scss/pages/_dashboard.scss b/war/src/main/scss/pages/_dashboard.scss
index 732b7db61001..cb029a9861a9 100644
--- a/war/src/main/scss/pages/_dashboard.scss
+++ b/war/src/main/scss/pages/_dashboard.scss
@@ -169,3 +169,14 @@ $min-button-size: 36px;
}
}
}
+
+.build-status-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ svg {
+ width: 1rem;
+ height: 1rem;
+ }
+}