feat: New settings build in [TabsControl]

bin/Controls/Tabs.Settings.html

@@ -50,8 +50,8 @@
                         {{entryImagePos}}
                     </span>
                     <select name="entryImagePos" class="field-container-field">
-                        <option value="left">{{optionLeft}}</option>
                         <option value="right">{{optionRight}}</option>
+                        <option value="left">{{optionLeft}}</option>
                         <option value="top">{{optionTop}}</option>
                         <option value="bottom">{{optionBottom}}</option>
                     </select>

bricks.xml

@@ -110,9 +110,9 @@
             </description>
 
             <settings>
-                <setting name="tabsStyle" type="select">
+                <setting name="template" type="select">
                     <locale group="quiqqer/menu"
-                            var="control.tabs.tabsStyle"/>
+                            var="control.tabs.default"/>
 
                     <option value="smallImgLeft">
                         <locale group="quiqqer/menu"
@@ -120,6 +120,16 @@
                     </option>
                 </setting>
 
+                <setting name="tabImgHeight" type="number">
+                    <locale group="quiqqer/menu"
+                            var="control.tabs.tabImgHeight"/>
+
+                    <description>
+                        <locale group="quiqqer/menu"
+                                var="control.tabs.tabImgHeight.desc"/>
+                    </description>
+                </setting>
+
                 <setting name="tabsImgPos" type="select">
                     <locale group="quiqqer/menu"
                             var="control.tabs.imagePos"/>

src/QUI/Menu/Controls/Tabs.css

@@ -28,9 +28,10 @@
 }
 
 .quiqqer-tabsAdvanced-nav-link img {
-    height: var(--quiqqer-tabsAdvanced-navImgHeight, 24px);
+    height: var(--quiqqer-tabsAdvanced-tabImgHeight, 24px);
     vertical-align: middle;
     display: block;
+    width: auto;
 }
 
 .active > .quiqqer-tabsAdvanced-nav-link {
@@ -102,13 +103,13 @@
 
 
 /* test */
-.quiqqer-tabsAdvanced-content{
-    border: 2px solid;
-    border-radius: 1rem;
-}
-.quiqqer-tabsAdvanced-content-item {
-    padding: 2rem;
-}
+/*.quiqqer-tabsAdvanced-content{*/
+/*    border: 2px solid;*/
+/*    border-radius: 1rem;*/
+/*}*/
+/*.quiqqer-tabsAdvanced-content-item {*/
+/*    padding: 2rem;*/
+/*}*/
 
 
 

src/QUI/Menu/Controls/Tabs.html

@@ -11,10 +11,10 @@
 {/if}
 
 <div class="control-template quiqqer-tabsAdvanced-control" style="
-        --quiqqer-tabsAdvanced-navImgHeight: {$navImgHeight}px;
-        --quiqqer-tabsAdvanced-contentTextWidth: {$contentTextWidth}px;
-        --quiqqer-tabsAdvanced-contentImgMaxWidth: {$contentImgMaxWidth}px;
-        --quiqqer-tabsAdvanced-contentImgMaxHeight: {$contentImgMaxHeight}px;
+        {if $tabImgHeight}--quiqqer-tabsAdvanced-tabImgHeight: {$tabImgHeight}px;{/if}
+        {if $contentTextWidth}--quiqqer-tabsAdvanced-contentTextWidth: {$contentTextWidth}px;{/if}
+        {if $contentImgMaxWidth}--quiqqer-tabsAdvanced-contentImgMaxWidth: {$contentImgMaxWidth}px;{/if}
+        {if $contentImgMaxHeight}--quiqqer-tabsAdvanced-contentImgMaxHeight: {$contentImgMaxHeight}px;{/if}
 ">
     <div class="quiqqer-tabsAdvanced-nav">
         <ul class="quiqqer-tabsAdvanced-nav-inner quiqqer-tab-nav">

src/QUI/Menu/Controls/Tabs.php

@@ -25,16 +25,16 @@ public function __construct($attributes = [])
     {
         // default options
         $this->setAttributes([
-            'class'          => 'quiqqer-tabs',
-            'qui-class'      => 'package/quiqqer/menu/bin/Controls/NavTabs',
-            'navImgHeight'       => 24,
+            'class'               => 'quiqqer-tabs',
+            'qui-class'           => 'package/quiqqer/menu/bin/Controls/NavTabs',
+            'tabImgHeight'        => 24,
             'contentImgMaxWidth'  => 300,
-            'contentImgMaxHeight'  => 500,
-            'contentTextWidth' => 600,
-            'activeEntry' => 2, // number
-            'imageMaxHeight' => false,
-            'entries'        => [],
-            'template'       => 'simple',
+            'contentImgMaxHeight' => 500,
+            'contentTextWidth'    => 700,
+            'activeEntry'         => 1, // number
+            'imageMaxHeight'      => false,
+            'entries'             => [],
+            'template'            => 'simple',
         ]);
 
         parent::__construct($attributes);
@@ -72,12 +72,12 @@ public function getBody()
         }
 
         $Engine->assign([
-            'this'     => $this,
-            'entries'  => $enabledEntries,
-            'active'  => $active,
-            'navImgHeight' => $this->getAttribute('navImgHeight'),
-            'contentTextWidth' => $this->getAttribute('contentTextWidth'),
-            'contentImgMaxWidth' => $this->getAttribute('contentImgMaxWidth'),
+            'this'                => $this,
+            'entries'             => $enabledEntries,
+            'active'              => $active,
+            'tabImgHeight'        => $this->getAttribute('tabImgHeight'),
+            'contentTextWidth'    => $this->getAttribute('contentTextWidth'),
+            'contentImgMaxWidth'  => $this->getAttribute('contentImgMaxWidth'),
             'contentImgMaxHeight' => $this->getAttribute('contentImgMaxHeight')
         ]);