Merge pull request #21726 from colemanw/searchKitButtons

SearchKit - tweak button styles for shorditch

ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html

@@ -14,17 +14,17 @@ <h1 crm-page-title>{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}</h1>
   <form>
     <div class="crm-flex-box">
       <div class="nav-stacked">
-        <input id="crm-saved-search-label" class="form-control" ng-model="$ctrl.savedSearch.label" type="text" required placeholder="{{ ts('Untitled Search') }}" />
+        <input id="crm-saved-search-label" class="form-control" ng-model="$ctrl.savedSearch.label" type="text" required placeholder="{{:: ts('Untitled Search') }}" />
       </div>
       <div class="crm-flex-4 form-inline">
         <label for="crm-search-main-entity">{{:: ts('Search for') }}</label>
         <input id="crm-search-main-entity" class="form-control huge collapsible-optgroups" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: mainEntitySelect}" ng-disabled="$ctrl.savedSearch.id" />
         <div class="btn-group btn-group-md pull-right">
           <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>
-            <span ng-if="status === 'saved'">{{ ts('Saved') }}</span>
-            <span ng-if="status === 'unsaved'">{{ ts('Save') }}</span>
-            <span ng-if="status === 'saving'">{{ ts('Saving...') }}</span>
+            <span ng-if="status === 'saved'">{{:: ts('Saved') }}</span>
+            <span ng-if="status === 'unsaved'">{{:: ts('Save') }}</span>
+            <span ng-if="status === 'saving'">{{:: ts('Saving...') }}</span>
           </button>
         </div>
       </div>

ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html

@@ -2,8 +2,8 @@
   <label for="crm-search-display-sort-{{$index}}">{{ $index ? ts('Also by') : ts('Sort by') }}</label>
   <input id="crm-search-display-sort-{{$index}}" class="form-control huge" ng-model="sort[0]" crm-ui-select="{data: $ctrl.parent.fieldsForSort}" />
   <select class="form-control" ng-model="sort[1]" ng-show="sort[0] !== 'RAND()'">
-    <option value="ASC">{{ ts('Ascending') }}</option>
-    <option value="DESC">{{ ts('Descending') }}</option>
+    <option value="ASC">{{:: ts('Ascending') }}</option>
+    <option value="DESC">{{:: ts('Descending') }}</option>
   </select>
   <a href class="crm-hover-button" title="{{:: ts('Clear') }}" ng-click="$ctrl.display.settings.sort.splice($index, 1)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
 </div>

ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTags.html

@@ -1,4 +1,4 @@
-<button type="button" class="btn btn-secondary dropdown-toggle" ng-click="$ctrl.openMenu()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<button type="button" class="btn btn-secondary-outline dropdown-toggle" ng-click="$ctrl.openMenu()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <i class="crm-i fa-tag"></i>
   <span class="crm-search-admin-tags-btn-label">{{:: ts('Tags') }}</span>
   <span class="caret"></span>

ext/search_kit/ang/crmSearchAdmin/displays/colType/field.html

@@ -35,7 +35,7 @@
   </div>
 </div>
 <div class="form-inline crm-search-admin-flex-row">
-  <label title="{{ ts('Change the contents of this field, or combine multiple field values.') }}">
+  <label title="{{:: ts('Change the contents of this field, or combine multiple field values.') }}">
     <input type="checkbox" ng-checked="col.rewrite" ng-click="$ctrl.parent.toggleRewrite(col)" >
     {{:: ts('Rewrite') }}
   </label>

ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html

@@ -20,7 +20,7 @@
   <div class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
     <fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable">
       <legend><i class="crm-i fa-arrows crm-search-move-icon"></i> {{ $ctrl.parent.getColLabel(col) }}</legend>
-      <div class="form-inline" title="{{ ts('Should this item display on its own line or inline with other items?') }}">
+      <div class="form-inline" title="{{:: ts('Should this item display on its own line or inline with other items?') }}">
         <label><input type="checkbox" ng-model="col.break"> {{:: ts('New Line') }}</label>
         <button type="button" class="btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
           <i class="crm-i fa-ban"></i>

ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html

@@ -24,7 +24,7 @@
   <div class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
     <fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable">
       <legend><i class="crm-i fa-arrows crm-search-move-icon"></i> {{ $ctrl.parent.getColLabel(col) }}</legend>
-      <div class="form-inline" title="{{ ts('Should this item display on its own line or inline with other items?') }}">
+      <div class="form-inline" title="{{:: ts('Should this item display on its own line or inline with other items?') }}">
         <label><input type="checkbox" ng-model="col.break"> {{:: ts('New Line') }}</label>
         <button type="button" class="btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
           <i class="crm-i fa-ban"></i>

ext/search_kit/ang/crmSearchAdmin/group.html

@@ -3,7 +3,7 @@
 </div>
 
 <div class="form-inline">
-  <label for="crm-search-admin-group-title">{{ ts('Group Title') }} <span class="crm-marker">*</span></label>
+  <label for="crm-search-admin-group-title">{{:: ts('Group Title') }} <span class="crm-marker">*</span></label>
   <input id="crm-search-admin-group-title" class="form-control" placeholder="{{:: ts('Untitled') }}" ng-model="$ctrl.savedSearch.groups[0].title" ng-disabled="!smartGroupColumns.length" ng-required="smartGroupColumns.length">
   <label for="api-save-search-select-column">{{:: ts('Contact Column') }}</label>
   <input id="api-save-search-select-column" ng-model="$ctrl.savedSearch.api_params.select[0]" class="form-control huge" crm-ui-select="{data: smartGroupColumns}"/>

ext/search_kit/ang/crmSearchAdmin/tabs.html

@@ -4,7 +4,7 @@
 <li role="presentation" ng-class="{active: controls.tab === 'compose'}">
   <a href ng-click="selectTab('compose')">
     <i class="crm-i fa-gears"></i>
-    {{ ts('Compose Search') }}
+    {{:: ts('Compose Search') }}
   </a>
 </li>
 <li role="presentation" ng-class="{active: controls.tab === 'group'}" ng-if="$ctrl.savedSearch.groups.length" title="{{ !$ctrl.groupExists ? ts('Group will be deleted.') : '' }}">
@@ -26,7 +26,7 @@
   </button>
 </li>
 <li role="presentation">
-  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="crm-i fa-plus"></i> {{:: ts('Add...') }} <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -36,7 +36,7 @@
         {{:: ts('Smart Group') }}
       </a>
     </li>
-    <li class="dropdown-header">{{ ts('Display') }}</li>
+    <li class="dropdown-header">{{:: ts('Display') }}</li>
     <li ng-repeat="type in ::$ctrl.displayTypes">
       <a href ng-click="$ctrl.addDisplay(type.id)">
         <i class="crm-i {{:: type.icon }}"></i>