Merge branch 'dev' into 'next'

Dev

See merge request !19

ajax/backend/independent/getItemTypes.php

@@ -18,6 +18,7 @@ function () {
         foreach ($list as $class) {
             $result[] = [
                 'title' => call_user_func([$class, 'itemTitle']),
+                'desc' => call_user_func([$class, 'itemShort']),
                 'icon' => call_user_func([$class, 'itemIcon']),
                 'jsControl' => call_user_func([$class, 'itemJsControl']),
                 'class' => $class

bin/Controls/Independent/MenuManagement.js

@@ -110,10 +110,16 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuManagement', [
                         width    : 50
                     },
                     {
-                        header   : QUILocale.get(lg, 'grid.menuTitle'),
+                        header   : QUILocale.get(lg, 'menu.title'),
                         dataIndex: 'title',
                         dataType : 'string',
-                        width    : 150
+                        width    : 250
+                    },
+                    {
+                        header   : QUILocale.get(lg, 'menu.workingTitle'),
+                        dataIndex: 'workingTitle',
+                        dataType : 'string',
+                        width    : 350
                     }
                 ]
             });

bin/Controls/Independent/MenuPanel.Create.html

-<form>
-    <p>{{text}}</p>
-    <table class="data-table data-table-flexbox" style="margin-top: 20px">
-        <tbody>
-        <tr>
-            <td>
-                <label class="field-container">
-                    <span class="field-container-item" title="{{textType}}">
-                        {{textType}}
-                    </span>
-                    <select type="text"
-                            class="field-container-field"
-                            name="itemType"
-                    ></select>
-                </label>
-            </td>
-        </tr>
-        </tbody>
-    </table>
-</form>
\ No newline at end of file

bin/Controls/Independent/MenuPanel.ItemCard.html

+<div class="qui-menuPanel-optionList__option-image">
+    <span class="{{icon}}"></span>
+</div>
+<div class="qui-menuPanel-optionList__option-content">
+    <div class="qui-menuPanel-optionList__option-title">
+        <input type="radio" name="itemType" data-icon="{{icon}}" value="{{value}}" style="display: none;">
+        <span>{{title}}</span>
+    </div>
+    <div class="qui-menuPanel-optionList__option-desc">{{desc}}</div>
+</div>
\ No newline at end of file

bin/Controls/Independent/MenuPanel.css

@@ -20,3 +20,51 @@
 .quiqqer-menu-menuPanel-innerContainer > div {
     width: 100%;
 }
+
+/****************************************/
+/* Options list: create and edit window */
+/****************************************/
+.qui-menuPanel-optionList {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    margin-top: 3rem;
+}
+
+.qui-menuPanel-optionList__option {
+    background: #f5f5f5;
+    padding: 1rem 1.5rem;
+    border-radius: 1rem;
+    cursor: pointer;
+    display: flex;
+    gap: 0.5rem 1.5rem;
+}
+
+.qui-menuPanel-optionList__option-image {
+    font-size: 3rem;
+    width: 4rem;
+    flex-shrink: 0;
+    text-align: center;
+    align-self: flex-start;
+    opacity: 0.5;
+}
+
+.qui-menuPanel-optionList__option-title {
+    margin-bottom: 0.25rem;
+    font-weight: bold;
+}
+
+.qui-menuPanel-optionList__option-desc {
+    opacity: 0.75;
+}
+
+/* checked */
+.qui-menuPanel-optionList__option.checked {
+    outline: 2px solid;
+    outline-offset: -2px;
+}
+
+.qui-menuPanel-optionList__option.checked .qui-menuPanel-optionList__option-image {
+    opacity: 1;
+}
\ No newline at end of file

bin/Controls/Independent/MenuPanel.js

@@ -18,13 +18,13 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
     'package/quiqqer/menu/bin/classes/IndependentHandler',
 
     'Mustache',
-    'text!package/quiqqer/menu/bin/Controls/Independent/MenuPanel.Create.html',
+    'text!package/quiqqer/menu/bin/Controls/Independent/MenuPanel.ItemCard.html',
     'text!package/quiqqer/menu/bin/Controls/Independent/MenuPanel.Settings.html',
     'css!package/quiqqer/menu/bin/Controls/Independent/MenuPanel.css'
 
 ], function (QUI, QUIPanel, QUIMap, QUIMapItem, QUIConfirm,
              QUIContextMenu, QUIContextMenuItem, QUIContextSeparator, InputMultiLang,
-             QUIAjax, QUILocale, IndependentHandler, Mustache, templateCreate, templateSettings) {
+             QUIAjax, QUILocale, IndependentHandler, Mustache, templateItemCard, templateSettings) {
     "use strict";
 
     const lg = 'quiqqer/menu';
@@ -232,7 +232,7 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
                             if (text === '' || text === '###') {
                                 text = '?';
                             }
-                            
+
                             Item = new QUIMapItem({
                                 text     : text,
                                 icon     : data.typeIcon,
@@ -303,6 +303,8 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
                 };
             };
 
+            this.setMenuTitle();
+
             let result = toArray(this.$Map.firstChild());
 
             return this.$refreshItemDisplay().then(() => {
@@ -317,6 +319,42 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
             });
         },
 
+        /**
+         * Set the title of this.$Map, so the title changes in the left panel.
+         * Also set menu title and working title to the variables:
+         *   this.$title
+         *   this.$workingTitle
+         *
+         * This function is a small workaround for this user flow:
+         *   "User change the menu title (and working title) and save directly the menu by clicking save-button".
+         */
+        setMenuTitle: function() {
+            const selected = this.$Map.getSelectedChildren();
+
+            if (selected.length === 1 && selected[0].getAttribute('value') !== 'start') {
+                return;
+            }
+
+            const Title = this.$InnerContainer.getElement('[name="title"]');
+            const WorkingTitle = this.$InnerContainer.getElement('[name="workingTitle"]');
+
+            if (!Title) {
+                return;
+            }
+
+            selected[0].setAttribute('itemTitle', Title.value);
+
+            this.$title = JSON.decode(Title.value);
+            this.$workingTitle = JSON.decode(WorkingTitle.value);
+
+            let current = QUILocale.getCurrent();
+
+            if (current in this.$title) {
+                selected[0].setAttribute('text', this.$title[current]);
+                selected[0].setAttribute('title', this.$title[current]);
+            }
+        },
+
         addItem: function (Parent, where) {
             if (typeof where === 'undefined') {
                 where = 'bottom';
@@ -335,8 +373,8 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
             new QUIConfirm({
                 icon     : 'fa fa-plus',
                 title    : QUILocale.get(lg, 'quiqqer.menu.independent.addItem.title'),
-                maxHeight: 400,
-                maxWidth : 500,
+                maxHeight: 550,
+                maxWidth : 700,
                 autoclose: false,
                 events   : {
                     onOpen: (Win) => {
@@ -344,25 +382,18 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
 
                         Win.Loader.show();
 
-                        Content.set('html', Mustache.render(templateCreate, {
-                            text     : QUILocale.get(lg, 'create.window.text'),
-                            textTitle: QUILocale.get('quiqqer/quiqqer', 'title'),
-                            textName : QUILocale.get('quiqqer/quiqqer', 'name'),
-                            textType : QUILocale.get('quiqqer/quiqqer', 'type')
-                        }));
+                        Content.set(
+                            'html',
 
-                        IndependentHandler.getItemTypes().then((list) => {
-                            const Types = Content.getElement('[name="itemType"]');
-
-                            for (let i = 0, len = list.length; i < len; i++) {
-                                new Element('option', {
-                                    html       : list[i].title,
-                                    value      : list[i].class,
-                                    'data-icon': list[i].icon
-                                }).inject(Types);
-                            }
+                            `<p>`+ QUILocale.get(lg, 'create.window.text') +
+                            '</p>' +
+                            '<form style="width: 100%;">' +
+                            '   <div class="qui-menuPanel-optionList"></div>' +
+                            '</form>'
+                        );
 
-                            Types.value = 'QUI\\Menu\\Independent\\Items\\Site';
+                        IndependentHandler.getItemTypes().then((list) => {
+                            this.$createOptionList(list, Content);
 
                             return QUI.parse(Win.getContent());
                         }).then(function () {
@@ -376,8 +407,8 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
 
                         let type = Form.elements.itemType.value;
 
-                        const Option = Form.elements.itemType.getElement(
-                            'option[value="' + CSS.escape(type) + '"]'
+                        const Option = Form.getElement(
+                            '[value="' + CSS.escape(type) + '"]'
                         );
 
                         let itemAttributes = {
@@ -429,11 +460,13 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
                 return;
             }
 
+            const itemType = Item.getAttribute('itemType');
+
             new QUIConfirm({
                 icon     : 'fa fa-edit',
                 title    : QUILocale.get(lg, 'quiqqer.menu.independent.changeItemType.title'),
-                maxHeight: 400,
-                maxWidth : 500,
+                maxHeight: 550,
+                maxWidth : 700,
                 autoclose: false,
                 events   : {
                     onOpen: (Win) => {
@@ -442,27 +475,17 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
                         Content.set(
                             'html',
 
-                            QUILocale.get(lg, 'quiqqer.menu.independent.changeItemType.message') +
-                            '' +
-                            '<form style="width: 100%; text-align: center; margin-top: 20px">' +
-                            '   <select name="itemType"></select>' +
+                            `<p>`+ QUILocale.get(lg, 'quiqqer.menu.independent.changeItemType.message') +
+                            '</p>' +
+                            '<form style="width: 100%;">' +
+                            '   <div class="qui-menuPanel-optionList"></div>' +
                             '</form>'
                         );
 
                         Win.Loader.show();
 
                         IndependentHandler.getItemTypes().then((list) => {
-                            const Types = Content.getElement('[name="itemType"]');
-
-                            for (let i = 0, len = list.length; i < len; i++) {
-                                new Element('option', {
-                                    html       : list[i].title,
-                                    value      : list[i].class,
-                                    'data-icon': list[i].icon
-                                }).inject(Types);
-                            }
-
-                            Types.value = Item.getAttribute('itemType');
+                            this.$createOptionList(list, Content, itemType);
 
                             return QUI.parse(Win.getContent());
                         }).then(function () {
@@ -477,8 +500,8 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
                         const Form = Content.getElement('form');
 
                         const type = Form.elements.itemType.value;
-                        const Option = Form.elements.itemType.getElement(
-                            'option[value="' + CSS.escape(type) + '"]'
+                        const Option = Form.getElement(
+                            '[value="' + CSS.escape(type) + '"]'
                         );
 
                         Item.setAttribute('itemType', type);
@@ -496,6 +519,47 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
             }).open();
         },
 
+        /**
+         * Create custom option list based on passed list of menu types
+         *
+         * @param list
+         * @param Content
+         * @param selected
+         */
+        $createOptionList: function(list, Content, selected = false) {
+            const OptionsList = Content.getElement('.qui-menuPanel-optionList'),
+                selectedItem = selected ? selected : 'QUI\\Menu\\Independent\\Items\\Site';
+
+            const toggleSelected = function(event) {
+                OptionsList.getElements('label').forEach(function(Label) {
+                    Label.classList.remove('checked');
+                });
+
+                event.target.getParent('label').classList.add('checked');
+            };
+
+            for (let i = 0, len = list.length; i < len; i++) {
+                const Item = list[i];
+                const Label = new Element('label', {
+                    'class': 'qui-menuPanel-optionList__option',
+                    html: Mustache.render(templateItemCard, {
+                        title: Item.title,
+                        desc: Item.desc,
+                        icon: Item.icon,
+                        value: Item.class
+                    })
+                });
+
+                if (Item.class === selectedItem) {
+                    Label.querySelector('input').checked = true;
+                    Label.classList.add('checked');
+                }
+
+                Label.inject(OptionsList);
+                Label.getElement('input').addEventListener('change', toggleSelected);
+            }
+        },
+
         /**
          * @param Item
          */
@@ -580,12 +644,15 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuPanel', [
                 this.$ActiveItem = null;
                 this.$ActiveMapItem = null;
                 this.$InnerContainer.set('html', Mustache.render(templateSettings, {
-                    settingsTitle: QUILocale.get('quiqqer/quiqqer', 'settings'),
-                    title        : QUILocale.get('quiqqer/quiqqer', 'title')
+                    title        : QUILocale.get('quiqqer/menu', 'menu.title'),
+                    workingTitle: QUILocale.get('quiqqer/menu', 'menu.workingTitle')
                 }));
 
-                this.$InnerContainer.getElement('[name="title"]').set('value', JSON.stringify(this.$title));
-                this.$InnerContainer.getElement('[name="workingTitle"]').set('value', JSON.stringify(this.$workingTitle));
+                const TitleNode = this.$InnerContainer.getElement('[name="title"]'),
+                WorkingTitleNode = this.$InnerContainer.getElement('[name="workingTitle"]');
+
+                TitleNode.set('value', JSON.stringify(this.$title));
+                WorkingTitleNode.set('value', JSON.stringify(this.$workingTitle));
             }).then(() => {
                 return QUI.parse(this.$InnerContainer);
             }).then(() => {

locale.xml

@@ -527,18 +527,34 @@
             <de><![CDATA[Menu Eintrag: Zu einem Anker]]></de>
             <en><![CDATA[Menu entry: To an anchor]]></en>
         </locale>
+        <locale name="item.anchor.short">
+            <de><![CDATA[Mit diesem Menütyp ist es möglich, eine interne QUIQQER-Seite auszuwählen und einen Anker festzulegen.]]></de>
+            <en><![CDATA[With this menu type it is possible to select an internal QUIQQER page and define an anchor.]]></en>
+        </locale>
         <locale name="item.custom.title">
             <de><![CDATA[Menu Eintrag: Custom Event]]></de>
             <en><![CDATA[Menu entry: Custom Event]]></en>
         </locale>
+        <locale name="item.custom.short">
+            <de><![CDATA[Individuelle Anpassung des Menüpunktes. Man kann eine Seite auswählen, eine benutzerdefinierte JavaScript-Funktion aufrufen und vieles mehr.]]></de>
+            <en><![CDATA[Customisation of the menu item. You can select a page, call up a customised JavaScript function and much more.]]></en>
+        </locale>
         <locale name="item.site.title">
             <de><![CDATA[Menu Eintrag: Zu einer internen Seite von einem Projekt]]></de>
             <en><![CDATA[Menu entry: To an internal page from a project]]></en>
         </locale>
+        <locale name="item.site.short">
+            <de><![CDATA[Erlaubt die Auswahl eines interner QUIQQER Seite.]]></de>
+            <en><![CDATA[Allows selection of an internal QUIQQER page.Klicken, um Alternative zu verwenden]]></en>
+        </locale>
         <locale name="item.url.title">
             <de><![CDATA[Menu Eintrag: Zu einer anderen URL]]></de>
             <en><![CDATA[Menu entry: To another URL]]></en>
         </locale>
+        <locale name="item.url.short">
+            <de><![CDATA[Es ist möglich, sowohl eine interne QUIQQER Seite auszuwählen als auch den Link zu einer externen Seiten zu setzen.]]></de>
+            <en><![CDATA[It is possible to select both an internal QUIQQER page and a link to an external page.]]></en>
+        </locale>
         <locale name="menu.saved.successfully">
             <de><![CDATA[Das Menü wurde erfolgreich gespeichert.]]></de>
             <en><![CDATA[The menu has been saved successfully.]]></en>
@@ -554,10 +570,14 @@
             <de><![CDATA[ID]]></de>
             <en><![CDATA[ID]]></en>
         </locale>
-        <locale name="grid.menuTitle">
+        <locale name="menu.title">
             <de><![CDATA[Titel]]></de>
             <en><![CDATA[Title]]></en>
         </locale>
+        <locale name="menu.workingTitle">
+            <de><![CDATA[Arbeitstitel]]></de>
+            <en><![CDATA[Working title]]></en>
+        </locale>
 
         <locale name="creation.window.title">
             <de><![CDATA[Neues Menü anlegen]]></de>

src/QUI/Menu/Independent/Handler.php

@@ -115,10 +115,10 @@ public static function getList(): array
     public static function getItemList(): array
     {
         return [
-            QUI\Menu\Independent\Items\Anchor::class,
-            QUI\Menu\Independent\Items\Custom::class,
             QUI\Menu\Independent\Items\Site::class,
+            QUI\Menu\Independent\Items\Anchor::class,
             QUI\Menu\Independent\Items\Url::class,
+            QUI\Menu\Independent\Items\Custom::class,
         ];
     }
 }

src/QUI/Menu/Independent/Items/AbstractMenuItem.php

@@ -270,6 +270,16 @@ public function getStatus(): bool
 
     abstract public static function itemTitle();
 
+    /**
+     * Short description of the menu types
+     *
+     * @return string
+     */
+    public static function itemShort(): string
+    {
+        return '';
+    }
+
     /**
      * @return string
      */

src/QUI/Menu/Independent/Items/Anchor.php

@@ -103,6 +103,16 @@ public static function itemTitle(): string
         return QUI::getLocale()->get('quiqqer/menu', 'item.anchor.title');
     }
 
+    /**
+     * Short description of the menu types
+     *
+     * @return string
+     */
+    public static function itemShort(): string
+    {
+        return QUI::getLocale()->get('quiqqer/menu', 'item.anchor.short');
+    }
+
     /**
      * @return string
      */

src/QUI/Menu/Independent/Items/Custom.php

@@ -42,6 +42,16 @@ public static function itemTitle(): string
         return QUI::getLocale()->get('quiqqer/menu', 'item.custom.title');
     }
 
+    /**
+     * Short description of the menu types
+     *
+     * @return string
+     */
+    public static function itemShort(): string
+    {
+        return QUI::getLocale()->get('quiqqer/menu', 'item.custom.short');
+    }
+
     /**
      * return the item type icon
      *

src/QUI/Menu/Independent/Items/Site.php

@@ -22,6 +22,16 @@ public static function itemTitle(): string
         return QUI::getLocale()->get('quiqqer/menu', 'item.site.title');
     }
 
+    /**
+     * Short description of the menu types
+     *
+     * @return string
+     */
+    public static function itemShort(): string
+    {
+        return QUI::getLocale()->get('quiqqer/menu', 'item.site.short');
+    }
+
     /**
      * @return string
      */

src/QUI/Menu/Independent/Items/Url.php

@@ -35,6 +35,16 @@ public static function itemTitle(): string
         return QUI::getLocale()->get('quiqqer/menu', 'item.url.title');
     }
 
+    /**
+     * Short description of the menu types
+     *
+     * @return string
+     */
+    public static function itemShort(): string
+    {
+        return QUI::getLocale()->get('quiqqer/menu', 'item.url.short');
+    }
+
     /**
      * @return string
      */