Merge branch 'UI2' into UI2-test

static/koboldai.css

@@ -649,6 +649,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;
@@ -1140,6 +1159,8 @@ body {
 	
 }
 #random_game_prompt{
+	display: flex;
+	flex-direction: column;
 	grid-area: textarea;
 }
 
@@ -1555,7 +1576,8 @@ input {
 	resize: none;
 	border-color: white;
 	border-width: 1px;
-	border-style:solid;
+	border-style: solid;
+	outline: none;
 }
 
 .action_button {
@@ -1607,6 +1629,7 @@ button.disabled {
 textarea {
 	background-color: var(--input_background);
 	color: var(--text);
+	outline: none;
 }
 
 .pulse {

static/koboldai.js

@@ -400,7 +400,7 @@ function do_presets(data) {
 		//add our blank option
 		var option = document.createElement("option");
 		option.value="";
-		option.text="presets";
+		option.text="Presets";
 		select.append(option);
 		presets = data.value;
 		
@@ -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/index_new.html

@@ -70,8 +70,9 @@
 		<!------------ Input Area--------------------->
 		<div class="inputrow" id="inputrow_container">
 			<div id="random_game_prompt" class="hidden">
-				<input type="text" autocomplete="off" style="width: 100%;" id="themetext" placeholder="Theme for Random Story" oninput='if (this.value != "") {
+				<input type="text" autocomplete="off" id="themetext" placeholder="Theme for Random Story" oninput='if (this.value != "") {
 																													document.getElementById("input_text").value = "";'/>
+				<span class="help_text" style="margin:0px;margin-top:5px;">The AI can create a prompt for you! Optionally type in one or more themes above, or let the AI do it's thing.</span>
 			</div>
 			<textarea autocomplete="off" row=5 id="input_text" placeholder="Enter Prompt Here" oninput='if (this.value != "") {
 																											document.getElementById("themetext").value = "";

templates/settings flyout.html

@@ -296,8 +296,23 @@
 				<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 {
+																			   document.getElementById("settings_footer").classList.add("hidden");
+																		   }'>timer</span>
 	<div id="settings_footer" class="settings_footer">
 		<span>Execution Time: <span id="Execution Time"></span></span> | 
 		<span>Remaining Time: <span class="var_sync_model_tqdm_rem_time"></span></span> | <span id="var_time"></span>

themes/tweaks/hide-timing.css

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