add custom titles (tooltips) to QR buttons

This commit is contained in:
LenAnderson 2023-12-07 12:20:02 +00:00
parent 3b364916df
commit a1bfca78b3
2 changed files with 10 additions and 1 deletions

View File

@ -40,5 +40,10 @@
<span><i class="fa-solid fa-fw fa-message"></i> Execute on opening chat</span> <span><i class="fa-solid fa-fw fa-message"></i> Execute on opening chat</span>
</label> </label>
</div> </div>
<h3><strong>UI Options</strong></h3>
<div class="flex-container flexFlowColumn">
<label for="quickReply_ui_title">Title (tooltip, leave empty to show the message or /command)</label>
<input type="text" class="text_pole" id="quickReply_ui_title">
</div>
</div> </div>
</div> </div>

View File

@ -190,6 +190,8 @@ async function onQuickReplyCtxButtonClick(id) {
saveSettingsDebounced(); saveSettingsDebounced();
}); });
$('#quickReply_ui_title').val(qr.title ?? '');
if (await popupResult) { if (await popupResult) {
qr.contextMenu = Array.from(document.querySelectorAll('#quickReply_contextMenuEditor_content > .quickReplyContextMenuEditor_item')) qr.contextMenu = Array.from(document.querySelectorAll('#quickReply_contextMenuEditor_content > .quickReplyContextMenuEditor_item'))
.map(item => ({ .map(item => ({
@ -198,6 +200,8 @@ async function onQuickReplyCtxButtonClick(id) {
})) }))
.filter(item => item.preset); .filter(item => item.preset);
$(`#quickReplyContainer[data-order="${id}"]`).attr('data-contextMenu', JSON.stringify(qr.contextMenu)); $(`#quickReplyContainer[data-order="${id}"]`).attr('data-contextMenu', JSON.stringify(qr.contextMenu));
qr.title = $('#quickReply_ui_title').val();
saveSettingsDebounced();
updateQuickReplyPreset(); updateQuickReplyPreset();
onQuickReplyLabelInput(id); onQuickReplyLabelInput(id);
} }
@ -437,7 +441,7 @@ function addQuickReplyBar() {
if (extension_settings.quickReply.quickReplySlots[i]?.contextMenu?.length) { if (extension_settings.quickReply.quickReplySlots[i]?.contextMenu?.length) {
expander = '<span class="ctx-expander" title="Open context menu">⋮</span>'; expander = '<span class="ctx-expander" title="Open context menu">⋮</span>';
} }
quickReplyButtonHtml += `<div title="${escapeHtml(quickReplyMes)}" class="quickReplyButton ${hidden ? 'displayNone' : ''}" data-index="${i}" id="quickReply${i + 1}">${DOMPurify.sanitize(quickReplyLabel)}${expander}</div>`; quickReplyButtonHtml += `<div title="${escapeHtml(qr.title || quickReplyMes)}" class="quickReplyButton ${hidden ? 'displayNone' : ''}" data-index="${i}" id="quickReply${i + 1}">${DOMPurify.sanitize(quickReplyLabel)}${expander}</div>`;
} }
const quickReplyBarFullHtml = ` const quickReplyBarFullHtml = `