From a3faa651033050b8a5b8d28283411f66552e35b6 Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Mon, 23 May 2022 12:04:40 +0200
Subject: [PATCH] feat: FloatedNav new settings for position and lang switch.
---
src/QUI/Menu/Controls/FloatedNav.css | 33 +++++++++++--
src/QUI/Menu/Controls/FloatedNav.html | 2 +-
src/QUI/Menu/Controls/FloatedNav.php | 68 ++++++++++++++++++---------
3 files changed, 78 insertions(+), 25 deletions(-)
diff --git a/src/QUI/Menu/Controls/FloatedNav.css b/src/QUI/Menu/Controls/FloatedNav.css
index 4052c70..40b20b6 100644
--- a/src/QUI/Menu/Controls/FloatedNav.css
+++ b/src/QUI/Menu/Controls/FloatedNav.css
@@ -25,12 +25,23 @@
.quiqqer-floatedNav {
background: #fff;
position: fixed;
- right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
+.quiqqer-floatedNav__posX-right {
+ right: 0;
+}
+
+.quiqqer-floatedNav__posX-left {
+ left: 0;
+}
+
+.quiqqer-floatedNav-entry {
+ transition: 0.2s all ease;
+}
+
.quiqqer-floatedNav-entry-inner {
background: var(--qui-color-main, #333);
border: var(--qui-border-width, 2px) solid var(--qui-color-main, #333);
@@ -41,18 +52,20 @@
line-height: var(--quiqqer-floatedNav-size);
text-align: center;
width: var(--quiqqer-floatedNav-size);
+ overflow: hidden;
}
/* lang switch */
.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag {
font-size: calc(0.75 * var(--quiqqer-floatedNav-fontSize));
width: var(--quiqqer-floatedNav-size);
- background: var(--qui-color-main, #333);
display: flex;
flex-direction: column;
+ overflow: hidden;
}
.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry {
+ background: var(--qui-color-main, #333);
line-height: calc(0.5 * var(--quiqqer-floatedNav-size));
padding: 0;
text-align: center;
@@ -61,12 +74,26 @@
text-transform: uppercase;
}
+.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry:not(.active) {
+ background-color: var(--qui-color-dark, #333);
+}
+
+.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry:not(:first-child) {
+ border-top: 2px solid #fff;
+}
+
.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry-text {
line-height: inherit;
display: block;
}
+/* hover */
+.quiqqer-floatedNav-entry:hover,
+.quiqqer-bricks-languageswitch-flag-entry:hover {
+ filter: brightness(90%);
+}
+
/***********/
/* Designs */
/***********/
@@ -90,5 +117,5 @@
/* Design: flat */
.quiqqer-floatedNav__flat .quiqqer-floatedNav-entry:not(:last-child) {
- margin-bottom: 4px;
+ margin-bottom: 2px;
}
diff --git a/src/QUI/Menu/Controls/FloatedNav.html b/src/QUI/Menu/Controls/FloatedNav.html
index 47b5d86..aea686f 100644
--- a/src/QUI/Menu/Controls/FloatedNav.html
+++ b/src/QUI/Menu/Controls/FloatedNav.html
@@ -1,4 +1,4 @@
-<nav class="quiqqer-floatedNav {$design} {$size}">
+<nav class="quiqqer-floatedNav {$design} {$size} {$posX}">
{foreach $children as $Child}
{assign var=hasUrl value=1}
{if !$Child->getUrl()}
diff --git a/src/QUI/Menu/Controls/FloatedNav.php b/src/QUI/Menu/Controls/FloatedNav.php
index bf5abb4..72fec77 100644
--- a/src/QUI/Menu/Controls/FloatedNav.php
+++ b/src/QUI/Menu/Controls/FloatedNav.php
@@ -25,9 +25,11 @@ public function __construct($attributes = [])
{
// default options
$this->setAttributes([
- 'menuId' => false,
- 'size' => 'medium', // small, medium, large
- 'design' => 'iconBar', // iconBar, flat
+ 'menuId' => false,
+ 'posX' => 'right', // right, left
+ 'size' => 'medium', // small, medium, large
+ 'design' => 'iconBar', // iconBar, flat
+ 'showLangSwitch' => false
]);
parent::__construct($attributes);
@@ -44,40 +46,64 @@ public function __construct($attributes = [])
*/
public function getBody()
{
- $Engine = QUI::getTemplateManager()->getEngine();
- $size = 'quiqqer-floatedNav__size-medium';
- $design = 'quiqqer-floatedNav__iconsBar';
- $showLangSwitch = false;
-
+ $Engine = QUI::getTemplateManager()->getEngine();
$IndependentMenu = Independent\Handler::getMenu($this->getAttribute('menuId'));
+ $LangSwitch = null;
if (!$IndependentMenu) {
return '';
}
- if ($this->getAttribute('size')) {
- $size = 'quiqqer-floatedNav__size-'.$this->getAttribute('size');
+ switch ($this->getAttribute('design')) {
+ case 'small':
+ case 'medium':
+ case 'large':
+ $size = 'quiqqer-floatedNav__size-'.$this->getAttribute('size');
+ break;
+
+ default:
+ $size = 'quiqqer-floatedNav__size-medium';
}
- if ($this->getAttribute('design')) {
- $design = 'quiqqer-floatedNav__'.$this->getAttribute('design');
+ switch ($this->getAttribute('design')) {
+ case 'iconBar':
+ case 'flat':
+ $design = 'quiqqer-floatedNav__'.$this->getAttribute('design');
+ break;
+
+ default:
+ $design = 'quiqqer-floatedNav__iconsBar';
}
+ switch ($this->getAttribute('posX')) {
+ case 'left':
+ case 'right':
+ $posX = 'quiqqer-floatedNav__posX-'.$this->getAttribute('posX');
+ break;
- $showLangSwitch = true;
+ default:
+ $posX = 'quiqqer-floatedNav__posX-right';
+ break;
+ }
- $LangSwitch = new QUI\Bricks\Controls\LanguageSwitches\Flags([
- 'showFlags' => 0
- ]);
+ if ($this->getAttribute('showLangSwitch')) {
+ try {
+ $LangSwitch = new QUI\Bricks\Controls\LanguageSwitches\Flags([
+ 'showFlags' => 0
+ ]);
+ } catch (QUI\Exception $Exception) {
+ QUI\System\Log::writeException($Exception);
+ }
+ }
$children = $IndependentMenu->getChildren();
$Engine->assign([
- 'this' => $this,
- 'children' => $children,
- 'size' => $size,
- 'design' => $design,
- 'showLangSwitch' => $showLangSwitch,
+ 'this' => $this,
+ 'children' => $children,
+ 'size' => $size,
+ 'posX' => $posX,
+ 'design' => $design,
'LangSwitch' => $LangSwitch
]);
--
GitLab