SearchKit - add draggable arrows when configuring display columns

diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html
index 5f5157d48868e6b46931791eaee9fa57fd65ad51..87a236ce7fff912c60fd54d2db04cab11c2c8b61 100644 (file)
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html
@@ -11,9 +11,9 @@
     </tr>
   </thead>
   <tbody ui-sortable="$ctrl.sortableOptions" ng-model="$ctrl.group">
-    <tr ng-repeat="item in $ctrl.group">
+    <tr ng-repeat="item in $ctrl.group" class="crm-draggable">
       <td class="crm-search-admin-icon-col">
-        <i class="crm-i fa-arrows disabled"></i>
+        <i class="crm-i fa-arrows crm-search-move-icon"></i>
       </td>
       <td class="crm-search-admin-icon-col">
         <span class="crm-editable-enabled" ng-click="pickIcon($index)">

diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index bf4870cb9310ec1efe59b9cdbaac082be9647cfd..362cde215a3e9249770d8d16eac9c718878733c8 100644 (file)
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -28,7 +28,7 @@
   </legend>
   <div class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
     <fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable">
-      <legend>{{ $ctrl.parent.getColLabel(col) }}</legend>
+      <legend><i class="crm-i fa-arrows crm-search-move-icon"></i> {{ $ctrl.parent.getColLabel(col) }}</legend>
       <div class="form-inline" title="{{ ts('Should this item display on its own line or inline with other items?') }}">
         <label><input type="checkbox" ng-model="col.break"> {{:: ts('Display on new line') }}</label>
         <button type="button" class="btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">

diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 83b9ef670df7ec74a720867c4ba7f41440ba618a..5264ceb1cb6575f2d70db707b12e00794bfb0623 100644 (file)
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -18,7 +18,7 @@
   </legend>
   <div class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
     <fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable">
-      <legend>{{ $ctrl.parent.getColLabel(col) }}</legend>
+      <legend><i class="crm-i fa-arrows crm-search-move-icon"></i> {{ $ctrl.parent.getColLabel(col) }}</legend>
       <div class="form-inline crm-search-admin-flex-row">
         <label for="crm-search-admin-edit-col-{{ $index }}">{{:: ts('Header:') }}</label>
         <input id="crm-search-admin-edit-col-{{ $index }}" class="form-control crm-flex-1" type="text" ng-model="col.label" >

diff --git a/ext/search/css/crmSearchAdmin.css b/ext/search/css/crmSearchAdmin.css
index 2a50fe9cf379e26f3b2d45359917a83830566449..0bad2c7879e977d2b0e9f72697683cb584a52b14 100644 (file)
--- a/ext/search/css/crmSearchAdmin.css
+++ b/ext/search/css/crmSearchAdmin.css
@@ -96,8 +96,11 @@
   display: inline-block;
 }
 
-#bootstrap-theme.crm-search i.fa-arrows {
-  cursor: move;
+#bootstrap-theme.crm-search i.crm-search-move-icon {
+  opacity: .5;
+}
+#bootstrap-theme.crm-search .crm-draggable:hover > * > i.crm-search-move-icon {
+  opacity: 1;
 }
 
 #bootstrap-theme.crm-search .api4-clause-badge {
@@ -112,6 +115,7 @@
 #bootstrap-theme.crm-search .api4-clause-badge .caret {
   margin: 0;
 }
+/* Icon only shown while dragging */
 #bootstrap-theme.crm-search .api4-clause-badge .crm-i {
   display: none;
   padding: 0 6px;