forked from extern/easydiffusion
normalized popups
This commit is contained in:
parent
ef6f491d94
commit
09c11a385d
@ -240,9 +240,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="save-settings-config" style="display:none">
|
<div id="save-settings-config" class="popup">
|
||||||
<div>
|
<div>
|
||||||
<span id="save-settings-config-close-btn">X</span>
|
<i class="close-button fa-solid fa-xmark"></i>
|
||||||
<h1>Save Settings Configuration</h1>
|
<h1>Save Settings Configuration</h1>
|
||||||
<p>Select which settings should be remembered when restarting the browser</p>
|
<p>Select which settings should be remembered when restarting the browser</p>
|
||||||
<table id="save-settings-config-table">
|
<table id="save-settings-config-table">
|
||||||
@ -250,9 +250,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="modifier-settings-config" style="display:none">
|
<div id="modifier-settings-config" class="popup">
|
||||||
<div>
|
<div>
|
||||||
<span id="modifier-settings-config-close-btn">X</span>
|
<i class="close-button fa-solid fa-xmark"></i>
|
||||||
<h1>Modifier Settings</h1>
|
<h1>Modifier Settings</h1>
|
||||||
<p>Set your custom modifiers (one per line)</p>
|
<p>Set your custom modifiers (one per line)</p>
|
||||||
<textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
|
<textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
|
||||||
|
@ -6,26 +6,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-config {
|
|
||||||
position: absolute;
|
|
||||||
background: rgba(32, 33, 36, 50%);
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#save-settings-config > div {
|
|
||||||
background: var(--background-color3);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
|
||||||
margin-top: 50px;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 30px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#save-settings-config-table {
|
#save-settings-config-table {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
@ -49,13 +29,6 @@
|
|||||||
color: rgb(153, 153, 153);
|
color: rgb(153, 153, 153);
|
||||||
}
|
}
|
||||||
|
|
||||||
#save-settings-config-close-btn {
|
|
||||||
float: right;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 10px;
|
|
||||||
transform: translate(50%, -50%) scaleX(130%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#reset-image-settings {
|
#reset-image-settings {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: right;
|
float: right;
|
||||||
|
@ -678,3 +678,38 @@ input::file-selector-button {
|
|||||||
0% { background-position: -55px 0; }
|
0% { background-position: -55px 0; }
|
||||||
100% { background-position: 0 0; }
|
100% { background-position: 0 0; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popup:not(.active) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(32, 33, 36, 50%);
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup > div {
|
||||||
|
position: relative;
|
||||||
|
background: var(--background-color2);
|
||||||
|
border: solid 1px var(--background-color3);
|
||||||
|
max-width: 700px;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 50px;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup .close-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
transform: scale(150%);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
@ -217,32 +217,6 @@
|
|||||||
#modifier-settings-btn {
|
#modifier-settings-btn {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#modifier-settings-config {
|
|
||||||
position: fixed;
|
|
||||||
background: rgba(32, 33, 36, 50%);
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#modifier-settings-config > div {
|
|
||||||
background: var(--background-color2);
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
|
||||||
margin-top: 100px;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 30px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#modifier-settings-config-close-btn {
|
|
||||||
float: right;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 10px;
|
|
||||||
transform: translate(50%, -50%) scaleX(130%);
|
|
||||||
}
|
|
||||||
#modifier-settings-config textarea {
|
#modifier-settings-config textarea {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
|
@ -208,20 +208,10 @@ function fillSaveSettingsConfigTable() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
|
|
||||||
saveSettingsConfigOverlay.style.display = 'none'
|
|
||||||
})
|
|
||||||
document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
|
document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
|
||||||
fillSaveSettingsConfigTable()
|
fillSaveSettingsConfigTable()
|
||||||
saveSettingsConfigOverlay.style.display = 'block'
|
saveSettingsConfigOverlay.classList.add("active")
|
||||||
})
|
|
||||||
saveSettingsConfigOverlay.addEventListener('click', (event) => {
|
|
||||||
if (event.target.id == saveSettingsConfigOverlay.id) {
|
|
||||||
saveSettingsConfigOverlay.style.display = 'none'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
|
|
||||||
saveSettingsConfigOverlay.style.display = 'none'
|
|
||||||
})
|
})
|
||||||
resetImageSettingsButton.addEventListener('click', event => {
|
resetImageSettingsButton.addEventListener('click', event => {
|
||||||
loadDefaultSettingsSection("editor-settings");
|
loadDefaultSettingsSection("editor-settings");
|
||||||
|
@ -246,15 +246,7 @@ modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlid
|
|||||||
previewImageField.onchange = () => changePreviewImages(previewImageField.value)
|
previewImageField.onchange = () => changePreviewImages(previewImageField.value)
|
||||||
|
|
||||||
modifierSettingsBtn.addEventListener('click', function() {
|
modifierSettingsBtn.addEventListener('click', function() {
|
||||||
modifierSettingsOverlay.style.display = 'block'
|
modifierSettingsOverlay.classList.add("active")
|
||||||
})
|
|
||||||
document.getElementById("modifier-settings-config-close-btn").addEventListener('click', () => {
|
|
||||||
modifierSettingsOverlay.style.display = 'none'
|
|
||||||
})
|
|
||||||
modifierSettingsOverlay.addEventListener('click', (event) => {
|
|
||||||
if (event.target.id == modifierSettingsOverlay.id) {
|
|
||||||
modifierSettingsOverlay.style.display = 'none'
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function saveCustomModifiers() {
|
function saveCustomModifiers() {
|
||||||
|
@ -1311,4 +1311,19 @@ async function getDiskPath() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* setup popup handlers */
|
||||||
|
document.querySelectorAll('.popup').forEach(popup => {
|
||||||
|
popup.addEventListener('click', event => {
|
||||||
|
if (event.target == popup) {
|
||||||
|
popup.classList.remove("active")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
var closeButton = popup.querySelector(".close-button")
|
||||||
|
if (closeButton) {
|
||||||
|
closeButton.addEventListener('click', () => {
|
||||||
|
popup.classList.remove("active")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
createCollapsibles()
|
createCollapsibles()
|
||||||
|
97
ui/media/js/parameters.js
Normal file
97
ui/media/js/parameters.js
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enum of parameter types
|
||||||
|
* @readonly
|
||||||
|
* @enum {string}
|
||||||
|
*/
|
||||||
|
var ParameterType = {
|
||||||
|
checkbox: "checkbox",
|
||||||
|
select: "select",
|
||||||
|
text: "text",
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* JSDoc style
|
||||||
|
* @typedef {object} Parameter
|
||||||
|
* @property {string} id
|
||||||
|
* @property {ParameterType} type
|
||||||
|
* @property {string} label
|
||||||
|
* @property {?string} note
|
||||||
|
* @property {number|boolean|string} default
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/** @type {Array.<Parameter>} */
|
||||||
|
var PARAMETERS = [
|
||||||
|
{
|
||||||
|
id: "theme",
|
||||||
|
type: ParameterType.select,
|
||||||
|
label: "Theme",
|
||||||
|
default: "theme-default",
|
||||||
|
options: [ // Note: options expanded dynamically
|
||||||
|
{
|
||||||
|
value: "theme-default",
|
||||||
|
label: "Default"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "save_to_disk",
|
||||||
|
type: ParameterType.checkbox,
|
||||||
|
label: "Automatically Save Images",
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "diskPath", // TODO: auto-disabling of this based on save_to_disk
|
||||||
|
type: ParameterType.text,
|
||||||
|
label: "Save Location",
|
||||||
|
default: "", // Note: default value is generated
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "default_vae_model",
|
||||||
|
type: ParameterType.select, // Note: options generated dynamically
|
||||||
|
label: "Default VAE",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "sound_toggle",
|
||||||
|
type: ParameterType.checkbox,
|
||||||
|
label: "Play sound on task completion",
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "turbo",
|
||||||
|
type: ParameterType.checkbox,
|
||||||
|
label: "Turbo Mode",
|
||||||
|
default: true,
|
||||||
|
note: "generates images faster, but uses an additional 1 GB of GPU memory",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "use_cpu",
|
||||||
|
type: ParameterType.checkbox,
|
||||||
|
label: "Use CPU instead of GPU",
|
||||||
|
note: "warning: this will be *very* slow",
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "use_full_precision",
|
||||||
|
type: ParameterType.checkbox,
|
||||||
|
label: "Use full precision",
|
||||||
|
note: "for GPU-only. warning: this will consume more VRAM",
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "auto_save_settings",
|
||||||
|
type: ParameterType.checkbox,
|
||||||
|
label: "Automatically save settings",
|
||||||
|
note: "settings restored on browser load",
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "use_beta_channel",
|
||||||
|
type: ParameterType.checkbox,
|
||||||
|
label: "🔥Beta channel",
|
||||||
|
note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
];
|
Loading…
Reference in New Issue
Block a user