Add hidden/invisible/auto-exec only QR buttons

This commit is contained in:
Cohee
2023-11-24 13:50:42 +02:00
parent 720da5649b
commit f1d375c2ba
3 changed files with 20 additions and 4 deletions

View File

@ -27,6 +27,10 @@
<input type="checkbox" id="quickReply_autoExecute_botMessage" > <input type="checkbox" id="quickReply_autoExecute_botMessage" >
<span><i class="fa-solid fa-fw fa-robot"></i> Execute on AI message</span> <span><i class="fa-solid fa-fw fa-robot"></i> Execute on AI message</span>
</label> </label>
<label class="checkbox_label" for="quickReply_hidden">
<input type="checkbox" id="quickReply_hidden" >
<span><i class="fa-solid fa-fw fa-eye-slash"></i> Invisible (auto-execute only)</span>
</label>
</div> </div>
</div> </div>
</div> </div>

View File

@ -154,6 +154,13 @@ async function onQuickReplyCtxButtonClick(id) {
$('#quickReply_autoExecute_userMessage').prop('checked', qr.autoExecute_userMessage ?? false); $('#quickReply_autoExecute_userMessage').prop('checked', qr.autoExecute_userMessage ?? false);
$('#quickReply_autoExecute_botMessage').prop('checked', qr.autoExecute_botMessage ?? false); $('#quickReply_autoExecute_botMessage').prop('checked', qr.autoExecute_botMessage ?? false);
$('#quickReply_hidden').prop('checked', qr.hidden ?? false);
$('#quickReply_hidden').on('input', () => {
const state = !!$('#quickReply_hidden').prop('checked');
qr.hidden = state;
saveSettingsDebounced();
});
$('#quickReply_autoExecute_userMessage').on('input', () => { $('#quickReply_autoExecute_userMessage').on('input', () => {
const state = !!$('#quickReply_autoExecute_userMessage').prop('checked'); const state = !!$('#quickReply_autoExecute_userMessage').prop('checked');
@ -289,13 +296,15 @@ function addQuickReplyBar() {
let quickReplyButtonHtml = ''; let quickReplyButtonHtml = '';
for (let i = 0; i < extension_settings.quickReply.numberOfSlots; i++) { for (let i = 0; i < extension_settings.quickReply.numberOfSlots; i++) {
let quickReplyMes = extension_settings.quickReply.quickReplySlots[i]?.mes || ''; const qr = extension_settings.quickReply.quickReplySlots[i];
let quickReplyLabel = extension_settings.quickReply.quickReplySlots[i]?.label || ''; const quickReplyMes = qr?.mes || '';
const quickReplyLabel = qr?.label || '';
const hidden = qr?.hidden ?? false;
let expander = ''; let expander = '';
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="${quickReplyMes}" class="quickReplyButton" data-index="${i}" id="quickReply${i + 1}">${quickReplyLabel}${expander}</div>`; quickReplyButtonHtml += `<div title="${quickReplyMes}" class="quickReplyButton ${hidden ? 'displayNone' : ''}" data-index="${i}" id="quickReply${i + 1}">${quickReplyLabel}${expander}</div>`;
} }
const quickReplyBarFullHtml = ` const quickReplyBarFullHtml = `

View File

@ -1,7 +1,9 @@
#quickReplyBar { #quickReplyBar {
outline: none; outline: none;
/*
padding: 5px 0; padding: 5px 0;
border-bottom: 1px solid var(--SmartThemeBorderColor); border-bottom: 1px solid var(--SmartThemeBorderColor);
*/
margin: 0; margin: 0;
transition: 0.3s; transition: 0.3s;
opacity: 0.7; opacity: 0.7;
@ -31,6 +33,7 @@
border: 1px solid var(--SmartThemeBorderColor); border: 1px solid var(--SmartThemeBorderColor);
border-radius: 10px; border-radius: 10px;
padding: 3px 5px; padding: 3px 5px;
margin: 3px 0;
width: min-content; width: min-content;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
@ -101,4 +104,4 @@
.list-group .list-group-item.ctx-item { .list-group .list-group-item.ctx-item {
padding: 1em; padding: 1em;
} }
} }