+
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() {