From 514c498391c6e53d400c20689cdc81bd79c5b32b Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sat, 3 Dec 2022 02:47:47 -0300
Subject: [PATCH] definitive (for now) fix for None style

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 css/ui/generic.css  | 19 +++++++++++++++++++
 js/index.js         | 24 ++++++++++++++++++------
 res/icons/check.svg |  4 ++++
 3 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 res/icons/check.svg

diff --git a/css/ui/generic.css b/css/ui/generic.css
index 82e52bb..dd97f48 100644
--- a/css/ui/generic.css
+++ b/css/ui/generic.css
@@ -94,3 +94,22 @@ div.slider-wrapper > input.text {
 	text-align: center;
 	background-color: transparent;
 }
+
+/* Select Input */
+select > option:checked::after {
+	content: "";
+
+	position: absolute;
+	right: 5px;
+	top: 0;
+
+	height: 100%;
+	aspect-ratio: 1;
+
+	background-color: darkgreen;
+
+	-webkit-mask-image: url("/res/icons/check.svg");
+	-webkit-mask-size: contain;
+	mask-image: url("/res/icons/check.svg");
+	mask-size: contain;
+}
diff --git a/js/index.js b/js/index.js
index f837b62..7a3e47b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -779,7 +779,12 @@ async function getStyles() {
 			option.text = style.name;
 			option.value = style.name;
 			option.title = `prompt: ${style.prompt}\nnegative: ${style.negative_prompt}`;
-			option.selected = !!stored.find((styleName) => style.name === styleName);
+			if (stored.length === 0) option.selected = style.name === "None";
+			else
+				option.selected = !!stored.find(
+					(styleName) => style.name === styleName
+				);
+
 			styleSelect.add(option);
 		});
 
@@ -803,14 +808,21 @@ function changeStyles() {
 	const selected = Array.from(styleSelectEl.options).filter(
 		(option) => option.selected
 	);
-	const selectedString = selected.map((option) => option.value);
+	let selectedString = selected.map((option) => option.value);
 
-	selectedString != "None"
-		? localStorage.setItem("promptStyle", JSON.stringify(selectedString))
-		: localStorage.setItem("promptStyle", "[]");
+	if (selectedString.find((selected) => selected === "None")) {
+		selectedString = [];
+		Array.from(styleSelectEl.options).forEach((option) => {
+			if (option.value !== "None") option.selected = false;
+		});
+	}
+
+	localStorage.setItem("promptStyle", JSON.stringify(selectedString));
 
 	// change the model
-	console.log(`[index] Changing styles to ${selectedString.join(", ")}`);
+	if (selectedString.length > 0)
+		console.log(`[index] Changing styles to ${selectedString.join(", ")}`);
+	else console.log(`[index] Clearing styles`);
 	stableDiffusionData.styles = selectedString;
 }
 
diff --git a/res/icons/check.svg b/res/icons/check.svg
new file mode 100644
index 0000000..16acfeb
--- /dev/null
+++ b/res/icons/check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="20 6 9 17 4 12"></polyline>
+
+</svg>
\ No newline at end of file