Skip to content
Code-Schnipsel Gruppen Projekte
Commit 2f1bfd37 erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

refactor: Tabs Control improved (more settings)

Übergeordneter e9631064
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Controls/NavTabs.js
+ 0
− 1
Zeige Datei @ 2f1bfd37
......@@ -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;
......
bricks.xml
+ 21
− 18
Zeige Datei @ 2f1bfd37
......@@ -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>
......
src/QUI/Menu/Controls/Tabs.css
+ 110
− 134
Zeige Datei @ 2f1bfd37
......@@ -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
src/QUI/Menu/Controls/Tabs.html
+ 42
− 35
Zeige Datei @ 2f1bfd37
{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}
......
src/QUI/Menu/Controls/Tabs.php
+ 46
− 6
Zeige Datei @ 2f1bfd37
......@@ -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')
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab