From de335a4a96397513228e5e8951b5f2bd428d1794 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Tue, 20 Aug 2024 23:06:36 +0300
Subject: [PATCH] QR: Add toggle to hide popout button
---
.../extensions/quick-reply/html/settings.html | 3 +++
.../quick-reply/src/QuickReplySettings.js | 2 ++
.../extensions/quick-reply/src/ui/ButtonUi.js | 25 +++++++++++--------
.../quick-reply/src/ui/SettingsUi.js | 10 ++++++++
.../scripts/extensions/quick-reply/style.css | 4 ++-
.../scripts/extensions/quick-reply/style.less | 4 ++-
6 files changed, 35 insertions(+), 13 deletions(-)
diff --git a/public/scripts/extensions/quick-reply/html/settings.html b/public/scripts/extensions/quick-reply/html/settings.html
index 6c3845ca5..bc4713c7a 100644
--- a/public/scripts/extensions/quick-reply/html/settings.html
+++ b/public/scripts/extensions/quick-reply/html/settings.html
@@ -11,6 +11,9 @@
+
diff --git a/public/scripts/extensions/quick-reply/src/QuickReplySettings.js b/public/scripts/extensions/quick-reply/src/QuickReplySettings.js
index caf74fcc9..8fa83017e 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReplySettings.js
+++ b/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,
};
}
diff --git a/public/scripts/extensions/quick-reply/src/ui/ButtonUi.js b/public/scripts/extensions/quick-reply/src/ui/ButtonUi.js
index a7d910aaf..189489bab 100644
--- a/public/scripts/extensions/quick-reply/src/ui/ButtonUi.js
+++ b/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'); {
- popout.id = 'qr--popoutTrigger';
- popout.classList.add('menu_button');
- popout.classList.add('fa-solid');
- popout.classList.add('fa-window-restore');
- popout.addEventListener('click', ()=>{
- this.settings.isPopout = true;
- this.refresh();
- this.settings.save();
- });
- root.append(popout);
+ if (this.settings.showPopoutButton) {
+ root.classList.add('popoutVisible');
+ const popout = document.createElement('div'); {
+ popout.id = 'qr--popoutTrigger';
+ popout.classList.add('menu_button');
+ popout.classList.add('fa-solid');
+ popout.classList.add('fa-window-restore');
+ popout.addEventListener('click', ()=>{
+ this.settings.isPopout = true;
+ this.refresh();
+ this.settings.save();
+ });
+ root.append(popout);
+ }
}
if (this.settings.isCombined) {
const buttons = document.createElement('div'); {
diff --git a/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js b/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
index 544f21836..920c2cd30 100644
--- a/public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
+++ b/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'))];
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index 5dad72336..ae6bb18c6 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/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;
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index 6849af522..7261a514c 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/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;