feat(MegaMenu): add new property "short description" in independent menu

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">

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,

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>

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

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>

src/QUI/Menu/Mega/Simple.css

 .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

src/QUI/Menu/MegaMenu.css

 .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;