Afform GUI - Improve drag-n-drop and add link to edit search

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 {

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

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();
       };

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>

ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchDisplay.component.js

@@ -13,6 +13,7 @@
 
       this.$onInit = function() {
         ctrl.display = afGui.meta.searchDisplays[ctrl.node['search-name'] + '.' + ctrl.node['display-name']];
+        ctrl.editUrl = CRM.url('civicrm/admin/search#/edit/' + ctrl.display.saved_search_id);
       };
 
     }

ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchDisplay.html

@@ -1,6 +1,18 @@
 <div class="af-gui-bar">
   <div class="form-inline">
     <span>{{ $ctrl.display.label }}</span>
+    <div class="btn-group pull-right" af-gui-menu>
+      <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-element-button" data-toggle="dropdown" title="{{:: ts('Configure') }}">
+        <span><i class="crm-i fa-gear"></i></span>
+      </button>
+      <ul class="dropdown-menu" ng-if="menu.open">
+        <li>
+          <a target="_blank" href="{{:: $ctrl.editUrl }}">
+            <i class="crm-i fa-external-link"></i> {{:: ts('Edit Saved Search') }}
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
 <p class="text-center af-gui-search-display">