Improve Accordion and Button style.

templaza · Sep 13, 2024 · b848a9f · b848a9f
1 parent c827df2
commit b848a9f
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 4 deletions.
diff --git a/framework/elements/accordion/accordion.php b/framework/elements/accordion/accordion.php
@@ -27,7 +27,11 @@
     return false;
 }
 $style          = $params->get('style', '');
+$style          = $params->get('style', '');
 $style          = $style !== '' ? ' '. $style : '';
+
+$collapse       = $params->get('collapse', '');
+$always_open    = $params->get('always_open', 0);
 $wa = Factory::getApplication()->getDocument()->getWebAssetManager();
 $wa->useScript('bootstrap.collapse');
 echo '<div class="accordion'.$style.'" id="accordion-'.$element->id.'">';
@@ -36,10 +40,10 @@
     echo '<div class="accordion-item">';
 
     echo '<h2 class="accordion-header">';
-    echo '<button class="accordion-button'.($key != 0 ? ' collapsed' : '').'" type="button" data-bs-toggle="collapse" data-bs-target="#collapse'.$element->id.$key.'" aria-expanded="true" aria-controls="collapse'.$element->id.$key.'">'.$item_params->get('title', '').'</button>';
+    echo '<button class="accordion-button'.($key != 0 || $collapse === 'close-all' ? ' collapsed' : '').'" type="button" data-bs-toggle="collapse" data-bs-target="#collapse'.$element->id.$key.'" aria-expanded="true" aria-controls="collapse'.$element->id.$key.'">'.$item_params->get('title', '').'</button>';
     echo '</h2>';
 
-    echo '<div id="collapse'.$element->id.$key.'" class="accordion-collapse collapse'.($key == 0 ? ' show' : '').'" data-bs-parent="#accordion-'.$element->id.'">';
+    echo '<div id="collapse'.$element->id.$key.'" class="accordion-collapse collapse'.($key == 0 && $collapse === '' ? ' show' : '').'"'.(!$always_open ? ' data-bs-parent="#accordion-'.$element->id.'"' : '').'>';
     echo '<div class="accordion-body">'. $item_params->get('content', '') . '</div>';
     echo '</div>';
 

diff --git a/framework/elements/accordion/accordion.xml b/framework/elements/accordion/accordion.xml
@@ -25,6 +25,11 @@
                     <option value="">Default</option>
                     <option value="accordion-flush">Flush</option>
                 </field>
+                <field astroidgroup="widget_styles" type="astroidlist" name="collapse" label="ASTROID_WIDGET_ACCORDION_COLLAPSE_STYLE_LABEL" default="">
+                    <option value="">ASTROID_WIDGET_ACCORDION_OPEN_FIRST_ITEM_LABEL</option>
+                    <option value="close-all">ASTROID_WIDGET_ACCORDION_CLOSE_ALL_LABEL</option>
+                </field>
+                <field astroidgroup="widget_styles" name="always_open" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_ACCORDION_ALWAYS_OPEN_LABEL"/>
                 <field astroidgroup="widget_styles" name="color_settings" type="astroidradio" width="full" default="color">
                     <option value="color">TPL_ASTROID_COLOR</option>
                     <option value="hover">TPL_ASTROID_COLOR_HOVER</option>

diff --git a/framework/elements/button/button.php b/framework/elements/button/button.php
@@ -47,8 +47,22 @@
     if (isset($btn_params['icon']) && $btn_params['icon']) {
         $title      =   $btn_params['icon_position'] === 'first' ? '<i class="'.$btn_params['icon'].' me-2"></i>' . $title : $title . '<i class="'.$btn_params['icon'].' ms-2"></i>';
     }
+    $btn_element_size = $button_size;
+    if (isset($btn_params['button_size']) && $btn_params['button_size']) {
+        $btn_element_size = ' ' . $btn_params['button_size'];
+        // Item Padding
+        if (trim($btn_params['button_size']) == 'custom') {
+            $item_padding   =   $btn_params['btn_padding'];
+            if (!empty($item_padding)) {
+                $padding = \json_decode($item_padding, false);
+                foreach ($padding as $device => $props) {
+                    $element->style->child('#btn-'.$button->id)->addStyle(Style::spacingValue($props, "padding"), $device);
+                }
+            }
+        }
+    }
     $link_target    =   !empty($btn_params['link_target']) ? ' target="'.$btn_params['link_target'].'"' : '';
-    echo '<a id="btn-'.$button->id.'" href="' .$btn_params['link']. '" class="btn btn-' .(intval($btn_params['button_outline']) ? 'outline-' : ''). $btn_params['button_style'] . $button_size . $bd_radius . '"'.$link_target.'>'.$title.'</a>';
+    echo '<a id="btn-'.$button->id.'" href="' .$btn_params['link']. '" class="btn btn-' .(intval($btn_params['button_outline']) ? 'outline-' : ''). $btn_params['button_style'] . $btn_element_size . $bd_radius . '"'.$link_target.'>'.$title.'</a>';
 }
 echo '</div>';
 

diff --git a/framework/elements/button/button.xml b/framework/elements/button/button.xml
@@ -38,6 +38,13 @@
                                     <option value="link">Link</option>
                                 </field>
                                 <field name="button_outline" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_BUTTON_OUTLINE_LABEL"/>
+                                <field type="astroidlist" name="button_size" label="ASTROID_WIDGET_BUTTON_SIZE_LABEL" default="">
+                                    <option value="">Default</option>
+                                    <option value="btn-lg">Large</option>
+                                    <option value="btn-sm">Small</option>
+                                    <option value="custom">Custom</option>
+                                </field>
+                                <field ngShow="[button_size]=='custom'" name="btn_padding" type="astroidspacing" label="ASTROID_WIDGET_PADDING_LABEL" />
                             </fieldset>
                         </fields>
                     </form>

diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -1647,4 +1647,8 @@ ASTROID_WIDGET_FORM_SHOW_LABEL_LABEL="Show Label"
 
 ; Accordion
 ASTROID_WIDGET_ACCORDION_LABEL="Accordion"
-ASTROID_WIDGET_ACCORDION_ITEMS_LABEL="Accordion Items"
+ASTROID_WIDGET_ACCORDION_ITEMS_LABEL="Accordion Items"
+ASTROID_WIDGET_ACCORDION_COLLAPSE_STYLE_LABEL="Collapse style"
+ASTROID_WIDGET_ACCORDION_CLOSE_ALL_LABEL="Close All"
+ASTROID_WIDGET_ACCORDION_OPEN_FIRST_ITEM_LABEL="Open first item"
+ASTROID_WIDGET_ACCORDION_ALWAYS_OPEN_LABEL="Always Open?"