rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Filter out hidden items in context menus

Browse Source 
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
This commit is contained in:
ceruleandeep
2024-11-29 23:42:16 +11:00
parent a444a782e2
commit 2f7bc7ca8d
5 changed files with 26 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;