Merge pull request #65 from one-some/ui2-tweaks

Add tweaks and 1 example tweak

static/koboldai.css

@@ -656,6 +656,25 @@ input[type="range"]::-ms-fill-upper {
 	filter: brightness(85%);
 }
 
+/* Tweaks */
+.tweak-container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	color: var(--setting_text);
+	background-color: var(--setting_background);
+	border-radius: var(--radius_settings_background);
+	padding: 10px 8px;
+	margin-bottom: 5px;
+	width: 100%;
+}
+
+#Tweaks {
+	/* Don't add space under last tweak-container. Also, CSS, why no last-of-class!?!? */
+	margin-bottom: 0px;
+}
+
 /*----------------RIGHT FLYOUT MENU------------------*/
 .right_menu_icon {
 	position: fixed;

static/koboldai.js

@@ -2812,4 +2812,46 @@ $(document).ready(function(){
 	}
 	preserve_game_space(!(getCookie("preserve_game_space") == "false"));
 	options_on_right(!(getCookie("options_on_right") == "false"));
-});
+
+
+	// Tweak registering
+	let enabledTweaks = JSON.parse(getCookie("enabledTweaks", "[]"));
+
+	function saveTweaks() {
+		let out = [];
+
+		// TODO: Better saving
+		for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
+			let toggle = tweakContainer.querySelector("input");
+			let path = tweakContainer.getAttribute("tweak-path");
+			if (toggle.checked) out.push(path);
+		}
+
+		setCookie("enabledTweaks", JSON.stringify(out));
+	}
+
+
+	for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
+		let toggle = tweakContainer.querySelector("input");
+		let path = tweakContainer.getAttribute("tweak-path");
+
+		$(toggle).change(function(e) {
+			let path = $(this).closest(".tweak-container")[0].getAttribute("tweak-path");
+			let id = `tweak-${path}`;
+
+			if (this.checked) {
+				let style = document.createElement("link");
+				style.rel = "stylesheet";
+				style.href = `/themes/tweaks/${path}.css`;
+				style.id = id;
+				document.head.appendChild(style);
+			} else {
+				document.getElementById(id).remove();
+			}
+
+			saveTweaks();
+		});
+
+		if (enabledTweaks.includes(path)) toggle.click();
+	}
+});

templates/settings flyout.html

@@ -296,8 +296,18 @@
 				<span>Advanced Theme</h4>
 			</div>
 		</div>
+
+		<div class="collapsable_header" onclick="toggle_setting_category(this);">
+			<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Tweaks</h4>
+		</div>
+		<div class="setting_tile_area" id="Tweaks">
+			<span class="help_text">Small UI changes that can be mixed and matched.</span>
+			<div class="tweak-container" tweak-path="hide-timing">
+				<span>Hide timing information</span>
+				<input type=checkbox class="setting_item_input" data-size="mini" data-onstyle="success" data-toggle="toggle">
+			</div>
+		</div>
 	</div>
-	<span class=>
 	<span class="material-icons-outlined cursor show_footer_icon" onclick='if (document.getElementById("settings_footer").classList.contains("hidden")){
 																		       document.getElementById("settings_footer").classList.remove("hidden");
 																		   } else {

themes/tweaks/hide-timing.css

@@ -0,0 +1,2 @@
+.show_footer_icon { display: none; }
+#settings_footer { display: none; }