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

public/scripts/extensions/quick-reply/html/settings.html+3 -0 Viewed

 			<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+2 -0 Viewed

     /**@type {Boolean}*/ isEnabled = false;
     /**@type {Boolean}*/ isCombined = false;
     /**@type {Boolean}*/ isPopout = false;
 +    /**@type {Boolean}*/ showPopoutButton = true;
     /**@type {QuickReplyConfig}*/ config;
     /**@type {QuickReplyConfig}*/ _chatConfig;
     get chatConfig() {

             isEnabled: this.isEnabled,
             isCombined: this.isCombined,
             isPopout: this.isPopout,
 +            showPopoutButton: this.showPopoutButton,
             config: this.config,
         };
+    }

public/scripts/extensions/quick-reply/src/ui/ButtonUi.js+14 -11 Viewed

                 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');
                     const popout.classList = document.addcreateElement('menu_buttondiv'); {
 -                    popout.classList.add('fa-solid');
 +                        popout.id = 'qr--popoutTrigger';
                                             popout.classList.add('fa-window-restoremenu_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()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+10 -0 Viewed

     /**@type {HTMLInputElement}*/ isEnabled;
     /**@type {HTMLInputElement}*/ isCombined;
 +    /**@type {HTMLInputElement}*/ showPopoutButton;
     /**@type {HTMLElement}*/ globalSetList;

         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() {

         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+3 -1 Viewed

   max-width: 100%;
   overflow-x: auto;
   order: 1;
 -  padding-right: 2.5em;
   position: relative;
+}
 #qr--bar > #qr--popoutTrigger {

   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+3 -1 Viewed

     max-width: 100%;
     overflow-x: auto;
     order: 1;
 -    padding-right: 2.5em;
     position: relative;
     >#qr--popoutTrigger {

@@ -34,6 +33,9 @@
34	33	top: 0;
35	34	}
36	35	}
	36	+#qr--bar.popoutVisible {
	37	+ padding-right: 2.5em;
	38	+}
37	39
38	40	#qr--popout {
39	41	display: flex;