Merge pull request #501 from mdiller/mdiller_fancyswitches

Better Toggle Inputs & Updated Settings UI

ui/index.html

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

ui/media/css/auto-save.css

@@ -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 {
+.parameters-table > div > div:nth-child(1) {
-    height: 24px;
+    font-size: 20px;
+    width: 45px;
 }
 
-#system-settings .form-table td:last-child div {
+.parameters-table > div > div:nth-child(2) {
-    display: flex;
+    flex: 1;
-    align-items: center;
+    flex-direction: column;
-}
-#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;
     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;
 }

ui/media/css/main.css

@@ -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 {
+    .simple-tooltip {
-        right: initial;
+        display: none;
-        left: 0px;
-        top: 50%;
-        transform: translate(calc(-100% + 15%), -50%);
-    }
-    :hover > .simple-tooltip.right {
-        transform: translate(100%, -50%);
     }
 }
 

ui/media/css/themes.css

@@ -1,22 +1,26 @@
 :root {
-    --background-color1: rgb(32, 33, 36); /* main parts of the page */
+    --main-hue: 222;
-    --background-color2: rgb(44, 45, 48); /* main panels */
+	--main-saturation: 4%;
-    --background-color3: rgb(47, 49, 53);
+	--value-base: 13%;
-    --background-color4: rgb(18, 18, 19); /* settings dropdowns */
+	--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-text-color: #ccc;
-    --input-background-color: #e9e9ed; 
+    --input-background-color: var(--background-color3);
-    --input-border-color: #8f8f9d; 
+	--input-border-color: var(--background-color4);
 
     --button-text-color: var(--input-text-color);
-    --button-color: #e9e9ed;
+    --button-color: var(--accent-color);
-    --button-border: 1px solid #8f8f9d;
+    --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;
+    --input-border-size: 0px;
-
-    --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;
+}
+

ui/media/js/auto-save.js

@@ -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"
 })

ui/media/js/main.js

@@ -1340,3 +1340,4 @@ window.addEventListener("beforeunload", function(e) {
 });
 
 createCollapsibles()
+prettifyInputs(document);

ui/media/js/parameters.js

@@ -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>
+			<div>${icon}</div>
-			<td><div>${element}${note}<div></td>`
+			<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'

ui/media/js/themes.js

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

ui/media/js/utils.js

@@ -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);
+        }
+    })
+}