Init

janfaracik · Nov 24, 2023 · ea0c487 · ea0c487
1 parent a9c34d7
commit ea0c487
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 25 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,10 @@ THE SOFTWARE.
         <l:search-bar placeholder="${%Search settings}" id="settings-search-bar" />
       </l:app-bar>
 
+      <t:progressBar pos="-1" red="true" />
+
+      <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/progressBar.jelly b/core/src/main/resources/lib/hudson/progressBar.jelly
@@ -22,29 +22,29 @@ 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:choose>
-      <j:when test="${pos lt 0}">
-        <!-- style sheet will fill in the progress bar image -->
-        <tbody><tr class="unknown"><td/></tr></tbody>
-      </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>
-      </j:otherwise>
-    </j:choose>
-  </table>
-</j:jelly>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
+  <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:documentation>
+
+  <j:choose>
+    <j:when test="${pos lt 0}">
+      <!-- style sheet will fill in the progress bar image -->
+      <div class="progressss progressss--indet">
+        <div></div>
+      </div>
+    </j:when>
+    <j:otherwise>
+      <progress class="progresss ${attrs.red ? 'progresss--red' : null}" value="${attrs.pos}" max="100" />
+    </j:otherwise>
+  </j:choose>
+</j:jelly>
diff --git a/war/src/main/scss/components/_spinner.scss b/war/src/main/scss/components/_spinner.scss
@@ -88,3 +88,51 @@
     transform: scale(0.75);
   }
 }
+
+.progresss {
+  --color: var(--accent-color);
+
+  appearance: none;
+  height: 4px;
+
+  &::-webkit-progress-bar {
+    background: color-mix(in srgb, var(--text-color-secondary) 30%, transparent);
+    border-radius: 10px;
+  }
+
+  &::-webkit-progress-value {
+    background: var(--color);
+    border-radius: 10px;
+  }
+
+  &--red {
+    --color: var(--error-color);
+  }
+}
+
+.progressss {
+  --color: var(--accent-color);
+
+  background: color-mix(in srgb, var(--text-color-secondary) 30%, transparent);
+  height: 4px;
+  width: 100px;
+  border-radius: 10px;
+  overflow: hidden;
+
+  & > div {
+    height: 100%;
+    width: 60px;
+    border-radius: 10px;
+    background: var(--color);
+    animation: frankenstein 1.2s linear infinite;
+  }
+}
+
+@keyframes frankenstein {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 100px 0;
+  }
+}