Rename handle

janfaracik · Oct 25, 2021 · 9dba043 · 9dba043
1 parent 6ed44c6
commit 9dba043
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/core/src/main/resources/lib/form/hetero-list.jelly b/core/src/main/resources/lib/form/hetero-list.jelly
@@ -84,9 +84,7 @@ THE SOFTWARE.
         <j:set var="help" value="${descriptor.helpFile}" />
 
         <div class="repeated-chunk__header">
-          <div class="${attrs.disableDragAndDrop or readOnlyMode ? '' : 'dd-handle'}">
-            Drag me
-          </div>
+          <div class="${attrs.disableDragAndDrop or readOnlyMode ? '' : 'dd-handle'}"/>
 
           ${descriptor.displayName}
 

diff --git a/core/src/main/resources/lib/form/repeatable.jelly b/core/src/main/resources/lib/form/repeatable.jelly
@@ -133,9 +133,7 @@ THE SOFTWARE.
     <!-- The first DIV is the master copy. -->
     <div class="repeated-chunk to-be-removed" name="${name}">
       <div class="repeated-chunk__header">
-        <div class="${readOnlyMode ? '' : 'dd-handle'}">
-          Drag me
-        </div>
+        <div class="${readOnlyMode ? '' : 'dd-handle'}"/>
         ${header}
       </div>
       <j:scope>

diff --git a/core/src/main/resources/lib/form/repeatableDeleteButton.jelly b/core/src/main/resources/lib/form/repeatableDeleteButton.jelly
@@ -32,5 +32,5 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
   <st:adjunct includes="lib.form.repeatable.repeatable"/>
-  <input type="button" value="${attrs.value ?: '%Delete'}" title="${attrs.value ?: '%Delete'}" class="repeatable-delete danger" />
+  <input type="button" value="${attrs.value ?: '%Delete'}" tooltip="${attrs.value ?: '%Delete'}" class="repeatable-delete danger" />
 </j:jelly>
diff --git a/war/src/main/less/modules/draggable-card.less b/war/src/main/less/modules/draggable-card.less
@@ -7,13 +7,30 @@
     margin-bottom: 0.75rem;
 
     .dd-handle {
+      position: relative;
       width: 22px;
       height: 22px;
-      border-radius: 30%;
-      background: blue;
       overflow: hidden;
       margin-right: 0.75rem;
       cursor: move;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 1px;
+        left: 4px;
+        right: 4px;
+        height: 20px;
+        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='9px' height='19px' viewBox='0 0 9 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EShape%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M2,15 C3.10456949,15 4,15.8954305 4,17 C4,18.1045695 3.10456949,19 2,19 C0.89543051,19 0,18.1045695 0,17 C0,15.8954305 0.89543051,15 2,15 Z M7,15 C8.10456949,15 9,15.8954305 9,17 C9,18.1045695 8.10456949,19 7,19 C5.89543051,19 5,18.1045695 5,17 C5,15.8954305 5.89543051,15 7,15 Z M2,16 C1.44771525,16 1,16.4477153 1,17 C1,17.5128358 1.38604019,17.9355072 1.88337887,17.9932723 L2,18 L2.11662113,17.9932723 C2.61395981,17.9355072 3,17.5128358 3,17 C3,16.4477153 2.55228475,16 2,16 Z M7,16 C6.44771525,16 6,16.4477153 6,17 C6,17.5128358 6.38604019,17.9355072 6.88337887,17.9932723 L7,18 L7.11662113,17.9932723 C7.61395981,17.9355072 8,17.5128358 8,17 C8,16.4477153 7.55228475,16 7,16 Z M2,10 C3.1045695,10 4,10.8954305 4,12 C4,13.1045695 3.1045695,14 2,14 C0.8954305,14 0,13.1045695 0,12 C0,10.8954305 0.8954305,10 2,10 Z M7,10 C8.1045695,10 9,10.8954305 9,12 C9,13.1045695 8.1045695,14 7,14 C5.8954305,14 5,13.1045695 5,12 C5,10.8954305 5.8954305,10 7,10 Z M2,11 C1.44771525,11 1,11.4477152 1,12 C1,12.5128358 1.38604019,12.9355072 1.88337887,12.9932723 L2,13 L2.11662113,12.9932723 C2.61395981,12.9355072 3,12.5128358 3,12 C3,11.4477152 2.55228475,11 2,11 Z M7,11 C6.44771525,11 6,11.4477152 6,12 C6,12.5128358 6.38604019,12.9355072 6.88337887,12.9932723 L7,13 L7.11662113,12.9932723 C7.61395981,12.9355072 8,12.5128358 8,12 C8,11.4477152 7.55228475,11 7,11 Z M2,5 C3.1045695,5 4,5.8954305 4,7 C4,8.1045695 3.1045695,9 2,9 C0.8954305,9 0,8.1045695 0,7 C0,5.8954305 0.8954305,5 2,5 Z M7,5 C8.1045695,5 9,5.8954305 9,7 C9,8.1045695 8.1045695,9 7,9 C5.8954305,9 5,8.1045695 5,7 C5,5.8954305 5.8954305,5 7,5 Z M2,6 C1.44771525,6 1,6.44771525 1,7 C1,7.51283584 1.38604019,7.93550716 1.88337887,7.99327227 L2,8 L2.11662113,7.99327227 C2.61395981,7.93550716 3,7.51283584 3,7 C3,6.44771525 2.55228475,6 2,6 Z M7,6 C6.44771525,6 6,6.44771525 6,7 C6,7.51283584 6.38604019,7.93550716 6.88337887,7.99327227 L7,8 L7.11662113,7.99327227 C7.61395981,7.93550716 8,7.51283584 8,7 C8,6.44771525 7.55228475,6 7,6 Z M2,0 C3.1045695,0 4,0.8954305 4,2 C4,3.1045695 3.1045695,4 2,4 C0.8954305,4 0,3.1045695 0,2 C0,0.8954305 0.8954305,0 2,0 Z M7,0 C8.1045695,0 9,0.8954305 9,2 C9,3.1045695 8.1045695,4 7,4 C5.8954305,4 5,3.1045695 5,2 C5,0.8954305 5.8954305,0 7,0 Z M2,1 C1.44771525,1 1,1.44771525 1,2 C1,2.51283584 1.38604019,2.93550716 1.88337887,2.99327227 L2,3 L2.11662113,2.99327227 C2.61395981,2.93550716 3,2.51283584 3,2 C3,1.44771525 2.55228475,1 2,1 Z M7,1 C6.44771525,1 6,1.44771525 6,2 C6,2.51283584 6.38604019,2.93550716 6.88337887,2.99327227 L7,3 L7.11662113,2.99327227 C7.61395981,2.93550716 8,2.51283584 8,2 C8,1.44771525 7.55228475,1 7,1 Z' id='Shape' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: left top;
+      }
+
+      &:hover {
+        &::after {
+          opacity: 0.75;
+        }
+      }
     }
 
     .yui-button {