From 00a9b1d01de3f8f94f5eee25ae98f26f45e81875 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 19 May 2021 12:51:19 -0400
Subject: [PATCH] SearchKit & Afform - Style click-sort column headers

---
 ext/afform/admin/ang/afAdmin/afAdminList.html     |  8 ++++----
 ext/afform/admin/ang/afGuiEditor.css              | 11 +++++++++++
 ext/search_kit/ang/crmSearchAdmin/searchList.html | 14 +++++++-------
 ext/search_kit/css/crmSearchAdmin.css             | 11 +++++++++++
 ext/search_kit/css/crmSearchTasks.css             | 10 ++++++++++
 5 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/ext/afform/admin/ang/afAdmin/afAdminList.html b/ext/afform/admin/ang/afAdmin/afAdminList.html
index 02361445aa..e8b50d7db1 100644
--- a/ext/afform/admin/ang/afAdmin/afAdminList.html
+++ b/ext/afform/admin/ang/afAdmin/afAdminList.html
@@ -37,22 +37,22 @@
   <table>
     <thead>
     <tr>
-      <th ng-click="$ctrl.sortBy('title')">
+      <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('title')">
         <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'title'"></i>
         <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'title'"></i>
         {{:: ts('Title') }}
       </th>
-      <th ng-click="$ctrl.sortBy('name')">
+      <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('name')">
         <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'name'"></i>
         <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'name'"></i>
         {{:: ts('Name') }}
       </th>
-      <th ng-click="$ctrl.sortBy('server_route')">
+      <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('server_route')">
         <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'server_route'"></i>
         <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'server_route'"></i>
         {{:: ts('Page') }}
       </th>
-      <th ng-click="$ctrl.sortBy('placement.length')">
+      <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('placement.length')">
         <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'placement.length'"></i>
         <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'placement.length'"></i>
         {{:: ts('Placement') }}
diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css
index 4b22cace9c..2c60f18086 100644
--- a/ext/afform/admin/ang/afGuiEditor.css
+++ b/ext/afform/admin/ang/afGuiEditor.css
@@ -1,3 +1,14 @@
+#bootstrap-theme.afadmin-list th[ng-click] {
+  cursor: pointer;
+}
+#bootstrap-theme.afadmin-list th i.fa-sort-desc,
+#bootstrap-theme.afadmin-list th i.fa-sort-asc {
+  color: #1a5a82;
+}
+#bootstrap-theme.afadmin-list th:not(:hover) i.fa-sort {
+  opacity: .5;
+}
+
 #afGuiEditor #afGuiEditor-palette {
   margin-right: 5px;
   height: 100%;
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchList.html b/ext/search_kit/ang/crmSearchAdmin/searchList.html
index ce4eb169ae..a698477772 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchList.html
@@ -1,4 +1,4 @@
-<div id="bootstrap-theme" class="crm-search">
+<div id="bootstrap-theme" class="crm-search crm-search-admin-list">
   <h1 crm-page-title>{{:: ts('Saved Searches') }}</h1>
   <div class="form-inline">
     <label for="search-list-filter">{{:: ts('Filter') }}</label>
@@ -11,22 +11,22 @@
   <table>
     <thead>
       <tr>
-        <th ng-click="$ctrl.sortBy('label')">
+        <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('label')">
           <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'label'"></i>
           <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'label'"></i>
           {{:: ts('Label') }}
         </th>
-        <th ng-click="$ctrl.sortBy('entity_title')">
+        <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('entity_title')">
           <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'entity_title'"></i>
           <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'entity_title'"></i>
           {{:: ts('For') }}
         </th>
-        <th ng-click="$ctrl.sortBy('display_name.length')">
+        <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('display_name.length')">
           <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'display_name.length'"></i>
           <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'display_name.length'"></i>
           {{:: ts('Displays') }}
         </th>
-        <th ng-click="$ctrl.sortBy('groups[0]')">
+        <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('groups[0]')">
           <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'groups[0]'"></i>
           <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'groups[0]'"></i>
           {{:: ts('Smart Group') }}
@@ -36,12 +36,12 @@
           <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'afform_count'"></i>
           {{:: ts('Forms') }}
         </th>
-        <th ng-click="$ctrl.sortBy('created_date')">
+        <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('created_date')">
           <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'created_date'"></i>
           <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'created_date'"></i>
           {{:: ts('Created') }}
         </th>
-        <th ng-click="$ctrl.sortBy('modified_date')">
+        <th title="{{:: ts('Click to sort') }}" ng-click="$ctrl.sortBy('modified_date')">
           <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'modified_date'"></i>
           <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'modified_date'"></i>
           {{:: ts('Last Modified') }}
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index b4c9e4cb3d..1082b8a938 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -1,3 +1,14 @@
+#bootstrap-theme.crm-search-admin-list th[ng-click] {
+  cursor: pointer;
+}
+#bootstrap-theme.crm-search-admin-list th i.fa-sort-desc,
+#bootstrap-theme.crm-search-admin-list th i.fa-sort-asc {
+  color: #1a5a82;
+}
+#bootstrap-theme.crm-search-admin-list th:not(:hover) i.fa-sort {
+  opacity: .5;
+}
+
 #bootstrap-theme .crm-search-criteria-column {
   min-width: 500px;
 }
diff --git a/ext/search_kit/css/crmSearchTasks.css b/ext/search_kit/css/crmSearchTasks.css
index bdb38fbc2d..69f37e8959 100644
--- a/ext/search_kit/css/crmSearchTasks.css
+++ b/ext/search_kit/css/crmSearchTasks.css
@@ -22,3 +22,13 @@
   bottom: -22px;
   left: 0;
 }
+#bootstrap-theme .crm-search-display th[ng-click] {
+  cursor: pointer;
+}
+#bootstrap-theme .crm-search-display th i.fa-sort-desc,
+#bootstrap-theme .crm-search-display th i.fa-sort-asc {
+  color: #1a5a82;
+}
+#bootstrap-theme .crm-search-display th:not(:hover) i.fa-sort {
+  opacity: .5;
+}
-- 
2.25.1