#435 DrawTool - Reorder Template fields (#436)

NASA-AMMOS · Oct 5, 2023 · d4a61ac · d4a61ac
1 parent 44ed04f
commit d4a61ac
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/essence/Tools/Draw/DrawTool_Editing.js b/src/essence/Tools/Draw/DrawTool_Editing.js
@@ -646,7 +646,7 @@ var Editing = {
                     "<div class='drawToolContextMenuPropertiesCollapsible'>",
                         "<div class='drawToolContextMenuPropertiesTitle'><div>Properties</div><i class='mdi mdi-chevron-down mdi-24px'></i></div>",
                         "<div class='drawToolContextMenuPropertiesExtended'>",
-                            Object.keys(DrawTool.contextMenuLayer.feature.properties).map((p) => {
+                            Object.keys(DrawTool.contextMenuLayer.feature.properties).sort().map((p) => {
                                 const pv = DrawTool.contextMenuLayer.feature.properties[p]
                                 if(p === 'uuid') return ''
                                 if( typeof pv === 'number' || typeof pv === 'string' || typeof pv === 'boolean')

diff --git a/src/essence/Tools/Draw/DrawTool_Templater.css b/src/essence/Tools/Draw/DrawTool_Templater.css
@@ -226,7 +226,14 @@
     min-width: 30px;
     text-align: center;
     font-size: 14px;
-    background: var(--color-a2);
+    background: var(--color-a1-5);
+    border-right: 1px solid var(--color-a);
+    color: var(--color-a3);
+    cursor: row-resize;
+    transition: color 0.2s ease-in-out;
+}
+.drawToolTemplaterLiIdx:hover {
+    color: var(--color-a6);
 }
 .drawToolTemplaterLiField {
     display: flex;

diff --git a/src/essence/Tools/Draw/DrawTool_Templater.js b/src/essence/Tools/Draw/DrawTool_Templater.js
@@ -8,6 +8,7 @@ import * as moment from 'moment'
 import { TempusDominus, Namespace } from '@eonasdan/tempus-dominus'
 import '@eonasdan/tempus-dominus/dist/css/tempus-dominus.css'
 import tippy from 'tippy.js'
+import Sortable from 'sortablejs'
 
 import './DrawTool_Templater.css'
 
@@ -665,7 +666,7 @@ const DrawTool_Templater = {
                 `<li class='drawToolTemplaterLi' id='drawToolTemplaterLi_${idx}'>`,
                     "<div class='drawToolTemplaterLiHead'>",
                         "<div class='drawToolTemplaterLiField'>",
-                            `<div class='drawToolTemplaterLiIdx'>${idx + 1}</div>`,
+                            `<div class='drawToolTemplaterLiIdx'><i class="mdi mdi-drag-vertical mdi-18px"></i></div>`,
                             `<input id='drawToolTemplaterLiFieldInput_${idx}' placeholder='Field Name' type='text' value='${options.field || ''}'></input>`,
                         "</div>",
                         "<div class='drawToolTemplaterLiType'>",
@@ -933,6 +934,18 @@ const DrawTool_Templater = {
                 add(t)
             })
         }
+
+        const listToSort = document.getElementById(
+            'drawToolTemplaterDesignContent'
+        )
+        Sortable.create(listToSort, {
+            animation: 150,
+            easing: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+            handle: '.drawToolTemplaterLiIdx',
+            onStart: () => {},
+            onChange: () => {},
+            onEnd: () => {},
+        })
     },
     getDesignedTemplate: function (containerId, reservedTemplates) {
         // For if no template is being designed