Merge pull request #2692 from SillyTavern/qr-popout-hide

QR: Add toggle to hide popout button

public/scripts/extensions/quick-reply/html/settings.html

@@ -11,6 +11,9 @@
 			<label class="flex-container">
 				<input type="checkbox" id="qr--isCombined"><span data-i18n="Combine Quick Replies">Combine Quick Replies</span>
 			</label>
+            <label class="flex-container">
+                <input type="checkbox" id="qr--showPopoutButton"><span data-i18n="Show Popout Button">Show Popout Button</span>
+            </label>
 
 			<hr>
 

public/scripts/extensions/quick-reply/src/QuickReplySettings.js

@@ -16,6 +16,7 @@ export class QuickReplySettings {
     /**@type {Boolean}*/ isEnabled = false;
     /**@type {Boolean}*/ isCombined = false;
     /**@type {Boolean}*/ isPopout = false;
+    /**@type {Boolean}*/ showPopoutButton = true;
     /**@type {QuickReplyConfig}*/ config;
     /**@type {QuickReplyConfig}*/ _chatConfig;
     get chatConfig() {
@@ -79,6 +80,7 @@ export class QuickReplySettings {
             isEnabled: this.isEnabled,
             isCombined: this.isCombined,
             isPopout: this.isPopout,
+            showPopoutButton: this.showPopoutButton,
             config: this.config,
         };
     }

public/scripts/extensions/quick-reply/src/ui/ButtonUi.js

@@ -69,17 +69,20 @@ export class ButtonUi {
                 root.id = 'qr--bar';
                 root.classList.add('flex-container');
                 root.classList.add('flexGap5');
-                const popout = document.createElement('div'); {
+                if (this.settings.showPopoutButton) {
-                    popout.id = 'qr--popoutTrigger';
+                    root.classList.add('popoutVisible');
-                    popout.classList.add('menu_button');
+                    const popout = document.createElement('div'); {
-                    popout.classList.add('fa-solid');
+                        popout.id = 'qr--popoutTrigger';
-                    popout.classList.add('fa-window-restore');
+                        popout.classList.add('menu_button');
-                    popout.addEventListener('click', ()=>{
+                        popout.classList.add('fa-solid');
-                        this.settings.isPopout = true;
+                        popout.classList.add('fa-window-restore');
-                        this.refresh();
+                        popout.addEventListener('click', ()=>{
-                        this.settings.save();
+                            this.settings.isPopout = true;
-                    });
+                            this.refresh();
-                    root.append(popout);
+                            this.settings.save();
+                        });
+                        root.append(popout);
+                    }
                 }
                 if (this.settings.isCombined) {
                     const buttons = document.createElement('div'); {

public/scripts/extensions/quick-reply/src/ui/SettingsUi.js

@@ -14,6 +14,7 @@ export class SettingsUi {
 
     /**@type {HTMLInputElement}*/ isEnabled;
     /**@type {HTMLInputElement}*/ isCombined;
+    /**@type {HTMLInputElement}*/ showPopoutButton;
 
     /**@type {HTMLElement}*/ globalSetList;
 
@@ -79,6 +80,10 @@ export class SettingsUi {
         this.isCombined = this.dom.querySelector('#qr--isCombined');
         this.isCombined.checked = this.settings.isCombined;
         this.isCombined.addEventListener('click', ()=>this.onIsCombined());
+
+        this.showPopoutButton = this.dom.querySelector('#qr--showPopoutButton');
+        this.showPopoutButton.checked = this.settings.showPopoutButton;
+        this.showPopoutButton.addEventListener('click', ()=>this.onShowPopoutButton());
     }
 
     prepareGlobalSetList() {
@@ -235,6 +240,11 @@ export class SettingsUi {
         this.settings.save();
     }
 
+    async onShowPopoutButton() {
+        this.settings.showPopoutButton = this.showPopoutButton.checked;
+        this.settings.save();
+    }
+
     async onGlobalSetListSort() {
         this.settings.config.setList = Array.from(this.globalSetList.children).map((it,idx)=>{
             const set = this.settings.config.setList[Number(it.getAttribute('data-order'))];

public/scripts/extensions/quick-reply/style.css

@@ -27,7 +27,6 @@
   max-width: 100%;
   overflow-x: auto;
   order: 1;
-  padding-right: 2.5em;
   position: relative;
 }
 #qr--bar > #qr--popoutTrigger {
@@ -35,6 +34,9 @@
   right: 0.25em;
   top: 0;
 }
+#qr--bar.popoutVisible {
+  padding-right: 2.5em;
+}
 #qr--popout {
   display: flex;
   flex-direction: column;

public/scripts/extensions/quick-reply/style.less

@@ -25,7 +25,6 @@
     max-width: 100%;
     overflow-x: auto;
     order: 1;
-    padding-right: 2.5em;
     position: relative;
 
     >#qr--popoutTrigger {
@@ -34,6 +33,9 @@
         top: 0;
     }
 }
+#qr--bar.popoutVisible {
+    padding-right: 2.5em;
+}
 
 #qr--popout {
     display: flex;