From: colemanw <coleman@civicrm.org>
Date: Mon, 4 Dec 2023 11:04:01 +0000 (+0000)
Subject: FormBuilder - Use summary/details instead of af-collapsible
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=952fa782942232c8021d575dee70ee690f2538a3;p=civicrm-core.git

FormBuilder - Use summary/details instead of af-collapsible
---

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.component.js
index 0beec12e19..b7dd93694d 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.component.js
@@ -12,28 +12,15 @@
       var ts = $scope.ts = CRM.ts('org.civicrm.afform_admin'),
         ctrl = this;
 
-      this.isCollapsible = function() {
-        return afGui.hasClass(ctrl.node, 'af-collapsible');
-      };
-
       this.isCollapsed = function() {
-        return afGui.hasClass(ctrl.node, 'af-collapsible af-collapsed');
-      };
-
-      this.toggleCollapsible = function() {
-        // Node must have a title to be collapsible
-        if (ctrl.isCollapsible() || !ctrl.node['af-title']) {
-          afGui.modifyClasses(ctrl.node, 'af-collapsible af-collapsed');
-        } else {
-          afGui.modifyClasses(ctrl.node, null, 'af-collapsible');
-        }
+        return !('open' in ctrl.node);
       };
 
       this.toggleCollapsed = function() {
         if (ctrl.isCollapsed()) {
-          afGui.modifyClasses(ctrl.node, 'af-collapsed');
+          ctrl.node.open = '';
         } else {
-          afGui.modifyClasses(ctrl.node, null, 'af-collapsed');
+          delete ctrl.node.open;
         }
       };
 
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.html b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.html
index 22907df59c..8752bcc210 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.html
@@ -1,5 +1,4 @@
-<-- Show the following if Element dropdown is collapsible -->
-<a href ng-click="$ctrl.toggleCollapsed(); $event.stopPropagation();" class="btn btn-sm btn-default" ng-class="{invisible: !$ctrl.isCollapsible()}">
-  <i class="crm-i fa-caret-{{ $ctrl.isCollapsed() ? 'right' : 'down' }}"></i>
-  {{ $ctrl.isCollapsed() ? ts('Closed') : ts('Open') }}
-</a>
+<label ng-click="$ctrl.toggleCollapsed(); $event.stopPropagation();">
+  <i class="crm-i fa{{ $ctrl.isCollapsed() ? '-check' : '' }}-square-o"></i>
+  {{:: ts('Collapsed') }}
+</label>
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html
index f8e5e383e0..b8cd2eec62 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html
@@ -8,6 +8,7 @@
     </select>
   </div>
 </li>
+<li><af-gui-menu-item-collapsible ng-if="!block && $ctrl.node['#tag'] === 'details'" node="$ctrl.node" class="af-gui-field-select-in-dropdown form-inline"></af-gui-menu-item-collapsible></li>
 <li ng-if="isRepeatable()" ng-click="$event.stopPropagation()">
   <div class="af-gui-field-select-in-dropdown form-inline">
     <label ng-click="$ctrl.toggleRepeat()">
@@ -30,7 +31,6 @@
     </div>
   </div>
 </li>
-<li><af-gui-menu-item-collapsible ng-if="!block" node="$ctrl.node" class="af-gui-field-select-in-dropdown form-inline"></af-gui-menu-item-collapsible></li>
 <li><af-gui-menu-item-style node="$ctrl.node"></af-gui-menu-item-style></li>
 <li><af-gui-menu-item-border node="$ctrl.node"></af-gui-menu-item-border></li>
 <li><af-gui-menu-item-background node="$ctrl.node"></af-gui-menu-item-background></li>
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
index de38e38c32..ed78260240 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
@@ -140,9 +140,10 @@
       };
 
       this.getCollapsibleIcon = function() {
-        if (afGui.hasClass(ctrl.node, 'af-collapsible')) {
-          return afGui.hasClass(ctrl.node, 'af-collapsed') ? 'fa-caret-right' : 'fa-caret-down';
+        if (ctrl.node['#tag'] === 'details') {
+          return 'open' in ctrl.node ? 'fa-caret-down' : 'fa-caret-right';
         }
+        return '';
       };
 
       // Sets min value for af-repeat as a string, returns it as an int
@@ -370,8 +371,6 @@
             ctrl.node['af-title'] = value;
           } else {
             delete ctrl.node['af-title'];
-            // With no title, cannot be collapsible
-            afGui.modifyClasses(ctrl.node, 'af-collapsible af-collapsed');
           }
         }
         return ctrl.node['af-title'];
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchContainer-menu.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchContainer-menu.html
index 088e4bd712..9d172571b4 100644
--- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchContainer-menu.html
+++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchContainer-menu.html
@@ -6,7 +6,7 @@
     </select>
   </div>
 </li>
-<li><af-gui-menu-item-collapsible node="$ctrl.node" class="af-gui-field-select-in-dropdown form-inline"></af-gui-menu-item-collapsible></li>
+<li><af-gui-menu-item-collapsible ng-if="$ctrl.node['#tag'] === 'details'" node="$ctrl.node" class="af-gui-field-select-in-dropdown form-inline"></af-gui-menu-item-collapsible></li>
 <li><af-gui-menu-item-style node="$ctrl.node"></af-gui-menu-item-style></li>
 <li><af-gui-menu-item-border node="$ctrl.node"></af-gui-menu-item-border></li>
 <li><af-gui-menu-item-background node="$ctrl.node"></af-gui-menu-item-background></li>