Push

janfaracik · Sep 16, 2024 · 7f3e67c · 7f3e67c
1 parent bcf2c1d
commit 7f3e67c
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 27 deletions.
diff --git a/core/src/main/resources/hudson/tools/ToolInstallation/global.jelly b/core/src/main/resources/hudson/tools/ToolInstallation/global.jelly
@@ -38,7 +38,7 @@ THE SOFTWARE.
               <st:include page="config.jelly" from="${descriptor}" class="${descriptor.clazz}"/>
               <f:descriptorList descriptors="${descriptor.propertyDescriptors}" field="properties"/>
               <l:isAdmin>
-                <f:repeatableDeleteButton value="${%label.delete(descriptor.displayName)}"/>
+                <f:repeatableDeleteButton />
               </l:isAdmin>
             </div>
           </f:repeatable>

diff --git a/core/src/main/resources/lib/form/repeatableDeleteButton.jelly b/core/src/main/resources/lib/form/repeatableDeleteButton.jelly
@@ -31,8 +31,12 @@ THE SOFTWARE.
       Caption of the button. Defaults to 'Delete'.
     </st:attribute>
   </st:documentation>
+
   <st:adjunct includes="lib.form.repeatable.repeatable"/>
-  <button tooltip="${attrs.value ?: '%Delete'}" class="repeatable-delete danger" type="button">
+
+  <j:set var="deleteText" value="${attrs.value ?: '%Delete'}" />
+  <button class="repeatable-delete danger" type="button" style="--width: calc(${deleteText.length()}ch + 20px)">
     <l:icon src="symbol-close" />
+    <span>${deleteText}</span>
   </button>
 </j:jelly>
diff --git a/war/src/main/js/sortable-drag-drop.js b/war/src/main/js/sortable-drag-drop.js
@@ -17,7 +17,7 @@ function registerSortableDragDrop(e) {
     return false;
   }
 
-  let initialX, initialY, currentItem;
+  let initialX, currentItem;
   const maxRotation = 2; // Maximum rotation in degrees
   const maxDistance = 150; // Maximum distance for the full rotation effect
 
@@ -30,10 +30,13 @@ function registerSortableDragDrop(e) {
     const distanceX = currentX - initialX - 20;
 
     // Calculate rotation angle based on the distance moved
-    const rotation = Math.max(-maxRotation, Math.min(maxRotation, (distanceX / maxDistance) * maxRotation));
+    const rotation = Math.max(
+      -maxRotation,
+      Math.min(maxRotation, (distanceX / maxDistance) * maxRotation),
+    );
 
     currentItem.style.rotate = `${rotation}deg`;
-    currentItem.style.translate = (distanceX * -0.75) + 'px';
+    currentItem.style.translate = distanceX * -0.75 + "px";
   }
 
   new Sortable(e, {
@@ -45,20 +48,19 @@ function registerSortableDragDrop(e) {
     forceFallback: true, // Do not use html5 drag & drop behaviour because it does not work with autoscroll
     scroll: true,
     bubbleScroll: true,
-    onStart: function(evt) {
+    onStart: function (evt) {
       const rect = evt.item.getBoundingClientRect();
       initialX = rect.left + window.scrollX;
-      initialY = rect.top + window.scrollY;
-      currentItem = document.querySelector('.sortable-drag')
-      document.addEventListener('pointermove', onPointerMove);
+      currentItem = document.querySelector(".sortable-drag");
+      document.addEventListener("pointermove", onPointerMove);
     },
-    onEnd: function() {
-      document.removeEventListener('pointermove', onPointerMove);
+    onEnd: function () {
+      document.removeEventListener("pointermove", onPointerMove);
       if (currentItem) {
-        currentItem.style.rotate = ''; // Reset rotation
+        currentItem.style.rotate = ""; // Reset rotation
         currentItem = null;
       }
-    }
+    },
   });
 }
 

diff --git a/war/src/main/scss/form/_reorderable-list.scss b/war/src/main/scss/form/_reorderable-list.scss
@@ -4,12 +4,16 @@ $exit-animation: 0.2s;
 
 .repeated-chunk {
   position: relative;
-  background: color-mix(in srgb, color-mix(in srgb, var(--white) 10%, var(--background)) 60%, transparent);
+  background: color-mix(
+    in sRGB,
+    color-mix(in sRGB, var(--white) 10%, var(--background)) 60%,
+    transparent
+  );
   border-radius: calc(var(--form-input-border-radius) / 2);
   transition:
-          max-height #{$exit-animation} ease,
-          border-radius var(--standard-transition),
-          box-shadow var(--standard-transition);
+    max-height #{$exit-animation} ease,
+    border-radius var(--standard-transition),
+    box-shadow var(--standard-transition);
   height: unset !important;
   margin: 0 0 var(--card-border-width) 0;
 
@@ -70,36 +74,86 @@ $exit-animation: 0.2s;
   .repeatable-delete {
     @include mixins.item;
 
-    --item-background: color-mix(in srgb, currentColor 7.5%, transparent);
-    --item-background--hover: color-mix(in srgb, currentColor 15%, transparent);
-    --item-background--active: color-mix(in srgb, currentColor 25%, transparent);
-    --item-box-shadow--focus: color-mix(in srgb, currentColor 7.5%, transparent);
+    --item-background: color-mix(in sRGB, currentColor 7.5%, transparent);
+    --item-background--hover: color-mix(in sRGB, currentColor 15%, transparent);
+    --item-background--active: color-mix(
+      in sRGB,
+      currentColor 25%,
+      transparent
+    );
+    --item-box-shadow--focus: color-mix(
+      in sRGB,
+      currentColor 7.5%,
+      transparent
+    );
 
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: grid;
+    place-items: center;
+    place-content: center;
     width: 30px;
     height: 30px;
     margin-left: auto;
     color: var(--red);
     padding: 0;
-    border-radius: 100px;
+    transition: var(--standard-transition);
+    font-size: 0.65rem;
 
-    &::before, &::after {
-      inset: 3px;
+    &::before,
+    &::after {
+      inset: 4px;
+      border-radius: 0.5rem;
+    }
+
+    // Center and overlap SVG and text content
+    * {
+      grid-area: container;
     }
 
     svg {
       width: 0.875rem;
       height: 0.875rem;
+      transition: var(--standard-transition);
 
       * {
         stroke-width: 40px;
       }
     }
+
+    span {
+      opacity: 0;
+      transition: var(--standard-transition);
+      filter: blur(2px);
+      scale: 0.5;
+      text-wrap: nowrap;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      // This value is set in Jelly - see repeatableDeleteButton.jelly
+      width: var(--width);
+
+      &::before,
+      &::after {
+        border-radius: 1rem;
+      }
+
+      svg {
+        opacity: 0;
+        filter: blur(2px);
+        scale: 0.6;
+        rotate: -90deg;
+      }
+
+      span {
+        opacity: 1;
+        filter: none;
+        scale: 1;
+      }
+    }
   }
 }