mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-23 00:33:28 +01:00
Merge pull request #501 from mdiller/mdiller_fancyswitches
Better Toggle Inputs & Updated Settings UI
This commit is contained in:
cmdr2
GitHub
commit
0067e46192
@ -47,7 +47,6 @@
|
||||
<label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn">Load from a file</button>
|
||||
<textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
|
||||
<input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
|
||||
|
||||
<label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
|
||||
Negative Prompt
|
||||
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about Negative Prompts</span></i></a>
|
||||
@ -94,7 +93,7 @@
|
||||
<h4 class="collapsible">
|
||||
Image Settings
|
||||
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
|
||||
<span class="simple-tooltip left">
|
||||
<span class="simple-tooltip right">
|
||||
Reset Image Settings
|
||||
</span>
|
||||
</i>
|
||||
@ -242,7 +241,7 @@
|
||||
<div id="tab-content-settings" class="tab-content">
|
||||
<div id="system-settings" class="tab-content-inner">
|
||||
<h1>System Settings</h1>
|
||||
<table class="form-table"></table>
|
||||
<div class="parameters-table"></div>
|
||||
<br/>
|
||||
<button id="save-system-settings-btn" class="primaryButton">Save</button>
|
||||
<br/><br/>
|
||||
|
||||
@ -26,23 +26,56 @@
|
||||
float: left;
|
||||
}
|
||||
|
||||
.form-table small {
|
||||
|
||||
.parameters-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.parameters-table > div {
|
||||
background: var(--background-color2);
|
||||
display: flex;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
|
||||
.parameters-table > div > div {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.parameters-table small {
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
|
||||
#system-settings .form-table td {
|
||||
height: 24px;
|
||||
.parameters-table > div > div:nth-child(1) {
|
||||
font-size: 20px;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
#system-settings .form-table td:last-child div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#system-settings .form-table td:last-child div > :not([type="checkbox"]):first-child {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#system-settings .form-table td:last-child div small {
|
||||
padding-left: 5px;
|
||||
.parameters-table > div > div:nth-child(2) {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.parameters-table > div > div:nth-child(3) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.parameters-table > div:first-child {
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
}
|
||||
|
||||
.parameters-table > div:last-child {
|
||||
border-radius: 0px 0px 12px 12px;
|
||||
}
|
||||
|
||||
.parameters-table .fa-fire {
|
||||
color: #F7630C;
|
||||
}
|
||||
@ -216,7 +216,6 @@ code {
|
||||
display: none !important;
|
||||
}
|
||||
#editor-modifiers {
|
||||
max-width: 600px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@ -506,6 +505,10 @@ img {
|
||||
border-radius: 6px 0px;
|
||||
}
|
||||
|
||||
#editor-settings {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
#editor-settings-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -595,6 +598,57 @@ input::file-selector-button {
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
|
||||
.input-toggle {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: calc(var(--input-height) * 2);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.input-toggle > input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.input-toggle > label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
height: var(--input-height);
|
||||
padding: 0;
|
||||
line-height: var(--input-height);
|
||||
border: var(--input-border-size) solid var(--input-border-color);
|
||||
border-radius: var(--input-height);
|
||||
background: var(--input-background-color);
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
.input-toggle > label:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2));
|
||||
margin: 0px;
|
||||
background: var(--input-text-color);
|
||||
position: absolute;
|
||||
top: calc(var(--input-border-size) + var(--input-switch-padding));
|
||||
bottom: calc(var(--input-border-size) + var(--input-switch-padding));
|
||||
right: calc(var(--input-border-size) + var(--input-switch-padding) + var(--input-height));
|
||||
border-radius: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2));
|
||||
transition: all 0.2s ease-in 0s;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.input-toggle > input:checked + label {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
.input-toggle > input:checked + label:before {
|
||||
right: calc(var(--input-border-size) + var(--input-switch-padding));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* MOBILE SUPPORT */
|
||||
@media screen and (max-width: 700px) {
|
||||
#top-nav {
|
||||
@ -636,6 +690,9 @@ input::file-selector-button {
|
||||
#editor {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
#editor-settings {
|
||||
min-width: 0px;
|
||||
}
|
||||
.tab-content-inner {
|
||||
margin: 0px;
|
||||
}
|
||||
@ -659,14 +716,8 @@ input::file-selector-button {
|
||||
padding: 0px !important;
|
||||
margin: 24px !important;
|
||||
}
|
||||
.simple-tooltip.right {
|
||||
right: initial;
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translate(calc(-100% + 15%), -50%);
|
||||
}
|
||||
:hover > .simple-tooltip.right {
|
||||
transform: translate(100%, -50%);
|
||||
.simple-tooltip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,26 @@
|
||||
:root {
|
||||
--background-color1: rgb(32, 33, 36); /* main parts of the page */
|
||||
--background-color2: rgb(44, 45, 48); /* main panels */
|
||||
--background-color3: rgb(47, 49, 53);
|
||||
--background-color4: rgb(18, 18, 19); /* settings dropdowns */
|
||||
--main-hue: 222;
|
||||
--main-saturation: 4%;
|
||||
--value-base: 13%;
|
||||
--value-step: 5%;
|
||||
--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
|
||||
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
|
||||
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.5 * var(--value-step))));
|
||||
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1.5 * var(--value-step))));
|
||||
|
||||
--accent-hue: 266;
|
||||
--accent-hue: 263;
|
||||
--accent-lightness: 36%;
|
||||
--accent-lightness-hover: 40%;
|
||||
|
||||
--text-color: #eee;
|
||||
|
||||
--input-text-color: black;
|
||||
--input-background-color: #e9e9ed;
|
||||
--input-border-color: #8f8f9d;
|
||||
--input-text-color: #ccc;
|
||||
--input-background-color: var(--background-color3);
|
||||
--input-border-color: var(--background-color4);
|
||||
|
||||
--button-text-color: var(--input-text-color);
|
||||
--button-color: #e9e9ed;
|
||||
--button-border: 1px solid #8f8f9d;
|
||||
--button-color: var(--accent-color);
|
||||
--button-border: none;
|
||||
|
||||
/* other */
|
||||
--input-border-radius: 4px;
|
||||
@ -24,6 +28,8 @@
|
||||
--accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
|
||||
--accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
|
||||
--primary-button-border: none;
|
||||
--input-switch-padding: 1px;
|
||||
--input-height: 24px;
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
@ -33,6 +39,7 @@
|
||||
--background-color4: #cccccc;
|
||||
|
||||
--text-color: black;
|
||||
--button-text-color: white;
|
||||
|
||||
--input-text-color: black;
|
||||
--input-background-color: #f8f9fa;
|
||||
@ -47,12 +54,7 @@
|
||||
|
||||
--accent-hue: 235;
|
||||
--accent-lightness: 65%;
|
||||
--primary-button-border: none;
|
||||
|
||||
--button-color: var(--accent-color);
|
||||
--button-border: none;
|
||||
|
||||
--input-text-color: #ccc;
|
||||
--input-border-size: 2px;
|
||||
--input-background-color: #202225;
|
||||
--input-border-color: var(--input-background-color);
|
||||
@ -69,15 +71,6 @@
|
||||
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
|
||||
|
||||
--accent-hue: 212;
|
||||
--primary-button-border: none;
|
||||
|
||||
--button-color: var(--accent-color);
|
||||
--button-border: none;
|
||||
|
||||
--input-border-size: 1px;
|
||||
--input-background-color: var(--background-color3);
|
||||
--input-text-color: #ccc;
|
||||
--input-border-color: var(--background-color4);
|
||||
}
|
||||
|
||||
|
||||
@ -90,16 +83,6 @@
|
||||
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
|
||||
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
|
||||
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
|
||||
|
||||
--primary-button-border: none;
|
||||
|
||||
--button-color: var(--accent-color);
|
||||
--button-border: none;
|
||||
|
||||
--input-border-size: 1px;
|
||||
--input-background-color: var(--background-color3);
|
||||
--input-text-color: #ccc;
|
||||
--input-border-color: var(--background-color4);
|
||||
}
|
||||
|
||||
.theme-super-dark {
|
||||
@ -112,15 +95,7 @@
|
||||
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
|
||||
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1.4 * var(--value-step))));
|
||||
|
||||
--primary-button-border: none;
|
||||
|
||||
--button-color: var(--accent-color);
|
||||
--button-border: none;
|
||||
|
||||
--input-border-size: 0px;
|
||||
--input-background-color: var(--background-color3);
|
||||
--input-text-color: #ccc;
|
||||
--input-border-color: var(--background-color4);
|
||||
}
|
||||
|
||||
.theme-wild {
|
||||
@ -134,13 +109,33 @@
|
||||
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
|
||||
|
||||
--accent-hue: 212;
|
||||
--primary-button-border: none;
|
||||
|
||||
--button-color: var(--accent-color);
|
||||
--button-border: none;
|
||||
|
||||
--input-border-size: 1px;
|
||||
--input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
|
||||
--input-text-color: red;
|
||||
--input-border-color: green;
|
||||
}
|
||||
|
||||
.theme-gnomie {
|
||||
--background-color1: #242424;
|
||||
--background-color2: #353535;
|
||||
--background-color3: #494949;
|
||||
--background-color4: #000000;
|
||||
|
||||
--accent-hue: 213;
|
||||
--accent-lightness: 76.8%;
|
||||
--accent-color: #3584e4;
|
||||
|
||||
--input-border-radius: 6px;
|
||||
--input-text-color: #ffffff;
|
||||
--input-background-color: #2a2a2a;
|
||||
--input-border-size: 0px;
|
||||
--input-border-color: var(--input-background-color);
|
||||
}
|
||||
|
||||
.theme-hamunii .panel-box {
|
||||
border: none;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -213,6 +213,7 @@ function fillSaveSettingsConfigTable() {
|
||||
})
|
||||
})
|
||||
})
|
||||
prettifyInputs(saveSettingsConfigTable)
|
||||
}
|
||||
|
||||
// configureSettingsSaveBtn
|
||||
@ -224,7 +225,7 @@ var autoSaveSettings = document.getElementById("auto_save_settings")
|
||||
var configSettingsButton = document.createElement("button")
|
||||
configSettingsButton.textContent = "Configure"
|
||||
configSettingsButton.style.margin = "0px 5px"
|
||||
autoSaveSettings.insertAdjacentElement("afterend", configSettingsButton)
|
||||
autoSaveSettings.insertAdjacentElement("beforebegin", configSettingsButton)
|
||||
autoSaveSettings.addEventListener("change", () => {
|
||||
configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
|
||||
})
|
||||
|
||||
@ -1340,3 +1340,4 @@ window.addEventListener("beforeunload", function(e) {
|
||||
});
|
||||
|
||||
createCollapsibles()
|
||||
prettifyInputs(document);
|
||||
@ -28,18 +28,21 @@ var PARAMETERS = [
|
||||
type: ParameterType.select,
|
||||
label: "Theme",
|
||||
default: "theme-default",
|
||||
note: "customize the look and feel of the ui",
|
||||
options: [ // Note: options expanded dynamically
|
||||
{
|
||||
value: "theme-default",
|
||||
label: "Default"
|
||||
}
|
||||
]
|
||||
],
|
||||
icon: "fa-palette"
|
||||
},
|
||||
{
|
||||
id: "save_to_disk",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Auto-Save Images",
|
||||
note: "automatically saves images to the specified location",
|
||||
icon: "fa-download",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
@ -55,6 +58,7 @@ var PARAMETERS = [
|
||||
type: ParameterType.checkbox,
|
||||
label: "Enable Sound",
|
||||
note: "plays a sound on task completion",
|
||||
icon: "fa-volume-low",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
@ -62,20 +66,23 @@ var PARAMETERS = [
|
||||
type: ParameterType.checkbox,
|
||||
label: "Open browser on startup",
|
||||
note: "starts the default browser on startup",
|
||||
icon: "fa-window-restore",
|
||||
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",
|
||||
icon: "fa-forward",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "use_cpu",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Use CPU (not GPU)",
|
||||
note: "warning: this will be *very* slow",
|
||||
icon: "fa-microchip",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
@ -96,6 +103,7 @@ var PARAMETERS = [
|
||||
type: ParameterType.checkbox,
|
||||
label: "Use Full Precision",
|
||||
note: "for GPU-only. warning: this will consume more VRAM",
|
||||
icon: "fa-crosshairs",
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
@ -103,13 +111,15 @@ var PARAMETERS = [
|
||||
type: ParameterType.checkbox,
|
||||
label: "Auto-Save Settings",
|
||||
note: "restores settings on browser load",
|
||||
icon: "fa-gear",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "use_beta_channel",
|
||||
type: ParameterType.checkbox,
|
||||
label: "🔥Beta channel",
|
||||
label: "Beta channel",
|
||||
note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
|
||||
icon: "fa-fire",
|
||||
default: false,
|
||||
},
|
||||
];
|
||||
@ -140,16 +150,18 @@ function getParameterElement(parameter) {
|
||||
}
|
||||
}
|
||||
|
||||
let parametersTable = document.querySelector("#system-settings table")
|
||||
let parametersTable = document.querySelector("#system-settings .parameters-table")
|
||||
/* fill in the system settings popup table */
|
||||
function initParameters() {
|
||||
PARAMETERS.forEach(parameter => {
|
||||
var element = getParameterElement(parameter)
|
||||
var note = parameter.note ? `<small>${parameter.note}</small>` : "";
|
||||
var newrow = document.createElement('tr')
|
||||
var icon = parameter.icon ? `<i class="fa ${parameter.icon}"></i>` : "";
|
||||
var newrow = document.createElement('div')
|
||||
newrow.innerHTML = `
|
||||
<td><label for="${parameter.id}">${parameter.label}</label></td>
|
||||
<td><div>${element}${note}<div></td>`
|
||||
<div>${icon}</div>
|
||||
<div><label for="${parameter.id}">${parameter.label}</label>${note}</div>
|
||||
<div>${element}</div>`
|
||||
parametersTable.appendChild(newrow)
|
||||
parameter.settingsEntry = newrow
|
||||
})
|
||||
@ -224,6 +236,7 @@ function getCurrentRenderDeviceSelection() {
|
||||
useCPUField.addEventListener('click', function() {
|
||||
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
|
||||
let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
|
||||
console.log("hello", this.checked);
|
||||
if (this.checked) {
|
||||
gpuSettingEntry.style.display = 'none'
|
||||
autoPickGPUSettingEntry.style.display = 'none'
|
||||
|
||||
@ -14,7 +14,7 @@ function initTheme() {
|
||||
.flatMap(sheet => Array.from(sheet.cssRules))
|
||||
.forEach(rule => {
|
||||
var selector = rule.selectorText; // TODO: also do selector == ":root", re-run un-set props
|
||||
if (selector && selector.startsWith(".theme-")) {
|
||||
if (selector && selector.startsWith(".theme-") && !selector.includes(" ")) {
|
||||
var theme_key = selector.substring(1);
|
||||
THEMES.push({
|
||||
key: theme_key,
|
||||
|
||||
@ -358,3 +358,19 @@ function preventNonNumericalInput(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/* inserts custom html to allow prettifying of inputs */
|
||||
function prettifyInputs(root_element) {
|
||||
root_element.querySelectorAll(`input[type="checkbox"]`).forEach(element => {
|
||||
var parent = element.parentNode;
|
||||
if (!parent.classList.contains("input-toggle")) {
|
||||
var wrapper = document.createElement("div");
|
||||
wrapper.classList.add("input-toggle");
|
||||
parent.replaceChild(wrapper, element);
|
||||
wrapper.appendChild(element);
|
||||
var label = document.createElement("label");
|
||||
label.htmlFor = element.id;
|
||||
wrapper.appendChild(label);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user