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 0beec12e19e625670803e65c073f630ea6da1cf0..b7dd93694d504d2edf4609227dc9cff6e8c4640e 100644 (file)
--- 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 22907df59ca2dd697bbc0ca4bcb8f2fad40eebb4..8752bcc21003ff2790f8b188dcc60965454eb79c 100644 (file)
--- 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 f8e5e383e01d3094648d2d2072488a02563bac0f..b8cd2eec62390e28278662a5c3176759cb71c1a6 100644 (file)
--- 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 de38e38c32b94436b98be8cf04dbfea736719714..ed782602408c36b79942d07604525289f882c3e3 100644 (file)
--- 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 088e4bd712d6e678c84278e5738598cc54a8744a..9d172571b40bf31199560d76fdcaf0b5c196aead 100644 (file)
--- 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>