Merge branch 'staging' into char-cache-limit

176ef776240c41e0449b8888a410e87c9250b90e

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: c873362d0140208857d1857e637916d00d1c4d9a 2384031d09cfb3f362161f3ed8fcdfd6df2d5df2
4 files changed, +73 -24Ignore whitespace
public/scripts/extensions/quick-reply/src/SlashCommandHandler.js+28 -15
@@ -419,30 +419,35 @@ export class SlashCommandHandler {
419419 namedArgumentList: [
420420 SlashCommandNamedArgument.fromProps({
421421 name: 'set',
422422 description: 'Name of QR set nameto add the context menu to',
423423 typeList: [ARGUMENT_TYPE.STRING],
424424 isRequired: true,
425425 enumProvider: localEnumProviders.qrSets,
426426 }),
427427 SlashCommandNamedArgument.fromProps({
428428 name: 'label',
429429 description: 'Label of Quick Reply labelto add the context menu to',
430430 typeList: [ARGUMENT_TYPE.STRING],
431431 enumProvider: localEnumProviders.qrEntries,
432432 }),
433433 SlashCommandNamedArgument.fromProps({
434434 name: 'id',
435435 description: 'numericNumeric ID of Quick Reply to add the QRcontext menu to, e.g., id=42',
436436 typeList: [ARGUMENT_TYPE.NUMBER],
437437 enumProvider: localEnumProviders.qrIds,
438438 }),
439439 new SlashCommandNamedArgument(
440- 'chain', 'boolean', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
440+ 'chain',
441+ 'If true, button QR is sent together with (before) the clicked QR from the context menu',
442+ [ARGUMENT_TYPE.BOOLEAN],
443+ false,
444+ false,
445+ 'false',
441446 ),
442447 ],
443448 unnamedArgumentList: [
444449 SlashCommandArgument.fromProps({
445450 description: 'Name of QR set nameto add as a context menu',
446451 typeList: [ARGUMENT_TYPE.STRING],
447452 isRequired: true,
448453 enumProvider: localEnumProviders.qrSets,
@@ -450,13 +455,16 @@ export class SlashCommandHandler {
450455 ],
451456 helpString: `
452457 <div>
453458 Add a context menu preset to a QR.
459+ </div>
460+ <div>
461+ If <code>id</code> and <code>label</code> are both provided, <code>id</code> will be used.
454462 </div>
455463 <div>
456464 <strong>Example:</strong>
457465 <ul>
458466 <li>
459467 <pre><code>/qr-contextadd set=MyPresetMyQRSetWithTheButton label=MyButton chain=true MyOtherPresetMyQRSetWithContextItems</code></pre>
460468 </li>
461469 </ul>
462470 </div>
@@ -470,27 +478,27 @@ export class SlashCommandHandler {
470478 namedArgumentList: [
471479 SlashCommandNamedArgument.fromProps({
472480 name: 'set',
473481 description: 'Name of QR set nameto remove the context menu from',
474482 typeList: [ARGUMENT_TYPE.STRING],
475483 isRequired: true,
476484 enumProvider: localEnumProviders.qrSets,
477485 }),
478486 SlashCommandNamedArgument.fromProps({
479487 name: 'label',
480488 description: 'Label of Quick Reply labelto remove the context menu from',
481489 typeList: [ARGUMENT_TYPE.STRING],
482490 enumProvider: localEnumProviders.qrEntries,
483491 }),
484492 SlashCommandNamedArgument.fromProps({
485493 name: 'id',
486494 description: 'numericNumeric ID of Quick Reply to remove the QRcontext menu from, e.g., id=42',
487495 typeList: [ARGUMENT_TYPE.NUMBER],
488496 enumProvider: localEnumProviders.qrIds,
489497 }),
490498 ],
491499 unnamedArgumentList: [
492500 SlashCommandArgument.fromProps({
493501 description: 'Name of QR set nameto remove',
494502 typeList: [ARGUMENT_TYPE.STRING],
495503 isRequired: true,
496504 enumProvider: localEnumProviders.qrSets,
@@ -501,6 +509,9 @@ export class SlashCommandHandler {
501509 Remove context menu preset from a QR.
502510 </div>
503511 <div>
512+ If <code>id</code> and <code>label</code> are both provided, <code>id</code> will be used.
513+ </div>
514+ <div>
504515 <strong>Example:</strong>
505516 <ul>
506517 <li>
@@ -542,6 +553,9 @@ export class SlashCommandHandler {
542553 Remove all context menu presets from a QR.
543554 </div>
544555 <div>
556+ If <code>id</code> and a label are both provided, <code>id</code> will be used.
557+ </div>
558+ <div>
545559 <strong>Example:</strong>
546560 <ul>
547561 <li>
@@ -908,12 +922,11 @@ export class SlashCommandHandler {
908922 }
909923 }
910924
911-
912925 createContextItem(args, name) {
913926 try {
914927 this.api.createContextItem(
915928 args.set,
916- args.label,
929+ args.id !== undefined ? Number(args.id) : args.label,
917930 name,
918931 isTrueBoolean(args.chain),
919932 );
@@ -923,14 +936,14 @@ export class SlashCommandHandler {
923936 }
924937 deleteContextItem(args, name) {
925938 try {
926939 this.api.deleteContextItem(args.set, args.id !== undefined ? Number(args.id) : args.label, name);
927940 } catch (ex) {
928941 toastr.error(ex.message);
929942 }
930943 }
931944 clearContextMenu(args, label) {
932945 try {
933946 this.api.clearContextMenu(args.set, args.id !== undefined ? Number(args.id) : args.label ?? label);
934947 } catch (ex) {
935948 toastr.error(ex.message);
936949 }
public/scripts/extensions/quick-reply/src/ui/ctx/ContextMenu.js+5 -1
@@ -19,7 +19,7 @@ export class ContextMenu {
1919 this.itemList = this.build(qr).children;
2020 this.itemList.forEach(item => {
2121 item.onExpand = () => {
2222 this.itemList.filter(it => it !== item)
2323 .forEach(it => it.collapse());
2424 };
2525 });
@@ -36,7 +36,9 @@ export class ContextMenu {
3636 icon: qr.icon,
3737 showLabel: qr.showLabel,
3838 label: qr.label,
39+ title: qr.title,
3940 message: (chainedMessage && qr.message ? `${chainedMessage} | ` : '') + qr.message,
41+ isHidden: qr.isHidden,
4042 children: [],
4143 };
4244 qr.contextList.forEach((cl) => {
@@ -51,7 +53,9 @@ export class ContextMenu {
5153 subTree.icon,
5254 subTree.showLabel,
5355 subTree.label,
56+ subTree.title,
5457 subTree.message,
58+ subTree.isHidden,
5559 (evt) => {
5660 evt.stopPropagation();
5761 const finalQr = Object.assign(new QuickReply(), subQr);
public/scripts/extensions/quick-reply/src/ui/ctx/MenuHeader.js+1 -1
@@ -2,7 +2,7 @@ import { MenuItem } from './MenuItem.js';
22
33export class MenuHeader extends MenuItem {
44 constructor(/**@type {String}*/label) {
55 super(null, null, label, null, null, false, null, []);
66 }
77
88
public/scripts/extensions/quick-reply/src/ui/ctx/MenuItem.js+39 -7
@@ -4,11 +4,12 @@ export class MenuItem {
44 /**@type {string}*/ icon;
55 /**@type {boolean}*/ showLabel;
66 /**@type {string}*/ label;
7+ /**@type {string}*/ title;
78 /**@type {object}*/ value;
9+ /**@type {boolean}*/ isHidden = false;
810 /**@type {function}*/ callback;
911 /**@type {MenuItem[]}*/ childList = [];
1012 /**@type {SubMenu}*/ subMenu;
11- /**@type {boolean}*/ isForceExpanded = false;
1213
1314 /**@type {HTMLElement}*/ root;
1415
@@ -19,35 +20,67 @@ export class MenuItem {
1920
2021 /**
2122 *
2223 * @param {?string} icon
2324 * @param {?boolean} showLabel
2425 * @param {string} label
26+ * @param {?string} title Tooltip
2527 * @param {object} value
28+ * @param {boolean} isHidden QR is Invisible (auto-execute only)
2629 * @param {function} callback
2730 * @param {MenuItem[]} children
2831 */
2932 constructor(icon, showLabel, label, title, value, isHidden, callback, children = []) {
3033 this.icon = icon;
3134 this.showLabel = showLabel;
3235 this.label = label;
36+ this.title = title;
3337 this.value = value;
38+ this.isHidden = isHidden;
3439 this.callback = callback;
3540 this.childList = children;
3641 }
3742
3843
44+ /**
45+ * Renders the MenuItem
46+ *
47+ * A .qr--hidden class is added to:
48+ * - the item if it is "Invisible (auto-execute only)"
49+ * - the icon if no icon is set
50+ * - the label if an icon is set and showLabel is false
51+ *
52+ * There is no .qr--hidden class defined in default CSS, since having items
53+ * that are invisible on the QR bar but visible in the context menu,
54+ * or icon-only on the QR bar but labelled in the context menu, is a valid use case.
55+ *
56+ * To hide optional labels when icons are present, add this user CSS:
57+ * .ctx-menu .ctx-item .qr--button-label.qr--hidden {display: none;}
58+ * To hide icons when no icon is present (removes unwanted padding):
59+ * .ctx-menu .ctx-item .qr--button-icon.qr--hidden {display: none;}
60+ * To hide items that are set "invisible":
61+ * .ctx-menu .ctx-item.qr--hidden {display: none;}
62+ * To target submenus only, use .ctx-menu .ctx-sub-menu .qr--hidden {display: none;}
63+ *
64+ * @returns {HTMLElement}
65+ */
3966 render() {
4067 if (!this.root) {
4168 const item = document.createElement('li'); {
4269 this.root = item;
4370 item.classList.add('list-group-item');
4471 item.classList.add('ctx-item');
45- item.title = this.value;
72+
73+ // if this item is Invisible, add the hidden class
74+ if (this.isHidden) item.classList.add('qr--hidden');
75+
76+ // if a title/tooltip is set, add it, otherwise use the QR content
77+ // same as for the main QR list
78+ item.title = this.title || this.value;
79+
4680 if (this.callback) {
4781 item.addEventListener('click', (evt) => this.callback(evt, this));
4882 }
4983 const icon = document.createElement('div'); {
50- this.domIcon = icon;
5184 icon.classList.add('qr--button-icon');
5285 icon.classList.add('fa-solid');
5386 if (!this.icon) icon.classList.add('qr--hidden');
@@ -55,7 +88,6 @@ export class MenuItem {
5588 item.append(icon);
5689 }
5790 const lbl = document.createElement('div'); {
58- this.domLabel = lbl;
5991 lbl.classList.add('qr--button-label');
6092 if (this.icon && !this.showLabel) lbl.classList.add('qr--hidden');
6193 lbl.textContent = this.label;