Re-style layout modal. Add Heading Widget

templaza · Nov 28, 2023 · 5a25886 · 5a25886
1 parent 56e5bd3
commit 5a25886
Show file tree

Hide file tree

Showing 18 changed files with 173 additions and 75 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/index.html b/assets/vendor/manager/index.html
diff --git a/assets/vendor/manager/src/assets/_astroidradio.scss b/assets/vendor/manager/src/assets/_astroidradio.scss
@@ -1,5 +1,7 @@
 .astroid-radio {
     .form-switch {
+        min-height: 2rem;
+        margin-bottom: 1rem;
         .form-check-input {
             width: 3.5rem;
             height: 1.9rem;

diff --git a/assets/vendor/manager/src/assets/_general.scss b/assets/vendor/manager/src/assets/_general.scss
@@ -0,0 +1,23 @@
+.astroid-heading-line {
+    overflow: hidden;
+    >* {
+        display: inline-block;
+        position: relative;
+        color: var(--as-violet);
+    }
+    >::before, >::after {
+        content: "";
+        position: absolute;
+        top: calc(50% - (calc(0.2px + 0.05em)/ 2));
+        width: 2000px;
+        border-bottom: 3px solid var(--bs-border-color);
+    }
+    >::before {
+        right: 100%;
+        margin-right: calc(5px + 0.3em);
+    }
+    >::after {
+        left: 100%;
+        margin-left: calc(5px + 0.3em);
+    }
+}
diff --git a/assets/vendor/manager/src/assets/_layoutbuilder.scss b/assets/vendor/manager/src/assets/_layoutbuilder.scss
@@ -200,4 +200,7 @@
             background-color: var(--as-layout-block-bg);
         }
     }
+    [class^=group-] {
+        margin-bottom: 1rem;
+    }
 }
diff --git a/assets/vendor/manager/src/assets/base.scss b/assets/vendor/manager/src/assets/base.scss
@@ -1,4 +1,5 @@
 @import "variables";
+@import "general";
 @import "colormode";
 @import "navbar";
 @import "buttons";

diff --git a/assets/vendor/manager/src/components/helpers/Fields.vue b/assets/vendor/manager/src/components/helpers/Fields.vue
@@ -149,8 +149,8 @@ function updateContentLayout() {
         <Presets :field="props.field" :config="props.constant" @update:loadPreset="(value) => {emit('update:loadPreset', value)}" @update:getPreset="(value) => {emit('update:getPreset', value)}" />
     </div>
     <div v-else-if="props.field.input.type === `astroidheading`" class="astroid-heading">
-        <h3>{{ props.field.input.title }}</h3>
-        <div>{{ props.field.input.description }}</div>
+        <h5 v-if="props.field.input.title">{{ props.field.input.title }}</h5>
+        <p v-if="props.field.input.description" class="form-text">{{ props.field.input.description }}</p>
     </div>
     <div v-else-if="props.field.input.type === `astroidhidden`" class="astroid-hidden">
         <input type="hidden" :id="props.field.input.id" :name="props.field.input.name" v-model="props.scope[props.field.name]">

diff --git a/assets/vendor/manager/src/components/helpers/Modal.vue b/assets/vendor/manager/src/components/helpers/Modal.vue
@@ -39,8 +39,8 @@ function saveModal(){
 }
 </script>
 <template>
-    <div class="astroid-modal modal d-block" :id="props.element.type+`-`+props.element.id" tabindex="-1" aria-hidden="true" @click.self="emit('update:closeElement')">
-        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
+    <div class="astroid-modal modal d-block" :id="props.element.type+`-`+props.element.id" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
             <div class="modal-content">
                 <div class="position-absolute top-0 end-0 p-3">
                     <button type="button" class="btn-close inverted" aria-label="Close" @click="emit('update:closeElement')"></button>
@@ -53,27 +53,22 @@ function saveModal(){
                 <div class="tab-content modal-body" :id="`modal-tab-content-`+props.element.id">
                     <div v-for="(fieldset, idx) in form.content" :key="fieldset.name" class="tab-pane fade" :class="{'show active' : idx === 0}" :id="fieldset.name+`-tab-pane-`+props.element.id" role="tabpanel" :aria-labelledby="fieldset.name+`-tab`" tabindex="0">
                         <div v-for="(group, gid) in fieldset.childs" :key="gid" :class="`group-`+gid">
-                            <div v-for="(field, fid) in group.fields" :key="field.id" :class="(fid !== 0 && field.input.type !== 'astroidhidden' && field.input.type !== 'hidden' ? 'mt-3 pt-3 border-top': '')" v-show="checkShow(field)">
-                                <div class="row">
-                                    <div v-if="(field.label || field.description) && field.input.type !== `astroidheading`" class="col-lg-5">
-                                        <div v-if="(field.input.type === `astroidradio` && field.input.role !== 'switch') || (['astroidpreloaders', 'astroidmedia', 'astroidcolor', 'astroidicon', 'astroidcalendar', 'astroidgradient', 'astroidspacing'].includes(field.input.type))" class="form-label" v-html="field.label"></div>
-                                        <label v-else :for="field.input.id" class="form-label" v-html="field.label"></label>
-                                        <p v-if="field.description !== ''" v-html="field.description" class="form-text"></p>
-                                    </div>
-                                    <div :class="{
-                                        'col-lg-7' : (field.label || field.description) && field.input.type !== `astroidheading`,
-                                        'col-12': !(field.label || field.description) || field.input.type === `astroidheading`
-                                    }">
-                                        <div v-if="typeof field.type !== 'undefined' && field.type === `json`">
-                                            <Fields 
-                                                :field="field" 
-                                                :scope="params"
-                                                :constant="props.constant" 
-                                                />
-                                        </div>
-                                        <div v-else v-html="field.input"></div>
-                                    </div>
+                            <div v-if="group.title || group.description" class="heading-group mb-4">
+                                <h5 v-if="group.title" class="astroid-heading-line"><span>{{ group.title }}</span></h5>
+                                <p v-if="group.description" class="form-text">{{ group.description }}</p>
+                            </div>
+                            <div v-for="field in group.fields" :key="field.id" class="mb-4" v-show="checkShow(field)">
+                                <div v-if="(field.input.type === `astroidradio` && field.input.role !== 'switch') || (['astroidpreloaders', 'astroidmedia', 'astroidcolor', 'astroidicon', 'astroidcalendar', 'astroidgradient', 'astroidspacing'].includes(field.input.type))" class="form-label fw-bold" v-html="field.label"></div>
+                                <label v-else-if="field.input.type !== `astroidheading`" :for="field.input.id" class="form-label fw-bold" v-html="field.label"></label>
+                                <div v-if="typeof field.type !== 'undefined' && field.type === `json`">
+                                    <Fields 
+                                        :field="field" 
+                                        :scope="params"
+                                        :constant="props.constant" 
+                                        />
                                 </div>
+                                <div v-else v-html="field.input"></div>
+                                <p v-if="field.description !== ''" v-html="field.description" class="form-text"></p>
                             </div>
                         </div>
                     </div>

diff --git a/assets/vendor/manager/src/components/helpers/Typography.vue b/assets/vendor/manager/src/components/helpers/Typography.vue
@@ -32,6 +32,20 @@ const system_fonts = {
     "Trebuchet MS, Helvetica, sans-serif" : 'Trebuchet MS, Helvetica',
     "Verdana, Geneva, sans-serif" : 'Verdana, Geneva'
 }
+const quotes = [
+    "I love you and that's the beginning and end of everything.",
+    'I saw that you were perfect, and so I loved you. Then I saw that you were not perfect and I loved you even more.',
+    "You know you're in love when you can't fall asleep because reality is finally better than your dreams.",
+    "Love is that condition in which the happiness of another person is essential to your own.",
+    "The best thing to hold onto in life is each other.",
+    "I need you like a heart needs a beat.",
+    "I am who I am because of you. You are every reason, every hope, and every dream I've ever had.",
+    "If I had a flower for every time I thought of you.. I could walk through my garden forever.",
+    "Take my hand, take my whole life too. For I can't help falling in love with you.",
+    "If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you.",
+    "You are the finest, loveliest, tenderest, and most beautiful person I have ever known and even that is an understatement.",
+    "In all the world, there is no heart for me like yours. In all the world, there is no love for you like mine."
+];
 const options= reactive({
     'system': [],
     'google': [],
@@ -176,9 +190,15 @@ function changeColor(color) {
     }
     updateColor(_color[_currentColorMode.value]);
 }
+
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
 </script>
 <template>
-    <div class="row row-cols-lg-2 row-cols-xl-3 g-4">
+    <div class="row g-4" :class="`row-cols-lg-`+(Math.ceil(props.field.input.options.columns/2))+` row-cols-xl-`+props.field.input.options.columns">
         <div>
             <div class="row row-cols-1 g-4">
                 <div v-if="props.field.input.options.fontpicker">
@@ -310,7 +330,7 @@ function changeColor(color) {
             'line-height' : props.modelValue['line_height'][currentDevice]+props.modelValue['line_height_unit'][currentDevice],
             'letter-spacing' : props.modelValue['letter_spacing'][currentDevice]+props.modelValue['letter_spacing_unit'][currentDevice],
             }">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut rutrum est, quis aliquet est. Vivamus in blandit purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+            <p>{{ quotes[getRandomInt(0, quotes.length - 1)] }}</p>
             <p>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
             <p class="mb-0">0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</p>
         </div>

diff --git a/framework/elements/default.xml b/framework/elements/default.xml
@@ -3,7 +3,8 @@
    <form>
       <fields>
          <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
-            <field type="astroidtext" class="form-control" label="ASTROID_ELEMENT_TITLE_LABEL" name="title"/>
+            <field type="astroidgroup" name="general"/>
+            <field astroidgroup="general" type="astroidtext" class="form-control" label="ASTROID_ELEMENT_TITLE_LABEL" name="title"/>
             <field type="astroidtext" class="form-control" label="ASTROID_CUSTOM_CLASS" description="ASTROID_CUSTOM_CLASS_DESC" name="customclass"/>
             <field type="astroidtext" class="form-control" label="ASTROID_CUSTOM_ID" description="ASTROID_CUSTOM_ID_DESC" name="customid"/>
          </fieldset>

diff --git a/framework/elements/heading/heading.php b/framework/elements/heading/heading.php
@@ -0,0 +1,21 @@
+<?php
+
+/**
+ * @package   Astroid Framework
+ * @author    Astroid Framework Team https://astroidframe.work
+ * @copyright Copyright (C) 2023 AstroidFrame.work.
+ * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
+ * DO NOT MODIFY THIS FILE DIRECTLY AS IT WILL BE OVERWRITTEN IN THE NEXT UPDATE
+ * You can easily override all files under /astroid/ folder.
+ * Just copy the file to JROOT/templates/YOUR_ASTROID_TEMPLATE/astroid/elements/module_position/module_position.php folder to create and override
+ * See https://docs.joomdev.com/article/override-core-layouts/ for documentation
+ */
+
+// No direct access.
+defined('_JEXEC') or die;
+extract($displayData);
+$title          = $params->get('title', '');
+$html_element   = $params->get('html_element', 'h2');
+if (!empty($title)) {
+    echo '<'.$html_element.'>'. $title . '</'.$html_element.'>';
+}
diff --git a/framework/elements/heading/heading.xml b/framework/elements/heading/heading.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<element>
+    <title>ASTROID_WIDGET_HEADING_LABEL</title>
+    <description>ASTROID_WIDGET_HEADING_DESC</description>
+    <icon>fa-solid fa-heading</icon>
+    <category>Widgets</category>
+    <form>
+        <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 astroidgroup="general" description="ASTROID_WIDGET_HEADING_USE_LINK_DESC" name="use_link" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_HEADING_USE_LINK_LABEL"/>
+                <field astroidgroup="widget_styles" name="html_element" type="astroidlist" label="ASTROID_WIDGET_HTML_ELEMENT_LABEL" default="h2">
+                    <option value="h1">h1</option>
+                    <option value="h2">h2</option>
+                    <option value="h3">h3</option>
+                    <option value="h4">h4</option>
+                    <option value="h5">h5</option>
+                    <option value="h6">h6</option>
+                    <option value="div">div</option>
+                </field>
+                <field astroidgroup="widget_styles" name="font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" font-style-picker="false" font-face="Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="1" font-size-unit="rem" letter-spacing="0" line-height="1" font-weight="400" text-transform="none" color-picker="true" columns="1"/>
+            </fieldset>
+        </fields>
+    </form>
+</element>
diff --git a/framework/elements/module_position/module_position.xml b/framework/elements/module_position/module_position.xml
@@ -8,8 +8,8 @@
    <form>
       <fields>
          <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
-            <field name="position" type="astroidmodulesposition" label="TPL_ASTROID_MODULE_POSITION_LABEL"/>
-            <field name="module_styles" type="astroidmodulesstyle" label="TPL_ASTROID_MODULE_STYLE_LABEL"/>
+            <field astroidgroup="general" name="position" type="astroidmodulesposition" label="TPL_ASTROID_MODULE_POSITION_LABEL"/>
+            <field astroidgroup="general" name="module_styles" type="astroidmodulesstyle" label="TPL_ASTROID_MODULE_STYLE_LABEL"/>
          </fieldset>
       </fields>
    </form>

diff --git a/framework/fields/astroidtypography.php b/framework/fields/astroidtypography.php
@@ -177,6 +177,13 @@ public function getInput()
         } else {
             $extraData['transformpicker'] = true;
         }
+
+        if (isset($this->element['columns']) && $this->element['columns'] != '') {
+            $extraData['columns'] = (int) $this->element['columns'];
+        } else {
+            $extraData['columns'] = 3;
+        }
+
         $extraData['colormode'] = $color_mode;
         $system_fonts = array();
         foreach (Astroid\Helper\Font::$system_fonts as $s_font_value => $s_font_title) {

diff --git a/framework/fields/layout.php b/framework/fields/layout.php
@@ -42,7 +42,6 @@ public function getInput()
        } else {
            $options = \json_decode($value, true);
        }
-
        $json =   [
            'id'      =>  $this->id,
            'name'    =>  $this->name,

diff --git a/framework/library/astroid/Element.php b/framework/library/astroid/Element.php
@@ -121,39 +121,40 @@ protected function loadXML()
 
    public function loadForm()
    {
-      $this->form = new Form($this->type);
-      if (!empty($this->xml_file)) {
-         $xml = $this->xml->form;
-         $this->form->load($xml, false);
-      }
-      $defaultXml = simplexml_load_file($this->default_xml_file);
-      $this->form->load($defaultXml->form, false);
+       $this->form = new Form($this->type);
+       $defaultXml = simplexml_load_file($this->default_xml_file);
+       $this->form->load($defaultXml->form, false);
 
-      $formData = [];
+       if (!empty($this->xml_file)) {
+           $xml = $this->xml->form;
+           $this->form->load($xml, false);
+       }
 
-      $fieldsets = $this->form->getFieldsets();
-      foreach ($fieldsets as $key => $fieldset) {
-         $fields = $this->form->getFieldset($key);
-         foreach ($fields as $field) {
-            $formData[] = ['name' => $field->name, 'value' => $field->value];
-         }
-      }
+       $formData = [];
+
+       $fieldsets = $this->form->getFieldsets();
+       foreach ($fieldsets as $key => $fieldset) {
+           $fields = $this->form->getFieldset($key);
+           foreach ($fields as $field) {
+               $formData[] = ['name' => $field->name, 'value' => $field->value];
+           }
+       }
 
-      $this->params = $formData;
+       $this->params = $formData;
    }
 
    public function getInfo()
    {
-      return [
-         'type' => $this->type,
-         'title' => Text::_($this->title),
-         'icon' => $this->icon,
-          'category' => $this->category,
-         'description' => Text::_($this->description),
-         'color' => $this->color,
-         'multiple' => $this->multiple,
-         'params' => $this->params,
-      ];
+       return [
+           'type' => $this->type,
+           'title' => Text::_($this->title),
+           'icon' => $this->icon,
+           'category' => $this->category,
+           'description' => Text::_($this->description),
+           'color' => $this->color,
+           'multiple' => $this->multiple,
+           'params' => $this->params,
+       ];
    }
 
    public function renderForm()
@@ -200,7 +201,7 @@ public function renderJson($type = 'system') {
             $groups = [];
             foreach ($fields as $key => $field) {
                 if ($field->type == 'astroidgroup') {
-                    $groups[$field->fieldname] = ['title' => $field->getAttribute('title', ''), 'icon' => $field->getAttribute('icon', ''), 'description' => $field->getAttribute('description', ''), 'fields' => []];
+                    $groups[$field->fieldname] = ['title' => Text::_($field->getAttribute('title', '')), 'icon' => $field->getAttribute('icon', ''), 'description' => Text::_($field->getAttribute('description', '')), 'fields' => []];
                 }
             }