Add icon to Button widget

templaza · Sep 12, 2024 · 241952f · 241952f
1 parent 7d8c6c5
commit 241952f
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 37 deletions.
diff --git a/assets/vendor/manager/dist/index.css b/assets/vendor/manager/dist/index.css
diff --git a/assets/vendor/manager/dist/index.html b/assets/vendor/manager/dist/index.html
diff --git a/assets/vendor/manager/dist/index.js b/assets/vendor/manager/dist/index.js
diff --git a/assets/vendor/manager/src/Article.vue b/assets/vendor/manager/src/Article.vue
@@ -9,10 +9,10 @@ library.add(faCircle, faArrowsLeftRight, faTrash, faDownload);
 const props = defineProps(['widget_json_id']);
 const data = JSON.parse(document.getElementById(props.widget_json_id+'_json').innerHTML);
 provide('constant', data.constant);
-const widgets = ref();
+const sections = ref();
 const save_disabled = ref(false);
 onBeforeMount(()=>{
-    widgets.value = data.widgets;
+    sections.value = data.widgets;
 })
 
 const _showModal = ref(false);
@@ -83,24 +83,27 @@ function elementState(widget) {
 }
 </script>
 <template>
-    <div class="article-layout-data row row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-sm-1 row-cols-2 g-4">
-        <div v-for="widget in widgets">
-            <div class="article-widget card card-body border" :class="{'element-disabled' : !widget.state}">
-                <div class="d-flex justify-content-between">
-                    <div class="widget-name">
-                        <div><i class="text-body-tertiary me-2" :class="data.constant.form_template[widget.type].info.icon"></i>{{ widget.params.find((param) => param.name === 'title').value }}</div>
-                        <div class="text-body-tertiary form-text">{{ widget.type }}</div>
-                    </div>
-                    <div class="widget-toolbar">
-                        <ul v-if="!save_disabled" class="nav">
-                            <li class="nav-item">
-                                <a class="nav-link py-0 px-1" href="#" @click.prevent="editElement(widget)"><i class="fas fa-pencil-alt me-1"></i>Edit</a>
-                            </li>
-                            <li class="nav-item">
-                                <a class="nav-link py-0 px-1" href="#" data-bs-toggle="tooltip" data-bs-title="Enable/Disable Element" @click.prevent="elementState(widget)"><i class="me-1" :class="{'fas fa-eye' : widget.state, 'fas fa-eye-slash' : !widget.state}"></i>{{ (widget.state ? 'Enabled' : 'Disabled') }}</a>
-                            </li>
-                        </ul>
-                        <i v-else class="fa-solid fa-spinner fa-spin-pulse"></i>
+    <div v-for="section in sections" class="mb-4">
+        <h3>{{ section.title }}</h3>
+        <div class="article-layout-data row row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-sm-1 row-cols-2 g-4">
+            <div v-for="widget in section.widgets">
+                <div class="article-widget card card-body border" :class="{'element-disabled' : !widget.state}">
+                    <div class="d-flex justify-content-between">
+                        <div class="widget-name">
+                            <div class="title"><i class="text-body-tertiary me-2" :class="data.constant.form_template[widget.type].info.icon"></i>{{ widget.params.find((param) => param.name === 'title').value }}</div>
+                            <div class="text-body-tertiary form-text">{{ widget.type }}</div>
+                        </div>
+                        <div class="widget-toolbar">
+                            <ul v-if="!save_disabled" class="nav flex-column justify-content-end text-end">
+                                <li class="nav-item">
+                                    <a class="nav-link py-0 px-1" href="#" @click.prevent="editElement(widget)"><i class="fas fa-pencil-alt me-1"></i>Edit</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link py-0 px-1" href="#" data-bs-toggle="tooltip" data-bs-title="Enable/Disable Element" @click.prevent="elementState(widget)"><i class="me-1" :class="{'fas fa-eye' : widget.state, 'fas fa-eye-slash' : !widget.state}"></i>{{ (widget.state ? 'Enabled' : 'Disabled') }}</a>
+                                </li>
+                            </ul>
+                            <i v-else class="fa-solid fa-spinner fa-spin-pulse"></i>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/assets/vendor/manager/src/assets/article_data.scss b/assets/vendor/manager/src/assets/article_data.scss
@@ -3,7 +3,10 @@
     .nav {
         --bs-nav-link-color: var(--bs-dark-text-emphasis);
         --bs-nav-link-hover-color: var(--as-violet);
-        font-size: .895rem;
+        font-size: 0.8rem;
+    }
+    .title {
+        font-size: 0.897rem;
     }
     .widget-toolbar {
         .nav {

diff --git a/framework/elements/button/button.php b/framework/elements/button/button.php
@@ -43,8 +43,12 @@
             $bd_radius = '';
         }
     }
+    $title = $btn_params['title'];
+    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>';
+    }
     $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.'>'.$btn_params['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'] . $button_size . $bd_radius . '"'.$link_target.'>'.$title.'</a>';
 }
 echo '</div>';
 

diff --git a/framework/elements/button/button.xml b/framework/elements/button/button.xml
@@ -21,6 +21,11 @@
                                     <option value="_parent">Parent Frame</option>
                                     <option value="_top">Full body of the window</option>
                                 </field>
+                                <field type="astroidicons" label="ASTROID_WIDGET_ICON_LABEL" name="icon"/>
+                                <field ngShow="[icon]!=''" type="astroidlist" label="ASTROID_WIDGET_ICON_POSITION_LABEL" name="icon_position" default="first">
+                                    <option value="first">ASTROID_WIDGET_ICON_POSITION_FIRST_LABEL</option>
+                                    <option value="last">ASTROID_WIDGET_ICON_POSITION_LAST_LABEL</option>
+                                </field>
                                 <field type="astroidlist" label="ASTROID_WIDGET_GLOBAL_STYLES_LABEL" name="button_style" default="primary">
                                     <option value="primary">Primary</option>
                                     <option value="secondary">Secondary</option>

diff --git a/framework/fields/astroidlayoutdata.php b/framework/fields/astroidlayoutdata.php
@@ -86,6 +86,8 @@ protected function getInput() {
                 $form_template  =   $constant['form_template'];
                 $layout     =   json_decode($sublayout['data'], true);
                 foreach ($layout['sections'] as $section) {
+                    $section_widgets = array();
+
                     foreach ($section['rows'] as $row) {
                         foreach ($row['cols'] as $col) {
                             foreach ($col['elements'] as $element) {
@@ -97,11 +99,18 @@ protected function getInput() {
                                         $element['state'] = $widget_data['state'];
                                         $element['params'] = array_merge($element['params'], $widget_data['params']);
                                     }
-                                    $widgets[]  =   $element;
+                                    $section_widgets[]  =   $element;
                                 }
                             }
                         }
                     }
+                    if (count($section_widgets)) {
+                        $section_params = Helper::loadParams($section['params']);
+                        $widgets[$section['id']] = [
+                            'title'     =>  $section_params->get('title', ''),
+                            'widgets'   =>  $section_widgets
+                        ];
+                    }
                 }
                 $json = [
                     'article_id' => $id,

diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -1393,6 +1393,9 @@ ASTROID_WIDGET_BUTTON_LINK_DESC="Add link of your button"
 ASTROID_WIDGET_BUTTON_OUTLINE_LABEL="Outline Style?"
 ASTROID_WIDGET_BUTTON_GROUP_LABEL="Enable Button Group?"
 ASTROID_WIDGET_BUTTON_MARGIN_TOP="Button Margin Top"
+ASTROID_WIDGET_ICON_POSITION_LABEL="Icon Position"
+ASTROID_WIDGET_ICON_POSITION_FIRST_LABEL="Before Title"
+ASTROID_WIDGET_ICON_POSITION_LAST_LABEL="After Title"
 
 ; Icon Widget
 ASTROID_WIDGET_ICONS_LABEL="Icons"
@@ -1457,6 +1460,7 @@ ASTROID_BEFORE_TITLE="Before Title"
 ASTROID_AFTER_TITLE="After Title"
 ASTROID_WIDGET_ENABLE_GRID_MATCH="Enable Grid Match"
 ASTROID_WIDGET_VERTICAL_MIDDLE="Vertical Align Middle"
+ASTROID_WIDGET_ENABLE_BACKGROUND_IMAGE="Enable Background Image"
 
 ; Video Button
 ASTROID_WIDGET_VIDEO_BUTTON_LABEL="Video Button"