From e3184622e80739e8f32d54218db9b43dfd8c6b47 Mon Sep 17 00:00:00 2001 From: patriceac <48073125+patriceac@users.noreply.github.com> Date: Fri, 9 Dec 2022 09:41:39 -0800 Subject: [PATCH] Scrolling panes (#632) Decouple the editor and the preview panes. Scrollbars color updated as well as requested. --- ui/index.html | 2 +- ui/media/css/main.css | 83 +++++++++++++++++++++++++++++++++++++++++-- ui/media/js/main.js | 34 ++++++++++++++---- 3 files changed, 108 insertions(+), 11 deletions(-) diff --git a/ui/index.html b/ui/index.html index d3fb6da3..d0aef771 100644 --- a/ui/index.html +++ b/ui/index.html @@ -47,7 +47,7 @@
-
+
or diff --git a/ui/media/css/main.css b/ui/media/css/main.css index d5af022c..6390a229 100644 --- a/ui/media/css/main.css +++ b/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); +} diff --git a/ui/media/js/main.js b/ui/media/js/main.js index cdcca225..d16b8b88 100644 --- a/ui/media/js/main.js +++ b/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() {