rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-01-20 21:41:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
QR: Add toggle to hide popout button
This commit is contained in:
Cohee 2024-08-22 22:57:26 +03:00 committed by GitHub
commit c84a685e7b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/scripts/extensions/quick-reply/html/settings.html
View File

@ -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>

2
public/scripts/extensions/quick-reply/src/QuickReplySettings.js
View File

@ -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,
};
}

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

@ -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'); {

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

@ -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'))];

4
public/scripts/extensions/quick-reply/style.css
View File

@ -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;

4
public/scripts/extensions/quick-reply/style.less
View File

@ -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;