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

2f7bc7ca8ddd501964e6e0da9404f6ec9b658d00

ceruleandeep <deep@cerulean.navy>

Parents: a444a782e23e8ba9d1c2909f19abab66fd973bb5

public/scripts/extensions/quick-reply/src/ui/ctx/ContextMenu.js+17 -3 Viewed

             label: qr.label,
             title: qr.title,
             message: (chainedMessage && qr.message ? `${chainedMessage} | ` : '') + qr.message,
 -            isHidden: qr.isHidden,
             children: [],
         };
         qr.contextList.forEach((cl) => {

                 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,

                         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+1 -1 Viewed

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

public/scripts/extensions/quick-reply/src/ui/ctx/MenuItem.js+1 -29 Viewed

     /**@type {string}*/ label;
     /**@type {string}*/ title;
     /**@type {object}*/ value;
 -    /**@type {boolean}*/ isHidden = false;
     /**@type {function}*/ callback;
     /**@type {MenuItem[]}*/ childList = [];
     /**@type {SubMenu}*/ subMenu;

      * @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 = []) {
         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'); {

                 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+3 -0 Viewed

   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+4 -0 Viewed

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