SearchKit & Afform - Style click-sort column headers

diff --git a/ext/afform/admin/ang/afAdmin/afAdminList.html b/ext/afform/admin/ang/afAdmin/afAdminList.html
index 02361445aa6248686a85be73803205ff0bf6a6a7..e8b50d7db153ba88eb1cb7bc092eb14a8e0c09ef 100644 (file)
--- 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 4b22cace9c6f9850d0bf0a67955ce87ea7549e98..2c60f1808626f5627fe5a38c3e3116efd54ba6b2 100644 (file)
--- 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 ce4eb169aed97cd758c2294a92b53684475b2e03..a69847777294fc0c54510a13f480b3e6de1699ff 100644 (file)
--- 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 b4c9e4cb3d9c570ef509138b80b2e39747c0b617..1082b8a938131af27004c37ab2a0161bde008866 100644 (file)
--- 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 bdb38fbc2d269a4f620c2cd2fc71417dede0778d..69f37e89593293e55baae46adcfeb0306aed5e2b 100644 (file)
--- 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;
+}