From a7e76edeecad5820de8994ee873984bc838e52cd Mon Sep 17 00:00:00 2001
From: Henning Leutz <leutz@pcsg.de>
Date: Thu, 22 Sep 2016 08:13:42 +0200
Subject: [PATCH] feat: MegaMenu -> Icon Menu -> Children with icons
---
settings.xml | 1 +
src/QUI/Menu/Mega/Icons.css | 68 ++++++++++++++++++++++++++++++++++++
src/QUI/Menu/Mega/Icons.html | 38 ++++++++++++++++++++
src/QUI/Menu/Mega/Icons.php | 53 ++++++++++++++++++++++++++++
src/QUI/Menu/MegaMenu.php | 5 +++
5 files changed, 165 insertions(+)
create mode 100644 src/QUI/Menu/Mega/Icons.css
create mode 100644 src/QUI/Menu/Mega/Icons.html
create mode 100644 src/QUI/Menu/Mega/Icons.php
diff --git a/settings.xml b/settings.xml
index 63e6060..b5d3dea 100644
--- a/settings.xml
+++ b/settings.xml
@@ -26,6 +26,7 @@
<text>Header-Logo</text>
<option value="Standard">MegaMenu - mit Unterseiten</option>
<option value="Image">MegaMenu - Grosse Seitenbilder</option>
+ <option value="Icons">MegaMenu - mit Icons</option>
</select>
</settings>
</category>
diff --git a/src/QUI/Menu/Mega/Icons.css b/src/QUI/Menu/Mega/Icons.css
new file mode 100644
index 0000000..6a49236
--- /dev/null
+++ b/src/QUI/Menu/Mega/Icons.css
@@ -0,0 +1,68 @@
+.quiqqer-menu-megaMenu-children-icons {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+}
+
+/* ul */
+.quiqqer-menu-megaMenu-children-icons-list {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+/* li's */
+.quiqqer-menu-megaMenu-children-icons-list-entry {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ float: left;
+ font-size: 14px;
+ font-weight: bold;
+ list-style-type: none;
+ padding: 20px;
+ width: 33.3333%;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry:hover {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry li {
+ list-style-type: none;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry-short {
+ clear: both;
+ float: left;
+ font-size: 12px;
+ font-weight: normal;
+ margin: 10px 0 0;
+ width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry-short li {
+ float: left;
+ margin-bottom: 7px;
+ width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry-short-link .quiqqer-icon {
+ float: left;
+ line-height: 18px;
+ width: 20px;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry-short-link-title {
+ float: left;
+ width: calc(100% - 20px);
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-short-text {
+ color: rgba(0, 0, 0, 0.4);
+}
+
+.quiqqer-menu-megaMenu-children-icons-entry-short ul {
+ margin-left: 20px;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry:nth-child(3n+1) {
+ clear: both;
+}
diff --git a/src/QUI/Menu/Mega/Icons.html b/src/QUI/Menu/Mega/Icons.html
new file mode 100644
index 0000000..a623c24
--- /dev/null
+++ b/src/QUI/Menu/Mega/Icons.html
@@ -0,0 +1,38 @@
+<ul class="quiqqer-menu-megaMenu-children-icons-list">
+ {foreach $children as $Child}
+ <li class="quiqqer-menu-megaMenu-children-icons-list-entry">
+ <a href="{url site=$Child}"
+ title="{$Child->getAttribute('title')|escape:" html"}">
+ {$Child->getAttribute('title')}
+ </a>
+
+ {assign var=subchildren value=$Child->getNavigation()}
+
+ {if count($subchildren)}
+ <div class="quiqqer-menu-megaMenu-children-icons-list-entry-short">
+ <ul>
+ {foreach $subchildren as $SubChild}
+ <li>
+ <a href="{url site=$SubChild}"
+ title="{$SubChild->getAttribute('title')|escape:" html"}"
+ class="quiqqer-menu-megaMenu-children-icons-list-entry-short-link"
+ >
+ {image src=$SubChild->getAttribute('image_site') onlyicon=1}
+ <span class="quiqqer-menu-megaMenu-children-icons-list-entry-short-link-title">
+ {$SubChild->getAttribute('title')}
+ </span>
+ </a>
+ </li>
+ {/foreach}
+ </ul>
+ </div>
+ {else}
+ {if $Child->getAttribute('short')}
+ <div class="quiqqer-menu-megaMenu-children-icons-list-entry-short quiqqer-menu-megaMenu-children-icons-list-short-text">
+ {$Child->getAttribute('short')}
+ </div>
+ {/if}
+ {/if}
+ </li>
+ {/foreach}
+</ul>
diff --git a/src/QUI/Menu/Mega/Icons.php b/src/QUI/Menu/Mega/Icons.php
new file mode 100644
index 0000000..55eeacf
--- /dev/null
+++ b/src/QUI/Menu/Mega/Icons.php
@@ -0,0 +1,53 @@
+<?php
+
+/**
+ * This file contains QUI\Menu\Mega\Icons
+ */
+namespace QUI\Menu\Mega;
+
+use QUI;
+
+/**
+ * Class Icons
+ *
+ * @package QUI\Menu
+ */
+class Icons extends AbstractChild
+{
+ /**
+ * @var null
+ */
+ protected $children = null;
+
+ /**
+ * Standard constructor.
+ *
+ * @param array $params
+ */
+ public function __construct(array $params = array())
+ {
+ parent::__construct($params);
+
+ $this->addCSSClass('quiqqer-menu-megaMenu-children-icons');
+ $this->addCSSFile(dirname(__FILE__) . '/Icons.css');
+ }
+
+ /**
+ * Return the html body
+ *
+ * @return string
+ * @throws QUI\Exception
+ */
+ public function getBody()
+ {
+ $Engine = QUI::getTemplateManager()->getEngine();
+
+ $Engine->assign(array(
+ 'this' => $this,
+ 'children' => $this->getChildren(),
+ 'Site' => $this->getSite()
+ ));
+
+ return $Engine->fetch(dirname(__FILE__) . '/Icons.html');
+ }
+}
diff --git a/src/QUI/Menu/MegaMenu.php b/src/QUI/Menu/MegaMenu.php
index d41560d..2ab6f8a 100644
--- a/src/QUI/Menu/MegaMenu.php
+++ b/src/QUI/Menu/MegaMenu.php
@@ -46,6 +46,11 @@ public function getBody()
$childControl = QUI\Menu\Mega\Image::class;
break;
+ case 'Icons':
+ case QUI\Menu\Mega\Icons::class:
+ $childControl = QUI\Menu\Mega\Icons::class;
+ break;
+
default:
case 'Standard':
case QUI\Menu\Mega\Standard::class:
--
GitLab