Merge branch 'UI2' of https://github.com/GuiAworld/KoboldAI into UI2

static/koboldai.css

@@ -419,6 +419,12 @@ input[type="range"]::-ms-fill-upper {
   width: var(--flyout_menu_width);
 }
 
+.SideMenu .flyout_menu_contents {
+	overflow-x: hidden;
+	overflow-y: auto;
+	height: calc(100vh - 40px);
+}
+
 .settings_menu {
 	padding-left: 30px;
 	padding-top: 7px;
@@ -582,6 +588,14 @@ input[type="range"]::-ms-fill-upper {
   width: var(--flyout_menu_width);
 }
 
+.rightSideMenu .flyout_menu_contents {
+	overflow-x: hidden;
+	overflow-y: auto;
+	height: calc(100vh - 150px);
+}
+
+
+
 table.server_vars {
 	border: 1px solid #959595;
 }
@@ -671,37 +685,53 @@ body {
 }
 
 @media only screen and (min-aspect-ratio: 7/5) {
+/* ------------------- Desktop Mode --------------------------- */
 .main-grid {
 	transition: margin-left .5s;
 	display: grid;
 	height: 98vh;
-	margin-left: var(--flyout_menu_closed_width);
+	margin-left: var(--flyout_menu_width);
+	margin-right: var(--flyout_menu_closed_width);
 	grid-template-areas: "menuicon gamescreen options lefticon"
 						 "menuicon inputrow inputrow lefticon";
-	grid-template-columns: 420px auto 400px 20px;
+	grid-template-columns: 30px auto 30% 30px;
 	grid-template-rows: auto 100px;
 }
+.main-grid.settings_pinned {
+	margin-left: var(--flyout_menu_width);
+}
+.main-grid.story_pinned {
+	margin-left: var(--flyout_menu_closed_width);
+	margin-right: var(--flyout_menu_width);
+	grid-template-areas: "menuicon options gamescreen lefticon"
+						 "menuicon inputrow inputrow lefticon";
+	grid-template-columns: 30px 30% auto 30px;
+}
+.main-grid.settings_pinned.story_pinned {
+	margin-left: var(--flyout_menu_width);
+	margin-right: var(--flyout_menu_width);
+	grid-template-areas: "menuicon gamescreen options lefticon"
+						 "menuicon inputrow inputrow lefticon";
+	grid-template-columns: 30px auto 30% 30px;
+}
 }
 
 @media only screen and (max-aspect-ratio: 7/5) {
+/* mobile */
 .main-grid {
 	transition: margin-left .5s;
 	display: grid;
 	height: 98vh;
 	margin-left: var(--flyout_menu_closed_width);
 	grid-template-areas: "menuicon gamescreen lefticon"
-					     "menuicon mobile_options lefticon"
+					     "menuicon options lefticon"
 						 "menuicon inputrow lefticon";
 	grid-template-columns: 30px auto 20px;
 	grid-template-rows: auto min-content 100px;
 }
 }
 
-@media only screen and (min-aspect-ratio: 7/5) {
+
-.main-grid.pinned {
-	margin-left: calc(-var(--flyout_menu_width));
-}
-}
 
 /* ---------------------------------- GAME SCREEN ----------------------------------*/
 .gamescreen {
@@ -748,7 +778,6 @@ body {
 	display: none;
   }
 
-@media only screen and (min-aspect-ratio: 7/5) {
 .sequence_area {
 	margin-top: 10px;
 	grid-area: options;
@@ -757,16 +786,6 @@ body {
 	box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2), 5px 0px 25px 0 rgba(0, 0, 0, 0.19);
 	overflow-y: scroll;
 }
-}
-
-@media only screen and (max-aspect-ratio: 7/5) {
-.sequence_area {
-	margin-top: 5px;
-	grid-area: mobile_options;
-	background-color: var(--gamescreen_background);
-	overflow-y: hidden;
-}
-}
 
 @media only screen and (max-aspect-ratio: 7/5) {
 .sequences {
@@ -1219,6 +1238,7 @@ body.NotConnected {
 
 .cursor {
 	cursor: pointer;
+<<<<<<< HEAD
 }
 
 .flout_menu_contents {

static/koboldai.js

@@ -1879,16 +1879,13 @@ String.prototype.toHHMMSS = function () {
 }
 
 function toggle_flyout(x) {
+	if (document.getElementById("SideMenu").classList.contains("pinned")) {
+		//do nothing
+	} else {
 		if (document.getElementById("SideMenu").classList.contains("open")) {
 			x.classList.remove("change");
 			document.getElementById("SideMenu").classList.remove("open");
 			document.getElementById("main-grid").classList.remove("menu-open");
-		//if pinned
-		if (document.getElementById("SideMenu").classList.contains("pinned")) {
-			document.getElementById("menu_pin").classList.remove("hidden");
-		} else {
-			document.getElementById("menu_pin").classList.add("hidden");
-		}
 		} else {
 			x.classList.add("change");
 			document.getElementById("SideMenu").classList.add("open");
@@ -1896,24 +1893,48 @@ function toggle_flyout(x) {
 			document.getElementById("menu_pin").classList.remove("hidden");
 		}
 }
+}
 
 function toggle_flyout_right(x) {
-	if (document.getElementById("rightSideMenu").classList.contains("open")) {
+	if (document.getElementById("rightSideMenu").classList.contains("pinned")) {
-		document.getElementById("rightSideMenu").classList.remove("open");
+		//do nothing
-		x.setAttribute("data-glyph", "chevron-left");
 	} else {
+		if (document.getElementById("rightSideMenu").classList.contains("open")) {
+			x.classList.remove("change");
+			document.getElementById("rightSideMenu").classList.remove("open");
+			document.getElementById("main-grid").classList.remove("story_menu-open");
+		} else {
+			x.classList.add("change");
 			document.getElementById("rightSideMenu").classList.add("open");
-		x.setAttribute("data-glyph", "chevron-right");
+			document.getElementById("main-grid").classList.add("story_menu-open");
+			document.getElementById("story_menu_pin").classList.remove("hidden");
+		}
 	}
 }
 
-function toggle_pin_flyout() {
+function toggle_settings_pin_flyout() {
 	if (document.getElementById("SideMenu").classList.contains("pinned")) {
 		document.getElementById("SideMenu").classList.remove("pinned");
-		document.getElementById("main-grid").classList.remove("pinned");
+		document.getElementById("main-grid").classList.remove("settings_pinned");
+		document.getElementById("setting_menu_icon").classList.remove("hidden");
 	} else {
+		document.getElementById("setting_menu_icon").classList.remove("change");
+		document.getElementById("setting_menu_icon").classList.add("hidden");
 		document.getElementById("SideMenu").classList.add("pinned");
-		document.getElementById("main-grid").classList.add("pinned");
+		document.getElementById("main-grid").classList.add("settings_pinned");
+	}
+}
+
+function toggle_story_pin_flyout() {
+	if (document.getElementById("rightSideMenu").classList.contains("pinned")) {
+		document.getElementById("rightSideMenu").classList.remove("pinned");
+		document.getElementById("main-grid").classList.remove("story_pinned");
+		document.getElementById("story_menu_icon").classList.remove("hidden");
+	} else {
+		document.getElementById("rightSideMenu").classList.add("pinned");
+		document.getElementById("main-grid").classList.add("story_pinned");
+		document.getElementById("story_menu_icon").classList.remove("change");
+		document.getElementById("story_menu_icon").classList.add("hidden");
 	}
 }
 

templates/index_new.html

@@ -20,14 +20,14 @@
 	<!------------ Left Flyout Menu--------------------->
 	<div id="SideMenu" class="SideMenu pinned">
 		<!------------ Menu Pin --------------------->
-		<span id="menu_pin" class="oi menu_pin" onclick="toggle_pin_flyout()" data-glyph="pin"></span>
+		<span id="menu_pin" class="oi menu_pin" onclick="toggle_settings_pin_flyout()" data-glyph="pin"></span>
 		{% include 'settings flyout.html' %}
 	</div>
 
 	<!------------ Main Screen--------------------->
-	<div id="main-grid" class="main-grid pinned">
+	<div id="main-grid" class="main-grid settings_pinned">
 		<!------------ Left Menu Icon--------------------->
-		<div class="menu_icon" onclick="toggle_flyout(this)"> 
+		<div id="setting_menu_icon" class="menu_icon hidden changed" onclick="toggle_flyout(this)"> 
 			<div class="menubar1"></div>
 			<div class="menubar2"></div>
 			<div class="menubar3"></div>
@@ -57,7 +57,12 @@
 			<button type="button" class="btn action_button retry" onclick="socket.emit('retry', {});"><span class="oi" data-glyph="loop-circular"></span></button>
 		</div>
 		<!------------ Right Menu Icon--------------------->
-		<span class="oi right_menu_icon" data-glyph="chevron-left" onclick="toggle_flyout_right(this)"></span>
+		<div id="story_menu_icon" class="right_menu_icon" onclick="toggle_flyout_right(this)"> 
+			<div class="menubar1"></div>
+			<div class="menubar2"></div>
+			<div class="menubar3"></div>
+		</div>
+		<!----<span class="oi right_menu_icon" data-glyph="chevron-left" onclick="toggle_flyout_right(this)"></span>--->
 		<!------------ Padding Image--------------------->
 		<div class="paddingimage">
 			<img src="/static/padding_image.png" alt="Padding Image">
@@ -66,6 +71,7 @@
 	
 	<!------------ Right Flyout Menu--------------------->
 	<div id="rightSideMenu" class="rightSideMenu">
+		<span id="story_menu_pin" class="oi story_menu_pin" onclick="toggle_story_pin_flyout()" data-glyph="pin"></span>
 		{% include 'story flyout.html' %}
 	</div>
 	

templates/settings flyout.html

@@ -32,6 +32,7 @@
 	<span class="setting_menu_button" onclick="show_setting_menu(this);">User</span>
 	<span style="float: right;margin-right: 30px;" onclick="window.open('https://github.com/KoboldAI/KoboldAI-Client/wiki');">Help</span>
 </div>
+<div class="flyout_menu_contents">
 
 	<div id="setting_menu_model" class="settings_category_area">
 		<div id="Model_Info">
@@ -85,3 +86,4 @@
 		{% endwith %}
 		</div>
 	</div>
+</div>

templates/story flyout.html

@@ -26,7 +26,7 @@
 	<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_notes');">Notes</span>
 	<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_wi');">World Info</span>
 </div>
-<div class="flout_menu_contents">
+<div class="flyout_menu_contents">
 	<div id="story_menu_memory" class="story_category_area">
 		<div id="Memory">
 			Memory:<br/>