Getting there...

janfaracik · Oct 24, 2021 · c3208af · c3208af
1 parent b8b894c
commit c3208af
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+      }
+    }
+  }
+}
diff --git 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;