Merge branch 'progress-bar-new' into new-build-history-2

janfaracik · Nov 25, 2023 · 9b6defb · 9b6defb
2 parents 29fcb64 + 7a0e57e
commit 9b6defb
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 41 deletions.
diff --git a/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly b/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly
@@ -38,6 +38,24 @@ THE SOFTWARE.
         <l:search-bar placeholder="${%Search settings}" id="settings-search-bar" />
       </l:app-bar>
 
+      <t:progressBar pos="-1" />
+      <br/>
+      <t:progressBar pos="-1" red="true" />
+      <br/>
+      <t:progressBar pos="50" />
+      <br/>
+      <t:progressBar pos="50" red="true" />
+      <br/>
+      <t:progressBar pos="-1" href="/123" />
+      <br/>
+      <t:progressBar pos="-1" red="true" href="/123" />
+      <br/>
+      <t:progressBar pos="50" href="/123" />
+      <br/>
+      <t:progressBar pos="50" red="true" href="/123" />
+
+      <br/><br/><br/>
+
       <script src="${resURL}/jsbundles/pages/manage-jenkins.js" type="text/javascript" />
 
       <section class="manage-messages">

diff --git a/core/src/main/resources/lib/hudson/buildCaption.jelly b/core/src/main/resources/lib/hudson/buildCaption.jelly
@@ -38,22 +38,12 @@ THE SOFTWARE.
     <div class="jenkins-app-bar__controls">
       <j:if test="${it.building}">
         <div class="build-caption-progress-container">
-          <table class="middle-align">
-            <tr>
-              <td>
-                ${%Progress}:
-              </td>
-              <td class="build-caption-progress-bar">
-                <t:buildProgressBar build="${it}"/>
-              </td>
-              <td>
-                <j:if test="${it.parent.hasAbortPermission()}">
-                  <l:stopButton href="stop" confirm="${%confirm(it.fullDisplayName)}"
-                          alt="[${%cancel}]"/>
-                </j:if>
-              </td>
-            </tr>
-          </table>
+          ${%Progress}:
+          <t:buildProgressBar build="${it}"/>
+          <j:if test="${it.parent.hasAbortPermission()}">
+            <l:stopButton href="stop" confirm="${%confirm(it.fullDisplayName)}"
+                    alt="[${%cancel}]"/>
+          </j:if>
         </div>
       </j:if>
       <st:adjunct includes="lib.hudson.build-caption"/>

diff --git a/core/src/main/resources/lib/hudson/progressBar.jelly b/core/src/main/resources/lib/hudson/progressBar.jelly
@@ -22,29 +22,37 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 
-<!--
-  Progress bar. @pos (0-100) specifies the current position
-
-  Attributes:
-    pos  : 0-100 to indicates the current progress. -1 if the progress is unknown
-    href : if set, the progress bar becomes a hyperlink
-    red  : if set to non-null, the progress bar will be drawn in red, to indicate that the processing is likely stuck.
--->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-  <table class="progress-bar ${attrs.red?'red':null}" id="${attrs.id}" tooltip="${attrs.tooltip}" href="${attrs.href}" style="${attrs.href!=null ? 'cursor:pointer' : null}">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:x="jelly:xml">
+  <st:documentation>
+    <st:attribute name="pos" use="required">
+      0-100 to indicates the current progress. -1 if the progress is unknown
+    </st:attribute>
+    <st:attribute name="href">
+      if set, the progress bar becomes a hyperlink
+    </st:attribute>
+    <st:attribute name="red">
+      if set to non-null, the progress bar will be drawn in red, to indicate that the processing is likely stuck.
+    </st:attribute>
+    <st:attribute name="id">
+      If set, id will be the identifier for the component
+    </st:attribute>
+  </st:documentation>
+
+  <x:element name="${attrs.href != null ? 'a' : 'div'}">
+    <x:attribute name="class">jenkins-progress-bar ${attrs.red ? 'jenkins-progress-bar--error' : null}</x:attribute>
+    <x:attribute name="href">${attrs.href}</x:attribute>
+    <x:attribute name="id">${attrs.id}</x:attribute>
+
     <j:choose>
       <j:when test="${pos lt 0}">
-        <!-- style sheet will fill in the progress bar image -->
-        <tbody><tr class="unknown"><td/></tr></tbody>
+        <div class="jenkins-progress-bar__indeterminate">
+          <div></div>
+        </div>
       </j:when>
       <j:otherwise>
-          <tbody><tr>
-            <td class="progress-bar-done" style="width:${pos}%;"/>
-            <td class="progress-bar-left" style="width:${100-pos}%"/>
-          </tr>
-        </tbody>
+        <progress class="jenkins-progress-bar__precise" value="${attrs.pos}" max="100" />
       </j:otherwise>
     </j:choose>
-  </table>
-</j:jelly>
+  </x:element>
+</j:jelly>
diff --git a/core/src/main/resources/lib/layout/progressiveRendering.jelly b/core/src/main/resources/lib/layout/progressiveRendering.jelly
@@ -36,7 +36,7 @@ THE SOFTWARE.
     </st:documentation>
     <st:adjunct includes="lib.layout.progressiveRendering.progressiveRendering"/>
     <j:set var="id" value="${h.generateId()}"/>
-    <t:progressBar id="${id}" pos="0" tooltip="${tooltip ?: '%progressMessage'}"/>
+    <t:progressBar id="${id}" pos="0" />
     <st:bind var="proxy" value="${handler}" />
     <div class="progressive-rendering-information-holder" data-id="${id}" data-callback="${callback}" />
 </j:jelly>
diff --git a/war/src/main/scss/base/_style.scss b/war/src/main/scss/base/_style.scss
@@ -574,11 +574,9 @@ div.listview-jobs {
   text-decoration: underline;
 }
 
-.pane.build-details a,
-.pane.build-details a:visited {
-  color: var(--pane-link-color--visited);
-  opacity: 0.6;
-  text-decoration: none;
+.pane.build-details a {
+  color: var(--text-color-secondary) !important;
+  text-decoration: none !important;
 }
 
 .pane.build-details a:hover {

diff --git a/war/src/main/scss/components/_spinner.scss b/war/src/main/scss/components/_spinner.scss
@@ -88,3 +88,64 @@
     transform: scale(0.75);
   }
 }
+
+.jenkins-progress-bar {
+  --color: var(--accent-color);
+
+  display: inline-flex;
+  background: color-mix(in srgb, var(--text-color-secondary) 25%, transparent);
+  border-radius: 100px;
+  width: 100px;
+  height: 4px;
+  overflow: hidden;
+  transition: opacity var(--standard-transition);
+
+  &--error {
+    --color: var(--error-color);
+  }
+
+  &__precise {
+    appearance: none;
+    height: 100%;
+
+    &::-webkit-progress-bar {
+      background: transparent;
+      border-radius: 10px;
+    }
+
+    &::-webkit-progress-value {
+      background: var(--color);
+      border-radius: 10px;
+      min-width: 4px;
+    }
+  }
+
+  &__indeterminate {
+    & > div {
+      width: 50px;
+      height: 100%;
+      border-radius: 10px;
+      background: var(--color);
+      animation: animate-progress-indeterminate 1.2s linear infinite;
+
+      @keyframes animate-progress-indeterminate {
+        from {
+          translate: -100% 0;
+        }
+        to {
+          translate: 100px 0;
+        }
+      }
+    }
+  }
+
+  &:link {
+    &:hover {
+      opacity: 0.75;
+    }
+
+    &:active {
+      opacity: 0.5;
+    }
+  }
+}
diff --git a/war/src/main/scss/pages/_index.scss b/war/src/main/scss/pages/_index.scss
@@ -1,6 +1,7 @@
 @use "about";
 @use "dashboard";
 @use "icon-legend";
+@use "job";
 @use "manage-jenkins";
 @use "plugin-manager";
 @use "setupWizardFirstUser";

diff --git a/war/src/main/scss/pages/_job.scss b/war/src/main/scss/pages/_job.scss
@@ -0,0 +1,6 @@
+.build-caption-progress-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}