Merge pull request #2692 from SillyTavern/qr-popout-hide QR: Add toggle to hide popout button

c84a685e7b3bb63e5b1a0acfc200ffc1095ed2e9

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

Signed
Parents: a4f566dc397b8368e0a559cb501a8d931100e4bd 8df6344d8e1a1c4c5945e1e372b07488da6cd01f
6 files changed, +35 -13Ignore whitespace
public/scripts/extensions/quick-reply/html/settings.html+3 -0
@@ -11,6 +11,9 @@
11 <label class="flex-container">11 <label class="flex-container">
12 <input type="checkbox" id="qr--isCombined"><span data-i18n="Combine Quick Replies">Combine Quick Replies</span>12 <input type="checkbox" id="qr--isCombined"><span data-i18n="Combine Quick Replies">Combine Quick Replies</span>
13 </label>13 </label>
14 <label class="flex-container">
15 <input type="checkbox" id="qr--showPopoutButton"><span data-i18n="Show Popout Button">Show Popout Button</span>
16 </label>
1417
15 <hr>18 <hr>
1619
public/scripts/extensions/quick-reply/src/QuickReplySettings.js+2 -0
@@ -16,6 +16,7 @@ export class QuickReplySettings {
16 /**@type {Boolean}*/ isEnabled = false;16 /**@type {Boolean}*/ isEnabled = false;
17 /**@type {Boolean}*/ isCombined = false;17 /**@type {Boolean}*/ isCombined = false;
18 /**@type {Boolean}*/ isPopout = false;18 /**@type {Boolean}*/ isPopout = false;
19 /**@type {Boolean}*/ showPopoutButton = true;
19 /**@type {QuickReplyConfig}*/ config;20 /**@type {QuickReplyConfig}*/ config;
20 /**@type {QuickReplyConfig}*/ _chatConfig;21 /**@type {QuickReplyConfig}*/ _chatConfig;
21 get chatConfig() {22 get chatConfig() {
@@ -79,6 +80,7 @@ export class QuickReplySettings {
79 isEnabled: this.isEnabled,80 isEnabled: this.isEnabled,
80 isCombined: this.isCombined,81 isCombined: this.isCombined,
81 isPopout: this.isPopout,82 isPopout: this.isPopout,
83 showPopoutButton: this.showPopoutButton,
82 config: this.config,84 config: this.config,
83 };85 };
84 }86 }
public/scripts/extensions/quick-reply/src/ui/ButtonUi.js+14 -11
@@ -69,17 +69,20 @@ export class ButtonUi {
69 root.id = 'qr--bar';69 root.id = 'qr--bar';
70 root.classList.add('flex-container');70 root.classList.add('flex-container');
71 root.classList.add('flexGap5');71 root.classList.add('flexGap5');
72 const popout = document.createElement('div'); {72 if (this.settings.showPopoutButton) {
73 popout.id = 'qr--popoutTrigger';73 root.classList.add('popoutVisible');
74 popout.classList.add('menu_button');74 const popout = document.createElement('div'); {
75 popout.classList.add('fa-solid');75 popout.id = 'qr--popoutTrigger';
76 popout.classList.add('fa-window-restore');76 popout.classList.add('menu_button');
77 popout.addEventListener('click', ()=>{77 popout.classList.add('fa-solid');
78 this.settings.isPopout = true;78 popout.classList.add('fa-window-restore');
79 this.refresh();79 popout.addEventListener('click', ()=>{
80 this.settings.save();80 this.settings.isPopout = true;
81 });81 this.refresh();
82 root.append(popout);82 this.settings.save();
83 });
84 root.append(popout);
85 }
83 }86 }
84 if (this.settings.isCombined) {87 if (this.settings.isCombined) {
85 const buttons = document.createElement('div'); {88 const buttons = document.createElement('div'); {
public/scripts/extensions/quick-reply/src/ui/SettingsUi.js+10 -0
@@ -14,6 +14,7 @@ export class SettingsUi {
1414
15 /**@type {HTMLInputElement}*/ isEnabled;15 /**@type {HTMLInputElement}*/ isEnabled;
16 /**@type {HTMLInputElement}*/ isCombined;16 /**@type {HTMLInputElement}*/ isCombined;
17 /**@type {HTMLInputElement}*/ showPopoutButton;
1718
18 /**@type {HTMLElement}*/ globalSetList;19 /**@type {HTMLElement}*/ globalSetList;
1920
@@ -79,6 +80,10 @@ export class SettingsUi {
79 this.isCombined = this.dom.querySelector('#qr--isCombined');80 this.isCombined = this.dom.querySelector('#qr--isCombined');
80 this.isCombined.checked = this.settings.isCombined;81 this.isCombined.checked = this.settings.isCombined;
81 this.isCombined.addEventListener('click', ()=>this.onIsCombined());82 this.isCombined.addEventListener('click', ()=>this.onIsCombined());
83
84 this.showPopoutButton = this.dom.querySelector('#qr--showPopoutButton');
85 this.showPopoutButton.checked = this.settings.showPopoutButton;
86 this.showPopoutButton.addEventListener('click', ()=>this.onShowPopoutButton());
82 }87 }
8388
84 prepareGlobalSetList() {89 prepareGlobalSetList() {
@@ -235,6 +240,11 @@ export class SettingsUi {
235 this.settings.save();240 this.settings.save();
236 }241 }
237242
243 async onShowPopoutButton() {
244 this.settings.showPopoutButton = this.showPopoutButton.checked;
245 this.settings.save();
246 }
247
238 async onGlobalSetListSort() {248 async onGlobalSetListSort() {
239 this.settings.config.setList = Array.from(this.globalSetList.children).map((it,idx)=>{249 this.settings.config.setList = Array.from(this.globalSetList.children).map((it,idx)=>{
240 const set = this.settings.config.setList[Number(it.getAttribute('data-order'))];250 const set = this.settings.config.setList[Number(it.getAttribute('data-order'))];
public/scripts/extensions/quick-reply/style.css+3 -1
@@ -27,7 +27,6 @@
27 max-width: 100%;27 max-width: 100%;
28 overflow-x: auto;28 overflow-x: auto;
29 order: 1;29 order: 1;
30 padding-right: 2.5em;
31 position: relative;30 position: relative;
32}31}
33#qr--bar > #qr--popoutTrigger {32#qr--bar > #qr--popoutTrigger {
@@ -35,6 +34,9 @@
35 right: 0.25em;34 right: 0.25em;
36 top: 0;35 top: 0;
37}36}
37#qr--bar.popoutVisible {
38 padding-right: 2.5em;
39}
38#qr--popout {40#qr--popout {
39 display: flex;41 display: flex;
40 flex-direction: column;42 flex-direction: column;
public/scripts/extensions/quick-reply/style.less+3 -1
@@ -25,7 +25,6 @@
25 max-width: 100%;25 max-width: 100%;
26 overflow-x: auto;26 overflow-x: auto;
27 order: 1;27 order: 1;
28 padding-right: 2.5em;
29 position: relative;28 position: relative;
3029
31 >#qr--popoutTrigger {30 >#qr--popoutTrigger {
@@ -34,6 +33,9 @@
34 top: 0;33 top: 0;
35 }34 }
36}35}
36#qr--bar.popoutVisible {
37 padding-right: 2.5em;
38}
3739
38#qr--popout {40#qr--popout {
39 display: flex;41 display: flex;