Scrolling panes (#632)

Decouple the editor and the preview panes. Scrollbars color updated as well as requested.

ui/index.html

@@ -47,7 +47,7 @@
 
     <div id="tab-content-wrapper">
         <div id="tab-content-main" class="tab-content active flex-container">
-        <div id="editor">
+        <div id="editor" class="scrollbar-editor">
             <div id="editor-inputs">
                 <div id="editor-inputs-prompt" class="row">
                     <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn">Load from a file</button>

ui/media/css/main.css

@@ -783,9 +783,6 @@ input::file-selector-button {
 }
 
 @media (min-width: 700px) {
-    /* #editor {
-        max-width: 480px;
-    }*/
     .float-container {
         padding: 20px;
     }
@@ -794,6 +791,53 @@ input::file-selector-button {
         float: left;
         padding: 20px;
     }
+    #editor {
+        position:  fixed;
+        overflow-y: auto;
+        top: 0;
+        bottom: 0;
+        overflow-x: hidden;
+        padding-right: 8px;
+        z-index: 1;
+        width: 374pt;
+    }
+
+    #preview {
+        padding-left: 380pt;
+        margin-right: 10pt;
+        left: 0;
+        right:0;
+        min-height: 80vh;
+    }
+
+    #preview-pane {
+        display: none;
+        overflow-y: auto;
+        margin-top: 8pt;
+        left: 0;
+        right:0;
+    }
+
+    #preview-tools {
+        background: var(--background-color1);
+        position: sticky;
+        top: 0;
+        transition: 0.25s;
+        z-index: 1;
+        padding-top:10px;
+        padding-bottom: 10px;
+        -webkit-mask-image: linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
+        mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
+    }
+
+    #editor-modifiers {
+        overflow-y: initial;
+        overflow-x: initial;
+    }
+    .image_preview_container {
+        padding: 6px;
+        width: 454px;
+    }
 }
 
 .help-btn {
@@ -1061,3 +1105,36 @@ button#save-system-settings-btn {
 #ip-info div {
     line-height: 200%;
 }
+
+/* SCROLLBARS */
+:root {
+    --scrollbar-width: 14px;
+    --scrollbar-radius: 10px;
+}
+
+.scrollbar-editor::-webkit-scrollbar {
+    width: 8px;
+}
+
+.scrollbar-editor::-webkit-scrollbar-track {
+    border-radius: 10px;
+}
+
+.scrollbar-editor::-webkit-scrollbar-thumb {
+    background: --background-color2;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px var(--input-border-color);
+    border-radius: var(--input-border-radius);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--background-color2);
+    border-radius: var(--scrollbar-radius);
+}

ui/media/js/main.js

@@ -59,6 +59,29 @@ let maskSetting = document.querySelector('#enable_mask')
 
 const processOrder = document.querySelector('#process_order_toggle')
 
+const editorContainer = document.querySelector('#editor')
+window.addEventListener("scroll", updatePreviewSize)
+let lastScrollTop = 0
+updatePreviewSize()
+
+// update preview pane size and position
+function updatePreviewSize() {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+    if (scrollTop > lastScrollTop) {
+        previewTools.style.top = -previewTools.offsetHeight + 'px'
+    }
+    else if (scrollTop < lastScrollTop) {
+        const elem = preview.getElementsByClassName('img-batch')[0]
+        if (elem !== undefined && Math.round(window.scrollY) !== Math.round(elem.closest(".imageTaskContainer").offsetTop)) {
+            previewTools.style.top = '0'
+        }
+    }
+    lastScrollTop = scrollTop
+
+    $('#editor').css('top', Math.max(-window.pageYOffset + $("#tab-container").offset().top + $('#tab-container').outerHeight(true), 0) + 'px')
+    $('#editor').css('bottom', Math.max($(window).height() - ($("#footer .line-separator").offset().top - $(document).scrollTop()), 0) + 'px')
+};
+
 let imagePreview = document.querySelector("#preview")
 imagePreview.addEventListener('drop', function(ev) {
     const data = ev.dataTransfer?.getData("text/plain");
@@ -267,9 +290,9 @@ function showImages(reqBody, res, outputContainer, livePreview) {
         imageElem.setAttribute('data-steps', imageInferenceSteps)
         imageElem.setAttribute('data-guidance', imageGuidanceScale)
 
-
         const imageInfo = imageItemElem.querySelector('.imgItemInfo')
         imageInfo.style.visibility = (livePreview ? 'hidden' : 'visible')
+        updatePreviewSize()
 
         if ('seed' in result && !imageElem.hasAttribute('data-seed')) {
             const req = Object.assign({}, reqBody, {
@@ -411,11 +434,7 @@ function getUncompletedTaskEntries() {
         document.querySelectorAll('#preview .imageTaskContainer .taskStatusLabel')
         ).filter((taskLabel) => taskLabel.style.display !== 'none'
         ).map(function(taskLabel) {
-            let imageTaskContainer = taskLabel.parentNode
-            while(!imageTaskContainer.classList.contains('imageTaskContainer') && imageTaskContainer.parentNode) {
-                imageTaskContainer = imageTaskContainer.parentNode
-            }
-            return imageTaskContainer
+            return taskLabel.closest('.imageTaskContainer')
         })
     if (!processOrder.checked) {
         taskEntries.reverse()
@@ -789,7 +808,7 @@ function createTask(task) {
         let question = (task['isProcessing'] ? "Stop this task?" : "Remove this task?")
         shiftOrConfirm(e, question, async function(e) {
             if (task.batchesDone <= 0 || !task.isProcessing) {
-                taskEntry.remove()
+                removeTask(taskEntry)
             }
             abortTask(task)
         })
@@ -1020,6 +1039,7 @@ function removeTask(taskToRemove) {
         previewTools.style.display = 'none'
         initialText.style.display = 'block'
     }
+    updatePreviewSize()
 }
 
 clearAllPreviewsBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Clear all the results and tasks in this window?", async function() {