Skip to content

S
Stable Diffusion Webui
Commit 02e69633 authored by Sj-Si's avatar Sj-Si
Browse files
Options

continue cleanup and redesign.

parent 03650022
Expand all Show whitespace changes
Inline Side-by-side
Showing with 572 additions and 187 deletions
html/extra-networks-tree-button.html 0 → 100644
View file @ 02e69633
<span data-filterable-item-text hidden>{search_terms}</span>
<button class="action-list-content action-list-content-file"
type="button"
onclick="extraNetworksTreeOnClick(event, '{tabname}', '{tab_id}');"
>
<span class="action-list-item-visual action-list-item-visual--leading">🗎</span>
<span class="action-list-item-label action-list-item-label--truncate">{name}</span>
<span class="action-list-item-action action-list-item-action--trailing">
<div class="button-row">{copy_path_button}{metadata_button}{edit_button}</div>
</span>
</button>
\ No newline at end of file
javascript/extraNetworks.js
View file @ 02e69633
......@@ -16,22 +16,37 @@ function toggleCss(key, css, enable) {
}
function setupExtraNetworksForTab(tabname) {
gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
var this_tab = gradioApp().querySelector('#' + tabname + '_extra_tabs');
this_tab.classList.add('extra-networks');
function registerPrompt(tabname, id) {
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
if (!activePromptTextarea[tabname]) {
activePromptTextarea[tabname] = textarea;
}
textarea.addEventListener("focus", function() {
activePromptTextarea[tabname] = textarea;
});
}
this_tab.querySelectorAll(":scope > [id^='" + tabname + "_']").forEach(function(elem) {
var tab_id = elem.getAttribute("id");
var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
var searchDiv = gradioApp().getElementById(tabname + '_extra_search');
var search = searchDiv.querySelector('textarea');
var searchDiv = gradioApp().QuerySelector("#" + tab_id + "_extra_search");
console.log("HERE:", tab_id + "_extra_search", searchDiv);
var search = searchDiv.value;
var sort = gradioApp().getElementById(tabname + '_extra_sort');
var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
var promptContainer = gradioApp().querySelector('.prompt-container-compact#' + tabname + '_prompt_container');
var negativePrompt = gradioApp().querySelector('#' + tabname + '_neg_prompt');
tabs.appendChild(searchDiv);
tabs.appendChild(sort);
tabs.appendChild(sortOrder);
tabs.appendChild(refresh);
var applyFilter = function() {
var searchTerm = search.value.toLowerCase();
......@@ -96,8 +111,15 @@ function setupExtraNetworksForTab(tabname) {
});
applyFilter();
extraNetworksApplySort[tabname] = applySort;
extraNetworksApplyFilter[tabname] = applyFilter;
extraNetworksApplySort[tab_id] = applySort;
extraNetworksApplyFilter[tab_id] = applyFilter;
registerPrompt(tab_id, tab_id + "_prompt");
registerPrompt(tab_id, tab_id + "_neg_prompt");
});
}
function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt) {
......@@ -136,12 +158,12 @@ function clearSearch(tabname) {
function extraNetworksUnrelatedTabSelected(tabname) { // called from python when user selects an unrelated tab (generate)
extraNetworksMovePromptToTab(tabname, '', false, false);
clearSearch(tabname);
//clearSearch(tabname);
}
function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt) { // called from python when user selects an extra networks tab
extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt);
clearSearch(tabname);
//clearSearch(tabname);
}
function applyExtraNetworkFilter(tabname) {
......@@ -159,23 +181,6 @@ var activePromptTextarea = {};
function setupExtraNetworks() {
setupExtraNetworksForTab('txt2img');
setupExtraNetworksForTab('img2img');
function registerPrompt(tabname, id) {
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
if (!activePromptTextarea[tabname]) {
activePromptTextarea[tabname] = textarea;
}
textarea.addEventListener("focus", function() {
activePromptTextarea[tabname] = textarea;
});
}
registerPrompt('txt2img', 'txt2img_prompt');
registerPrompt('txt2img', 'txt2img_neg_prompt');
registerPrompt('img2img', 'img2img_prompt');
registerPrompt('img2img', 'img2img_neg_prompt');
}
onUiLoaded(setupExtraNetworks);
......@@ -262,6 +267,106 @@ function saveCardPreview(event, tabname, filename) {
event.preventDefault();
}
function extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id) {
/**
* Processes `onclick` events when user clicks on files in tree.
*
* @param event The generated event.
* @param btn The clicked `action-list-item` button.
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
* @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
*/
var par = btn.parentElement;
var search_id = tabname + "_" + tab_id + "_extra_search";
var type = par.getAttribute("data-tree-entry-type");
var path = par.getAttribute("data-path");
}
function extraNetworksTreeProcessDirectoryClick(event, btn) {
/**
* Processes `onclick` events when user clicks on directories in tree.
*
* Here is how the tree reacts to clicks for various states:
* unselected unopened directory: Diretory is selected and expanded.
* unselected opened directory: Directory is selected.
* selected opened directory: Directory is collapsed and deselected.
* chevron is clicked: Directory is expanded or collapsed. Selected state unchanged.
*
* @param event The generated event.
* @param btn The clicked `action-list-item` button.
*/
var ul = btn.nextElementSibling;
// This is the actual target that the user clicked on within the target button.
// We use this to detect if the chevron was clicked.
var true_targ = event.target;
function _expand_or_collapse(_ul, _btn) {
// Expands <ul> if it is collapsed, collapses otherwise. Updates button attributes.
if (_ul.hasAttribute("data-hidden")) {
_ul.removeAttribute("data-hidden");
_btn.setAttribute("expanded", "true");
} else {
_ul.setAttribute("data-hidden", "");
_btn.setAttribute("expanded", "false");
}
}
function _remove_selected_from_all() {
// Removes the `selected` attribute from all buttons.
var sels = document.querySelectorAll("button.action-list-content");
[...sels].forEach(el => {
el.removeAttribute("selected");
})
}
function _select_button(_btn) {
// Removes `selected` attribute from all buttons then adds to passed button.
_remove_selected_from_all();
_btn.setAttribute("selected", "");
}
// If user clicks on the chevron, then we do not select the folder.
if (true_targ.matches(".action-list-item-action--leading, .action-list-item-action-chevron")) {
_expand_or_collapse(ul, btn);
} else {
// User clicked anywhere else on the button.
if (btn.hasAttribute("selected") && !ul.hasAttribute("data-hidden")) {
// If folder is select and open, collapse and deselect button.
_expand_or_collapse(ul, btn);
btn.removeAttribute("selected");
} else if (!(!btn.hasAttribute("selected") && !ul.hasAttribute("data-hidden"))) {
// If folder is open and not selected, then we don't collapse; just select.
// NOTE: Double inversion sucks but it is the clearest way to show the branching here.
_expand_or_collapse(ul, btn);
_select_button(btn);
} else {
// All other cases, just select the button.
_select_button(btn);
}
}
}
function extraNetworksTreeOnClick(event, tabname, tab_id) {
/**
* Handles `onclick` events for buttons within an `extra-network-tree .action-list--tree`.
*
* Determines whether the clicked button in the tree is for a file entry or a directory
* then calls the appropriate function.
*
* @param event The generated event.
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
* @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
*/
var btn = event.currentTarget;
var par = btn.parentElement;
if (par.getAttribute("data-tree-entry-type") === "file") {
extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id);
} else {
extraNetworksTreeProcessDirectoryClick(event, btn);
}
}
function extraNetworksFolderClick(event, tabs_id) {
// If folder is open but not selected, we don't want to collapse it. Instead
// we override the removal of the "open" attribute so that the folder is
......@@ -434,3 +539,10 @@ window.addEventListener("keydown", function(event) {
closePopup();
}
});
function testprint(e) {
console.log(e);
}
const testinput = gradioApp().querySelector("#txt2img_lora_extra_search");
testinput.addEventListener("input", testprint);
\ No newline at end of file
modules/ui_extra_networks.py
View file @ 02e69633
This diff is collapsed.
style.css
View file @ 02e69633
......@@ -955,15 +955,15 @@ footer {
color: white;
}
.extra-network-pane .copy-path-button:before {
.extra-network-pane .copy-path-button::before {
content: "⎘";
}
.extra-network-pane .metadata-button:before{
.extra-network-pane .metadata-button::before{
content: "🛈";
}
.extra-network-pane .edit-button:before{
.extra-network-pane .edit-button::before{
content: "🛠";
}
......@@ -1188,102 +1188,253 @@ body.resizing .resize-handle {
border-left: 1px dashed var(--border-color-primary);
}
.extra-network-pane .card-minimal {
display: inline-flex;
flex-grow: 1;
position: relative;
overflow: hidden;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
line-break: anywhere;
/* ========================= */
.extra-network-pane {
display: flex;
}
/* Pushes buttons to right */
.extra-network-pane .card-minimal .name {
flex-grow: 1;
.extra-network-pane .extra-network-cards {
display: block;
}
.folder-container {
margin-left: 1.5em !important;
.extra-network-pane .extra-network-tree {
display: block;
font-size: 1rem;
min-width: 25%;
border: 1px solid var(--block-border-color);
overflow: hidden;
}
.file-item,
.folder-item,
.folder-item-summary {
padding-left: 0.05rem;
.extra-network-tree .action-list--tree {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 1rem;
margin: 0;
padding: 0;
}
.extra-network-pane .extra-network-tree .folder-item-summary:hover,
.extra-network-pane .extra-network-tree .file-item:hover {
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
background-color: var(--neutral-200);
/* Remove auto indentation from tree. Will be overridden later. */
.extra-network-tree .action-list--subgroup {
margin: 0 !important;
padding: 0 !important;
box-shadow: 0.6rem 0 0 var(--body-background-fill) inset,
0.8rem 0 0 var(--neutral-800) inset;
}
/* Set indentation for each depth of tree. */
.extra-network-tree .action-list--subgroup > .action-list-item {
margin-left: 0.4rem !important;
padding-left: 0.4rem !important;
}
/* Styles for tree <ul> elements. */
.extra-network-tree .action-list {
}
/* Styles for tree <li> elements. */
.extra-network-tree .action-list-item {
list-style: none;
position: relative;
background-color: transparent;
}
/* Directory <ul> */
.extra-network-tree .action-list-content[expanded=false]+.action-list--subgroup {
height: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
}
.extra-network-tree .action-list-content[expanded=true]+.action-list--subgroup {
height: auto;
overflow: visible;
visibility: visible;
opacity: 1;
}
/* File <li> */
.extra-network-tree .action-list-item--subitem {
}
/* <li> containing <ul> */
.extra-network-tree .action-list-item--has-subitem {
}
.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
.dark .extra-network-pane .extra-network-tree .file-item:hover {
/* BUTTON ELEMENTS */
/* <button> */
.extra-network-tree .action-list-content {
position: relative;
display: grid;
width: 100%;
padding: 6px 8px;
font-size: 1rem;
text-align: left;
user-select: none;
background-color: transparent;
border: none;
transition: background 33.333ms linear;
grid-template-rows: min-content;
grid-template-areas: "leading-action leading-visual label trailing-visual spacer trailing-action";
grid-template-columns: min-content min-content minmax(0, auto) min-content 1fr min-content;
grid-gap: 0.1em;
align-items: start;
flex-grow: 1;
flex-basis: 100%;
}
.dark .extra-network-tree button.action-list-content:hover {
-webkit-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;
background-color: var(--neutral-800);
}
/* prevents clicking/collapsing of details tags when disabled attribute is used*/
.extra-network-pane .extra-network-tree details[disabled] summary {
pointer-events: none;
user-select: none;
.dark .extra-network-tree button.action-list-content[selected] {
background-color: var(--neutral-700);
}
.extra-network-pane .extra-network-tree details.folder-item > summary {
list-style-type: '📁';
text-overflow: ellipsis;
.extra-network-tree button.action-list-content:hover {
-webkit-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;
background-color: var(--neutral-200);
}
.extra-network-pane .extra-network-tree details.folder-item[open] > summary {
list-style-type: '📂';
text-overflow: ellipsis;
.extra-network-tree button.action-list-content[selected] {
background-color: var(--neutral-300);
}
.extra-network-pane .extra-network-tree ul.folder-container {
list-style: none;
font-size: 1rem;
text-overflow: ellipsis;
/* Buttons for directories. */
.extra-network-tree .action-list-content-dir {
}
.extra-network-pane .extra-network-tree li.file-item {
display: flex;
/* Buttons for files. */
.extra-network-tree .action-list-content-file {
margin-left: 2em;
}
/* Text for button. */
.extra-network-tree .action-list-item-label {
position: relative;
align-items: center;
line-height: 1.25em;
color: var(--button-secondary-text-color);
grid-area: label;
padding-left: 0.5em;
}
.extra-network-pane .extra-network-tree li.file-item::before {
content: '📄';
font-size: 0.85rem;
vertical-align: middle;
/* Text for button truncated. */
.extra-network-tree .action-list-item-label--truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.extra-network-pane {
display: flex;
/* Icon for button. */
.extra-network-tree .action-list-item-visual {
min-height: 1em;
color: var(--button-secondary-text-color);
pointer-events: none;
align-items: right;
}
.extra-network-pane .extra-network-tree {
font-size: 1rem;
min-width: 25%;
max-width: 25%;
border: 1px solid var(--block-border-color);
/* Icon for button when it is before label. */
.extra-network-tree .action-list-item-visual--leading {
grid-area: leading-visual;
}
.extra-network-pane .extra-network-cards {
/* Icon for button when it is after label. */
.extra-network-tree .action-list-item-visual--trailing {
grid-area: trailing-visual;
}
/* Dropdown arrow for button. */
.extra-network-tree .action-list-item-action--leading {
margin-right: 1em;
}
/* Define the animation for the arrow when it is clicked. */
.extra-network-tree .action-list-content-dir[expanded=false] .action-list-item-action {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: transform 0.2s;
}
.extra-network-tree .action-list-content-dir[expanded=true] .action-list-item-action {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: transform 0.2s;
}
.action-list-item-action-chevron {
display: inline-block;
padding: 0.3em;
box-shadow: 0.1em 0.1em 0 0px var(--neutral-200) inset;
transform: rotate(135deg);
}
.extra-network-tree .action-list-item-action--leading {
grid-area: leading-action;
}
/* Dropdown arrow for button when it is after label. UNUSED? */
.extra-network-tree .action-list-item-action--trailing {
grid-area: trailing-action;
}
.extra-network-tree .action-list-item-action .button-row {
display: flex;
flex-grow: 1;
border: 1px solid var(--block-border-color);
}
.dark .extra-network-tree .folder-item-summary.selected{
background-color: var(--neutral-800);
.extra-network-tree .action-list-content .button-row {
display: inline-flex;
visibility: hidden !important;
color: white;
}
.extra-network-tree .folder-item-summary.selected {
background-color: var(--neutral-200);
.extra-network-tree .action-list-content:hover .button-row {
visibility: visible;
}
/* Add icon to left side of <input> */
.extra-network-tree .action-list-search::before {
content: "🔎︎";
position: absolute;
margin: 0.5em;
font-size: 1em;
color: var(--input-placeholder-color);
}
.extra-network-tree .action-list-search {
position: relative;
margin: 0.5em;
}
.extra-network-tree .action-list-search .action-list-search-text {
border: 1px solid var(--button-secondary-border-color);
border-radius: 0.5em;
color: var(--button-secondary-text-color);
background-color: transparent;
width: 100%;
padding-left: 2em;
line-height: 1em;
}
/* <input> clear button (x on right side) styling */
.extra-network-tree .action-list-search .action-list-search-text::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
height: 1em;
width: 1em;
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100%;
background-color: var(--input-placeholder-color);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment