Update style for Accordion

templaza · Aug 15, 2024 · 9878568 · 9878568
1 parent 8027bad
commit 9878568
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/framework/elements/accordion/accordion.php b/framework/elements/accordion/accordion.php
@@ -15,6 +15,7 @@
 
 use Astroid\Helper;
 use Joomla\CMS\Factory;
+use Astroid\Helper\Style;
 
 extract($displayData);
 $accordions     = $params->get('accordions', '');
@@ -44,4 +45,37 @@
 
     echo '</div>';
 }
-echo '</div>';
+echo '</div>';
+
+$title_font_style   =   $params->get('title_font_style');
+if (!empty($title_font_style)) {
+    Style::renderTypography('#'.$element->id.' .accordion-button', $title_font_style);
+}
+
+$content_font_style =   $params->get('content_font_style');
+if (!empty($content_font_style)) {
+    Style::renderTypography('#'.$element->id.' .accordion-body', $content_font_style);
+}
+
+$color          = Style::getColor($params->get('color', ''));
+$color_hover    = Style::getColor($params->get('color_hover', ''));
+$color_active   = Style::getColor($params->get('color_active', ''));
+$bgcolor        = Style::getColor($params->get('bgcolor', ''));
+$bgcolor_hover  = Style::getColor($params->get('bgcolor_hover', ''));
+$bgcolor_active = Style::getColor($params->get('bgcolor_active', ''));
+
+// Color style
+$element->style->child('.accordion-button')->addCss('color', $color['light']);
+$element->style_dark->child('.accordion-button')->addCss('color', $color['dark']);
+$element->style->child('.accordion-button')->hover()->addCss('color', $color_hover['light']);
+$element->style_dark->child('.accordion-button')->hover()->addCss('color', $color_hover['dark']);
+$element->style->child('.accordion-button:not(.collapsed)')->addCss('color', $color_active['light']);
+$element->style_dark->child('.accordion-button:not(.collapsed)')->addCss('color', $color_active['dark']);
+
+// Background color style
+$element->style->child('.accordion-button')->addCss('background-color', $bgcolor['light']);
+$element->style_dark->child('.accordion-button')->addCss('background-color', $bgcolor['dark']);
+$element->style->child('.accordion-button')->hover()->addCss('background-color', $bgcolor_hover['light']);
+$element->style_dark->child('.accordion-button')->hover()->addCss('background-color', $bgcolor_hover['dark']);
+$element->style->child('.accordion-button:not(.collapsed)')->addCss('background-color', $bgcolor_active['light']);
+$element->style_dark->child('.accordion-button:not(.collapsed)')->addCss('background-color', $bgcolor_active['dark']);
diff --git a/framework/elements/accordion/accordion.xml b/framework/elements/accordion/accordion.xml
@@ -9,6 +9,8 @@
         <fields>
             <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
                 <field type="astroidgroup" name="widget_styles" title="ASTROID_WIDGET_STYLES_LABEL"/>
+                <field type="astroidgroup" name="title_options" title="ASTROID_WIDGET_TITLE_OPTIONS_LABEL"/>
+                <field type="astroidgroup" name="content_options" title="ASTROID_WIDGET_CONTENT_OPTIONS_LABEL"/>
                 <field astroidgroup="general" name="accordions" type="astroidsubform" label="ASTROID_WIDGET_ACCORDION_ITEMS_LABEL">
                     <form>
                         <fields>
@@ -23,6 +25,21 @@
                     <option value="">Default</option>
                     <option value="accordion-flush">Flush</option>
                 </field>
+                <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>
+                    <option value="active">TPL_ASTROID_COLOR_ACTIVE</option>
+                </field>
+                <field astroidgroup="widget_styles" ngShow="[color_settings]=='color'" name="color" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
+                <field astroidgroup="widget_styles" ngShow="[color_settings]=='hover'" name="color_hover" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
+                <field astroidgroup="widget_styles" ngShow="[color_settings]=='active'" name="color_active" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
+
+                <field astroidgroup="widget_styles" ngShow="[color_settings]=='color'" name="bgcolor" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL"/>
+                <field astroidgroup="widget_styles" ngShow="[color_settings]=='hover'" name="bgcolor_hover" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL"/>
+                <field astroidgroup="widget_styles" ngShow="[color_settings]=='active'" name="bgcolor_active" type="astroidcolor" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL"/>
+
+                <field astroidgroup="title_options" name="title_font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" columns="1" preview="false"/>
+                <field astroidgroup="content_options" name="content_font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" columns="1" preview="false"/>
             </fieldset>
             <fieldset name="assignment-settings" label="TPL_ASTROID_ASSIGNMENT_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields" articleData="false">
                 <field type="astroidlist" name="assignment_type" label="ASTROID_WIDGET_ASSIGN" default="1">