From 09c11a385d0c36addc7a40d683528ecd81d0641e Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Fri, 28 Oct 2022 16:48:32 -0700
Subject: [PATCH] normalized popups

---
 ui/index.html                        |  8 +--
 ui/media/css/auto-save.css           | 27 --------
 ui/media/css/main.css                | 35 ++++++++++
 ui/media/css/modifier-thumbnails.css | 26 --------
 ui/media/js/auto-save.js             | 14 +---
 ui/media/js/image-modifiers.js       | 10 +--
 ui/media/js/main.js                  | 15 +++++
 ui/media/js/parameters.js            | 97 ++++++++++++++++++++++++++++
 8 files changed, 154 insertions(+), 78 deletions(-)
 create mode 100644 ui/media/js/parameters.js

diff --git a/ui/index.html b/ui/index.html
index f81b5d27..44984a9c 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -240,9 +240,9 @@
         </div>
     </div>
 
-    <div id="save-settings-config" style="display:none">
+    <div id="save-settings-config" class="popup">
         <div>
-            <span id="save-settings-config-close-btn">X</span>
+            <i class="close-button fa-solid fa-xmark"></i>
             <h1>Save Settings Configuration</h1>
             <p>Select which settings should be remembered when restarting the browser</p>
             <table id="save-settings-config-table">
@@ -250,9 +250,9 @@
         </div>
     </div>
 
-    <div id="modifier-settings-config" style="display:none">
+    <div id="modifier-settings-config" class="popup">
         <div>
-            <span id="modifier-settings-config-close-btn">X</span>
+            <i class="close-button fa-solid fa-xmark"></i>
             <h1>Modifier Settings</h1>
             <p>Set your custom modifiers (one per line)</p>
             <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
diff --git a/ui/media/css/auto-save.css b/ui/media/css/auto-save.css
index cb6ccb80..1fdad58e 100644
--- a/ui/media/css/auto-save.css
+++ b/ui/media/css/auto-save.css
@@ -6,26 +6,6 @@
     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 {
     margin: auto;
 }
@@ -49,13 +29,6 @@
     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 {
     cursor: pointer;
     float: right;
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index b1517a26..09c79637 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -677,4 +677,39 @@ input::file-selector-button {
 @keyframes progress-anim { 
     0%   { background-position: -55px 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;
 }
\ No newline at end of file
diff --git a/ui/media/css/modifier-thumbnails.css b/ui/media/css/modifier-thumbnails.css
index 8b930dd5..9b462e57 100644
--- a/ui/media/css/modifier-thumbnails.css
+++ b/ui/media/css/modifier-thumbnails.css
@@ -217,32 +217,6 @@
 #modifier-settings-btn {
     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 {
     width: 90%;
     height: 150px;
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js
index ea57b2c3..9a84d74f 100644
--- a/ui/media/js/auto-save.js
+++ b/ui/media/js/auto-save.js
@@ -208,20 +208,10 @@ function fillSaveSettingsConfigTable() {
     })
 }
 
-document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
-    saveSettingsConfigOverlay.style.display = 'none'
-})
+
 document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
     fillSaveSettingsConfigTable()
-    saveSettingsConfigOverlay.style.display = 'block'
-})
-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'
+    saveSettingsConfigOverlay.classList.add("active")
 })
 resetImageSettingsButton.addEventListener('click', event => {
     loadDefaultSettingsSection("editor-settings");
diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index 592ee70b..751f6076 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -246,15 +246,7 @@ modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlid
 previewImageField.onchange = () => changePreviewImages(previewImageField.value)
 
 modifierSettingsBtn.addEventListener('click', function() {
-    modifierSettingsOverlay.style.display = 'block'
-})
-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'
-    }
+    modifierSettingsOverlay.classList.add("active")
 })
 
 function saveCustomModifiers() {
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 169b6cd9..97a977b9 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -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()
diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js
new file mode 100644
index 00000000..02c00d19
--- /dev/null
+++ b/ui/media/js/parameters.js
@@ -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,
+	},
+];
\ No newline at end of file