From: colemanw <coleman@civicrm.org>
Date: Wed, 20 Dec 2023 21:03:18 +0000 (-0500)
Subject: SearchKit - Improve layout of admin displays
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=4099cd6b65eb97d46ad05d7a02f000a36ee77240;p=civicrm-core.git

SearchKit - Improve layout of admin displays

Collapse columns to save space.
Split addColMenu in two, allows toggling multiple columns at once.
---

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index 1c49b0ecbe..7d1b856fb2 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -35,6 +35,7 @@
     controller: function($scope, $timeout, searchMeta) {
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
         ctrl = this;
+      let initDefaults;
 
       this.isSuperAdmin = CRM.checkPerm('all CiviCRM permissions and ACLs');
       this.aclBypassHelp = ts('Only users with "all CiviCRM permissions and ACLs" can disable permission checks.');
@@ -87,6 +88,10 @@
 
       this.styles = CRM.crmSearchAdmin.styles;
 
+      function selectToKey(selectExpr) {
+        return selectExpr.split(' AS ').slice(-1)[0];
+      }
+
       this.addCol = function(type) {
         var col = _.cloneDeep(this.colTypes[type].defaults);
         col.type = type;
@@ -97,15 +102,25 @@
       };
 
       this.removeCol = function(index) {
-        if (ctrl.display.settings.columns[index].type === 'field') {
-          ctrl.hiddenColumns.push(ctrl.display.settings.columns[index]);
-        }
         ctrl.display.settings.columns.splice(index, 1);
       };
 
-      this.restoreCol = function(index) {
-        ctrl.display.settings.columns.push(ctrl.hiddenColumns[index]);
-        ctrl.hiddenColumns.splice(index, 1);
+      this.getColumnIndex = function(key) {
+        key = selectToKey(key);
+        return ctrl.display.settings.columns.findIndex(col => key === col.key);
+      };
+
+      this.columnExists = function(key) {
+        return ctrl.getColumnIndex(key) > -1;
+      };
+
+      this.toggleColumn = function(key) {
+        let index = ctrl.getColumnIndex(key);
+        if (index > -1) {
+          ctrl.removeCol(index);
+        } else {
+          ctrl.display.settings.columns.push(searchMeta.fieldToColumn(key, initDefaults));
+        }
       };
 
       this.getExprFromSelect = function(key) {
@@ -121,7 +136,7 @@
       };
 
       this.getFieldLabel = function(key) {
-        var expr = ctrl.getExprFromSelect(key);
+        var expr = ctrl.getExprFromSelect(selectToKey(key));
         return searchMeta.getDefaultLabel(expr);
       };
 
@@ -294,23 +309,16 @@
 
       // Helper function to sort active from hidden columns and initialize each column with defaults
       this.initColumns = function(defaults) {
+        initDefaults = defaults;
         if (!ctrl.display.settings.columns) {
           ctrl.display.settings.columns = _.transform(ctrl.savedSearch.api_params.select, function(columns, fieldExpr) {
             columns.push(searchMeta.fieldToColumn(fieldExpr, defaults));
           });
-          ctrl.hiddenColumns = [];
         } else {
-          var activeColumns = _.collect(ctrl.display.settings.columns, 'key'),
-            selectAliases = _.map(ctrl.savedSearch.api_params.select, function(select) {
-              return _.last(select.split(' AS '));
-            });
-          ctrl.hiddenColumns = _.transform(ctrl.savedSearch.api_params.select, function(hiddenColumns, fieldExpr) {
-            var key = _.last(fieldExpr.split(' AS '));
-            if (!_.includes(activeColumns, key)) {
-              hiddenColumns.push(searchMeta.fieldToColumn(fieldExpr, defaults));
-            }
-          });
-          _.eachRight(activeColumns, function(key, index) {
+          let activeColumns = ctrl.display.settings.columns.map(col => col.key);
+          let selectAliases = ctrl.savedSearch.api_params.select.map(selectExpr => selectToKey(selectExpr));
+          // Delete any column that is no longer in the
+          activeColumns.reverse().forEach((key, index) => {
             if (key && !_.includes(selectAliases, key)) {
               ctrl.display.settings.columns.splice(index, 1);
             }
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html
index 9bb43b853d..b1c2a804bb 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html
@@ -3,7 +3,7 @@
     <i class="crm-i fa-arrows crm-search-move-icon"></i>
     <crm-search-function ng-if="!col.isPseudoField" class="form-inline" mode="select" expr="col.key"></crm-search-function>
     <label ng-if="col.isPseudoField">{{:: col.label }}</label>
-    <button type="button" class="btn-xs pull-right" ng-if="$ctrl.select.length > 1" ng-click="$ctrl.crmSearchAdmin.clearParam('select', $index)" title="{{:: ts('Remove') }}">
+    <button type="button" class="btn btn-xs pull-right" ng-if="$ctrl.select.length > 1" ng-click="$ctrl.crmSearchAdmin.clearParam('select', $index)" title="{{:: ts('Remove') }}">
       <i class="crm-i fa-ban"></i>
     </button>
   </fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html b/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html
index 7ce59d1a95..f533663068 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html
@@ -1,15 +1,28 @@
-<button type="button" class="btn dropdown-toggle btn-secondary-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.getColTypes()">
-    <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 && $ctrl.getColTypes().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>
+<div class="btn-group">
+  <button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="crm-i fa-plus-square-o"></i>
+    {{:: ts('Add/Remove Fields') }} <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <li ng-repeat="item in $ctrl.parent.savedSearch.api_params.select track by $index">
+      <a href ng-click="$ctrl.parent.toggleColumn(item); $event.stopPropagation()">
+        <i class="crm-i fa-{{ $ctrl.parent.columnExists(item) ? 'check-' : '' }}square-o"></i>
+        {{ $ctrl.parent.getFieldLabel(item) }}
+      </a>
+    </li>
+  </ul>
+</div>
+<div class="btn-group" ng-if="$ctrl.getColTypes">
+  <button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="crm-i fa-link"></i>
+    {{:: ts('Add Links, etc.') }} <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <li ng-repeat="(type, col) in $ctrl.getColTypes()">
+      <a href ng-click="$ctrl.parent.addCol(type)">
+        <i class="crm-i {{:: col.icon }}"></i>
+        {{:: col.label }}
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js
index c8803ef76d..fe728842f8 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js
@@ -13,12 +13,7 @@
     templateUrl: '~/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html',
     controller: function($scope, searchMeta) {
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
-        ctrl = this,
-        colTypes = [];
-
-      this.getColTypes = function() {
-        return colTypes;
-      };
+        ctrl = this;
 
       this.$onInit = function () {
         if (!ctrl.display.settings) {
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html
index 7cf9be2c1b..52d56a88b7 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html
@@ -4,13 +4,13 @@
 <fieldset class="crm-search-admin-edit-columns-wrapper">
   <legend>
     {{:: ts('Fields') }}
-    <div ng-if="$ctrl.parent.hiddenColumns.length" ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group btn-group-xs"></div>
   </legend>
+  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
   <p class="help-block">
     {{:: ts("The top-most line will be shown as the searchable title (combine multiple fields using rewrite + tokens).") }}
     {{:: ts("Other lines will be shown below in smaller text, and will not be searchable (except for ID which is always searchable).") }}
   </p>
-  <div class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
+  <fieldset 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>
@@ -37,5 +37,5 @@
       </div>
       <search-admin-icons item="col" ng-if="!$index"></search-admin-icons>
     </fieldset>
-  </div>
+  </fieldset>
 </fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.component.js
index bf1ffc98f8..9efe7d99cd 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.component.js
@@ -13,12 +13,7 @@
     templateUrl: '~/crmSearchAdmin/displays/searchAdminDisplayEntity.html',
     controller: function($scope, crmApi4) {
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
-        ctrl = this,
-        colTypes = [];
-
-      this.getColTypes = function() {
-        return colTypes;
-      };
+        ctrl = this;
 
       this.$onInit = function () {
         ctrl.jobFrequency = CRM.crmSearchAdmin.jobFrequency;
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.html
index 168f182bfe..e33757c899 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.html
@@ -33,9 +33,9 @@
 <fieldset class="crm-search-admin-edit-columns-wrapper">
   <legend>
     {{:: ts('Columns') }}
-    <div ng-if="$ctrl.parent.hiddenColumns.length" 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">
+  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
+  <fieldset 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>
@@ -49,5 +49,5 @@
         </button>
       </div>
     </fieldset>
-  </div>
+  </fieldset>
 </fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
index a2a3cf6a11..f23c796e4f 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
@@ -18,32 +18,35 @@
 <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">
+  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
+  <fieldset 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?') }}">
-        <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>
-        </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.getColLabel(col)" >
-          {{:: ts('Label') }}
-        </label>
-        <input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
-        <crm-search-admin-token-select ng-if="col.label" model="col" field="label" suffix=":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>
+      <i class="crm-i fa-arrows crm-search-move-icon"></i>
+      <button type="button" class="btn btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
+        <i class="crm-i fa-ban"></i>
+      </button>
+      <details>
+        <summary> {{ $ctrl.parent.getColLabel(col) }}</summary>
+        <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>
         </div>
-      </div>
-      <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></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.getColLabel(col)" >
+            {{:: ts('Label') }}
+          </label>
+          <input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
+          <crm-search-admin-token-select ng-if="col.label" model="col" field="label" suffix=":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>
+      </details>
     </fieldset>
-  </div>
+  </fieldset>
 </fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index fa385a3297..d38f00aadc 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -22,32 +22,35 @@
 <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">
+  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
+  <fieldset 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?') }}">
-        <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>
-        </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.getColLabel(col)" >
-          {{:: ts('Label') }}
-        </label>
-        <input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
-        <crm-search-admin-token-select ng-if="col.label" model="col" field="label" suffix=":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>
+      <i class="crm-i fa-arrows crm-search-move-icon"></i>
+      <button type="button" class="btn btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
+        <i class="crm-i fa-ban"></i>
+      </button>
+      <details>
+        <summary>{{ $ctrl.parent.getColLabel(col) }}</summary>
+        <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>
         </div>
-      </div>
-      <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></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.getColLabel(col)" >
+            {{:: ts('Label') }}
+          </label>
+          <input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
+          <crm-search-admin-token-select ng-if="col.label" model="col" field="label" suffix=":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>
+      </details>
     </fieldset>
-  </div>
+  </fieldset>
 </fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 27e9f4da5d..03582cc826 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -48,39 +48,42 @@
 <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">
+  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
+  <fieldset 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 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 crm-flex-1" 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 class="form-inline" ng-if="$ctrl.parent.canBeSortable(col)">
-        <label title="{{:: ts('Allow user to click on header to sort table by this column') }}">
-          <input type="checkbox" ng-checked="col.sortable !== false" ng-click="col.sortable = col.sortable === false" >
-          {{:: ts('Sortable Header') }}
-        </label>
-      </div>
-      <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
-      <div class="form-inline" ng-if="col.type === 'field' && $ctrl.display.settings.tally">
-        <label>{{:: ts('Footer Label') }}</label>
-        <input class="form-control" ng-model="col.tally.label" placeholder="{{:: ts('None') }}">
-        <label>{{:: ts('Footer Aggregate') }}</label>
-        <input class="form-control" ng-model="col.tally.fn" crm-ui-select="{data: $ctrl.getTallyFunctions, placeholder: ts('None'), allowClear: true}">
-      </div>
+      <i class="crm-i fa-arrows crm-search-move-icon"></i>
+      <button type="button" class="btn btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
+        <i class="crm-i fa-ban"></i>
+      </button>
+      <details>
+        <summary>{{ $ctrl.parent.getColLabel(col) }}</summary>
+        <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 crm-flex-1" type="text" ng-model="col.label" >
+        </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 class="form-inline" ng-if="$ctrl.parent.canBeSortable(col)">
+          <label title="{{:: ts('Allow user to click on header to sort table by this column') }}">
+            <input type="checkbox" ng-checked="col.sortable !== false" ng-click="col.sortable = col.sortable === false" >
+            {{:: ts('Sortable Header') }}
+          </label>
+        </div>
+        <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
+        <div class="form-inline" ng-if="col.type === 'field' && $ctrl.display.settings.tally">
+          <label>{{:: ts('Footer Label') }}</label>
+          <input class="form-control" ng-model="col.tally.label" placeholder="{{:: ts('None') }}">
+          <label>{{:: ts('Footer Aggregate') }}</label>
+          <input class="form-control" ng-model="col.tally.fn" crm-ui-select="{data: $ctrl.getTallyFunctions, placeholder: ts('None'), allowClear: true}">
+        </div>
+      </details>
     </fieldset>
-  </div>
+  </fieldset>
 </fieldset>
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index 71093879f4..00674384c3 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -314,3 +314,7 @@ crm-search-admin-import {
   right: 0;
   background-color: white;
 }
+
+#bootstrap-theme .crm-search-admin-edit-columns details summary {
+  font-size: inherit;
+}