From cac3d80bdf1ff31ce4f8ee394c743b671963c1a5 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Sun, 28 Mar 2021 23:18:37 -0400
Subject: [PATCH] AfformGui - Improve dragging & dropping with more space &
 clearer borders

This adds more space for dragging & dropping elements so it's not so difficult to put things in the right place
---
 ext/afform/admin/ang/afGuiEditor.css          | 19 +++++++++++++++----
 ext/afform/admin/ang/afGuiEditor.js           | 18 +++++++++++++++++-
 .../elements/afGuiContainer.component.js      |  8 ++++++++
 .../afGuiEditor/elements/afGuiContainer.html  |  2 +-
 4 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css
index 330b3b4e46..93c1d00f38 100644
--- a/ext/afform/admin/ang/afGuiEditor.css
+++ b/ext/afform/admin/ang/afGuiEditor.css
@@ -99,7 +99,7 @@
   height: 22px;
   width: 100%;
   opacity: 0;
-  transition: opacity 1s 2s;
+  transition: opacity .2s;
   position:relative;
   font-family: "Courier New", Courier, monospace;
   font-size: 12px;
@@ -112,10 +112,15 @@
   left: 0;
   padding-left: 15px;
 }
-#afGuiEditor-canvas:hover .af-gui-bar {
+#afGuiEditor:not(.af-gui-dragging) #afGuiEditor-canvas:hover .af-gui-bar {
   opacity: 1;
   transition: opacity .2s;
 }
+#afGuiEditor-canvas .af-gui-dragtarget > .af-gui-bar {
+  background-color: #d7e6ff;
+  opacity: 1;
+  transition: opacity .1s;
+}
 
 #afGuiEditor .af-gui-bar .btn.active {
   background-color: #b3b3b3;
@@ -157,9 +162,14 @@
   box-shadow: 0 0 5px #bbbbbb;
 }
 
-#afGuiEditor .af-gui-container:hover {
+#afGuiEditor .af-gui-container:hover,
+#afGuiEditor.af-gui-dragging .af-gui-container {
   border: 2px dashed #757575;
 }
+#afGuiEditor .af-gui-container.af-gui-dragtarget {
+  border: 2px solid #0071bd;
+  box-shadow: 0 0 5px #0071bd;
+}
 
 #afGuiEditor .af-gui-markup {
   padding: 22px 3px 3px;
@@ -203,7 +213,8 @@
 }
 
 #afGuiEditor [ui-sortable] {
-  min-height: 25px;
+  min-height: 60px;
+  margin-top: 10px;
 }
 
 #afGuiEditor .af-gui-entity-palette-select-list {
diff --git a/ext/afform/admin/ang/afGuiEditor.js b/ext/afform/admin/ang/afGuiEditor.js
index dc2fe02a93..3b78fe067d 100644
--- a/ext/afform/admin/ang/afGuiEditor.js
+++ b/ext/afform/admin/ang/afGuiEditor.js
@@ -172,12 +172,28 @@
       };
     });
 
-  // Shoehorn in a non-angular widget for picking icons
   $(function() {
+    // Shoehorn in a non-angular widget for picking icons
     $('#crm-container').append('<div style="display:none"><input id="af-gui-icon-picker"></div>');
     CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').done(function() {
       $('#af-gui-icon-picker').crmIconPicker();
     });
+    // Add css class while dragging
+    $('#crm-container')
+      .on('sortover', function(e) {
+        $('.af-gui-container').removeClass('af-gui-dragtarget');
+        $(e.target).closest('.af-gui-container').addClass('af-gui-dragtarget');
+      })
+      .on('sortout', '.af-gui-container', function() {
+        $(this).removeClass('af-gui-dragtarget');
+      })
+      .on('sortstart', '#afGuiEditor', function() {
+        $('#afGuiEditor').addClass('af-gui-dragging');
+      })
+      .on('sortstop', '#afGuiEditor', function() {
+        $('.af-gui-dragging').removeClass('af-gui-dragging');
+        $('.af-gui-dragtarget').removeClass('af-gui-dragtarget');
+      });
   });
 
   // Connect bootstrap dropdown.js with angular
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
index 4f5fb1f707..0b4d6a4d01 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
@@ -38,6 +38,14 @@
         }
       };
 
+      this.sortableOptions = {
+        handle: '.af-gui-bar',
+        connectWith: '[ui-sortable]',
+        cancel: 'input,textarea,button,select,option,a,.dropdown-menu',
+        placeholder: 'af-gui-dropzone',
+        containment: '#afGuiEditor-canvas-body'
+      };
+
       $scope.isSelectedFieldset = function(entityName) {
         return entityName === ctrl.editor.getSelectedEntityName();
       };
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html
index d205755ee5..4082c03292 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html
@@ -15,7 +15,7 @@
   </div>
   <div ng-if="$ctrl.loading"><i class="crm-i fa-spin fa-spinner"></i></div>
 </div>
-<div ng-if="!$ctrl.loading" ui-sortable="{handle: '.af-gui-bar', connectWith: '[ui-sortable]', cancel: 'input,textarea,button,select,option,a,.dropdown-menu', placeholder: 'af-gui-dropzone', containment: '#afGuiEditor-canvas-body'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="getSetChildren" ng-model-options="{getterSetter: true}" class="af-gui-layout {{ getLayout() }}">
+<div ng-if="!$ctrl.loading" ui-sortable="$ctrl.sortableOptions" ui-sortable-update="$ctrl.editor.onDrop" ng-model="getSetChildren" ng-model-options="{getterSetter: true}" class="af-gui-layout {{ getLayout() }}">
   <div ng-repeat="item in getSetChildren()" >
     <div ng-switch="$ctrl.getNodeType(item)">
       <af-gui-container ng-switch-when="fieldset" node="item" delete-this="$ctrl.removeElement(item)" style="{{ item.style }}" class="af-gui-container af-gui-fieldset af-gui-container-type-{{ item['#tag'] }}" ng-class="{'af-entity-selected': isSelectedFieldset(item['af-fieldset'])}" entity-name="item['af-fieldset']" data-entity="{{ item['af-fieldset'] }}" ></af-gui-container>
-- 
2.25.1