SearchKit - More compact display column editing

diff --git a/ext/search/ang/crmSearchAdmin/displays/common/addColMenu.html b/ext/search/ang/crmSearchAdmin/displays/common/addColMenu.html
index 3f37d1d5589693a2f612dbe56139a0af6b5f12b8..55e2c89cf3e0f220ce01e8c484c3a1a0b4e65975 100644 (file)
--- a/ext/search/ang/crmSearchAdmin/displays/common/addColMenu.html
+++ b/ext/search/ang/crmSearchAdmin/displays/common/addColMenu.html
@@ -1,9 +1,15 @@
-<button type="button" class="btn dropdown-toggle btn-default btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<button type="button" class="btn dropdown-toggle btn-default-outline" 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">
   <li ng-repeat="(type, col) in $ctrl.parent.colTypes">
-    <a href ng-click="$ctrl.parent.addCol(type)"><i class="fa {{col.icon}}"></i> {{ col.label }}</a>
+    <a href ng-click="$ctrl.parent.addCol(type)"><i class="fa {{:: col.icon }}"></i> {{:: col.label }}</a>
+  </li>
+  <li class="divider" ng-show="$ctrl.parent.hiddenColumns.length"></li>
+  <li ng-repeat="col in $ctrl.parent.hiddenColumns">
+    <a href ng-click="$ctrl.parent.restoreCol($index)">
+      {{:: $ctrl.parent.getFieldLabel(col.key) }}
+    </a>
   </li>
 </ul>

diff --git a/ext/search/ang/crmSearchAdmin/displays/common/unusedColumns.html b/ext/search/ang/crmSearchAdmin/displays/common/unusedColumns.html
deleted file mode 100644 (file)
index dcaf056..0000000
--- a/ext/search/ang/crmSearchAdmin/displays/common/unusedColumns.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<legend>{{:: ts('Unused') }}</legend>
-<div class="crm-search-admin-edit-columns crm-search-admin-unused-columns" ng-model="$ctrl.parent.hiddenColumns" ui-sortable="$ctrl.parent.sortableOptions">
-  <fieldset ng-repeat="col in $ctrl.parent.hiddenColumns" class="crm-draggable">
-    <legend>{{ $ctrl.parent.getFieldLabel(col.key) }}</legend>
-    <div class="form-inline">
-      <button type="button" class="btn-xs pull-right" ng-click="$ctrl.parent.restoreCol($index)" title="{{:: ts('Show') }}">
-        <i class="crm-i fa-undo"></i>
-      </button>
-    </div>
-  </fieldset>
-</div>

diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index 0ec003a6c9de18f82959c5233f3bae7752b4be93..7f7a71c4d21c33f6bcb61e1abd38ef6388a43162 100644 (file)
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -21,36 +21,35 @@
     </div>
   </div>
 </fieldset>
-<div class="crm-flex-box crm-search-admin-edit-columns-wrapper">
-  <fieldset class="crm-flex-3">
-    <legend>{{:: ts('Fields') }}</legend>
-    <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group"></div>
-    <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>{{ $ctrl.parent.getColLabel(col) }}</legend>
-        <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('Display on 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>
-          </button>
+<fieldset class="crm-search-admin-edit-columns-wrapper">
+  <legend>
+    {{:: ts('Fields') }}
+    <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group btn-group-xs"></div>
+  </legend>
+  <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>{{ $ctrl.parent.getColLabel(col) }}</legend>
+      <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('Display on 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>
+        </button>
+      </div>
+      <div class="form-inline crm-search-admin-flex-row">
+        <label>
+          <input type="checkbox" ng-checked="col.label" ng-click="col.label = col.label ? null : $ctrl.parent.getFieldLabel(col.key)" >
+          {{ col.label ? ts('Label:') : ts('Label') }}
+        </label>
+        <input ng-if="col.label" class="form-control" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
+        <crm-search-admin-token-select ng-if="col.label" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="label"></crm-search-admin-token-select>
+      </div>
+      <div class="form-inline" ng-if="col.label">
+        <label style="visibility: hidden"><input type="checkbox" disabled></label><!--To indent by 1 checkbox-width-->
+        <div class="checkbox">
+          <label><input type="checkbox" ng-model="col.forceLabel"> {{:: ts('Show label even when field is blank') }}</label>
         </div>
-        <div class="form-inline crm-search-admin-flex-row">
-          <label>
-            <input type="checkbox" ng-checked="col.label" ng-click="col.label = col.label ? null : $ctrl.parent.getFieldLabel(col.key)" >
-            {{ col.label ? ts('Label:') : ts('Label') }}
-          </label>
-          <input ng-if="col.label" class="form-control" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
-          <crm-search-admin-token-select ng-if="col.label" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="label"></crm-search-admin-token-select>
-        </div>
-        <div class="form-inline" ng-if="col.label">
-          <label style="visibility: hidden"><input type="checkbox" disabled></label><!--To indent by 1 checkbox-width-->
-          <div class="checkbox">
-            <label><input type="checkbox" ng-model="col.forceLabel"> {{:: ts('Show label even when field is blank') }}</label>
-          </div>
-        </div>
-        <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
-      </fieldset>
-    </div>
-  </fieldset>
-  <fieldset ng-include="'~/crmSearchAdmin/displays/common/unusedColumns.html'"></fieldset>
-</div>
+      </div>
+      <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
+    </fieldset>
+  </div>
+</fieldset>

diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 0ade234aebd7acef63b087c17e7280fbfab43fbd..7aa5d91f68044c736fd45bea5d527ab4544e31d6 100644 (file)
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -11,31 +11,30 @@
     </div>
   </div>
 </fieldset>
-<div class="crm-flex-box crm-search-admin-edit-columns-wrapper">
-  <fieldset class="crm-flex-3">
-    <legend>{{:: ts('Columns') }}</legend>
-    <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group"></div>
-    <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>{{ $ctrl.parent.getColLabel(col) }}</legend>
-        <div class="form-inline crm-search-admin-flex-row">
-          <label for="crm-search-admin-edit-col-{{ $index }}">{{:: ts('Header:') }}</label>
-          <input id="crm-search-admin-edit-col-{{ $index }}" class="form-control" type="text" ng-model="col.label" >
-          <button type="button" class="btn-xs" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
-            <i class="crm-i fa-ban"></i>
-          </button>
-        </div>
-        <div class="form-inline">
-          <label>{{:: ts('Alignment:') }}</label>
-          <select ng-model="col.alignment" class="form-control">
-            <option value="">{{:: ts('Left') }}</option>
-            <option value="text-center">{{:: ts('Center') }}</option>
-            <option value="text-right">{{:: ts('Right') }}</option>
-          </select>
-        </div>
-        <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
-      </fieldset>
-    </div>
-  </fieldset>
-  <fieldset ng-include="'~/crmSearchAdmin/displays/common/unusedColumns.html'"></fieldset>
-</div>
+<fieldset class="crm-search-admin-edit-columns-wrapper">
+  <legend>
+    {{:: ts('Columns') }}
+    <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group btn-group-xs"></div>
+  </legend>
+  <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>{{ $ctrl.parent.getColLabel(col) }}</legend>
+      <div class="form-inline crm-search-admin-flex-row">
+        <label for="crm-search-admin-edit-col-{{ $index }}">{{:: ts('Header:') }}</label>
+        <input id="crm-search-admin-edit-col-{{ $index }}" class="form-control" type="text" ng-model="col.label" >
+        <button type="button" class="btn-xs" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
+          <i class="crm-i fa-ban"></i>
+        </button>
+      </div>
+      <div class="form-inline">
+        <label>{{:: ts('Alignment:') }}</label>
+        <select ng-model="col.alignment" class="form-control">
+          <option value="">{{:: ts('Left') }}</option>
+          <option value="text-center">{{:: ts('Center') }}</option>
+          <option value="text-right">{{:: ts('Right') }}</option>
+        </select>
+      </div>
+      <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
+    </fieldset>
+  </div>
+</fieldset>

diff --git a/ext/search/css/crmSearchAdmin.css b/ext/search/css/crmSearchAdmin.css
index f5f877557f33d10496f21bdb24baf774fe203964..aaf1c5bc2681e7cd9a5dfcc124c7a6a99ae75f44 100644 (file)
--- a/ext/search/css/crmSearchAdmin.css
+++ b/ext/search/css/crmSearchAdmin.css
@@ -156,6 +156,9 @@
 #bootstrap-theme .crm-search-admin-edit-columns {
   height: 100%;
 }
+#bootstrap-theme .crm-search-admin-edit-columns > fieldset {
+  background-color: rgba(255, 255, 255, .8);
+}
 
 #bootstrap-theme .crm-search-admin-flex-row {
   display: flex;