Add option Collapse to Typography

templaza · Dec 23, 2024 · 3fdd93e · 3fdd93e
1 parent 3fb4d03
commit 3fdd93e
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 57 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/assets/_astroidtypography.scss b/assets/vendor/manager/src/assets/_astroidtypography.scss
@@ -5,6 +5,22 @@
             --bs-btn-padding-x: 0.7rem;
         }
     }
+    .font-collapse {
+        cursor: pointer;
+        .cogIcon {
+            display: none;
+        }
+        &:hover, &.active {
+            .card {
+                background-color: var(--as-layout-block-bg);
+            }
+        }
+        &:hover {
+            .cogIcon {
+                display: block;
+            }
+        }
+    }
 }
 .typography-underline {
     text-decoration: underline;

diff --git a/assets/vendor/manager/src/components/helpers/Typography.vue b/assets/vendor/manager/src/components/helpers/Typography.vue
@@ -59,6 +59,7 @@ const fontSelected= ref({
 const fonttypes = ref(['system','google'])
 const font_type = ref('google');
 const currentDevice = ref('desktop');
+const collapse = ref(false);
 
 function getFontType(font_face) {
     if (font_face.search(/^library-font-/) !== -1) {
@@ -199,9 +200,47 @@ function getRandomInt(min, max) {
     max = Math.floor(max);
     return Math.floor(Math.random() * (max - min + 1)) + min;
 }
+
+function toggleCollapse() {
+    collapse.value = !collapse.value;
+}
 </script>
 <template>
-    <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 v-if="props.field.input.options.collapse === true" class="font-collapse mb-4" @click.prevent="toggleCollapse" :class="{'active' : collapse}">
+        <link v-if="font_type === `google` && (typeof options[font_type].find((font) => font.value === fontSelected.value) !== 'undefined') && fontSelected.value !== `` && fontSelected.value !== `__default` && fontSelected.value.search(/^library-font-/) === -1" :href="`https://fonts.googleapis.com/css?family=`+fontSelected.value" rel="stylesheet" />
+        <div class="card card-body">
+            <div class="d-flex align-items-center justify-content-between">
+                <div class="fontName position-relative" :style="
+            {
+            'font-family' : fontSelected.text,
+            'font-weight': (props.modelValue['font_style'].find((element) => element === 'bold') !== undefined ? 'bold' : props.modelValue['font_weight']),
+            'text-transform': props.modelValue['text_transform'],
+            'font-size' : props.modelValue['font_size'][currentDevice]+props.modelValue['font_size_unit'][currentDevice],
+            '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],
+            'text-decoration': (props.modelValue['font_style'].find((element) => element === 'underline') !== undefined ? 'underline' : 'none'),
+            'font-style': (props.modelValue['font_style'].find((element) => element === 'italic') !== undefined ? 'italic' : 'normal'),
+
+            }">
+                    {{ fontSelected.text === '' || fontSelected.text === 'Default' ? props.field.input.lang.inherit : fontSelected.text }}
+                    <div class="position-absolute top-0 start-100 ms-2 cogIcon" :style="{'font-size' : '0.86rem', 'line-height': '1'}"><i class="fa-solid fa-gear"></i></div>
+                </div>
+                <div class="fontProperties d-flex align-items-center">
+                    <div class="fontSize">
+                        <div class="form-text mt-0" aria-label="Font Size">{{ props.field.input.lang.font_size }}</div>
+                        <div class="value">{{ props.modelValue['font_size'][currentDevice] !== '' ? props.modelValue['font_size'][currentDevice]+props.modelValue['font_size_unit'][currentDevice] : props.field.input.lang.inherit }}</div>
+                    </div>
+                    <div class="px-3 opacity-50">/</div>
+                    <div class="lineHeight">
+                        <div class="form-text mt-0" aria-label="Line Height">{{ props.field.input.lang.line_height }}</div>
+                        <div class="value">{{ props.modelValue['line_height'][currentDevice] !== '' ? props.modelValue['line_height'][currentDevice]+props.modelValue['line_height_unit'][currentDevice] : props.field.input.lang.inherit }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <Transition name="fade">
+    <div v-if="(props.field.input.options.collapse === true && collapse === true) || props.field.input.options.collapse === false" 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">
@@ -322,7 +361,8 @@ function getRandomInt(min, max) {
             </div>
         </div>
     </div>
-    <div v-if="props.field.input.options.preview" class="typography-preview">
+    </Transition><Transition name="fade">
+    <div v-if="props.field.input.options.preview && props.field.input.options.collapse === false" class="typography-preview">
         <link v-if="font_type === `google` && (typeof options[font_type].find((font) => font.value === fontSelected.value) !== 'undefined') && fontSelected.value !== `` && fontSelected.value !== `__default` && fontSelected.value.search(/^library-font-/) === -1" :href="`https://fonts.googleapis.com/css?family=`+fontSelected.value" rel="stylesheet" />
         <div class="card card-default card-body mt-4" :style="
             {
@@ -338,4 +378,5 @@ function getRandomInt(min, max) {
             <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>
     </div>
+    </Transition>
 </template>
diff --git a/framework/fields/astroidtypography.php b/framework/fields/astroidtypography.php
@@ -190,6 +190,12 @@ public function getInput()
             $extraData['preview'] = true;
         }
 
+        if (isset($this->element['collapse']) && $this->element['collapse'] == 'false') {
+            $extraData['collapse'] = false;
+        } else {
+            $extraData['collapse'] = true;
+        }
+
         $extraData['colormode'] = $color_mode;
         $system_fonts = array();
         foreach (Astroid\Helper\Font::$system_fonts as $s_font_value => $s_font_title) {

diff --git a/framework/options/typography.xml b/framework/options/typography.xml
@@ -19,23 +19,23 @@
          </field>
 
          <!-- Body Typography Options -->
-         <field ngShow="[body_typography]=='custom'" astroidgroup="body_typography_group" name="body_typography_options" 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="em" letter-spacing="0" line-height="1" font-weight="400" text-transform="none" color-picker="false"></field>
+         <field ngShow="[body_typography]=='custom'" astroidgroup="body_typography_group" name="body_typography_options" 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="em" letter-spacing="0" line-height="1" font-weight="400" text-transform="none" color-picker="false" collapse="false"/>
 
          <!-- Menu Typography Options -->
          <field astroidgroup="menu_typography" description="TPL_ASTROID_TYPOGRAPHY_OPTION_DESC" name="menus_typography" type="astroidradio" default="inherit" label="TPL_ASTROID_TYPOGRAPHY_OPTIONS_LABEL">
             <option value="inherit">JGLOBAL_INHERIT</option>
             <option value="custom">TPL_ASTROID_OPTIONS_CUSTOM</option>
          </field>
 
-         <field astroidgroup="menu_typography" ngShow="[menus_typography]=='custom'" name="menu_typography_options" 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="em" letter-spacing="0" line-height="1" font-weight="400" text-transform="none" color-picker="false"></field>
+         <field astroidgroup="menu_typography" ngShow="[menus_typography]=='custom'" name="menu_typography_options" 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="em" letter-spacing="0" line-height="1" font-weight="400" text-transform="none" color-picker="false" collapse="false"/>
 
          <!-- Sub Menu Typography Options -->
          <field astroidgroup="submenu_typography" description="TPL_ASTROID_TYPOGRAPHY_OPTION_DESC" name="submenus_typography" type="astroidradio" default="inherit" label="TPL_ASTROID_TYPOGRAPHY_OPTIONS_LABEL">
             <option value="inherit">JGLOBAL_INHERIT</option>
             <option value="custom">TPL_ASTROID_OPTIONS_CUSTOM</option>
          </field>
 
-         <field astroidgroup="submenu_typography" ngShow="[submenus_typography]=='custom'" name="submenu_typography_options" 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="em" letter-spacing="0" line-height="1" font-weight="400" text-transform="none" color-picker="false"></field>
+         <field astroidgroup="submenu_typography" ngShow="[submenus_typography]=='custom'" name="submenu_typography_options" 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="em" letter-spacing="0" line-height="1" font-weight="400" text-transform="none" color-picker="false" collapse="false"/>
 
          <!--  More Options: font-picker="false" letter-spacing-picker="false" line-height-picker="false" font-style-picker="false" font-weight-picker="false" text-transform-picker="false" font-size-picker="false"  -->
 
@@ -45,47 +45,47 @@
             <option value="custom">TPL_ASTROID_OPTIONS_CUSTOM</option>
          </field>
 
-         <field astroidgroup="h1_header_typography" ngShow="[h1_typography]=='custom'" name="h1_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="3.5" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="700" text-transform="none"></field>
+         <field astroidgroup="h1_header_typography" ngShow="[h1_typography]=='custom'" name="h1_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="3.5" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="700" text-transform="none" collapse="false"/>
 
          <!-- H2 Typography Options -->
          <field astroidgroup="h2_header_typography" description="TPL_ASTROID_TYPOGRAPHY_OPTION_DESC" name="h2_typography" type="astroidradio" default="inherit" label="TPL_ASTROID_TYPOGRAPHY_OPTIONS_LABEL">
             <option value="inherit">JGLOBAL_INHERIT</option>
             <option value="custom">TPL_ASTROID_OPTIONS_CUSTOM</option>
          </field>
 
-         <field astroidgroup="h2_header_typography" ngShow="[h2_typography]=='custom'" name="h2_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="3" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="600" text-transform="none"></field>
+         <field astroidgroup="h2_header_typography" ngShow="[h2_typography]=='custom'" name="h2_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="3" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="600" text-transform="none" collapse="false"/>
 
          <!-- H3 Typography Options -->
          <field astroidgroup="h3_header_typography" description="TPL_ASTROID_TYPOGRAPHY_OPTION_DESC" name="h3_typography" type="astroidradio" default="inherit" label="TPL_ASTROID_TYPOGRAPHY_OPTIONS_LABEL">
             <option value="inherit">JGLOBAL_INHERIT</option>
             <option value="custom">TPL_ASTROID_OPTIONS_CUSTOM</option>
          </field>
 
-         <field astroidgroup="h3_header_typography" ngShow="[h3_typography]=='custom'" name="h3_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="2" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none"></field>
+         <field astroidgroup="h3_header_typography" ngShow="[h3_typography]=='custom'" name="h3_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="2" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none" collapse="false"/>
 
          <!-- H4 Typography Options -->
          <field astroidgroup="h4_header_typography" description="TPL_ASTROID_TYPOGRAPHY_OPTION_DESC" name="h4_typography" type="astroidradio" default="inherit" label="TPL_ASTROID_TYPOGRAPHY_OPTIONS_LABEL">
             <option value="inherit">JGLOBAL_INHERIT</option>
             <option value="custom">TPL_ASTROID_OPTIONS_CUSTOM</option>
          </field>
 
-         <field astroidgroup="h4_header_typography" ngShow="[h4_typography]=='custom'" name="h4_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="1.5" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none"></field>
+         <field astroidgroup="h4_header_typography" ngShow="[h4_typography]=='custom'" name="h4_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="1.5" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none" collapse="false"/>
 
          <!-- H5 Typography Options -->
          <field astroidgroup="h5_header_typography" description="TPL_ASTROID_TYPOGRAPHY_OPTION_DESC" name="h5_typography" type="astroidradio" default="inherit" label="TPL_ASTROID_TYPOGRAPHY_OPTIONS_LABEL">
             <option value="inherit">JGLOBAL_INHERIT</option>
             <option value="custom">TPL_ASTROID_OPTIONS_CUSTOM</option>
          </field>
 
-         <field astroidgroup="h5_header_typography" ngShow="[h5_typography]=='custom'" name="h5_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="1" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none"></field>
+         <field astroidgroup="h5_header_typography" ngShow="[h5_typography]=='custom'" name="h5_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="1" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none" collapse="false"/>
 
          <!-- H6 Typography Options -->
          <field astroidgroup="h6_header_typography" description="TPL_ASTROID_TYPOGRAPHY_OPTION_DESC" name="h6_typography" type="astroidradio" default="inherit" label="TPL_ASTROID_TYPOGRAPHY_OPTIONS_LABEL">
             <option value="inherit">JGLOBAL_INHERIT</option>
             <option value="custom">TPL_ASTROID_OPTIONS_CUSTOM</option>
          </field>
 
-         <field astroidgroup="h6_header_typography" ngShow="[h6_typography]=='custom'" name="h6_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="0.7" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none"></field>
+         <field astroidgroup="h6_header_typography" ngShow="[h6_typography]=='custom'" name="h6_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="0.7" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none" collapse="false"/>
 
          <!-- Custom Typography Options -->
          <field astroidgroup="custom_header_typography" description="TPL_ASTROID_TYPOGRAPHY_OPTION_DESC" name="custom_typography" type="astroidradio" default="inherit" label="TPL_ASTROID_TYPOGRAPHY_OPTIONS_LABEL">
@@ -96,7 +96,7 @@
          <field astroidgroup="custom_header_typography" description="TPL_ASTROID_TYPOGRAPHY_CUSTOMTYPE_SELECTORS_DESC" ngShow="[custom_typography]=='custom'" name="custom_typography_selectors" type="astroidtext" class="form-control" label="TPL_ASTROID_TYPOGRAPHY_CUSTOMTYPE_SELECTORS">
          </field>
 
-         <field astroidgroup="custom_header_typography" ngShow="[custom_typography]=='custom'" name="custom_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="0.7" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none"></field>
+         <field astroidgroup="custom_header_typography" ngShow="[custom_typography]=='custom'" name="custom_typography_options" type="astroidtypography" font-style-picker="false" font-face="Arial, Helvetica, sans-serif" alt-font-face="Arial, Helvetica, sans-serif" font-color="#000" font-size="0.7" font-size-unit="em" letter-spacing="0" line-height="1" font-weight="500" text-transform="none" collapse="false"/>
 
       </fieldset>
    </fields>