SearchKit - Use dropdown for actions in search listing

The list of actions is getting too big for a row of buttons...

diff --git a/ext/search_kit/ang/crmSearchAdmin/searchListing/buttons.html b/ext/search_kit/ang/crmSearchAdmin/searchListing/buttons.html
index e7ed5a67b1082c31bbad87402bd2d71a38eb72c8..8f663afe6df300d2b44e76f103859c45c5fce7db 100644 (file)
--- a/ext/search_kit/ang/crmSearchAdmin/searchListing/buttons.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchListing/buttons.html
@@ -1,12 +1,35 @@
-<a class="btn btn-xs btn-default" title="{{:: ts('View search results table') }}" ng-href="{{:: $ctrl.searchDisplayPath + '#/display/' + row.data.name }}" target="_blank">
-  {{:: ts('View') }}
-</a>
-<a class="btn btn-xs btn-primary" href="#/edit/{{:: row.data.id }}" ng-style="{visibility: row.permissionToEdit ? 'visible' : 'hidden'}">
-  {{:: ts('Edit') }}
-</a>
-<a class="btn btn-xs btn-secondary" href="#/create/{{:: row.data.api_entity + '?params=' + $ctrl.encode(row.data.api_params) }}">
-  {{:: ts('Clone') }}
-</a>
-<a href ng-style="{visibility: row.data['base_module:label'] && !row.data['local_modified_date'] ? 'hidden' : 'visible'}" class="btn btn-xs btn-{{ row.data['base_module:label'] ? 'warning' : 'danger' }}" ng-click="$ctrl.deleteOrRevert(row)">
-  {{ row.data['base_module:label'] ? ts('Revert') : ts('Delete') }}
-</a>
+<div class="btn-group btn-group-xs">
+  <a class="btn btn-primary" href="#/edit/{{:: row.data.id }}" ng-if=":: row.permissionToEdit">
+    <i class="crm-i fa-pencil"></i>
+    {{:: ts('Edit') }}
+  </a>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-click="row.menuOpen = true">
+    <i class="crm-i fa-bars"></i>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" ng-if=":: row.menuOpen">
+    <li title="{{:: ts('View search results table') }}">
+      <a ng-href="{{:: $ctrl.searchDisplayPath + '#/display/' + row.data.name }}" target="_blank">
+        <i class="crm-i fa-table"></i>
+        {{:: ts('View Results') }}
+      </a>
+    </li>
+    <li title="{{:: ts('Create a new search based on this one') }}">
+      <a href="#/create/{{:: row.data.api_entity + '?params=' + $ctrl.encode(row.data.api_params) }}">
+        <i class="crm-i fa-copy"></i>
+        {{:: ts('Clone...') }}
+      </a>
+    </li>
+    <li ng-if="!row.data['base_module:label']" title="{{:: ts('Delete search along with any displays and forms') }}">
+      <a href ng-click="$ctrl.deleteOrRevert(row)">
+        <i class="crm-i fa-trash"></i>
+        {{:: ts('Delete...') }}
+      </a>
+    </li>
+    <li ng-if="row.data['base_module:label'] && row.data['local_modified_date']" title="{{:: ts('Revert search to its packaged state') }}">
+      <a href ng-click="$ctrl.deleteOrRevert(row)">
+        <i class="crm-i fa-undo"></i>
+        {{:: ts('Revert...') }}
+      </a>
+    </li>
+  </ul>
+</div>