From b53935bfd4b09ea2252d0088ad0f12841abd20f5 Mon Sep 17 00:00:00 2001 From: cmdr2 Date: Mon, 12 Dec 2022 19:03:16 +0530 Subject: [PATCH] Revert "Scrolling panes (#632)" This reverts commit e3184622e80739e8f32d54218db9b43dfd8c6b47. --- ui/index.html | 2 +- ui/media/css/main.css | 83 ++----------------------------------------- ui/media/js/main.js | 34 ++++-------------- 3 files changed, 11 insertions(+), 108 deletions(-) diff --git a/ui/index.html b/ui/index.html index e9fd192d..f9faa455 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 2b43e949..442419f3 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -783,6 +783,9 @@ input::file-selector-button { } @media (min-width: 700px) { + /* #editor { + max-width: 480px; + }*/ .float-container { padding: 20px; } @@ -791,53 +794,6 @@ 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 { @@ -1124,36 +1080,3 @@ 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 44f612b9..9586980f 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -59,29 +59,6 @@ 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"); @@ -290,9 +267,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, { @@ -434,7 +411,11 @@ function getUncompletedTaskEntries() { document.querySelectorAll('#preview .imageTaskContainer .taskStatusLabel') ).filter((taskLabel) => taskLabel.style.display !== 'none' ).map(function(taskLabel) { - return taskLabel.closest('.imageTaskContainer') + let imageTaskContainer = taskLabel.parentNode + while(!imageTaskContainer.classList.contains('imageTaskContainer') && imageTaskContainer.parentNode) { + imageTaskContainer = imageTaskContainer.parentNode + } + return imageTaskContainer }) if (!processOrder.checked) { taskEntries.reverse() @@ -842,7 +823,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) { - removeTask(taskEntry) + taskEntry.remove() } abortTask(task) }) @@ -1073,7 +1054,6 @@ 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() {