From 2f1bfd3732e891e9fdbbb54ca135ca1d26d94613 Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Thu, 23 Feb 2023 18:44:08 +0100
Subject: [PATCH] refactor: Tabs Control improved (more settings)
---
bin/Controls/NavTabs.js | 1 -
bricks.xml | 39 ++---
src/QUI/Menu/Controls/Tabs.css | 244 ++++++++++++++------------------
src/QUI/Menu/Controls/Tabs.html | 77 +++++-----
src/QUI/Menu/Controls/Tabs.php | 52 ++++++-
5 files changed, 219 insertions(+), 194 deletions(-)
diff --git a/bin/Controls/NavTabs.js b/bin/Controls/NavTabs.js
index 96ec636..3502529 100644
--- a/bin/Controls/NavTabs.js
+++ b/bin/Controls/NavTabs.js
@@ -322,7 +322,6 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [
},
$animate: function (Target, options) {
- console.log(options)
return new Promise(function (resolve) {
options = options || {};
options.targets = Target;
diff --git a/bricks.xml b/bricks.xml
index 7d72f05..6191ef6 100644
--- a/bricks.xml
+++ b/bricks.xml
@@ -112,46 +112,49 @@
<settings>
<setting name="template" type="select">
<locale group="quiqqer/menu"
- var="control.tabs.default"/>
+ var="control.tabs.template"/>
- <option value="smallImgLeft">
+ <option value="simple">
<locale group="quiqqer/menu"
- var="control.tabs.tabsStyle.smallImgLeft"/>
+ var="control.tabs.template.simple"/>
</option>
</setting>
- <setting name="tabImgHeight" type="number">
+ <setting name="navImgHeight" type="number">
<locale group="quiqqer/menu"
- var="control.tabs.tabImgHeight"/>
+ var="control.tabs.navImgHeight"/>
<description>
<locale group="quiqqer/menu"
- var="control.tabs.tabImgHeight.desc"/>
+ var="control.tabs.navImgHeight.desc"/>
</description>
</setting>
- <setting name="tabsImgPos" type="select">
+ <!-- nav style -->
+ <setting name="navStyle" type="select">
<locale group="quiqqer/menu"
- var="control.tabs.imagePos"/>
+ var="control.tabs.navStyle"/>
- <option value="left">
+ <option value="imgLeft">
<locale group="quiqqer/menu"
- var="control.tabs.tabsImgPos.left"/>
+ var="control.tabs.navStyle.imgLeft"/>
</option>
- <option value="top">
+ <option value="imgTop">
<locale group="quiqqer/menu"
- var="control.tabs.tabsImgPos.top"/>
+ var="control.tabs.navStyle.imgTop"/>
</option>
- <option value="right">
- <locale group="quiqqer/menu"
- var="control.tabs.tabsImgPos.right"/>
- </option>
- <option value="bottom">
+ <option value="onlyImg">
<locale group="quiqqer/menu"
- var="control.tabs.tabsImgPos.bottom"/>
+ var="control.tabs.navStyle.onlyImg"/>
</option>
</setting>
+ <setting name="navCenter" type="checkbox">
+ <locale group="quiqqer/menu"
+ var="control.tabs.navCenter"/>
+ </setting>
+
+
<setting name="entries" type="hidden" data-qui="package/quiqqer/menu/bin/Controls/Tabs.Settings">
<locale group="quiqqer/menu" var="control.tabs.entries"/>
</setting>
diff --git a/src/QUI/Menu/Controls/Tabs.css b/src/QUI/Menu/Controls/Tabs.css
index 23329e6..3c833c6 100644
--- a/src/QUI/Menu/Controls/Tabs.css
+++ b/src/QUI/Menu/Controls/Tabs.css
@@ -10,76 +10,142 @@
padding: 0;
}
+/*******/
/* nav */
+/*******/
.quiqqer-tabsAdvanced-nav-inner {
display: flex;
flex-wrap: nowrap;
- /*width: max-content;*/
- /*margin-inline: auto;*/
+ overflow: hidden;
}
+@media screen and (max-width: 767px) {
+ .quiqqer-tabsAdvanced-nav-inner {
+ overflow: auto;
+ }
+}
+
+.quiqqer-tabsAdvanced-nav-item {
+ /*flex: 1;*/
+ min-width: 200px;
+}
+
+@media screen and (min-width: 768px) {
+ .quiqqer-tabsAdvanced-nav-inner__center {
+ justify-content: center;
+ }
+}
+
+
.quiqqer-tabsAdvanced-nav-link {
padding: 1rem;
color: inherit;
- display: flex;
- align-items: center;
height: 100%;
- gap: 1rem;
}
.quiqqer-tabsAdvanced-nav-link img {
- height: var(--quiqqer-tabsAdvanced-tabImgHeight, 24px);
+ height: var(--quiqqer-tabsAdvanced-navImgHeight, 20px);
vertical-align: middle;
display: block;
width: auto;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.quiqqer-tabsAdvanced-nav-link .fa {
+ display: block;
+ font-size: var(--quiqqer-tabsAdvanced-navImgHeight, 20px);
}
.active > .quiqqer-tabsAdvanced-nav-link {
color: var(--qui-color-primary);
}
+/*************/
+/* nav style */
+/*************/
+/* img left */
+.navTabStyle__imgLeft.quiqqer-tabsAdvanced-nav-link {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.navTabStyle__imgLeft.quiqqer-tabsAdvanced-nav-link > picture {
+ width: max-content;
+ min-width: max-content;
+}
+
+/* img top */
+.navTabStyle__imgTop.quiqqer-tabsAdvanced-nav-link {
+ display: block;
+ text-align: center;
+}
+
+.navTabStyle__imgTop.quiqqer-tabsAdvanced-nav-linkLabel {
+ margin-top: 0.5rem;
+ display: block;
+}
+
+/* only img */
+.navTabStyle__onlyImg.quiqqer-tabsAdvanced-nav-link {
+ display: block;
+}
+
+/***********/
/* content */
+/***********/
.quiqqer-tabsAdvanced-content {
margin-top: var(--qui-spacing-xl, 2rem);
}
.quiqqer-tabsAdvanced-content-item {
+ --min-image-container-width: 200px;
display: grid;
gap: var(--qui-spacing-xl, 2rem);
width: 100%;
max-width: 100%;
+ margin-inline: auto;
}
-.quiqqer-tabsAdvanced-content-item:not(.no-image).left {
- grid-template-areas: "image content";
- grid-template-columns: 1fr auto;
+.quiqqer-tabsAdvanced-content-item.no-image {
+ gap: 0;
+ grid-template-areas: "content";
}
-.quiqqer-tabsAdvanced-content-item:not(.no-image).right {
- grid-template-areas: "content image";
- grid-template-columns: auto 1fr;
-}
+@media screen and (min-width: 768px) {
-.quiqqer-tabsAdvanced-content-item:not(.no-image).top {
- grid-template-areas: "image" "content";
- width: max-content;
- margin-inline: auto;
-}
+ .quiqqer-tabsAdvanced-content-item:not(.no-image).left {
+ grid-template-areas: "image content";
+ grid-template-columns: 1fr auto;
+ }
-.quiqqer-tabsAdvanced-content-item:not(.no-image).bottom {
- grid-template-areas: "content" "image";
- width: max-content;
- margin-inline: auto;
-}
+ .quiqqer-tabsAdvanced-content-item:not(.no-image).right {
+ grid-template-areas: "content image";
+ grid-template-columns: auto 1fr;
+ }
-.quiqqer-tabsAdvanced-content-item.top {
- width: max-content;
- margin-inline: auto;
-}
+ .quiqqer-tabsAdvanced-content-item:not(.no-image).top {
+ grid-template-areas: "image" "content";
+ width: max-content;
+ margin-inline: auto;
+ }
-.quiqqer-tabsAdvanced-content-item.bottom {
- width: max-content;
- margin-inline: auto;
+ .quiqqer-tabsAdvanced-content-item:not(.no-image).bottom {
+ grid-template-areas: "content" "image";
+ width: max-content;
+ margin-inline: auto;
+ }
+
+ .quiqqer-tabsAdvanced-content-item.top {
+ width: max-content;
+ margin-inline: auto;
+ }
+
+ .quiqqer-tabsAdvanced-content-item.bottom {
+ width: max-content;
+ margin-inline: auto;
+ }
}
.quiqqer-tabsAdvanced-content-image {
@@ -89,125 +155,35 @@
justify-content: center;
}
+.quiqqer-tabsAdvanced-content-image-inner {
+ max-width: var(--quiqqer-tabsAdvanced-contentImgMaxWidth, 700px);
+ min-width: 200px;
+}
+
.quiqqer-tabsAdvanced-content-image img {
- max-width: var(--quiqqer-tabsAdvanced-contentImgMaxWidth, 100%);
- max-height: var(--quiqqer-tabsAdvanced-contentImgMaxHeight, 100%);
width: auto;
height: auto;
}
.quiqqer-tabsAdvanced-content-body {
grid-area: content;
- max-width: var(--quiqqer-tabsAdvanced-contentTextWidth, 700px);
-}
-
-
-/* test */
-/*.quiqqer-tabsAdvanced-content{*/
-/* border: 2px solid;*/
-/* border-radius: 1rem;*/
-/*}*/
-/*.quiqqer-tabsAdvanced-content-item {*/
-/* padding: 2rem;*/
-/*}*/
-
-
-
-.quiqqer-menu-navTabsVertical .quiqqer-menu-navTabsVertical-tabs-body {
- margin-bottom: 2rem;
-}
-
-.quiqqer-menu-navTabsVertical-container .quiqqer-menu-navTabsVertical-tabs-nav,
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-content {
- list-style: none;
- margin-left: 0;
- padding-left: 0;
-}
-
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-nav-item,
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-content-item {
- margin-left: 0;
- padding-left: 0;
-}
-
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-nav-item a {
- display: block;
- margin-bottom: 0.5rem;
- padding: 1rem;
-}
-
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-nav-item:not(.active) a {
- color: inherit;
}
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-nav-item.active a {
-
-}
-
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-nav-item .fa,
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-nav-item img {
- margin-right: 1rem;
-}
-
-.quiqqer-menu-navTabsVertical-container .quiqqer-tab-nav-item img {
- width: 2rem;
- height: auto;
- vertical-align: middle;
-}
-
-.quiqqer-menu-navTabsVertical-content-image {
- text-align: center;
- margin-bottom: 1rem;
+.quiqqer-tabsAdvanced-content-body-inner {
+ max-width: var(--quiqqer-tabsAdvanced-contentTextWidth, 700px);
+ margin-inline: auto;
}
@media screen and (max-width: 767px) {
- .quiqqer-menu-navTabsVertical-container {
- flex-wrap: wrap;
- gap: 0;
+ .quiqqer-tabsAdvanced-content-item {
+ display: block;
}
- .quiqqer-menu-navTabsVertical-tabs,
- .quiqqer-menu-navTabsVertical-content {
- width: 100%;
- }
-
- .quiqqer-menu-navTabsVertical .quiqqer-menu-navTabsVertical-tabs {
- margin-bottom: 0;
- }
-
- .quiqqer-menu-navTabsVertical-tabs-nav-container {
- position: relative;
- }
-
- .quiqqer-menu-navTabsVertical-tabs-nav-container:before,
- .quiqqer-menu-navTabsVertical-tabs-nav-container:after {
- content: '';
- height: 100%;
- position: absolute;
- top: 0;
- width: 40px;
- }
-
- .quiqqer-menu-navTabsVertical-tabs-nav-container:before {
- background: linear-gradient(90deg, #fff, transparent);
- left: 0;
- }
-
- .quiqqer-menu-navTabsVertical-tabs-nav-container:after {
- background: linear-gradient(90deg, transparent, #fff);
- right: 0;
- }
-
- .quiqqer-menu-navTabsVertical-container .quiqqer-menu-navTabsVertical-tabs-nav {
- display: flex;
- overflow: auto;
- padding: 2rem 1rem;
- white-space: nowrap;
+ .quiqqer-tabsAdvanced-content-image {
+ margin-bottom: var(--qui-spacing-xl, 2rem);
}
- .quiqqer-menu-navTabsVertical-container .quiqqer-tab-nav-item {
- margin-left: 0.5rem;
- margin-right: 0.5rem;
- flex-shrink: 0;
+ .quiqqer-tabsAdvanced-content-image {
+ text-align: center;
}
}
\ No newline at end of file
diff --git a/src/QUI/Menu/Controls/Tabs.html b/src/QUI/Menu/Controls/Tabs.html
index c0a657c..f191d97 100644
--- a/src/QUI/Menu/Controls/Tabs.html
+++ b/src/QUI/Menu/Controls/Tabs.html
@@ -1,35 +1,39 @@
{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
-<header class="control-header">
- <h1>{$this->getAttribute('frontendTitle')}</h1>
-</header>
+ <header class="control-header">
+ <h1>{$this->getAttribute('frontendTitle')}</h1>
+ </header>
{/if}
{if $this->getAttribute('content') != ""}
-<div class="control-body default-content">
- {$this->getAttribute('content')}
-</div>
+ <div class="control-body default-content">
+ {$this->getAttribute('content')}
+ </div>
{/if}
<div class="control-template quiqqer-tabsAdvanced-control" style="
- {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}
-">
+{if $navImgHeight}--quiqqer-tabsAdvanced-navImgHeight: {$navImgHeight}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">
+ <ul class="quiqqer-tabsAdvanced-nav-inner {$navAlignment} quiqqer-tab-nav">
{foreach from=$entries item=entry key=key}
- <li class="quiqqer-tabsAdvanced-nav-item quiqqer-tab-nav-item {if $key == $active - 1}active{/if}" data-entry-nav-pos="{$key}">
- <a href="#{QUI\Utils\Security\Orthos::urlEncodeString($entry.tabTitle)}"
- data-qui-disableTemplateScroll="1"
- class="quiqqer-tabsAdvanced-nav-link">
- {if isset($entry.tabIcon) && $entry.tabIcon}
- {image src=$entry.tabIcon width="80" height="80"}
- {/if}
+ <li class="quiqqer-tabsAdvanced-nav-item {$navTabStyleCss}
+ quiqqer-tab-nav-item {if $key == $active - 1}active{/if}"
+ data-entry-nav-pos="{$key}">
+ <a href="#{QUI\Utils\Security\Orthos::urlEncodeString($entry.tabTitle)}"
+ data-qui-disableTemplateScroll="1"
+ class="quiqqer-tabsAdvanced-nav-link {$navTabStyleCss}">
+ {if isset($entry.tabIcon) && $entry.tabIcon}
+ {image src=$entry.tabIcon width="80" height="80"}
+ {/if}
- <span class="quiqqer-tabsAdvanced-nav-linkLabel">{$entry.tabTitle}</span>
- </a>
- </li>
+ {if $showNavText}
+ <span class="quiqqer-tabsAdvanced-nav-linkLabel {$navTabStyleCss}">{$entry.tabTitle}</span>
+ {/if}
+ </a>
+ </li>
{/foreach}
</ul>
</div>
@@ -54,7 +58,6 @@
{if (isset($entry.entryTitle) && $entry.entryTitle) || (isset($entry.entryContent) && $entry.entryContent)}
{assign var=content value=true}
{/if}
-
<li class="quiqqer-tabsAdvanced-content-item quiqqer-tab-content-item {$imgPos}
{if !$imgSrc}no-image{/if}
{if !$content}no-content{/if}
@@ -65,24 +68,28 @@
{if $imgSrc}
<div class="quiqqer-tabsAdvanced-content-image">
+ <div class="quiqqer-tabsAdvanced-content-image-inner">
{image src=$imgSrc width="600" height="600"}
+ </div>
</div>
{/if}
{if $content}
- <div class="quiqqer-tabsAdvanced-content-body">
- {if isset($entry.entryTitle) && $entry.entryTitle}
- <h2 class="quiqqer-tabsAdvanced-content-title">
- {$entry.entryTitle}
- </h2>
- {/if}
+ <div class="quiqqer-tabsAdvanced-content-body">
+ <div class="quiqqer-tabsAdvanced-content-body-inner">
+ {if isset($entry.entryTitle) && $entry.entryTitle}
+ <h2 class="quiqqer-tabsAdvanced-content-title">
+ {$entry.entryTitle}
+ </h2>
+ {/if}
- {if isset($entry.entryContent) && $entry.entryContent}
- <div class="quiqqer-tabsAdvanced-content-text default-content">
- {$entry.entryContent}
- </div>
- {/if}
- </div>
+ {if isset($entry.entryContent) && $entry.entryContent}
+ <div class="quiqqer-tabsAdvanced-content-text default-content">
+ {$entry.entryContent}
+ </div>
+ {/if}
+ </div>
+ </div>
{/if}
</li>
{/foreach}
diff --git a/src/QUI/Menu/Controls/Tabs.php b/src/QUI/Menu/Controls/Tabs.php
index cfa133c..2581e34 100644
--- a/src/QUI/Menu/Controls/Tabs.php
+++ b/src/QUI/Menu/Controls/Tabs.php
@@ -27,14 +27,21 @@ public function __construct($attributes = [])
$this->setAttributes([
'class' => 'quiqqer-tabs',
'qui-class' => 'package/quiqqer/menu/bin/Controls/NavTabs',
- 'tabImgHeight' => 24,
- 'contentImgMaxWidth' => 300,
- 'contentImgMaxHeight' => 500,
- 'contentTextWidth' => 700,
'activeEntry' => 1, // number
- 'imageMaxHeight' => false,
'entries' => [],
'template' => 'simple',
+
+ // tabs nav
+ 'navImgHeight' => 20, // number
+ 'navStyle' => 'imgLeft', // imgLeft, imgTop, onlyImg
+ 'navCenter' => false,
+
+ // tabs content
+ 'contentImgMaxWidth' => 600, // number
+ 'contentImgMaxHeight' => 300, // number
+ 'contentTextWidth' => 600, // number
+
+
]);
parent::__construct($attributes);
@@ -65,17 +72,50 @@ public function getBody()
array_push($enabledEntries, $entry);
}
+// foreach ($entries as $entry) {
+// array_push($enabledEntries, $entry);
+// }
+//
+// foreach ($entries as $entry) {
+// array_push($enabledEntries, $entry);
+// }
+
$active = 1;
if ($this->getAttribute('activeEntry') && $this->getAttribute('activeEntry') > 0) {
$active = $this->getAttribute('activeEntry');
}
+ /* template */
+ $template = 'simple';
+
+ /* nav */
+ $showNavText = true;
+ $navTabStyleCss = 'navTabStyle__imgLeft';
+ $navAlignment = 'quiqqer-tabsAdvanced-nav-inner__left';
+
+ switch ($this->getAttribute('navStyle')) {
+ case 'imgTop':
+ $navTabStyleCss = 'navTabStyle__imgTop';
+ break;
+ case 'onlyImg':
+ $navTabStyleCss = 'navTabStyle__onlyImg';
+ $showNavText = false;
+ }
+
+ if ($this->getAttribute('navCenter')) {
+ $navAlignment = 'quiqqer-tabsAdvanced-nav-inner__center';
+ }
+
$Engine->assign([
'this' => $this,
'entries' => $enabledEntries,
'active' => $active,
- 'tabImgHeight' => $this->getAttribute('tabImgHeight'),
+ 'navImgHeight' => $this->getAttribute('navImgHeight'),
+ 'navStyle' => $this->getAttribute('navStyle'),
+ 'navTabStyleCss' => $navTabStyleCss,
+ 'showNavText' => $showNavText,
+ 'navAlignment' => $navAlignment,
'contentTextWidth' => $this->getAttribute('contentTextWidth'),
'contentImgMaxWidth' => $this->getAttribute('contentImgMaxWidth'),
'contentImgMaxHeight' => $this->getAttribute('contentImgMaxHeight')
--
GitLab