From c3208af8994f6e31a0e0d8f8d0dc0e1804298b0a Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Sun, 24 Oct 2021 14:12:27 +0100
Subject: [PATCH] Getting there...

---
 core/src/main/resources/lib/form/entry.jelly  |  2 +-
 .../main/resources/lib/form/hetero-list.jelly | 34 +++++++++----------
 .../main/resources/lib/form/repeatable.jelly  |  7 +++-
 war/src/main/less/base-styles-v2.less         |  1 +
 war/src/main/less/base/style.less             | 10 ------
 war/src/main/less/modules/draggable-card.less | 27 +++++++++++++++
 war/src/main/less/modules/form.less           |  2 +-
 7 files changed, 52 insertions(+), 31 deletions(-)
 create mode 100644 war/src/main/less/modules/draggable-card.less

diff --git a/core/src/main/resources/lib/form/entry.jelly b/core/src/main/resources/lib/form/entry.jelly
index cb0676044401..0d9a7a16d291 100644
--- a/core/src/main/resources/lib/form/entry.jelly
+++ b/core/src/main/resources/lib/form/entry.jelly
@@ -96,7 +96,7 @@ THE SOFTWARE.
         </j:if>
       </j:when>
       <j:otherwise>
-        <div class="setting-main help-sibling">
+        <div class="jenkins-checkbox-help-wrapper">
           <d:invokeBody />
           <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>
diff --git a/core/src/main/resources/lib/form/hetero-list.jelly b/core/src/main/resources/lib/form/hetero-list.jelly
index 0c5f319c1e37..9588ea2d4849 100644
--- a/core/src/main/resources/lib/form/hetero-list.jelly
+++ b/core/src/main/resources/lib/form/hetero-list.jelly
@@ -82,31 +82,29 @@ THE SOFTWARE.
     <d:tag name="body">
       <div style="width:100%">
         <j:set var="help" value="${descriptor.helpFile}" />
-        <j:if test="${hasHeader}">
-          <div class="tr help-sibling">
-            <div colspan="3">
-              <div class="${attrs.disableDragAndDrop or readOnlyMode ? '' : 'dd-handle'}">
-                ${descriptor.displayName}
-                <f:helpLink url="${help}"/>
-              </div>
-            </div>
+
+        <div class="repeated-chunk__header">
+          <div class="${attrs.disableDragAndDrop or readOnlyMode ? '' : 'dd-handle'}">
+            Drag me
           </div>
-          <!-- TODO: help support is unintuitive; people should be able to see help from drop-down menu -->
-          <j:if test="${help!=null}">
-            <f:helpArea />
+
+          ${descriptor.displayName}
+
+          <f:helpLink url="${help}"/>
+
+          <j:if test="${!readOnlyMode}">
+            <f:repeatableDeleteButton value="${attrs.deleteCaption}" />
           </j:if>
+        </div>
+
+        <!-- TODO: help support is unintuitive; people should be able to see help from drop-down menu -->
+        <j:if test="${help!=null}">
+          <f:helpArea />
         </j:if>
 
         <d:invokeBody/>
 
         <f:class-entry descriptor="${descriptor}" />
-        <j:if test="${!readOnlyMode}">
-          <f:block>
-            <div align="right">
-              <f:repeatableDeleteButton value="${attrs.deleteCaption}" />
-            </div>
-          </f:block>
-        </j:if>
       </div>
     </d:tag>
   </d:taglib>
diff --git a/core/src/main/resources/lib/form/repeatable.jelly b/core/src/main/resources/lib/form/repeatable.jelly
index 2f9e34d7fa98..aedafc682273 100644
--- a/core/src/main/resources/lib/form/repeatable.jelly
+++ b/core/src/main/resources/lib/form/repeatable.jelly
@@ -132,7 +132,12 @@ THE SOFTWARE.
   <div class="repeated-container${!empty(header)?' with-drag-drop':''}" enableTopButton="${attrs.enableTopButton}">
     <!-- The first DIV is the master copy. -->
     <div class="repeated-chunk to-be-removed" name="${name}">
-      <j:if test="${!empty(header)}"><div class="${readOnlyMode ? '' : 'dd-handle'}">${header}</div></j:if>
+      <div class="repeated-chunk__header">
+        <div class="${readOnlyMode ? '' : 'dd-handle'}">
+          Drag me
+        </div>
+        ${header}
+      </div>
       <j:scope>
         <j:set var="${var}" value="${null}"/>
         <d:invokeBody />
diff --git a/war/src/main/less/base-styles-v2.less b/war/src/main/less/base-styles-v2.less
index c63239b1099a..12292b59e3d5 100644
--- a/war/src/main/less/base-styles-v2.less
+++ b/war/src/main/less/base-styles-v2.less
@@ -26,6 +26,7 @@ html {
 @import './modules/icon-size.less';
 @import './modules/icons.less';
 @import './modules/buttons.less';
+@import './modules/draggable-card.less';
 @import './modules/page-header.less';
 @import './modules/page-footer.less';
 @import './modules/form.less';
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index ac9bf8f2ad6a..8df5762a4220 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -1255,16 +1255,6 @@ textarea.rich-editor {
 
 /* ========================= D&D support in heterogenous/repeatable lists = */
 
-.hetero-list-container .has-help .dd-handle {
-    flex: 1;
-}
-
-.hetero-list-container .dd-handle,
-.repeated-container .dd-handle {
-    //cursor: move;
-  font-weight: 600;
-}
-
 .hetero-list-container.with-drag-drop .repeated-chunk,
 .repeated-container.with-drag-drop .repeated-chunk {
     margin-top: 0.5em;
diff --git a/war/src/main/less/modules/draggable-card.less b/war/src/main/less/modules/draggable-card.less
new file mode 100644
index 000000000000..48c60df9fdc7
--- /dev/null
+++ b/war/src/main/less/modules/draggable-card.less
@@ -0,0 +1,27 @@
+.repeated-chunk {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    font-weight: bold;
+    margin-bottom: 0.75rem;
+
+    .dd-handle {
+      width: 22px;
+      height: 22px;
+      border-radius: 30%;
+      background: blue;
+      overflow: hidden;
+      margin-right: 0.75rem;
+      cursor: move;
+    }
+
+    .yui-button {
+      margin-left: auto;
+
+      * {
+        margin: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/war/src/main/less/modules/form.less b/war/src/main/less/modules/form.less
index 23fafab09de3..485d65727f70 100644
--- a/war/src/main/less/modules/form.less
+++ b/war/src/main/less/modules/form.less
@@ -418,9 +418,9 @@
     position: absolute;
     top: 0;
     left: 0;
-    bottom: 0;
     right: 0;
     width: 22px;
+    height: 22px;
     font-weight: 800;
     color: var(--background);
     transition: 0.2s ease;