From 2f7bc7ca8ddd501964e6e0da9404f6ec9b658d00 Mon Sep 17 00:00:00 2001 From: ceruleandeep Date: Fri, 29 Nov 2024 23:42:16 +1100 Subject: [PATCH] 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 --- .../quick-reply/src/ui/ctx/ContextMenu.js | 20 +++++++++++-- .../quick-reply/src/ui/ctx/MenuHeader.js | 2 +- .../quick-reply/src/ui/ctx/MenuItem.js | 30 +------------------ .../scripts/extensions/quick-reply/style.css | 3 ++ .../scripts/extensions/quick-reply/style.less | 4 +++ 5 files changed, 26 insertions(+), 33 deletions(-) diff --git a/public/scripts/extensions/quick-reply/src/ui/ctx/ContextMenu.js b/public/scripts/extensions/quick-reply/src/ui/ctx/ContextMenu.js index 3741d2869..9f712379b 100644 --- a/public/scripts/extensions/quick-reply/src/ui/ctx/ContextMenu.js +++ b/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); diff --git a/public/scripts/extensions/quick-reply/src/ui/ctx/MenuHeader.js b/public/scripts/extensions/quick-reply/src/ui/ctx/MenuHeader.js index c4c10148c..94c16c3a2 100644 --- a/public/scripts/extensions/quick-reply/src/ui/ctx/MenuHeader.js +++ b/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, []); } diff --git a/public/scripts/extensions/quick-reply/src/ui/ctx/MenuItem.js b/public/scripts/extensions/quick-reply/src/ui/ctx/MenuItem.js index f6a5db069..2b33ec640 100644 --- a/public/scripts/extensions/quick-reply/src/ui/ctx/MenuItem.js +++ b/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; diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css index bd61e4962..0bb2707f9 100644 --- a/public/scripts/extensions/quick-reply/style.css +++ b/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; diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less index c5d2b2b70..a45616e2e 100644 --- a/public/scripts/extensions/quick-reply/style.less +++ b/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;