Filter out hidden items in context menus

Add CSS to apply label show/hide settings to QRs in context menus

Add provision for QR set applied to one of its own buttons as "burger" menu

public/scripts/extensions/quick-reply/src/ui/ctx/ContextMenu.js

@@ -38,7 +38,6 @@ export class ContextMenu {
             label: qr.label,
             title: qr.title,
             message: (chainedMessage && qr.message ? `${chainedMessage} | ` : '') + qr.message,
-            isHidden: qr.isHidden,
             children: [],
         };
         qr.contextList.forEach((cl) => {
@@ -47,7 +46,23 @@ export class ContextMenu {
                 const nextHierarchy = [...hierarchy, cl.set];
                 const nextLabelHierarchy = [...labelHierarchy, tree.label];
                 tree.children.push(new MenuHeader(cl.set.name));
-                cl.set.qrList.forEach(subQr => {
+
+                // If the Quick Reply's own set is added as a context menu,
+                // show only the sub-QRs that are Invisible but have an icon
+                // intent: allow a QR set to be assigned to one of its own QR buttons for a "burger" menu
+                // with "UI" QRs either in the bar or in the menu, and "library function" QRs still hidden.
+                // - QRs already visible on the bar are filtered out,
+                // - hidden QRs without an icon are filtered out,
+                // - hidden QRs **with an icon** are shown in the menu
+                // so everybody is happy
+                const qrsOwnSetAddedAsContextMenu = cl.set.qrList.includes(qr);
+                const visible = (subQr) => {
+                    return qrsOwnSetAddedAsContextMenu
+                        ? subQr.isHidden && !!subQr.icon  // yes .isHidden gets inverted here
+                        : !subQr.isHidden;
+                };
+
+                cl.set.qrList.filter(visible).forEach(subQr => {
                     const subTree = this.build(subQr, cl.isChained ? tree.message : null, nextHierarchy, nextLabelHierarchy);
                     tree.children.push(new MenuItem(
                         subTree.icon,
@@ -55,7 +70,6 @@ export class ContextMenu {
                         subTree.label,
                         subTree.title,
                         subTree.message,
-                        subTree.isHidden,
                         (evt) => {
                             evt.stopPropagation();
                             const finalQr = Object.assign(new QuickReply(), subQr);

public/scripts/extensions/quick-reply/src/ui/ctx/MenuHeader.js

@@ -2,7 +2,7 @@ import { MenuItem } from './MenuItem.js';
 
 export class MenuHeader extends MenuItem {
     constructor(/**@type {String}*/label) {
-        super(null, null, label, null, null, false, null, []);
+        super(null, null, label, null, null, null, []);
     }
 
 

public/scripts/extensions/quick-reply/src/ui/ctx/MenuItem.js

@@ -6,7 +6,6 @@ export class MenuItem {
     /**@type {string}*/ label;
     /**@type {string}*/ title;
     /**@type {object}*/ value;
-    /**@type {boolean}*/ isHidden = false;
     /**@type {function}*/ callback;
     /**@type {MenuItem[]}*/ childList = [];
     /**@type {SubMenu}*/ subMenu;
@@ -25,44 +24,20 @@ export class MenuItem {
      * @param {string} label
      * @param {?string} title Tooltip
      * @param {object} value
-     * @param {boolean} isHidden QR is Invisible (auto-execute only)
      * @param {function} callback
      * @param {MenuItem[]} children
      */
-    constructor(icon, showLabel, label, title, value, isHidden, callback, children = []) {
+    constructor(icon, showLabel, label, title, value, callback, children = []) {
         this.icon = icon;
         this.showLabel = showLabel;
         this.label = label;
         this.title = title;
         this.value = value;
-        this.isHidden = isHidden;
         this.callback = callback;
         this.childList = children;
     }
 
 
-    /**
-     * Renders the MenuItem
-     *
-     * A .qr--hidden class is added to:
-     * - the item if it is "Invisible (auto-execute only)"
-     * - the icon if no icon is set
-     * - the label if an icon is set and showLabel is false
-     *
-     * There is no .qr--hidden class defined in default CSS, since having items
-     * that are invisible on the QR bar but visible in the context menu,
-     * or icon-only on the QR bar but labelled in the context menu, is a valid use case.
-     *
-     * To hide optional labels when icons are present, add this user CSS:
-     * .ctx-menu .ctx-item .qr--button-label.qr--hidden {display: none;}
-     * To hide icons when no icon is present (removes unwanted padding):
-     * .ctx-menu .ctx-item .qr--button-icon.qr--hidden {display: none;}
-     * To hide items that are set "invisible":
-     * .ctx-menu .ctx-item.qr--hidden {display: none;}
-     * To target submenus only, use .ctx-menu .ctx-sub-menu .qr--hidden {display: none;}
-     *
-     * @returns {HTMLElement}
-     */
     render() {
         if (!this.root) {
             const item = document.createElement('li'); {
@@ -70,9 +45,6 @@ export class MenuItem {
                 item.classList.add('list-group-item');
                 item.classList.add('ctx-item');
 
-                // if this item is Invisible, add the hidden class
-                if (this.isHidden) item.classList.add('qr--hidden');
-
                 // if a title/tooltip is set, add it, otherwise use the QR content
                 // same as for the main QR list
                 item.title = this.title || this.value;

public/scripts/extensions/quick-reply/style.css

@@ -174,6 +174,9 @@
   position: absolute;
   overflow: visible;
 }
+.ctx-menu .ctx-item .qr--hidden {
+    display: none;
+}
 .list-group .list-group-item.ctx-header {
   font-weight: bold;
   cursor: default;

public/scripts/extensions/quick-reply/style.less

@@ -176,6 +176,10 @@
     overflow: visible;
 }
 
+.ctx-menu .ctx-item .qr--hidden {
+    display: none;
+}
+
 .list-group .list-group-item.ctx-header {
     font-weight: bold;
     cursor: default;