Merge pull request #22367 from colemanw/searchKitViewButton

SearchKit - Contextual "View" button
civicrm · Jan 5, 2022 · 70eb7d4 · 70eb7d4
2 parents f997360 + f8cbd2b
commit 70eb7d4
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/ext/search_kit/ang/crmSearchAdmin/compose.html b/ext/search_kit/ang/crmSearchAdmin/compose.html
@@ -46,6 +46,31 @@
     </fieldset>
   </div>
 </div>
+<div class="form-group crm-search-admin-right">
+  <div class="btn-group" ng-if="$ctrl.savedSearch.id">
+    <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search results table') }}">
+      <i class="crm-i fa-external-link"></i>
+      {{:: ts('View Results') }}
+    </a>
+    <button type="button" ng-click="$ctrl.openDisplayMenu = true;" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openDisplayMenu">
+      <li title="{{:: ts('View search results table') }}">
+        <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank">
+          <i class="crm-i fa-table"></i>
+          {{:: ts('Search results table') }}
+        </a>
+      </li>
+      <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="display.id" ng-class="{disabled: display.acl_bypass}" title="{{:: display.acl_bypass ? ts('Display has permissions disabled') : ts('View display') }}">
+        <a ng-href="{{ display.acl_bypass ? '' : $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + display.name }}" target="_blank">
+          <i class="crm-i {{ display.acl_bypass ? 'fa-unlock' : $ctrl.displayTypes[display.type].icon }}"></i>
+          {{ display.label }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
 <fieldset id="crm-search-build-functions">
   <legend ng-click="controls.showFunctions = !controls.showFunctions">
     <i class="crm-i fa-caret-{{ !controls.showFunctions ? 'right' : 'down' }}"></i>

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
@@ -54,30 +54,6 @@ <h1 crm-page-title>{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}</h1>
             </ul>
           </div>
 
-          <div class="btn-group" ng-if="$ctrl.savedSearch.id">
-            <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search results table') }}">
-              <i class="crm-i fa-external-link"></i>
-              {{:: ts('View') }}
-            </a>
-            <button type="button" ng-click="$ctrl.openDisplayMenu = true;" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openDisplayMenu">
-              <li title="{{:: ts('View search results table') }}">
-                <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank">
-                  <i class="crm-i fa-table"></i>
-                  {{:: ts('Search results table') }}
-                </a>
-              </li>
-              <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="display.id" ng-class="{disabled: display.acl_bypass}" title="{{:: display.acl_bypass ? ts('Display has permissions disabled') : ts('View display') }}">
-                <a ng-href="{{ display.acl_bypass ? '' : $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + display.name }}" target="_blank">
-                  <i class="crm-i {{ display.acl_bypass ? 'fa-unlock' : $ctrl.displayTypes[display.type].icon }}"></i>
-                  {{ display.label }}
-                </a>
-              </li>
-            </ul>
-          </div>
-
           <div class="btn-group">
             <button type="button" class="btn" ng-class="{'btn-primary': status === 'unsaved', 'btn-warning': status === 'saving', 'btn-success': status === 'saved'}" ng-disabled="status !== 'unsaved'" ng-click="$ctrl.save()">
               <i class="crm-i" ng-class="{'fa-check': status !== 'saving', 'fa-spin fa-spinner': status === 'saving'}"></i>
@@ -95,15 +71,15 @@ <h1 crm-page-title>{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}</h1>
       <ul class="nav nav-pills nav-stacked" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
       <div class="crm-flex-4" ng-switch="controls.tab">
         <div ng-switch-when="compose">
-          <div ng-include="'~/crmSearchAdmin/compose.html'"></div>
+          <div ng-include="'~/crmSearchAdmin/compose.html'" class="crm-search-admin-relative"></div>
           <crm-search-admin-results-table search="$ctrl.savedSearch"></crm-search-admin-results-table>
         </div>
         <div ng-switch-when="group">
           <fieldset ng-include="'~/crmSearchAdmin/group.html'"></fieldset>
         </div>
         <div ng-switch-default>
           <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
-            <crm-search-admin-display display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
+            <crm-search-admin-display class="crm-search-admin-relative" display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
           </div>
         </div>
       </div>

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html
@@ -15,5 +15,10 @@
       {{:: ts('Anyone who can view this display will be able to see all results, regardless of their permission level.') }}
     </div>
   </div>
-
 </fieldset>
+<div class="form-group crm-search-admin-right" ng-if="$ctrl.display.id">
+  <a ng-href="{{ $ctrl.crmSearchAdmin.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + $ctrl.display.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search display on its own page') }}">
+    <i class="crm-i fa-external-link"></i>
+    {{:: ts('View Display') }}
+  </a>
+</div>
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
@@ -267,3 +267,15 @@ crm-search-admin-export,
 crm-search-admin-import {
   display: block;
 }
+
+#bootstrap-theme .crm-search-admin-relative {
+  position: relative;
+  display: block;
+}
+
+#bootstrap-theme .crm-search-admin-right {
+  position: absolute;
+  top: 1px;
+  right: 0;
+  background-color: white;
+}