From 708a27634686b94a3377cff3f79dec966fe81310 Mon Sep 17 00:00:00 2001
From: colemanw <coleman@civicrm.org>
Date: Wed, 20 Dec 2023 16:16:00 -0500
Subject: [PATCH] SearchKit - Collapse admin display settings in details

---
 .../displays/searchAdminDisplayGrid.html      | 35 ++++----
 .../displays/searchAdminDisplayList.html      | 43 ++++-----
 .../displays/searchAdminDisplayTable.html     | 87 ++++++++++---------
 3 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
index f23c796e4f..eaa120e346 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
@@ -1,20 +1,23 @@
 <div ng-include="'~/crmSearchAdmin/crmSearchAdminDisplayHeader.html'"></div>
-<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
-<fieldset>
-  <div class="form-inline">
-    <label for="crm-search-admin-display-colno">{{:: ts('Layout') }}</label>
-    <select id="crm-search-admin-display-colno" class="form-control" ng-model="$ctrl.display.settings.colno">
-      <option value="2">{{:: ts('2 x 2') }}</option>
-      <option value="3">{{:: ts('3 x 3') }}</option>
-      <option value="4">{{:: ts('4 x 4') }}</option>
-      <option value="5">{{:: ts('5 x 5') }}</option>
-    </select>
-    <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
-  </div>
-  <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
-  <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
-  <search-admin-toolbar-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-toolbar-config>
-</fieldset>
+<details>
+  <summary>{{:: ts('Settings') }}</summary>
+  <fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
+  <fieldset>
+    <div class="form-inline">
+      <label for="crm-search-admin-display-colno">{{:: ts('Layout') }}</label>
+      <select id="crm-search-admin-display-colno" class="form-control" ng-model="$ctrl.display.settings.colno">
+        <option value="2">{{:: ts('2 x 2') }}</option>
+        <option value="3">{{:: ts('3 x 3') }}</option>
+        <option value="4">{{:: ts('4 x 4') }}</option>
+        <option value="5">{{:: ts('5 x 5') }}</option>
+      </select>
+      <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
+    </div>
+    <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
+    <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
+    <search-admin-toolbar-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-toolbar-config>
+  </fieldset>
+</details>
 <fieldset class="crm-search-admin-edit-columns-wrapper">
   <legend>
     {{:: ts('Fields') }}
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index d38f00aadc..ef8525989c 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -1,24 +1,27 @@
 <div ng-include="'~/crmSearchAdmin/crmSearchAdminDisplayHeader.html'"></div>
-<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
-<fieldset>
-  <div class="form-inline">
-    <label for="crm-search-admin-display-style">{{:: ts('Style') }}</label>
-    <select id="crm-search-admin-display-style" class="form-control" ng-model="$ctrl.display.settings.style" ng-change="$ctrl.display.settings.symbol = ''">
-      <option value="ul">{{:: ts('Bullets') }}</option>
-      <option value="ol">{{:: ts('Numbers') }}</option>
-    </select>
-    <label for="crm-search-admin-display-symbol">{{:: ts('Symbol') }}</label>
-    <select id="crm-search-admin-display-symbol" class="form-control" ng-model="$ctrl.display.settings.symbol">
-      <option ng-repeat="symbol in $ctrl.symbols[$ctrl.display.settings.style]" value="{{ symbol.char }}">
-        {{ symbol.label }}
-      </option>
-    </select>
-    <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
-  </div>
-  <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
-  <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
-  <search-admin-toolbar-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-toolbar-config>
-</fieldset>
+<details>
+  <summary>{{:: ts('Settings') }}</summary>
+  <fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
+  <fieldset>
+    <div class="form-inline">
+      <label for="crm-search-admin-display-style">{{:: ts('Style') }}</label>
+      <select id="crm-search-admin-display-style" class="form-control" ng-model="$ctrl.display.settings.style" ng-change="$ctrl.display.settings.symbol = ''">
+        <option value="ul">{{:: ts('Bullets') }}</option>
+        <option value="ol">{{:: ts('Numbers') }}</option>
+      </select>
+      <label for="crm-search-admin-display-symbol">{{:: ts('Symbol') }}</label>
+      <select id="crm-search-admin-display-symbol" class="form-control" ng-model="$ctrl.display.settings.symbol">
+        <option ng-repeat="symbol in $ctrl.symbols[$ctrl.display.settings.style]" value="{{ symbol.char }}">
+          {{ symbol.label }}
+        </option>
+      </select>
+      <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
+    </div>
+    <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
+    <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
+    <search-admin-toolbar-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-toolbar-config>
+  </fieldset>
+</details>
 <fieldset class="crm-search-admin-edit-columns-wrapper">
   <legend>
     {{:: ts('Fields') }}
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 03582cc826..e2220662f6 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -1,50 +1,53 @@
 <div ng-include="'~/crmSearchAdmin/crmSearchAdminDisplayHeader.html'"></div>
-<fieldset ng-if="!$ctrl.display.settings.draggable" ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
-<fieldset>
-  <div ng-if="$ctrl.canBeDraggable" class="form-inline">
-    <div class="checkbox-inline form-control">
-      <label>
-        <input type="checkbox" ng-checked="!!$ctrl.display.settings.draggable" ng-click="$ctrl.toggleDraggable()">
-        <span>{{:: ts('Drag and drop sorting') }}</span>
-      </label>
+<details>
+  <summary>{{:: ts('Settings') }}</summary>
+  <fieldset ng-if="!$ctrl.display.settings.draggable" ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
+  <fieldset>
+    <div ng-if="$ctrl.canBeDraggable" class="form-inline">
+      <div class="checkbox-inline form-control">
+        <label>
+          <input type="checkbox" ng-checked="!!$ctrl.display.settings.draggable" ng-click="$ctrl.toggleDraggable()">
+          <span>{{:: ts('Drag and drop sorting') }}</span>
+        </label>
+      </div>
     </div>
-  </div>
-  <div class="form-inline">
-    <search-admin-tasks-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-tasks-config>
-  </div>
-  <div class="form-inline">
-    <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
-  </div>
-  <div class="form-inline">
-    <label>{{:: ts('Table Style') }}</label>
-    <div class="checkbox-inline form-control" ng-repeat="style in $ctrl.tableClasses">
-      <label>
-        <input type="checkbox" ng-checked="$ctrl.includes($ctrl.display.settings.classes, style.name)" ng-click="$ctrl.toggle($ctrl.display.settings.classes, style.name)">
-        <span>{{:: style.label }}</span>
-      </label>
+    <div class="form-inline">
+      <search-admin-tasks-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-tasks-config>
     </div>
-  </div>
-  <search-admin-css-rules label="{{:: ts('Row Style') }}" item="$ctrl.display.settings"></search-admin-css-rules>
-  <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
-  <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
-  <div class="form-inline crm-search-admin-flex-row" title="{{:: ts('Text to display if the table is empty.') }}">
-    <label for="crm-search-admin-display-no-results-text">{{:: ts('No Results Text') }}</label>
-    <input class="form-control crm-flex-1" id="crm-search-admin-display-no-results-text" ng-model="$ctrl.display.settings.noResultsText" placeholder="{{:: ts('None found.') }}">
-  </div>
-  <search-admin-toolbar-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-toolbar-config>
-  <div class="form-inline">
-    <div class="checkbox-inline form-control" title="{{:: ts('Shows grand totals or other statistics, configured per-column.') }}">
-      <label>
-        <input type="checkbox" ng-click="$ctrl.toggleTally()" ng-checked="!!$ctrl.display.settings.tally">
-        <span>{{:: ts('Show Totals in Footer') }}</span>
-      </label>
+    <div class="form-inline">
+      <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
     </div>
-    <div class="form-group" ng-if="$ctrl.display.settings.tally">
-      <label for="crm-search-admin-table-tally-title">{{:: ts('Label') }}</label>
-      <input id="crm-search-admin-table-tally-title" ng-model="$ctrl.display.settings.tally.label" class="form-control">
+    <div class="form-inline">
+      <label>{{:: ts('Table Style') }}</label>
+      <div class="checkbox-inline form-control" ng-repeat="style in $ctrl.tableClasses">
+        <label>
+          <input type="checkbox" ng-checked="$ctrl.includes($ctrl.display.settings.classes, style.name)" ng-click="$ctrl.toggle($ctrl.display.settings.classes, style.name)">
+          <span>{{:: style.label }}</span>
+        </label>
+      </div>
     </div>
-  </div>
-</fieldset>
+    <search-admin-css-rules label="{{:: ts('Row Style') }}" item="$ctrl.display.settings"></search-admin-css-rules>
+    <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
+    <search-admin-placeholder-config display="$ctrl.display"></search-admin-placeholder-config>
+    <div class="form-inline crm-search-admin-flex-row" title="{{:: ts('Text to display if the table is empty.') }}">
+      <label for="crm-search-admin-display-no-results-text">{{:: ts('No Results Text') }}</label>
+      <input class="form-control crm-flex-1" id="crm-search-admin-display-no-results-text" ng-model="$ctrl.display.settings.noResultsText" placeholder="{{:: ts('None found.') }}">
+    </div>
+    <search-admin-toolbar-config display="$ctrl.display" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></search-admin-toolbar-config>
+    <div class="form-inline">
+      <div class="checkbox-inline form-control" title="{{:: ts('Shows grand totals or other statistics, configured per-column.') }}">
+        <label>
+          <input type="checkbox" ng-click="$ctrl.toggleTally()" ng-checked="!!$ctrl.display.settings.tally">
+          <span>{{:: ts('Show Totals in Footer') }}</span>
+        </label>
+      </div>
+      <div class="form-group" ng-if="$ctrl.display.settings.tally">
+        <label for="crm-search-admin-table-tally-title">{{:: ts('Label') }}</label>
+        <input id="crm-search-admin-table-tally-title" ng-model="$ctrl.display.settings.tally.label" class="form-control">
+      </div>
+    </div>
+  </fieldset>
+</details>
 <fieldset class="crm-search-admin-edit-columns-wrapper">
   <legend>
     {{:: ts('Columns') }}
-- 
2.25.1