Afform - improve drag-n-drop UI

[civicrm-core.git] / ext / afform / admin / ang / afGuiEditor / afGuiSearch.html

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiSearch.html b/ext/afform/admin/ang/afGuiEditor/afGuiSearch.html
index 9115234d9a71099ef9409017e0b84d80c825a553..17a131afcf0354a543b24bd1f3e1881ca5e207c7 100644 (file)
--- a/ext/afform/admin/ang/afGuiEditor/afGuiSearch.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiSearch.html
@@ -7,25 +7,25 @@
     <div class="af-gui-entity-palette-select-list">
       <div ng-if="elementList.length">
         <label>{{:: ts('Elements') }}</label>
-        <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[ui-sortable]', placeholder: 'af-gui-dropzone'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="elementList">
+        <div ui-sortable="$ctrl.editor.getSortableOptions()" ui-sortable-update="buildPaletteLists" ng-model="elementList">
           <div ng-repeat="element in elementList" >
-            {{:: elementTitles[$index] }}
+            <div class="af-gui-palette-item">{{:: elementTitles[$index] }}</div>
           </div>
         </div>
       </div>
       <div ng-if="blockList.length">
         <label>{{:: ts('Blocks') }}</label>
-        <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[ui-sortable]', placeholder: 'af-gui-dropzone'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="blockList">
+        <div ui-sortable="$ctrl.editor.getSortableOptions()" ui-sortable-update="buildPaletteLists" ng-model="blockList">
           <div ng-repeat="block in blockList" ng-class="{disabled: blockInUse(block)}">
-            {{:: blockTitles[$index] }}
+            <div class="af-gui-palette-item">{{:: blockTitles[$index] }}</div>
           </div>
         </div>
       </div>
       <div ng-if="calcFieldList.length">
         <label>{{:: ts('Calculated Fields') }}</label>
-        <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[ui-sortable]', placeholder: 'af-gui-dropzone'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="calcFieldList">
+        <div ui-sortable="$ctrl.editor.getSortableOptions()" ui-sortable-update="buildPaletteLists" ng-model="calcFieldList">
           <div ng-repeat="field in calcFieldList" ng-class="{disabled: fieldInUse(field.name)}">
-            {{:: field.defn.label }}
+            <div class="af-gui-palette-item">{{:: field.defn.label }}></div>
           </div>
         </div>
       </div>