SearchKit & Afform - Style click-sort column headers

civicrm · May 20, 2021 · 00a9b1d · 00a9b1d
1 parent 1e0a043
commit 00a9b1d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 11 deletions.
diff --git a/ext/afform/admin/ang/afAdmin/afAdminList.html b/ext/afform/admin/ang/afAdmin/afAdminList.html
@@ -37,22 +37,22 @@ <h1 crm-page-title>{{:: ts('Form Builder') }}</h1>
   <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
@@ -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
@@ -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 @@ <h1 crm-page-title>{{:: ts('Saved Searches') }}</h1>
   <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 @@ <h1 crm-page-title>{{:: ts('Saved Searches') }}</h1>
           <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
@@ -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
@@ -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;
+}