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

feat: add Brick to work with Sumbemu control 

Related: #36
Übergeordneter f54a3127
Keine zugehörigen Branchen gefunden
Keine zugehörigen Tags gefunden
1 Merge Request!29feat: add submenu control and brick
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bricks.xml
+ 174
− 0
Zeige Datei @ 093f6219
......@@ -339,5 +339,179 @@
</settings>
</brick>
<!-- nav tabs vertical -->
<brick control="\QUI\Menu\Bricks\Submenu">
<title>
<locale group="quiqqer/menu"
var="bricks.submenu.title"/>
</title>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.description"/>
</description>
<settings>
<setting name="menuId" data-qui="package/quiqqer/menu/bin/Controls/Independent/Input" type="text">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.menuId"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.menuId.desc"/>
</description>
</setting>
<setting name="startId" class="project-site">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.startId"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.startId.desc"/>
</description>
</setting>
<setting name="template" type="select">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.template"/>
<option value="list-simple">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.template.list-simple"/>
</option>
<option value="list-buttonStyle">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.template.list-buttonStyle"/>
</option>
<option value="box-imageTop">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.template.box-imageTop"/>
</option>
<option value="box-imageOverlay">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.template.box-imageOverlay"/>
</option>
</setting>
<setting name="controlBgColor" type="color">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.controlBgColor"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.controlBgColor.desc"/>
</description>
</setting>
<setting name="linkColor" type="color">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.linkColor"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.linkColor.desc"/>
</description>
</setting>
<setting name="linkColorHover" type="color">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.linkColorHover"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.linkColorHover.desc"/>
</description>
</setting>
<setting name="itemsAlignment" type="select">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.itemsAlignment"/>
<option value="start">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.itemsAlignment.start"/>
</option>
<option value="center">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.itemsAlignment.center"/>
</option>
<option value="end">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.itemsAlignment.end"/>
</option>
<option value="space-between">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.itemsAlignment.space-between"/>
</option>
<option value="space-around">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.itemsAlignment.space-around"/>
</option>
</setting>
<setting name="showImages" type="checkbox">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.showImages"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.showImages.desc"/>
</description>
</setting>
<setting name="imageFitMode" type="select">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageFitMode"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageFitMode.desc"/>
</description>
<option value="fill">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageFitMode.fill"/>
</option>
<option value="contain">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageFitMode.contain"/>
</option>
<option value="cover">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageFitMode.cover"/>
</option>
<option value="none">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageFitMode.none"/>
</option>
<option value="scale-down">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageFitMode.scale-down"/>
</option>
</setting>
<setting name="imageContainerHeight" type="text">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageContainerHeight"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.imageContainerHeight.desc"/>
</description>
</setting>
<setting name="boxBgColor" type="color">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.boxBgColor"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.boxBgColor.desc"/>
</description>
</setting>
<setting name="boxWidth" type="text">
<locale group="quiqqer/menu"
var="bricks.submenu.settings.boxWidth"/>
<description>
<locale group="quiqqer/menu"
var="bricks.submenu.settings.boxWidth.desc"/>
</description>
</setting>
</settings>
</brick>
</bricks>
</quiqqer>
\ No newline at end of file
locale.xml
+ 160
− 0
Zeige Datei @ 093f6219
......@@ -515,6 +515,166 @@
<de><![CDATA[Tab Einträge]]></de>
<en><![CDATA[Tab entries]]></en>
</locale>
<locale name="bricks.submenu.title">
<de><![CDATA[Menü: Submenu (Navigation)]]></de>
<en><![CDATA[Menu: Submenu]]></en>
</locale>
<locale name="bricks.submenu.desc">
<de><![CDATA[Platziere auf deiner Seite eine Subnavigation. Dadurch kann innerhalb der Seite gescrollt oder zu anderen Unterseiten verlinkt werden.]]></de>
<en><![CDATA[Place a sub-navigation on your page. This allows you to scroll within the page or link to other subpages.]]></en>
</locale>
<locale name="bricks.submenu.settings.menuId">
<de><![CDATA[Menu ID]]></de>
<en><![CDATA[Menu ID]]></en>
</locale>
<locale name="bricks.submenu.settings.menuId.desc">
<de><![CDATA[Menu ID auswählen.]]></de>
<en><![CDATA[Select your menu]]></en>
</locale>
<locale name="bricks.submenu.settings.startId">
<de><![CDATA[Elternseite]]></de>
<en><![CDATA[Parent site]]></en>
</locale>
<locale name="bricks.submenu.settings.startId.desc">
<de><![CDATA[Bitte die Elternseite auswählen. <strong>Achtung!</strong> Wenn "Menu ID" ausgewählt ist, hat diese Option keine Auswirkung.]]></de>
<en><![CDATA[Select the parent site. <strong>Notice:</strong> if "Menu ID" is selected, this option has no effect.]]></en>
</locale>
<locale name="bricks.submenu.settings.template">
<de><![CDATA[Vorlage]]></de>
<en><![CDATA[Template]]></en>
</locale>
<locale name="bricks.submenu.settings.template.list-simple">
<de><![CDATA[Liste: einfach]]></de>
<en><![CDATA[List: simple]]></en>
</locale>
<locale name="bricks.submenu.settings.template.list-buttonStyle">
<de><![CDATA[Liste: Button Style]]></de>
<en><![CDATA[Liste: button style]]></en>
</locale>
<locale name="bricks.submenu.settings.template.box-imageTop">
<de><![CDATA[Box: Bild / Icon vor dem Text]]></de>
<en><![CDATA[Box: Image with text below]]></en>
</locale>
<locale name="bricks.submenu.settings.template.box-imageOverlay">
<de><![CDATA[Box: Text über dem Bild (nicht für Icons geeignet)]]></de>
<en><![CDATA[Box: Text above the image (not suitable for icons)]]></en>
</locale>
<locale name="bricks.submenu.settings.controlBgColor">
<de><![CDATA[Menu Hintergrundfarbe]]></de>
<en><![CDATA[Menu background color]]></en>
</locale>
<locale name="bricks.submenu.settings.controlBgColor.desc">
<de><![CDATA[Die ausgewählte Farbe wird hinter dem Menü angewendet.]]></de>
<en><![CDATA[The selected color is applied behind the menu.]]></en>
</locale>
<locale name="bricks.submenu.settings.linkColor">
<de><![CDATA[Link Farbe]]></de>
<en><![CDATA[Link color]]></en>
</locale>
<locale name="bricks.submenu.settings.linkColor.desc">
<de><![CDATA[Setzt die Farbe des Links. Wenn keine Farbe ausgewählt ist, wird die Farbe vererbt (meistens Textfarbe).]]></de>
<en><![CDATA[Sets the color of the link. If no color is selected, the color is inherited (usually text color).]]></en>
</locale>
<locale name="bricks.submenu.settings.linkColorHover">
<de><![CDATA[Aktive Link Farbe ("hover")]]></de>
<en><![CDATA[Hover link color]]></en>
</locale>
<locale name="bricks.submenu.settings.linkColorHover.desc">
<de><![CDATA[Diese Farbe wird benutzt, wenn man mit der Maus über dem Link fährt.]]></de>
<en><![CDATA[This color is used when you move the mouse over the link.]]></en>
</locale>
<locale name="bricks.submenu.settings.itemsAlignment">
<de><![CDATA[Menüpunkte Ausrichtung]]></de>
<en><![CDATA[Menu items alignment]]></en>
</locale>
<locale name="bricks.submenu.settings.itemsAlignment.start">
<de><![CDATA[Anfang (links)]]></de>
<en><![CDATA[Start (left)]]></en>
</locale>
<locale name="bricks.submenu.settings.itemsAlignment.center">
<de><![CDATA[Zentriert]]></de>
<en><![CDATA[Center]]></en>
</locale>
<locale name="bricks.submenu.settings.itemsAlignment.end">
<de><![CDATA[Ende (rechts)]]></de>
<en><![CDATA[End (right)]]></en>
</locale>
<locale name="bricks.submenu.settings.itemsAlignment.space-between">
<de><![CDATA[Menüpunkte gleichmäßig verteilen ("space between")]]></de>
<en><![CDATA[Space between]]></en>
</locale>
<locale name="bricks.submenu.settings.itemsAlignment.space-around">
<de><![CDATA[Menüpunkte gleichmäßig verteilen ("space around")]]></de>
<en><![CDATA[Space around]]></en>
</locale>
<locale name="bricks.submenu.settings.showImages">
<de><![CDATA[Bilder / Icons aktivieren]]></de>
<en><![CDATA[Active images or icons]]></en>
</locale>
<locale name="bricks.submenu.settings.showImages.desc">
<de><![CDATA[Falls die einzelne Einträge Bilder oder Icons eingestellt haben, werden diese angezeigt (außer in Template "List: einfach").]]></de>
<en><![CDATA[If the menu entries have images or icons set, these are displayed (except in template "List: simple").]]></en>
</locale>
<locale name="bricks.submenu.settings.imageFitMode">
<de><![CDATA[Bildverhalten]]></de>
<en><![CDATA[Image fit mode]]></en>
</locale>
<locale name="bricks.submenu.settings.imageFitMode.desc">
<de><![CDATA[Diese Einstellung hat Auswirkung nur auf Bilder, keine Icons.]]></de>
<en><![CDATA[This setting only affects images, not icons.]]></en>
</locale>
<locale name="bricks.submenu.settings.imageFitMode.fill">
<de><![CDATA[Fill: Die gesamte Fläche Ausfüllen - Bild kann verzerrt werden]]></de>
<en><![CDATA[Fill: Fill the entire area - image can be distorted]]></en>
</locale>
<locale name="bricks.submenu.settings.imageFitMode.contain">
<de><![CDATA[Contain: Bild wird verkleinert um in den verfügbaren Platz zu passen]]></de>
<en><![CDATA[Contain: Image is resized to fit in the available space]]></en>
</locale>
<locale name="bricks.submenu.settings.imageFitMode.cover">
<de><![CDATA[Cover: Die gesamte Fläche Ausfüllen - Bild kann abgeschnitten werden]]></de>
<en><![CDATA[Cover: Fill entire area - image can be cut off]]></en>
</locale>
<locale name="bricks.submenu.settings.imageFitMode.none">
<de><![CDATA[None: das Bild behält seine originale Größe]]></de>
<en><![CDATA[None: the image retains its original size]]></en>
</locale>
<locale name="bricks.submenu.settings.imageFitMode.scale-down">
<de><![CDATA[Scale down: das Bild wird u.U. verkleinert.]]></de>
<en><![CDATA[Scale down: the image may be reduced in size.]]></en>
</locale>
<locale name="bricks.submenu.settings.imageContainerHeight">
<de><![CDATA[Höhe der Bildbox]]></de>
<en><![CDATA[Image container height]]></en>
</locale>
<locale name="bricks.submenu.settings.imageContainerHeight.desc">
<de><![CDATA[Man kan jeden validen CSS Wert verwenden, auch die <code>clamp()</code> Funktion. Wird kein Wert gesetzt, wird die Box quadratisch.]]></de>
<en><![CDATA[You can use any valid CSS value, including the <code>clamp()</code> function. If no value is set, the container becomes square.]]></en>
</locale>
<locale name="bricks.submenu.settings.boxBgColor">
<de><![CDATA[Bildbox Farbe]]></de>
<en><![CDATA[Image container color]]></en>
</locale>
<locale name="bricks.submenu.settings.boxBgColor.desc">
<de><![CDATA[Diese Einstellung funktioniert nur mit Templates "Box: Bild / Icon oben" und "Box: Text über dem Bild" zusammen.]]></de>
<en><![CDATA[This setting only works with templates "Box: image or icon top" and "Box: Image with text below" together.]]></en>
</locale>
<locale name="bricks.submenu.settings.boxWidth">
<de><![CDATA[Breite der Menüeinträgen]]></de>
<en><![CDATA[Width of the menu items]]></en>
</locale>
<locale name="bricks.submenu.settings.boxWidth.desc">
<de><![CDATA[Man kan jeden validen CSS Wert verwenden, auch die <code>clamp()</code> Funktion. Diese Einstellung funktioniert nur mit Templates "Box: Bild / Icon oben" und "Box: Text über dem Bild" zusammen.]]></de>
<en><![CDATA[You can use any valid CSS value, including the <code>clamp()</code> function. If no value is set, the container becomes square. This setting only works with templates "Box: image or icon top" and "Box: Image with text below" together.]]></en>
</locale>
</groups>
<groups name="quiqqer/menu" datatype="php">
......
src/QUI/Menu/Bricks/Submenu.html 0 → 100644
+ 13
− 0
Zeige Datei @ 093f6219
{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
<header class="control-header">
<h1>{$this->getAttribute('frontendTitle')}</h1>
</header>
{/if}
{if $this->getAttribute('content') != ""}
<div class="control-content">
{$this->getAttribute('content')}
</div>
{/if}
{$Submenu->create()}
\ No newline at end of file
src/QUI/Menu/Bricks/Submenu.php 0 → 100644
+ 100
− 0
Zeige Datei @ 093f6219
<?php
/**
* This file contains \QUI\Menu\Bricks\Submenu
*/
namespace QUI\Menu\Bricks;
use QUI;
use QUI\Exception;
use QUI\Menu\Independent;
use QUI\Projects\Site\Utils;
/**
* Class Brick Submenu
*
* It creates a submenu navigation
*
* This control is supposed to work with QUI Independent Menu, but you can use it with QUI Site.
* You have to pass a menu ID or a parent page.
*
* @package QUI\Menu
* @author www.pcsg.de (Michael Danielczok)
*/
class Submenu extends QUI\Control
{
/**
* @param array $attributes
*/
public function __construct(array $attributes = [])
{
// defaults values
$this->setAttributes([
'class' => 'quiqqer-menu-bricks-submenu',
'startId' => false, // id or site link
'menuId' => false, // id of an independent menu
'template' => 'list-buttonStyle', // 'list-buttonStyle', 'list-simple', 'box-imageTop', 'box-imageOverlay'
'controlBgColor' => '',
'controlBgPadding' => '1rem',
'linkColor' => '',
'linkColorHover' => '',
'itemsAlignment' => 'center', // 'start', 'center', 'end', 'space-between', 'space-around'
'showImages' => true, // if true, icons or images will be displayed
'imageFitMode' => 'cover', // any valid css property for image-fit attribute , i.e. 'cover', 'contain', 'scale-down'
'imageContainerHeight' => '',// any valid css property (with unit!) for height attribute, i.e. '150px', '10vw' or even clamp() function (if no value passed the container will be a square)
'boxBgColor' => '#f5f5f6',
'boxWidth' => '250px'// any valid css property (with unit!) for height attribute, i.e. '250px', '10vw' or even clamp() function
]);
parent::__construct($attributes);
$this->setAttribute('cacheable', false);
}
/**
* (non-PHPdoc)
*
* @throws Exception
* @see \QUI\Control::create()
*/
public function getBody(): string
{
$Engine = QUI::getTemplateManager()->getEngine();
$linkColor = $this->getAttribute('linkColor');
if ($linkColor === '') {
$linkColor = 'inherit';
}
$linkColorHover = $this->getAttribute('linkColorHover');
if ($linkColor === '') {
$linkColorHover = 'inherit';
}
$Submenu = new QUI\Menu\Controls\Submenu([
'startId' => $this->getAttribute('startId'),
'menuId' => $this->getAttribute('menuId'),
'template' => $this->getAttribute('template'),
'controlBgColor' => $this->getAttribute('controlBgColor'),
'controlBgPadding' => $this->getAttribute('controlBgPadding'),
'linkColor' => $linkColor,
'linkColorHover' => $linkColorHover,
'itemsAlignment' => $this->getAttribute('itemsAlignment'),
'showImages' => $this->getAttribute('showImages'),
'imageFitMode' => $this->getAttribute('imageFitMode'),
'imageContainerHeight' => $this->getAttribute('imageContainerHeight'),
'boxBgColor' => $this->getAttribute('boxBgColor'),
'boxWidth' => $this->getAttribute('boxWidth')
]);
$Engine->assign([
'this' => $this,
'Submenu' => $Submenu
]);
return $Engine->fetch(dirname(__FILE__) . '/Submenu.html');
}
}
src/QUI/Menu/Controls/Submenu.php
+ 4
− 5
Zeige Datei @ 093f6219
......@@ -12,7 +12,7 @@
use QUI\Projects\Site\Utils;
/**
* Class Subumenu
* Class Submenu
*
* It creates a submenu navigation
*
......@@ -38,12 +38,11 @@ public function __construct(array $attributes = [])
'startId' => false, // id or site link
'menuId' => false, // id of an independent menu
'template' => 'list-buttonStyle', // 'list-buttonStyle', 'list-simple', 'box-imageTop', 'box-imageOverlay'
'useIcons' => false,
'controlBgColor' => '',
'controlBgPadding' => '1rem',
'linkColor' => 'inherit',
'linkColorHover' => 'inherit',
'itemsAlignment' => 'center', // 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'
'itemsAlignment' => 'center', // 'start', 'center', 'end', 'space-between', 'space-around'
'showImages' => true, // if true, icons or images will be displayed
'imageFitMode' => 'cover', // any valid css property for image-fit attribute , i.e. 'cover', 'contain', 'scale-down'
'imageContainerHeight' => '',// any valid css property (with unit!) for height attribute, i.e. '150px', '10vw' or even clamp() function (if no value passed the container will be a square)
......@@ -180,9 +179,9 @@ public function getBody(): string
}
switch ($this->getAttribute('itemsAlignment')) {
case 'flex-start':
case 'start':
case 'center':
case 'flex-end':
case 'end':
case 'space-between':
case 'space-around':
$itemsAlignment = $this->getAttribute('itemsAlignment');
......
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