diff --git a/bin/Controls/Tabs.Settings.html b/bin/Controls/Tabs.Settings.html index bdab0f0a1d67bc42da6bcec42ab749ddd1e6168a..e6b5a610dcacbc2335adc1f322796e7c725ac4e8 100644 --- a/bin/Controls/Tabs.Settings.html +++ b/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> diff --git a/bricks.xml b/bricks.xml index 2dbc8f43fac6050e2481a0412c6a123495d57db1..7d72f059b558256c6bb49d851fcc4d906c7f3b51 100644 --- a/bricks.xml +++ b/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"/> diff --git a/src/QUI/Menu/Controls/Tabs.css b/src/QUI/Menu/Controls/Tabs.css index ddc52fdb786cb0769526d2ec166bb40b62b5941b..23329e6526e1cfdb82296ae930341567f6213516 100644 --- a/src/QUI/Menu/Controls/Tabs.css +++ b/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;*/ +/*}*/ diff --git a/src/QUI/Menu/Controls/Tabs.html b/src/QUI/Menu/Controls/Tabs.html index a2d7f3e7d1e9be87a9ded02c2d68eab69a3b2ef9..c0a657ca8e4d3873288967c6214f2ba35747481d 100644 --- a/src/QUI/Menu/Controls/Tabs.html +++ b/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"> diff --git a/src/QUI/Menu/Controls/Tabs.php b/src/QUI/Menu/Controls/Tabs.php index 9729ab0d50e64c70b79d54629a4643ec7278d25c..cfa133ca7ebc3119f35cdaf80e8b61d2aa27c4aa 100644 --- a/src/QUI/Menu/Controls/Tabs.php +++ b/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') ]);