rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use generic popups for QR editor

This commit is contained in:
LenAnderson 2024-04-08 18:43:21 -04:00
parent 0e2a82ce00
commit b461c6f0bb
3 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/scripts/extensions/quick-reply/src/QuickReply.js
View File

@ -1,4 +1,4 @@
import { callPopup } from '../../../../script.js'; import { POPUP_TYPE, Popup } from '../../../popup.js';
import { getSortableDelay } from '../../../utils.js'; import { getSortableDelay } from '../../../utils.js';
import { log, warn } from '../index.js'; import { log, warn } from '../index.js';
import { QuickReplyContextLink } from './QuickReplyContextLink.js'; import { QuickReplyContextLink } from './QuickReplyContextLink.js';
@ -44,6 +44,8 @@ export class QuickReply {
/**@type {HTMLInputElement}*/ settingsDomLabel; /**@type {HTMLInputElement}*/ settingsDomLabel;
/**@type {HTMLTextAreaElement}*/ settingsDomMessage; /**@type {HTMLTextAreaElement}*/ settingsDomMessage;
/**@type {Popup}*/ editorPopup;
/**@type {HTMLElement}*/ editorExecuteBtn; /**@type {HTMLElement}*/ editorExecuteBtn;
/**@type {HTMLElement}*/ editorExecuteErrors; /**@type {HTMLElement}*/ editorExecuteErrors;
/**@type {HTMLInputElement}*/ editorExecuteHide; /**@type {HTMLInputElement}*/ editorExecuteHide;
@ -197,7 +199,8 @@ export class QuickReply {
/**@type {HTMLElement} */ /**@type {HTMLElement} */
// @ts-ignore // @ts-ignore
const dom = this.template.cloneNode(true); const dom = this.template.cloneNode(true);
const popupResult = callPopup(dom, 'text', undefined, { okButton: 'OK', wide: true, large: true, rows: 1 }); this.editorPopup = new Popup(dom, POPUP_TYPE.TEXT, undefined, { okButton: 'OK', wide: true, large: true, rows: 1 });
const popupResult = this.editorPopup.show();
// basics // basics
/**@type {HTMLInputElement}*/ /**@type {HTMLInputElement}*/
@ -435,7 +438,7 @@ export class QuickReply {
this.editorExecuteBtn.classList.add('qr--busy'); this.editorExecuteBtn.classList.add('qr--busy');
this.editorExecuteErrors.innerHTML = ''; this.editorExecuteErrors.innerHTML = '';
if (this.editorExecuteHide.checked) { if (this.editorExecuteHide.checked) {
document.querySelector('#shadow_popup').classList.add('qr--hide'); this.editorPopup.dom.classList.add('qr--hide');
} }
try { try {
this.editorExecutePromise = this.execute(); this.editorExecutePromise = this.execute();
@ -445,7 +448,7 @@ export class QuickReply {
} }
this.editorExecutePromise = null; this.editorExecutePromise = null;
this.editorExecuteBtn.classList.remove('qr--busy'); this.editorExecuteBtn.classList.remove('qr--busy');
document.querySelector('#shadow_popup').classList.remove('qr--hide'); this.editorPopup.dom.classList.remove('qr--hide');
} }

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

@ -216,60 +216,60 @@
align-items: baseline; align-items: baseline;
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
body #dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor { body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
flex-direction: column; flex-direction: column;
} }
body #dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels { body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
flex-direction: column; flex-direction: column;
} }
body #dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message { body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message {
min-height: 90svh; min-height: 90svh;
} }
} }
#dialogue_popup:has(#qr--modalEditor) { .dialogue_popup:has(#qr--modalEditor) {
aspect-ratio: unset; aspect-ratio: unset;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1em; gap: 1em;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 0.5em; gap: 0.5em;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label {
flex: 1 1 1px; flex: 1 1 1px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelText { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelText {
flex: 1 1 auto; flex: 1 1 auto;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelHint { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelHint {
flex: 1 1 auto; flex: 1 1 auto;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > input { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--labels > label > input {
flex: 0 0 auto; flex: 0 0 auto;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1em; gap: 1em;
@ -277,24 +277,24 @@
font-size: smaller; font-size: smaller;
align-items: baseline; align-items: baseline;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label {
white-space: nowrap; white-space: nowrap;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
font-size: inherit; font-size: inherit;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message {
flex: 1 1 auto; flex: 1 1 auto;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor #qr--modal-execute { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-execute {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 0.5em; gap: 0.5em;
} }
#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor #qr--modal-execute.qr--busy { .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor #qr--modal-execute.qr--busy {
opacity: 0.5; opacity: 0.5;
cursor: wait; cursor: wait;
} }
#shadow_popup.qr--hide { .shadow_popup.qr--hide {
opacity: 0 !important; opacity: 0 !important;
} }

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

@ -242,7 +242,7 @@
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
body #dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor { body .dialogue_popup:has(#qr--modalEditor) .dialogue_popup_text > #qr--modalEditor {
flex-direction: column; flex-direction: column;
> #qr--main > .qr--labels { > #qr--main > .qr--labels {
flex-direction: column; flex-direction: column;
@ -252,10 +252,10 @@
} }
} }
} }
#dialogue_popup:has(#qr--modalEditor) { .dialogue_popup:has(#qr--modalEditor) {
aspect-ratio: unset; aspect-ratio: unset;
#dialogue_popup_text { .dialogue_popup_text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -326,6 +326,6 @@
} }
} }
#shadow_popup.qr--hide { .shadow_popup.qr--hide {
opacity: 0 !important; opacity: 0 !important;
} }