Group image containers (DOM tweak)

Move image containers in their own container to create a clear delineation in the DOM. Purely DOM structural adjustment meant to make a sticky footer possible in the preview pane (for plugins).
This commit is contained in:
patriceac 2023-01-15 23:34:56 -08:00
parent 8ee4364065
commit 3d5133209b
2 changed files with 6 additions and 3 deletions

View File

@ -281,8 +281,10 @@
and selecting the desired modifiers.<br/><br/>
Click "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
</div>
<div id="preview-tools">
<button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
<div id="preview-content">
<div id="preview-tools">
<button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
</div>
</div>
</div>
</div>

View File

@ -66,6 +66,7 @@ let maskSetting = document.querySelector('#enable_mask')
const processOrder = document.querySelector('#process_order_toggle')
let imagePreview = document.querySelector("#preview")
let imagePreviewContent = document.querySelector("#preview-content")
imagePreview.addEventListener('drop', function(ev) {
const data = ev.dataTransfer?.getData("text/plain");
if (!data) {
@ -902,7 +903,7 @@ function createTask(task) {
})
task.isProcessing = true
taskEntry = imagePreview.insertBefore(taskEntry, previewTools.nextSibling)
taskEntry = imagePreviewContent.insertBefore(taskEntry, previewTools.nextSibling)
htmlTaskMap.set(taskEntry, task)
task.previewPrompt.innerText = task.reqBody.prompt