From 5f76f3840c2fe61d3937f947df0bdca293832fb7 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Mon, 20 Nov 2023 16:00:14 +0000 Subject: [PATCH 1/5] Init --- .editorconfig | 2 +- .../hudson/model/Job/buildTimeTrend.jelly | 8 ++ .../model/Job/buildTimeTrend_resources.js | 75 ++----------------- .../hudson/views/StatusColumn/column.jelly | 18 ++++- .../hudson/widgets/HistoryWidget/entry.jelly | 2 +- .../jenkins/model/Jenkins/_legend.jelly | 32 ++++---- .../resources/lib/hudson/buildListTable.jelly | 9 +++ .../resources/lib/hudson/projectView.jelly | 10 ++- .../images/symbols/status-aborted-anime.svg | 5 ++ .../images/symbols/status-aborted.svg | 4 + .../images/symbols/status-blue-anime.svg | 5 ++ .../resources/images/symbols/status-blue.svg | 4 + .../images/symbols/status-disabled-anime.svg | 6 ++ .../images/symbols/status-disabled.svg | 5 ++ .../images/symbols/status-nobuilt-anime.svg | 7 ++ .../images/symbols/status-nobuilt.svg | 6 ++ .../images/symbols/status-red-anime.svg | 5 ++ .../resources/images/symbols/status-red.svg | 4 + .../images/symbols/status-yellow-anime.svg | 6 ++ .../images/symbols/status-yellow.svg | 5 ++ war/src/main/scss/base/_style.scss | 13 +++- war/src/main/scss/pages/_dashboard.scss | 11 +++ 22 files changed, 148 insertions(+), 94 deletions(-) create mode 100644 war/src/main/resources/images/symbols/status-aborted-anime.svg create mode 100644 war/src/main/resources/images/symbols/status-aborted.svg create mode 100644 war/src/main/resources/images/symbols/status-blue-anime.svg create mode 100644 war/src/main/resources/images/symbols/status-blue.svg create mode 100644 war/src/main/resources/images/symbols/status-disabled-anime.svg create mode 100644 war/src/main/resources/images/symbols/status-disabled.svg create mode 100644 war/src/main/resources/images/symbols/status-nobuilt-anime.svg create mode 100644 war/src/main/resources/images/symbols/status-nobuilt.svg create mode 100644 war/src/main/resources/images/symbols/status-red-anime.svg create mode 100644 war/src/main/resources/images/symbols/status-red.svg create mode 100644 war/src/main/resources/images/symbols/status-yellow-anime.svg create mode 100644 war/src/main/resources/images/symbols/status-yellow.svg 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/Job/buildTimeTrend.jelly b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly index 4021ab4109a4..274231845baf 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. +

${%Build Time Trend}

[${%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..3b5e70c2caf8 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("#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/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. --> - - - \ No newline at end of file + + +
+ + + + + + + + + +
+ + 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.
- +
${build.displayName} 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.
- +
${%blue}
- +
${%blue_anime}
- +
${%yellow}
- +
${%yellow_anime}
- +
${%red}
- +
${%red_anime}
- +
${%lightgrey}
- +
${%lightgrey_anime}
- +
- ${%grey} + ${%darkgrey}
- +
- ${%grey_anime} + ${%darkgrey_anime}
- +
- ${%darkgrey} + ${%grey}
- +
- ${%darkgrey_anime} + ${%grey_anime}
diff --git a/core/src/main/resources/lib/hudson/buildListTable.jelly b/core/src/main/resources/lib/hudson/buildListTable.jelly index cd617715838e..43791a19e27a 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. + 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.
- + + + + + + + + +

${job.displayName}

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 @@ + + + + + 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 @@ + + + + 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 @@ + + + + + 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 @@ + + + + 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 @@ + + + + + + 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 @@ + + + + + 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 @@ + + + + + + + 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 @@ + + + + + + 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 @@ + + + + + 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 @@ + + + + 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 @@ + + + + + + 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 @@ + + + + + diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss index e1957b7f01c1..40bffdf916ab 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/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; + } +} From aea4d9786eb4f059c0c37a204361c4ff1d8c6a67 Mon Sep 17 00:00:00 2001 From: Jan Faracik <43062514+janfaracik@users.noreply.github.com> Date: Fri, 24 Nov 2023 09:58:29 +0000 Subject: [PATCH 2/5] Rename ID --- core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly | 2 +- .../main/resources/hudson/model/Job/buildTimeTrend_resources.js | 2 +- core/src/main/resources/lib/hudson/buildListTable.jelly | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly index 274231845baf..56201d48dab8 100644 --- a/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly +++ b/core/src/main/resources/hudson/model/Job/buildTimeTrend.jelly @@ -31,7 +31,7 @@ THE SOFTWARE. -