QR: Add toggle to hide popout button

de335a4a96397513228e5e8951b5f2bd428d1794

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

Parents: 7d2e35d95072f0614bf98fc5315f5ec8220815da
6 files changed, +24 -2Showing whitespace changes
public/scripts/extensions/quick-reply/html/settings.html+3 -0
@@ -11,6 +11,9 @@
1111 <label class="flex-container">
1212 <input type="checkbox" id="qr--isCombined"><span data-i18n="Combine Quick Replies">Combine Quick Replies</span>
1313 </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
1518 <hr>
1619
public/scripts/extensions/quick-reply/src/QuickReplySettings.js+2 -0
@@ -16,6 +16,7 @@ export class QuickReplySettings {
1616 /**@type {Boolean}*/ isEnabled = false;
1717 /**@type {Boolean}*/ isCombined = false;
1818 /**@type {Boolean}*/ isPopout = false;
19+ /**@type {Boolean}*/ showPopoutButton = true;
1920 /**@type {QuickReplyConfig}*/ config;
2021 /**@type {QuickReplyConfig}*/ _chatConfig;
2122 get chatConfig() {
@@ -79,6 +80,7 @@ export class QuickReplySettings {
7980 isEnabled: this.isEnabled,
8081 isCombined: this.isCombined,
8182 isPopout: this.isPopout,
83+ showPopoutButton: this.showPopoutButton,
8284 config: this.config,
8385 };
8486 }
public/scripts/extensions/quick-reply/src/ui/ButtonUi.js+3 -0
@@ -69,6 +69,8 @@ export class ButtonUi {
6969 root.id = 'qr--bar';
7070 root.classList.add('flex-container');
7171 root.classList.add('flexGap5');
72+ if (this.settings.showPopoutButton) {
73+ root.classList.add('popoutVisible');
7274 const popout = document.createElement('div'); {
7375 popout.id = 'qr--popoutTrigger';
7476 popout.classList.add('menu_button');
@@ -81,6 +83,7 @@ export class ButtonUi {
8183 });
8284 root.append(popout);
8385 }
86+ }
8487 if (this.settings.isCombined) {
8588 const buttons = document.createElement('div'); {
8689 buttonHolder = buttons;
public/scripts/extensions/quick-reply/src/ui/SettingsUi.js+10 -0
@@ -14,6 +14,7 @@ export class SettingsUi {
1414
1515 /**@type {HTMLInputElement}*/ isEnabled;
1616 /**@type {HTMLInputElement}*/ isCombined;
17+ /**@type {HTMLInputElement}*/ showPopoutButton;
1718
1819 /**@type {HTMLElement}*/ globalSetList;
1920
@@ -79,6 +80,10 @@ export class SettingsUi {
7980 this.isCombined = this.dom.querySelector('#qr--isCombined');
8081 this.isCombined.checked = this.settings.isCombined;
8182 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());
8287 }
8388
8489 prepareGlobalSetList() {
@@ -235,6 +240,11 @@ export class SettingsUi {
235240 this.settings.save();
236241 }
237242
243+ async onShowPopoutButton() {
244+ this.settings.showPopoutButton = this.showPopoutButton.checked;
245+ this.settings.save();
246+ }
247+
238248 async onGlobalSetListSort() {
239249 this.settings.config.setList = Array.from(this.globalSetList.children).map((it,idx)=>{
240250 const set = this.settings.config.setList[Number(it.getAttribute('data-order'))];
public/scripts/extensions/quick-reply/style.css+3 -1
@@ -27,7 +27,6 @@
2727 max-width: 100%;
2828 overflow-x: auto;
2929 order: 1;
30- padding-right: 2.5em;
3130 position: relative;
3231}
3332#qr--bar > #qr--popoutTrigger {
@@ -35,6 +34,9 @@
3534 right: 0.25em;
3635 top: 0;
3736}
37+#qr--bar.popoutVisible {
38+ padding-right: 2.5em;
39+}
3840#qr--popout {
3941 display: flex;
4042 flex-direction: column;
public/scripts/extensions/quick-reply/style.less+3 -1
@@ -25,7 +25,6 @@
2525 max-width: 100%;
2626 overflow-x: auto;
2727 order: 1;
28- padding-right: 2.5em;
2928 position: relative;
3029
3130 >#qr--popoutTrigger {
@@ -34,6 +33,9 @@
3433 top: 0;
3534 }
3635}
36+#qr--bar.popoutVisible {
37+ padding-right: 2.5em;
38+}
3739
3840#qr--popout {
3941 display: flex;