diff --git a/bin/Controls/Independent/Items/Custom.html b/bin/Controls/Independent/Items/Custom.html
index d25f2d81e3603d08bea65b02cdf3a63218d8b3e3..ef6cb726ff13f80062f75ca071632bde796cdc75 100644
--- a/bin/Controls/Independent/Items/Custom.html
+++ b/bin/Controls/Independent/Items/Custom.html
@@ -48,7 +48,23 @@
</label>
</td>
</tr>
-
+ <tr>
+ <td>
+ <label class="field-container">
+ <span class="field-container-item">
+ {{short}}
+ </span>
+ <input class="field-container-field"
+ type="text"
+ name="short"
+ data-qui="controls/lang/InputMultiLang"
+ />
+ </label>
+ <div class="field-container-item-desc">
+ {{shortDesc}}
+ </div>
+ </td>
+ </tr>
<tr>
<td>
<label class="field-container">
diff --git a/bin/Controls/Independent/Items/Custom.js b/bin/Controls/Independent/Items/Custom.js
index 37970253fb7c6aac832f8c88e4d276101c616999..32259890c08f8a27eb6ea34e52c9b3b31db66d7b 100644
--- a/bin/Controls/Independent/Items/Custom.js
+++ b/bin/Controls/Independent/Items/Custom.js
@@ -44,6 +44,8 @@ define('package/quiqqer/menu/bin/Controls/Independent/Items/Custom', [
title : QUILocale.get('quiqqer/quiqqer', 'title'),
linkTitle : QUILocale.get(lg, 'tpl.linkTitle'),
+ short: QUILocale.get(lg, 'tpl.short'),
+ shortDesc: QUILocale.get(lg, 'tpl.shortDesc'),
icon : QUILocale.get(lg, 'tpl.icon'),
url : QUILocale.get(lg, 'tpl.url'),
rel : QUILocale.get(lg, 'tpl.rel'),
@@ -107,6 +109,10 @@ define('package/quiqqer/menu/bin/Controls/Independent/Items/Custom', [
data.url = '';
}
+ if (typeof data.short === 'undefined') {
+ data.short = '';
+ }
+
if (typeof data.name === 'undefined') {
data.name = '';
}
@@ -137,11 +143,16 @@ define('package/quiqqer/menu/bin/Controls/Independent/Items/Custom', [
this.getElm().getElement('[name="title"]').get('data-quiid')
);
+ this.$Short = QUI.Controls.getById(
+ this.getElm().getElement('[name="short"]').get('data-quiid')
+ );
+
this.$Name = QUI.Controls.getById(
this.getElm().getElement('[name="name"]').get('data-quiid')
);
this.$Title.setData(title);
+ this.$Short.setData(data.short);
this.$Name.setData(data.name);
if (this.$Title.isLoaded()) {
@@ -152,6 +163,14 @@ define('package/quiqqer/menu/bin/Controls/Independent/Items/Custom', [
});
}
+ if (this.$Short.isLoaded()) {
+ this.$Short.open();
+ } else {
+ this.$Short.addEvent('load', () => {
+ this.$Short.open();
+ });
+ }
+
if (this.$Name.isLoaded()) {
this.$Name.open();
} else {
@@ -171,6 +190,7 @@ define('package/quiqqer/menu/bin/Controls/Independent/Items/Custom', [
title: this.$Title.getValue(),
icon : Form.elements.icon.value,
data : {
+ short: Form.elements.short.value,
url : Form.elements.url.value,
rel : Form.elements.rel.value,
target : Form.elements.target.value,
diff --git a/locale.xml b/locale.xml
index ceb83ae4cf43ba7993832a6779134efb4dfc2e21..2409a9d034a28a6a2847a8000ad2d56f54718a51 100644
--- a/locale.xml
+++ b/locale.xml
@@ -653,6 +653,14 @@
The rel attribute specifies the relationship between the current document and the linked document.
]]></en>
</locale>
+ <locale name="tpl.short">
+ <de><![CDATA[Kurzbeschreibung]]></de>
+ <en><![CDATA[Short description]]></en>
+ </locale>
+ <locale name="tpl.shortDesc">
+ <de><![CDATA[Kurzer Text, der unter dem Link angezeigt wird. Diese Eigenschaft wird nicht in allen Menü-Arten verwendet (unterstützt wird u.A. "MegaMenu: Einfache Liste mit Unterseiten").]]></de>
+ <en><![CDATA[Short text displayed under the link. This property is not used in all menu types (i.e. support for "MegaMenu: Simple list mit sub pages").]]></en>
+ </locale>
<locale name="tpl.click">
<de><![CDATA[Klick Event (JavaScript)]]></de>
<en><![CDATA[Click event (JavaScript)]]></en>
diff --git a/src/QUI/Menu/Independent/Items/AbstractMenuItem.php b/src/QUI/Menu/Independent/Items/AbstractMenuItem.php
index ae5d311978fbb883914dd897099fec64c532ff91..4cfe8b03a1f8763ed1e5bd562d76545c76e97940 100644
--- a/src/QUI/Menu/Independent/Items/AbstractMenuItem.php
+++ b/src/QUI/Menu/Independent/Items/AbstractMenuItem.php
@@ -52,6 +52,36 @@ public function getTitle(Locale $Locale = null): string
return '';
}
+ /**
+ * @param ?Locale $Locale
+ * @return string
+ */
+ public function getShort(Locale $Locale = null): string
+ {
+ if ($Locale === null) {
+ $Locale = QUI::getLocale();
+ }
+
+ $current = $Locale->getCurrent();
+ $data = $this->getCustomData();
+
+ if (!is_array($data) || !isset($data['short'])) {
+ return '';
+ }
+
+ $short = $data['short'];
+
+ if (is_string($short)) {
+ $short = json_decode($short, true);
+ }
+
+ if (isset($short[$current])) {
+ return $short[$current];
+ }
+
+ return '';
+ }
+
/**
* @param Locale|null $Locale
* @return string
diff --git a/src/QUI/Menu/Mega/Simple.Independent.html b/src/QUI/Menu/Mega/Simple.Independent.html
index 18475c94d130f7482b3321c7d7c144aef7ece4c5..6c59b2e844ce5d2c97bfe74388fcf088fc865953 100644
--- a/src/QUI/Menu/Mega/Simple.Independent.html
+++ b/src/QUI/Menu/Mega/Simple.Independent.html
@@ -17,6 +17,12 @@
<span class="quiqqer-menu-megaMenu-children-simple-entry-title">
{$Child->getTitle()}
</span>
+
+ {if $Child->getShort()}
+ <div class="quiqqer-menu-megaMenu-children-simple-entry-short">
+ {$Child->getShort()}
+ </div>
+ {/if}
</a>
{else}
<span class="qui-menu-siteid-{$Child->getIdentifier()}">
@@ -27,6 +33,15 @@
<span class="quiqqer-menu-megaMenu-children-simple-entry-title">
{$Child->getTitle()}
</span>
+ <span class="quiqqer-menu-megaMenu-children-simple-entry-title">
+ {$Child->getTitle()}
+ </span>
+
+ {if $Child->getShort()}
+ <div class="quiqqer-menu-megaMenu-children-simple-entry-short">
+ {$Child->getShort()}
+ </div>
+ {/if}
</span>
{/if}
</div>
diff --git a/src/QUI/Menu/Mega/Simple.css b/src/QUI/Menu/Mega/Simple.css
index fca1243d4bf789471c3096c8078da367d20521ed..3fa909d72892d5af4bae57b1b2b2012663ef8aa6 100644
--- a/src/QUI/Menu/Mega/Simple.css
+++ b/src/QUI/Menu/Mega/Simple.css
@@ -1,7 +1,8 @@
.quiqqer-menu-megaMenu-children-simple {
width: auto;
display: inline-block;
- min-width: 200px;
+ min-width: 12rem;
+ max-width: 25rem;
}
.quiqqer-menu-megaMenu-children-simple-entry {
@@ -24,4 +25,9 @@
padding: 10px 25px;
display: block;
cursor: pointer;
+}
+
+.quiqqer-menu-megaMenu-children-simple-entry-short {
+ font-size: 0.8em;
+ color: var(--_qui-megaMenu-text-color--muted);
}
\ No newline at end of file
diff --git a/src/QUI/Menu/MegaMenu.css b/src/QUI/Menu/MegaMenu.css
index 5bf901b502fec289bee6aea6b77a0ace383fe105..b269f90524dbec10dec1ae4101354493af584d04 100644
--- a/src/QUI/Menu/MegaMenu.css
+++ b/src/QUI/Menu/MegaMenu.css
@@ -1,4 +1,11 @@
.quiqqer-menu-megaMenu {
+ --_qui-megaMenu-link-color: var(--qui-nav-link-color, var(--qui-body-color, #202428));
+ --_qui-megaMenu-link-color--hover: var(--qui-nav-link-color--hover, var(--qui-color-primary, #202428));
+ --_qui-megaMenu-sublink-color: var(--qui-nav-sublink-color, var(--qui-body-color, #202428));
+ --_qui-megaMenu-sublink-color--hover: var(--qui-nav-sublink-color--hover, var(--qui-color-primary, #202428));
+ --_qui-megaMenu-text-color: var(--qui-nav-text-color, var(--qui-body-color, #202428));
+ --_qui-megaMenu-text-color--muted: var(--qui-nav-text-color--muted, var(--qui-text-muted, #646e7d));
+
float: left;
position: relative;
z-index: 50;