continue cleanup and redesign.
This commit is contained in:
Sj-Si
parent
036500223d
commit
02e6963325
|
|
@ -0,0 +1,11 @@
|
|||
<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>
|
||||
|
|
@ -16,88 +16,110 @@ 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');
|
||||
|
||||
var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
|
||||
var searchDiv = gradioApp().getElementById(tabname + '_extra_search');
|
||||
var search = searchDiv.querySelector('textarea');
|
||||
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');
|
||||
function registerPrompt(tabname, id) {
|
||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||
|
||||
tabs.appendChild(searchDiv);
|
||||
tabs.appendChild(sort);
|
||||
tabs.appendChild(sortOrder);
|
||||
tabs.appendChild(refresh);
|
||||
|
||||
var applyFilter = function() {
|
||||
var searchTerm = search.value.toLowerCase();
|
||||
|
||||
gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
|
||||
var searchOnly = elem.querySelector('.search_only');
|
||||
|
||||
var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms'), function(t) { return t.textContent.toLowerCase() }).join(" ");
|
||||
|
||||
var visible = text.indexOf(searchTerm) != -1;
|
||||
|
||||
if (searchOnly && searchTerm.length < 4) {
|
||||
visible = false;
|
||||
}
|
||||
|
||||
elem.style.display = visible ? "" : "none";
|
||||
});
|
||||
|
||||
applySort();
|
||||
};
|
||||
|
||||
var applySort = function() {
|
||||
var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
|
||||
|
||||
var reverse = sortOrder.classList.contains("sortReverse");
|
||||
var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name";
|
||||
sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
|
||||
var sortKeyStore = sortKey + "-" + (reverse ? "Descending" : "Ascending") + "-" + cards.length;
|
||||
|
||||
if (sortKeyStore == sort.dataset.sortkey) {
|
||||
return;
|
||||
if (!activePromptTextarea[tabname]) {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
}
|
||||
sort.dataset.sortkey = sortKeyStore;
|
||||
|
||||
cards.forEach(function(card) {
|
||||
card.originalParentElement = card.parentElement;
|
||||
textarea.addEventListener("focus", function() {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
});
|
||||
var sortedCards = Array.from(cards);
|
||||
sortedCards.sort(function(cardA, cardB) {
|
||||
var a = cardA.dataset[sortKey];
|
||||
var b = cardB.dataset[sortKey];
|
||||
if (!isNaN(a) && !isNaN(b)) {
|
||||
return parseInt(a) - parseInt(b);
|
||||
}
|
||||
|
||||
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().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();
|
||||
|
||||
gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
|
||||
var searchOnly = elem.querySelector('.search_only');
|
||||
|
||||
var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms'), function(t) { return t.textContent.toLowerCase() }).join(" ");
|
||||
|
||||
var visible = text.indexOf(searchTerm) != -1;
|
||||
|
||||
if (searchOnly && searchTerm.length < 4) {
|
||||
visible = false;
|
||||
}
|
||||
|
||||
elem.style.display = visible ? "" : "none";
|
||||
});
|
||||
|
||||
applySort();
|
||||
};
|
||||
|
||||
var applySort = function() {
|
||||
var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
|
||||
|
||||
var reverse = sortOrder.classList.contains("sortReverse");
|
||||
var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name";
|
||||
sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
|
||||
var sortKeyStore = sortKey + "-" + (reverse ? "Descending" : "Ascending") + "-" + cards.length;
|
||||
|
||||
if (sortKeyStore == sort.dataset.sortkey) {
|
||||
return;
|
||||
}
|
||||
sort.dataset.sortkey = sortKeyStore;
|
||||
|
||||
cards.forEach(function(card) {
|
||||
card.originalParentElement = card.parentElement;
|
||||
});
|
||||
var sortedCards = Array.from(cards);
|
||||
sortedCards.sort(function(cardA, cardB) {
|
||||
var a = cardA.dataset[sortKey];
|
||||
var b = cardB.dataset[sortKey];
|
||||
if (!isNaN(a) && !isNaN(b)) {
|
||||
return parseInt(a) - parseInt(b);
|
||||
}
|
||||
|
||||
return (a < b ? -1 : (a > b ? 1 : 0));
|
||||
});
|
||||
if (reverse) {
|
||||
sortedCards.reverse();
|
||||
}
|
||||
cards.forEach(function(card) {
|
||||
card.remove();
|
||||
});
|
||||
sortedCards.forEach(function(card) {
|
||||
card.originalParentElement.appendChild(card);
|
||||
});
|
||||
};
|
||||
|
||||
search.addEventListener("input", applyFilter);
|
||||
sortOrder.addEventListener("click", function() {
|
||||
sortOrder.classList.toggle("sortReverse");
|
||||
applySort();
|
||||
});
|
||||
applyFilter();
|
||||
|
||||
extraNetworksApplySort[tab_id] = applySort;
|
||||
extraNetworksApplyFilter[tab_id] = applyFilter;
|
||||
|
||||
return (a < b ? -1 : (a > b ? 1 : 0));
|
||||
});
|
||||
if (reverse) {
|
||||
sortedCards.reverse();
|
||||
}
|
||||
cards.forEach(function(card) {
|
||||
card.remove();
|
||||
});
|
||||
sortedCards.forEach(function(card) {
|
||||
card.originalParentElement.appendChild(card);
|
||||
});
|
||||
};
|
||||
|
||||
search.addEventListener("input", applyFilter);
|
||||
sortOrder.addEventListener("click", function() {
|
||||
sortOrder.classList.toggle("sortReverse");
|
||||
applySort();
|
||||
registerPrompt(tab_id, tab_id + "_prompt");
|
||||
registerPrompt(tab_id, tab_id + "_neg_prompt");
|
||||
});
|
||||
applyFilter();
|
||||
|
||||
extraNetworksApplySort[tabname] = applySort;
|
||||
extraNetworksApplyFilter[tabname] = applyFilter;
|
||||
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
@ -19,6 +19,90 @@ extra_pages = []
|
|||
allowed_dirs = set()
|
||||
default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
|
||||
|
||||
tree_tpl = (
|
||||
"<div class='action-list-search'>"
|
||||
"<input "
|
||||
"id='{tabname}_{tab_id}_extra_search' "
|
||||
"class='action-list-search-text' "
|
||||
"type='search' "
|
||||
"placeholder='Filter files'"
|
||||
">"
|
||||
"</div>"
|
||||
"<ul class='action-list action-list--tree'>"
|
||||
"{content}"
|
||||
"</ul>"
|
||||
)
|
||||
|
||||
tree_ul_tpl = (
|
||||
"<ul class='action-list action-list--subgroup' data-hidden>"
|
||||
"{content}"
|
||||
"</ul>"
|
||||
)
|
||||
|
||||
tree_li_dir_tpl = (
|
||||
"<li "
|
||||
"class='action-list-item action-list-item--has-subitem' "
|
||||
"data-path='{path}' "
|
||||
"data-tree-entry-type='dir'>"
|
||||
"{content}"
|
||||
"</li>"
|
||||
)
|
||||
tree_li_file_tpl = (
|
||||
"<li "
|
||||
"id='file-tree-item-{hash}' "
|
||||
"class='action-list-item action-list-item--subitem' "
|
||||
"data-path='{path}' "
|
||||
"data-tree-entry-type='file'>"
|
||||
"{content}"
|
||||
"</li>"
|
||||
)
|
||||
|
||||
tree_btn_dir_tpl = (
|
||||
"<button "
|
||||
"class='action-list-content action-list-content-dir' "
|
||||
"type='button' "
|
||||
"expanded='false' "
|
||||
"onclick='extraNetworksTreeOnClick(event, \"{tabname}\", \"{tab_id}\")'>"
|
||||
"<span class='action-list-item-action action-list-item-action--leading'>"
|
||||
"<i class='action-list-item-action-chevron'></i>"
|
||||
"</span>"
|
||||
"<span class='action-list-item-visual action-list-item-visual--leading'>🗀</span>"
|
||||
"<span class='action-list-item-label action-list-item-label--truncate'>{label}</span>"
|
||||
"</button>"
|
||||
)
|
||||
|
||||
tree_btn_file_action_buttons_tpl = (
|
||||
"<div "
|
||||
"class='copy-path-button card-button' "
|
||||
"title='Copy path to clipboard' "
|
||||
"onclick='extraNetworksCopyCardPath(event, {path})' "
|
||||
"data-clipboard-text={path}>"
|
||||
"</div>"
|
||||
"<div "
|
||||
"class='metadata-button card-button' "
|
||||
"title='Show internal metadata' "
|
||||
"onclick='extraNetworksRequestMetadata(event, {tab_id}, {filename})'>"
|
||||
"</div>"
|
||||
"<div "
|
||||
"class='edit-button card-button' "
|
||||
"title='Edit metadata' "
|
||||
"onclick='extraNetworksEditUserMetadata(event, {tabname}, {tab_id}, {filename})'>"
|
||||
"</div>"
|
||||
)
|
||||
|
||||
tree_btn_file_tpl = (
|
||||
"<span data-filterable-item-text hidden>{filter}</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'>{label}</span>"
|
||||
"<span class='action-list-item-action action-list-item-action--trailing'>{buttons}</span>"
|
||||
"</button>"
|
||||
)
|
||||
|
||||
|
||||
@functools.cache
|
||||
def allowed_preview_extensions_with_extra(extra_extensions=None):
|
||||
return set(default_allowed_preview_extensions) | set(extra_extensions or [])
|
||||
|
|
@ -160,6 +244,7 @@ class ExtraNetworksPage:
|
|||
self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
|
||||
self.card_page_template = shared.html("extra-networks-card.html")
|
||||
self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
|
||||
self.tree_button_template = shared.html("extra-networks-tree-button.html")
|
||||
self.allow_prompt = True
|
||||
self.allow_negative_prompt = False
|
||||
self.metadata = {}
|
||||
|
|
@ -279,7 +364,9 @@ class ExtraNetworksPage:
|
|||
"search_terms": search_terms_html,
|
||||
"sort_keys": sort_keys,
|
||||
"style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
|
||||
"tabname": quote_js(tabname),
|
||||
"tabname": tabname,
|
||||
"tab_id": self.id_page,
|
||||
|
||||
}
|
||||
|
||||
if template:
|
||||
|
|
@ -306,55 +393,81 @@ class ExtraNetworksPage:
|
|||
if not tree:
|
||||
return res
|
||||
|
||||
file_template = "<li class='file-item'>{card}</li>"
|
||||
dir_template = (
|
||||
"<details {attributes} class='folder-item'>"
|
||||
"<summary class='folder-item-summary' data-path='{data_path}' "
|
||||
"onclick='extraNetworksFolderClick(event, \"{tabname}_extra_search\");'>"
|
||||
"{folder_name}"
|
||||
"</summary>"
|
||||
"<ul class='folder-container'>{content}</ul>"
|
||||
"</details>"
|
||||
)
|
||||
|
||||
def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
|
||||
"""Recursively builds HTML for a tree."""
|
||||
_res = ""
|
||||
if not data:
|
||||
return "<li style='list-style-type: \"⚠️\";'>DIRECTORY IS EMPTY</li>"
|
||||
return (
|
||||
"<details open disabled class='folder-item-empty'>"
|
||||
"<summary class='folder-item-summary-empty'>Directory is empty</summary>"
|
||||
"</details>"
|
||||
)
|
||||
|
||||
for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
|
||||
if isinstance(v, (ExtraNetworksItem,)):
|
||||
item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
|
||||
_res += file_template.format(**{"card": item_html})
|
||||
else:
|
||||
_res += dir_template.format(
|
||||
_action_buttons = tree_btn_file_action_buttons_tpl.format(
|
||||
**{
|
||||
"attributes": "",
|
||||
"tabname": tabname,
|
||||
"folder_name": os.path.basename(k),
|
||||
"data_path": k,
|
||||
"content": _build_tree(v),
|
||||
"path": quote_js(k),
|
||||
"filename": quote_js(v.item["name"]),
|
||||
"tabname": quote_js(tabname),
|
||||
"tab_id": quote_js(self.id_page),
|
||||
}
|
||||
)
|
||||
_btn = tree_btn_file_tpl.format(
|
||||
**{
|
||||
"label": v.item["name"],
|
||||
"filter": v.item["search_terms"],
|
||||
"tabname": tabname,
|
||||
"tab_id": self.id_page,
|
||||
"buttons": _action_buttons,
|
||||
}
|
||||
)
|
||||
_li = tree_li_file_tpl.format(
|
||||
**{
|
||||
"hash": v.item["shorthash"],
|
||||
"path": k,
|
||||
"type": "file",
|
||||
#"content": _btn,
|
||||
"content": self.create_item_html(tabname, v.item, self.tree_button_template),
|
||||
}
|
||||
)
|
||||
_res += _li
|
||||
#item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
|
||||
#_res += file_template.format(**{"card": item_html})
|
||||
else:
|
||||
_btn = tree_btn_dir_tpl.format(
|
||||
**{
|
||||
"label": os.path.basename(k),
|
||||
"tabname": tabname,
|
||||
"tab_id": self.id_page,
|
||||
}
|
||||
)
|
||||
_ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
|
||||
_li = tree_li_dir_tpl.format(**{"content": _btn + _ul, "path": k})
|
||||
_res += _li
|
||||
return _res
|
||||
|
||||
# Add each root directory to the tree.
|
||||
for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
|
||||
# If root is empty, append the "disabled" attribute to the template details tag.
|
||||
res += "<ul class='folder-container'>"
|
||||
res += dir_template.format(
|
||||
btn = tree_btn_dir_tpl.format(
|
||||
**{
|
||||
"attributes": "open" if v else "open",
|
||||
"label": os.path.basename(k),
|
||||
"tabname": tabname,
|
||||
"folder_name": os.path.basename(k),
|
||||
"data_path": k,
|
||||
"content": _build_tree(v),
|
||||
"tab_id": self.id_page,
|
||||
}
|
||||
)
|
||||
res += "</ul>"
|
||||
res += "</ul>"
|
||||
return res
|
||||
ul = tree_ul_tpl.format(**{"content": _build_tree(v)})
|
||||
li = tree_li_dir_tpl.format(**{"content": btn + ul, "path": k})
|
||||
res += li
|
||||
|
||||
return tree_tpl.format(
|
||||
**{
|
||||
"content": res,
|
||||
"tabname": tabname,
|
||||
"tab_id": self.id_page,
|
||||
}
|
||||
)
|
||||
|
||||
def create_card_view_html(self, tabname):
|
||||
res = ""
|
||||
|
|
@ -375,7 +488,7 @@ class ExtraNetworksPage:
|
|||
|
||||
tree_view_html = self.create_tree_view_html(tabname)
|
||||
card_view_html = self.create_card_view_html(tabname)
|
||||
network_type_id = self.name.replace(" ", "_")
|
||||
network_type_id = self.id_page
|
||||
|
||||
return self.extra_networks_pane_template.format(
|
||||
**{
|
||||
|
|
@ -506,7 +619,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
|
|||
ui.pages.append(page_elem)
|
||||
page_elem.change(
|
||||
fn=lambda: None,
|
||||
_js=f"function(){{applyExtraNetworkFilter({tabname}_extra_search); return []}}",
|
||||
_js=f"function(){{applyExtraNetworkFilter({tabname}_{page.id_page}_extra_search); return []}}",
|
||||
inputs=[],
|
||||
outputs=[],
|
||||
)
|
||||
|
|
@ -517,13 +630,11 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
|
|||
|
||||
related_tabs.append(tab)
|
||||
|
||||
edit_search = gr.Textbox('', show_label=False, elem_id=f"{tabname}_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
|
||||
dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
|
||||
button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
|
||||
button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
|
||||
|
||||
tab_controls = [
|
||||
edit_search,
|
||||
dropdown_sort,
|
||||
button_sortorder,
|
||||
button_refresh,
|
||||
|
|
|
|||
325
style.css
325
style.css
|
|
@ -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;
|
||||
/* ========================= */
|
||||
.extra-network-pane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-cards {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
min-width: 25%;
|
||||
border: 1px solid var(--block-border-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.extra-network-tree .action-list--tree {
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-break: anywhere;
|
||||
}
|
||||
|
||||
/* Pushes buttons to right */
|
||||
.extra-network-pane .card-minimal .name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.folder-container {
|
||||
margin-left: 1.5em !important;
|
||||
}
|
||||
|
||||
.file-item,
|
||||
.folder-item,
|
||||
.folder-item-summary {
|
||||
padding-left: 0.05rem;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
|
||||
.dark .extra-network-pane .extra-network-tree .file-item:hover {
|
||||
.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-pane .extra-network-tree details.folder-item[open] > summary {
|
||||
list-style-type: '📂';
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree ul.folder-container {
|
||||
list-style: none;
|
||||
font-size: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree li.file-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree li.file-item::before {
|
||||
content: '📄';
|
||||
font-size: 0.85rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.extra-network-pane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-tree {
|
||||
font-size: 1rem;
|
||||
min-width: 25%;
|
||||
max-width: 25%;
|
||||
border: 1px solid var(--block-border-color);
|
||||
}
|
||||
.extra-network-pane .extra-network-cards {
|
||||
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 .folder-item-summary.selected {
|
||||
.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-tree button.action-list-content[selected] {
|
||||
background-color: var(--neutral-300);
|
||||
}
|
||||
|
||||
/* Buttons for directories. */
|
||||
.extra-network-tree .action-list-content-dir {
|
||||
|
||||
}
|
||||
|
||||
/* 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;
|
||||
line-height: 1.25em;
|
||||
color: var(--button-secondary-text-color);
|
||||
grid-area: label;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
/* Text for button truncated. */
|
||||
.extra-network-tree .action-list-item-label--truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Icon for button when it is before label. */
|
||||
.extra-network-tree .action-list-item-visual--leading {
|
||||
grid-area: leading-visual;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.extra-network-tree .action-list-content .button-row {
|
||||
display: inline-flex;
|
||||
visibility: hidden !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
Loading…
Reference in New Issue