From 7debd2cd972364f2c5037d1e63ffe30f636faafc Mon Sep 17 00:00:00 2001 From: JeLuF Date: Tue, 18 Jul 2023 00:08:38 +0200 Subject: [PATCH] Collapsibles for the embeddings dialog Harmonization with the modifiers dialog --- ui/index.html | 4 +++ ui/media/css/main.css | 30 ++++++++++++++++++- ui/media/js/image-modifiers.js | 20 ++----------- ui/media/js/main.js | 53 ++++++++++++++++++++++++++++++++-- ui/media/js/utils.js | 25 ++++++++++++++++ 5 files changed, 111 insertions(+), 21 deletions(-) diff --git a/ui/index.html b/ui/index.html index 490af689..4374c5ee 100644 --- a/ui/index.html +++ b/ui/index.html @@ -582,6 +582,10 @@
+   diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 79cbc3b9..73ba6e31 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1670,7 +1670,11 @@ body.wait-pause { #embeddings-list { height: 70vH; - width: 40vW; + width: 50vW; + margin-left: 0px; + margin-right: 0px; + padding-left: 0px; + padding-right: 0px; overflow-y: scroll; } @@ -1679,6 +1683,30 @@ body.wait-pause { margin-bottom: 2px; } +#embeddings-list .collapsible { + background: var(--background-color3); + margin: 0px; + padding: 0.5em; + position: sticky; +} + +#embeddings-list .embedding-category:nth-child(odd) .collapsible::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.02); + opacity: 1; + pointer-events: none; +} + +#embeddings-list .collapsible-content { + padding-top: 0.4em; + padding-bottom: 0.4em; +} + #embeddings-list::-webkit-scrollbar-thumb { background: var(--background-color3); } diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js index 03dc8b56..12952cad 100644 --- a/ui/media/js/image-modifiers.js +++ b/ui/media/js/image-modifiers.js @@ -425,27 +425,11 @@ function checkIfClickedOutsideDropdownElem(e) { } function collapseAllModifierCategory() { - const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";" - - [...collapsibleElems].forEach((elem) => { - const isActive = elem.classList.contains("active") - - if(isActive) { - elem?.click() - } - }) + collapseAll(".modifier-category .collapsible") } function expandAllModifierCategory() { - const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";" - - [...collapsibleElems].forEach((elem) => { - const isActive = elem.classList.contains("active") - - if (!isActive) { - elem?.click() - } - }) + expandAll(".modifier-category .collapsible") } customModifiersTextBox.addEventListener("change", saveCustomModifiers) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 20359640..023eb7b6 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -119,6 +119,7 @@ let embeddingsDialogCloseBtn = embeddingsDialog.querySelector("#embeddings-dialo let embeddingsSearchBox = document.querySelector("#embeddings-search-box") let embeddingsList = document.querySelector("#embeddings-list") let embeddingsModeField = document.querySelector("#embeddings-mode") +let embeddingsCollapsiblesBtn = document.querySelector("#embeddings-action-collapsibles-btn") let makeImageBtn = document.querySelector("#makeImage") let stopImageBtn = document.querySelector("#stopImage") @@ -2150,7 +2151,7 @@ function updateEmbeddingsList(filter = "") { } else { let subdir = html(m[1], prefix + m[0] + "/", filter) if (subdir != "") { - folders += `

${prefix}${m[0]}

` + subdir + folders += `

${prefix}${m[0]}

` + subdir + '
' } } }) @@ -2159,7 +2160,6 @@ function updateEmbeddingsList(filter = "") { function onButtonClick(e) { let text = e.target.dataset["embedding"] - console.log(e.shiftKey, text) if (embeddingsModeField.value == "insert") { if (e.shiftKey) { @@ -2197,6 +2197,10 @@ function updateEmbeddingsList(filter = "") { embeddingsList.querySelectorAll("button").forEach((b) => { b.addEventListener("click", onButtonClick) }) + createCollapsibles(embeddingsList) + if (filter != "") { + embeddingsExpandAll() + } } embeddingsButton.addEventListener("click", () => { @@ -2214,6 +2218,51 @@ embeddingsSearchBox.addEventListener("input", (e) => { modalDialogCloseOnBackdropClick(embeddingsDialog) makeDialogDraggable(embeddingsDialog) +const collapseText = "Collapse Categories" +const expandText = "Expand Categories" + +const collapseIconClasses = ["fa-solid", "fa-square-minus"] +const expandIconClasses = ["fa-solid", "fa-square-plus"] + +function embeddingsCollapseAll() { + const btnElem = embeddingsCollapsiblesBtn + + const iconElem = btnElem.querySelector(".embeddings-action-icon") + const textElem = btnElem.querySelector(".embeddings-action-text") + collapseAll("#embeddings-list .collapsible") + + collapsiblesBtnState = false + + collapseIconClasses.forEach((c) => iconElem.classList.remove(c)) + expandIconClasses.forEach((c) => iconElem.classList.add(c)) + + textElem.innerText = expandText +} + +function embeddingsExpandAll() { + const btnElem = embeddingsCollapsiblesBtn + + const iconElem = btnElem.querySelector(".embeddings-action-icon") + const textElem = btnElem.querySelector(".embeddings-action-text") + expandAll("#embeddings-list .collapsible") + + collapsiblesBtnState = true + + expandIconClasses.forEach((c) => iconElem.classList.remove(c)) + collapseIconClasses.forEach((c) => iconElem.classList.add(c)) + + textElem.innerText = collapseText +} + +embeddingsCollapsiblesBtn.addEventListener("click", (e) => { + if (collapsiblesBtnState) { + embeddingsCollapseAll() + } else { + embeddingsExpandAll() + } +}) + + if (testDiffusers.checked) { document.getElementById("embeddings-container").classList.remove("displayNone") } diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js index bbacbb47..9db0d1cc 100644 --- a/ui/media/js/utils.js +++ b/ui/media/js/utils.js @@ -129,6 +129,31 @@ function tryLoadOldCollapsibles() { return null } +function collapseAll(selector) { + const collapsibleElems = document.querySelectorAll(selector); // needs to have ";" + + [...collapsibleElems].forEach((elem) => { + const isActive = elem.classList.contains("active") + + if(isActive) { + elem?.click() + } + }) +} + +function expandAll(selector) { + const collapsibleElems = document.querySelectorAll(selector); // needs to have ";" + + [...collapsibleElems].forEach((elem) => { + const isActive = elem.classList.contains("active") + + if (!isActive) { + elem?.click() + } + }) +} + + function permute(arr) { let permutations = [] let n = arr.length