From 1e462383661cbcf9688d22e45c750dbbb40db75a Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Wed, 31 Aug 2022 12:55:38 -0400
Subject: [PATCH] Added better home screen and new vars for settings buttons

---
 static/koboldai.css            | 23 ++++++++++++++++++++---
 templates/settings flyout.html | 34 ++++++++++++++++++++++++----------
 themes/Darkness.css            |  4 ++++
 themes/Gruvbox Dark.css        |  4 ++++
 themes/Material You.css        |  4 ++++
 themes/Monochrome.css          |  4 ++++
 themes/Unicorn.css             |  4 ++++
 7 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index 2ecc94f9..3af1578f 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -447,6 +447,8 @@ input[type="range"]::-ms-fill-upper {
 }
 
 .story_title {
+	display: flex;
+	justify-content: space-between;
 	font-size: calc(1.8em + var(--font_size_adjustment));
 	text-align: center;
 	border-bottom: 1px;
@@ -463,9 +465,10 @@ input[type="range"]::-ms-fill-upper {
 }
 
 .story_title_icons {
-	font-size: calc(18px + var(--font_size_adjustment));
-	padding: 10px 0 0 0;
-	margin-left: 125px;
+	display: flex;
+	width: 100%;
+	padding: 10px;
+	justify-content: space-between;
 }
 
 .settings_menu {
@@ -473,6 +476,20 @@ input[type="range"]::-ms-fill-upper {
 	padding-top: 7px;
 }
 
+.settings_button {
+	color: var(--button_text);
+	background: var(--button_background);
+	border-color: white;
+	border-width: 1px;
+	border-radius: var(--radius_settings_button);
+	border-style:solid;
+	height: 35px;
+}
+
+.settings_button[story_gamesaved="true"] {
+	filter: brightness(40%);
+}
+
 .settings_select {
 	color: var(--dropdown_text);
 	background: var(--dropdown_background);
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index e2452d17..ece421ef 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -45,12 +45,13 @@
 				</span>
 			</div>
 			<div id="text_runningmodel">
-					<b>Running Model: </b>
-			</div>
-			<div class="Model_Icon">
-				<span class="material-icons-outlined cursor" title="Load Model" onclick="socket.emit('load_model_button', {});">folder_open</span>
+					<b>1) Model: </b>
 			</div>
 			<div style="text-align: center;">
+				<button class="settings_button" onclick="socket.emit('load_model_button', {});">
+					<span class="material-icons-outlined cursor" title="Load Model" style="font-size: 1.4em;">folder_open</span>
+					<span> Load Model</span>
+				</button>
 				<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
 			</div>
 		</div>
@@ -61,16 +62,29 @@
 					<span>
 						<span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span>
 					</span>
+					<span>
+						<span class="material-icons-outlined cursor" title="Import Story" onclick="document.getElementById('import_aidg_club_popup').classList.remove('hidden');">cloud_download</span>
+						<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
+					</span>
 				</div>
 				<div id="text_storyname">
-					<b>Story Name: </b>
+					<b>2) Story: </b>
 				</div>
 				<div class="story_title_icons">
-					<span class="material-icons-outlined cursor" title="New Story" onclick="socket.emit('new_story', '');">description</span>
-					<span class="material-icons-outlined cursor" title="Load Story" onclick="socket.emit('load_story_list', '');">folder_open</span>
-					<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>save</span>
-					<span class="material-icons-outlined cursor" title="Import Story" onclick="document.getElementById('import_aidg_club_popup').classList.remove('hidden');">cloud_download</span>
-					<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
+					<button class="settings_button" onclick="socket.emit('new_story', '');">
+						<span class="material-icons-outlined cursor" title="New Story">description</span>
+						<span> New Story</span>
+					</button>
+					<button class="settings_button" onclick="socket.emit('load_story_list', '');">
+						<span class="material-icons-outlined cursor" title="Load Story">folder_open</span>
+						<span> Load Story</span>
+					</button>
+					<button class="settings_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>
+						<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story">save</span>
+						<span> Save Story</span>
+					</button>
+					
+					
 				</div>
 			</div>
 			<hr/>
diff --git a/themes/Darkness.css b/themes/Darkness.css
index be381135..45998443 100644
--- a/themes/Darkness.css
+++ b/themes/Darkness.css
@@ -68,6 +68,9 @@
 
 	--setting_background: #242424;
     --setting_text: #e0e0e0;
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
 
 	--sample_order_select_color: #1d434a;
 	--sample_order_select_color_text: #e0e0e0;
@@ -143,6 +146,7 @@
 	--radius_buttons: 5px;
 	--radius_item_popup: 5px;
 	--radius_wi_card: 10px;
+	--radius_settings_button: 5px;
 
 
 
diff --git a/themes/Gruvbox Dark.css b/themes/Gruvbox Dark.css
index a1f462e3..241b55ca 100644
--- a/themes/Gruvbox Dark.css	
+++ b/themes/Gruvbox Dark.css	
@@ -115,6 +115,9 @@
 
 	--setting_background: var(--gruvbox-dark0-soft);
     --setting_text: var(--gruvbox-light0);
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
 
 	--sample_order_select_color: var(--gruvbox-dark2);
 	--sample_order_select_color_text: var(--gruvbox-light2);
@@ -177,6 +180,7 @@
 	--radius_buttons: 0px;
 	--radius_item_popup: 0px;
 	--radius_wi_card: 0px;
+	--radius_settings_button: 5px;
 
 	/* Variables */
 	--flyout_menu_closed_width: 0px;
diff --git a/themes/Material You.css b/themes/Material You.css
index 5d7b5219..48054cf3 100644
--- a/themes/Material You.css	
+++ b/themes/Material You.css	
@@ -80,6 +80,9 @@
 
 	--setting_background: var(--surface_palette);
     --setting_text: var(--on_surface_palette);
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
 
 	--sample_order_select_color: var(--primary_palette);
 	--sample_order_select_color_text: var(--on_primary_palette);
@@ -156,6 +159,7 @@
 	--radius_buttons: 5px;
 	--radius_item_popup: 2px;
 	--radius_wi_card: 5px;
+	--radius_settings_button: 5px;
 
 
 
diff --git a/themes/Monochrome.css b/themes/Monochrome.css
index 50c35a78..4173a606 100644
--- a/themes/Monochrome.css
+++ b/themes/Monochrome.css
@@ -68,6 +68,9 @@
 
 	--setting_background: #273141;
     --setting_text: #e0e0e0;
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
 
 	--sample_order_select_color: #244c65;
 	--sample_order_select_color_text: #e0e0e0;
@@ -142,6 +145,7 @@
 	--radius_buttons: 5px;
 	--radius_item_popup: 2px;
 	--radius_wi_card: 5px;
+	--radius_settings_button: 5px;
 
 
 
diff --git a/themes/Unicorn.css b/themes/Unicorn.css
index 4598bd9f..97a4bae7 100644
--- a/themes/Unicorn.css
+++ b/themes/Unicorn.css
@@ -81,6 +81,9 @@
 
 	--setting_background: #e1c5c5;
     --setting_text: #421d1d;
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
 
 	--sample_order_select_color: #dc6872;
 	--sample_order_select_color_text: #f2f1f1;
@@ -157,6 +160,7 @@
 	--radius_buttons: 10px;
 	--radius_item_popup: 5px;
 	--radius_wi_card: 10px;
+	--radius_settings_button: 5px;