Update the appearance of the stop button (#8780)

* Init * Fixes * Update executors.jelly * Update _buttons.scss * Fix i18n * Tidy up * Fix test * Temporary fast build CI build is too unreliable and I just want an incrementals... * Revert "Temporary fast build" This reverts commit 28df839. --------- Co-authored-by: Tim Jacomb <[email protected]> Co-authored-by: Alexander Brandes <[email protected]>
jenkinsci · Dec 20, 2023 · 01c42a3 · 01c42a3
1 parent 3a1ac2c
commit 01c42a3
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 8 deletions.
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/entry.jelly
@@ -71,7 +71,7 @@ THE SOFTWARE.
           <div class="build-stop">
             <!-- Check CANCEL permission for Project, Admin permission otherwise -->
             <j:if test="${empty(it.widget.owner.CANCEL) ? h.hasPermission(app.ADMINISTER) : it.widget.owner.hasPermission(it.widget.owner.CANCEL)}">
-              <l:stopButton href="${link}stop" alt="[cancel]" confirm="${%confirm(build.fullDisplayName)}" />
+              <l:stopButton href="${link}stop" alt="${%Cancel}" confirm="${%confirm(build.fullDisplayName)}" />
             </j:if>
           </div>
         </j:if>

diff --git a/core/src/main/resources/lib/hudson/buildCaption.jelly b/core/src/main/resources/lib/hudson/buildCaption.jelly
@@ -49,7 +49,7 @@ THE SOFTWARE.
               <td>
                 <j:if test="${it.parent.hasAbortPermission()}">
                   <l:stopButton href="stop" confirm="${%confirm(it.fullDisplayName)}"
-                          alt="[${%cancel}]"/>
+                          alt="${%cancel}"/>
                 </j:if>
               </td>
             </tr>

diff --git a/core/src/main/resources/lib/hudson/buildCaption.properties b/core/src/main/resources/lib/hudson/buildCaption.properties
@@ -1 +1,2 @@
 confirm=Are you sure you want to abort {0}?
+cancel=Cancel
diff --git a/core/src/main/resources/lib/hudson/executors.properties b/core/src/main/resources/lib/hudson/executors.properties
@@ -2,3 +2,4 @@
 Computers=built-in node{0,choice,0# ({1} of {2} executors busy)|1# + {0,number} agent ({1} of {2} executors busy)|1< + {0,number} agents ({1} of {2} executors busy)}
 confirm=Are you sure you want to abort {0}?
 launching=launching...
+terminate\ this\ build=Cancel
diff --git a/core/src/main/resources/lib/layout/stopButton.jelly b/core/src/main/resources/lib/layout/stopButton.jelly
@@ -39,13 +39,13 @@ THE SOFTWARE.
     </st:documentation>
     <j:choose>
       <j:when test="${confirm == null}">
-        <a class="stop-button-link" href="${href}">
-          <l:icon class="icon-stop icon-sm" alt="${alt}"/>
+        <a class="stop-button-link" href="${href}" tooltip="${alt}">
+          <l:icon src="symbol-close" />
         </a>
       </j:when>
       <j:otherwise>
-        <a class="stop-button-link" href="${href}" data-confirm="${confirm}">
-          <l:icon class="icon-stop icon-sm" alt="${alt}"/>
+        <a class="stop-button-link" href="${href}" data-confirm="${confirm}" tooltip="${alt}">
+          <l:icon src="symbol-close" />
         </a>
       </j:otherwise>
     </j:choose>

diff --git a/test/src/test/java/jenkins/security/Security2278Test.java b/test/src/test/java/jenkins/security/Security2278Test.java
@@ -70,7 +70,7 @@ public void testUi() throws Exception {
         assertThat(contentAsString, containsString("Build Executor Status"));
         assertThat(contentAsString, containsString("Unknown Task"));
         assertThat(contentAsString, not(containsString("job/foo/job/bar")));
-        assertThat(contentAsString, not(containsString("icon-stop")));
+        assertThat(contentAsString, not(containsString("stop-button-link")));
     }
 
     @Test
@@ -81,7 +81,7 @@ public void testUiWithPermission() throws Exception {
         assertThat(contentAsString, containsString("Build Executor Status"));
         assertThat(contentAsString, not(containsString("Unknown Task")));
         assertThat(contentAsString, containsString("job/foo/job/bar"));
-        assertThat(contentAsString, containsString("icon-stop"));
+        assertThat(contentAsString, containsString("stop-button-link"));
     }
 
     @Test

diff --git a/war/src/main/scss/components/_buttons.scss b/war/src/main/scss/components/_buttons.scss
@@ -299,3 +299,33 @@ $jenkins-split-button-border-radius: 0.2rem;
     }
   }
 }
+
+.stop-button-link {
+  --item-background--hover: color-mix(in sRGB, var(--red) 20%, transparent);
+  --item-background--active: color-mix(in sRGB, var(--red) 25%, transparent);
+  --item-box-shadow--focus: transparent;
+
+  @include mixins.item;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+
+  &::before {
+    background: color-mix(in sRGB, var(--red) 15%, transparent);
+  }
+
+  svg {
+    width: 87.5%;
+    height: 87.5%;
+    color: var(--red);
+
+    * {
+      stroke-width: 40px;
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		confirm=Are you sure you want to abort {0}?
		cancel=Cancel