way to slam the left param bar shut

Author: mcmonkey4eva

src/Pages/Text2Image.cshtml

@@ -44,7 +44,7 @@
                         <div style="height: 2rem;"></div> <!-- Spacer -->
                     </div>
                 </div>
-                <div class="t2i-top-split-bar splitter-bar" id="t2i-top-split-bar"></div>
+                <div class="t2i-top-split-bar splitter-bar" id="t2i-top-split-bar"><div class="t2i-split-quickbutton t2i-top-split-quickbutton" id="t2i-top-split-quickbutton">&#x21DA;</div></div>
                 <div class="main-image-area" id="main_image_area">
                     <div class="current_image" id="current_image"></div><div class="t2i-top-split-bar splitter-bar" id="t2i-top-2nd-split-bar"></div><div class="current_image_batch" id="current_image_batch"></div>
                 </div>
@@ -56,7 +56,7 @@
                 </div>
             </div>
         </div>
-        <div class="t2i-mid-split-bar splitter-bar" id="t2i-mid-split-bar"><div class="t2i-mid-split-quickbutton" id="t2i-mid-split-quickbutton">&#x290B;</div></div>
+        <div class="t2i-mid-split-bar splitter-bar" id="t2i-mid-split-bar"><div class="t2i-split-quickbutton t2i-mid-split-quickbutton" id="t2i-mid-split-quickbutton">&#x290B;</div></div>
         <div class="t2i-bottom-bar" id="t2i_bottom_bar">
             <div class="bottom-info-bar-container">
                 <span class="bottom-info-bar-component"><b>Model</b>: <select class="auto-dropdown current_model_view" id="current_model"></select></span>

src/wwwroot/css/genpage.css

@@ -63,20 +63,28 @@ body {
     height: 7px;
     cursor: row-resize;
 }
-.t2i-mid-split-quickbutton {
+.t2i-split-quickbutton {
     position: relative;
-    float: right;
-    vertical-align: top;
-    top: -1.5rem;
-    right: 2rem;
     font-size: 200%;
     cursor: pointer;
     border-radius: 0.2rem;
     color: var(--button-text);
 }
-.t2i-mid-split-quickbutton:hover {
+.t2i-split-quickbutton:hover {
     background-color: var(--button-background-hover);
 }
+.t2i-top-split-quickbutton {
+    float: right;
+    vertical-align: top;
+    top: 0rem;
+    left: 0.6rem;
+}
+.t2i-mid-split-quickbutton {
+    float: right;
+    vertical-align: top;
+    top: -1.5rem;
+    right: 2rem;
+}
 .t2i-top-bar {
     display: block;
     height: 50vh;

src/wwwroot/js/genpage.js

@@ -484,6 +484,7 @@ let pageBarTop = -1;
 let pageBarTop2 = -1;
 let pageBarMid = -1;
 let midForceToBottom = localStorage.getItem('barspot_midForceToBottom') == 'true';
+let leftShut = localStorage.getItem('barspot_leftShut') == 'true';
 
 let setPageBarsFunc;
 
@@ -496,7 +497,10 @@ function resetPageSizer() {
     pageBarTop = -1;
     pageBarTop2 = -1;
     pageBarMid = -1;
+    midForceToBottom = false;
+    leftShut = false;
     localStorage.removeItem('barspot_midForceToBottom');
+    localStorage.removeItem('barspot_leftShut');
     setPageBarsFunc();
     for (let runnable of layoutResets) {
         runnable();
@@ -515,20 +519,23 @@ function pageSizer() {
     let currentImage = getRequiredElementById('current_image');
     let currentImageBatch = getRequiredElementById('current_image_batch');
     let midSplitButton = getRequiredElementById('t2i-mid-split-quickbutton');
+    let topSplitButton = getRequiredElementById('t2i-top-split-quickbutton');
     let topDrag = false;
     let topDrag2 = false;
     let midDrag = false;
     function setPageBars() {
         setCookie('barspot_pageBarTop', pageBarTop, 365);
         setCookie('barspot_pageBarTop2', pageBarTop2, 365);
         setCookie('barspot_pageBarMidPx', pageBarMid, 365);
-        let barTopLeft = pageBarTop == -1 ? `28rem` : `${pageBarTop}px`;
+        let barTopLeft = leftShut ? `0px` : pageBarTop == -1 ? `28rem` : `${pageBarTop}px`;
         let barTopRight = pageBarTop2 == -1 ? `21rem` : `${pageBarTop2}px`;
         inputSidebar.style.width = `${barTopLeft}`;
         mainInputsAreaWrapper.style.width = `${barTopLeft}`;
+        inputSidebar.style.display = leftShut ? 'none' : '';
         mainImageArea.style.width = `calc(100vw - ${barTopLeft})`;
         currentImage.style.width = `calc(100vw - ${barTopLeft} - ${barTopRight} - 10px)`;
         currentImageBatch.style.width = `${barTopRight}`;
+        topSplitButton.innerHTML = leftShut ? '⇛' : '⇚';
         midSplitButton.innerHTML = midForceToBottom ? '⤊' : '⤋';
         if (pageBarMid != -1 || midForceToBottom) {
             let fixed = midForceToBottom ? `9rem` : `${pageBarMid}px`;
@@ -592,11 +599,20 @@ function pageSizer() {
         setPageBars();
         e.preventDefault();
     }, true);
+    topSplitButton.addEventListener('click', (e) => {
+        topDrag = false;
+        leftShut = !leftShut;
+        localStorage.setItem('barspot_leftShut', leftShut);
+        pageBarTop = Math.max(pageBarTop, 400);
+        setPageBars();
+        e.preventDefault();
+    }, true);
     document.addEventListener('mousemove', (e) => {
         let offX = e.pageX;
         offX = Math.min(Math.max(offX, 100), window.innerWidth - 100);
         if (topDrag) {
             pageBarTop = offX - 5;
+            leftShut = pageBarTop < 280;
             setPageBars();
         }
         if (topDrag2) {