From e633ddec03618d3eb3e5cefa77b929a92bee3c4c Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 16 Mar 2021 01:25:20 -0400
Subject: [PATCH] SearchKit - add draggable arrows when configuring display
 columns

---
 .../ang/crmSearchAdmin/crmSearchAdminLinkGroup.html       | 4 ++--
 .../crmSearchAdmin/displays/searchAdminDisplayList.html   | 2 +-
 .../crmSearchAdmin/displays/searchAdminDisplayTable.html  | 2 +-
 ext/search/css/crmSearchAdmin.css                         | 8 ++++++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkGroup.html
index 5f5157d488..87a236ce7f 100644
--- 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 bf4870cb93..362cde215a 100644
--- 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 83b9ef670d..5264ceb1cb 100644
--- 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 2a50fe9cf3..0bad2c7879 100644
--- 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;
-- 
2.25.1