add an option to have old-style directory view instead of tree view
This commit is contained in:
AUTOMATIC1111
parent
a43ce7eabb
commit
a551a43164
|
|
@ -0,0 +1,8 @@
|
|||
<div class="extra-network-pane-content-dirs">
|
||||
<div id='{tabname}_{extra_networks_tabname}_dirs' class='extra-network-dirs'>
|
||||
{dirs_html}
|
||||
</div>
|
||||
<div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
|
||||
{items_html}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<div class="extra-network-pane-content-tree resize-handle-row">
|
||||
<div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree' style='flex-basis: {extra_networks_tree_view_default_width}px'>
|
||||
{tree_html}
|
||||
</div>
|
||||
<div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards' style='flex-grow: 1;'>
|
||||
{items_html}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane'>
|
||||
<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane {tree_view_div_default_display_class}'>
|
||||
<div class="extra-network-control" id="{tabname}_{extra_networks_tabname}_controls" style="display:none" >
|
||||
<div class="extra-network-control--search">
|
||||
<input
|
||||
|
|
@ -44,12 +44,5 @@
|
|||
<i class="extra-network-control--refresh-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra-network-pane-content resize-handle-row" style="display: {extra_network_pane_content_default_display};">
|
||||
<div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree {tree_view_div_extra_class}' style='flex-basis: {extra_networks_tree_view_default_width}px; display: {tree_view_div_default_display};'>
|
||||
{tree_html}
|
||||
</div>
|
||||
<div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards' style='flex-grow: 1;'>
|
||||
{items_html}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{pane_content}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -272,6 +272,15 @@ function saveCardPreview(event, tabname, filename) {
|
|||
event.preventDefault();
|
||||
}
|
||||
|
||||
function extraNetworksSearchButton(tabname, extra_networks_tabname, event) {
|
||||
var searchTextarea = gradioApp().querySelector("#" + tabname + "_" + extra_networks_tabname + "_extra_search");
|
||||
var button = event.target;
|
||||
var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
|
||||
|
||||
searchTextarea.value = text;
|
||||
updateInput(searchTextarea);
|
||||
}
|
||||
|
||||
function extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_tabname) {
|
||||
/**
|
||||
* Processes `onclick` events when user clicks on files in tree.
|
||||
|
|
@ -447,27 +456,12 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn
|
|||
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
|
||||
* @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
|
||||
*/
|
||||
const tree = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree");
|
||||
const parent = tree.parentElement;
|
||||
let resizeHandle = parent.querySelector('.resize-handle');
|
||||
tree.classList.toggle("hidden");
|
||||
var button = event.currentTarget;
|
||||
button.classList.toggle("extra-network-control--enabled");
|
||||
var show = ! button.classList.contains("extra-network-control--enabled");
|
||||
|
||||
if (tree.classList.contains("hidden")) {
|
||||
tree.style.display = 'none';
|
||||
parent.style.display = 'flex';
|
||||
if (resizeHandle) {
|
||||
resizeHandle.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
tree.style.display = 'block';
|
||||
parent.style.display = 'grid';
|
||||
if (!resizeHandle) {
|
||||
setupResizeHandle(parent);
|
||||
resizeHandle = parent.querySelector('.resize-handle');
|
||||
}
|
||||
resizeHandle.style.display = 'block';
|
||||
}
|
||||
event.currentTarget.classList.toggle("extra-network-control--enabled");
|
||||
var pane = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_pane");
|
||||
pane.classList.toggle("extra-network-dirs-hidden", show);
|
||||
}
|
||||
|
||||
function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabname) {
|
||||
|
|
|
|||
|
|
@ -258,7 +258,8 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
|
|||
"extra_networks_card_description_is_html": OptionInfo(False, "Treat card description as HTML"),
|
||||
"extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(),
|
||||
"extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(),
|
||||
"extra_networks_tree_view_default_enabled": OptionInfo(False, "Enables the Extra Networks directory tree view by default").needs_reload_ui(),
|
||||
"extra_networks_tree_view_style": OptionInfo("Dirs", "Extra Networks directory view style", gr.Radio, {"choices": ["Tree", "Dirs"]}).needs_reload_ui(),
|
||||
"extra_networks_tree_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default").needs_reload_ui(),
|
||||
"extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(),
|
||||
"extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"),
|
||||
"ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order").needs_reload_ui(),
|
||||
|
|
|
|||
|
|
@ -164,6 +164,8 @@ class ExtraNetworksPage:
|
|||
self.lister = util.MassFileLister()
|
||||
# HTML Templates
|
||||
self.pane_tpl = shared.html("extra-networks-pane.html")
|
||||
self.pane_content_tree_tpl = shared.html("extra-networks-pane-tree.html")
|
||||
self.pane_content_dirs_tpl = shared.html("extra-networks-pane-dirs.html")
|
||||
self.card_tpl = shared.html("extra-networks-card.html")
|
||||
self.btn_tree_tpl = shared.html("extra-networks-tree-button.html")
|
||||
self.btn_copy_path_tpl = shared.html("extra-networks-copy-path-button.html")
|
||||
|
|
@ -476,6 +478,47 @@ class ExtraNetworksPage:
|
|||
|
||||
return f"<ul class='tree-list tree-list--tree'>{res}</ul>"
|
||||
|
||||
def create_dirs_view_html(self, tabname: str) -> str:
|
||||
"""Generates HTML for displaying folders."""
|
||||
|
||||
subdirs = {}
|
||||
for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
|
||||
for root, dirs, _ in sorted(os.walk(parentdir, followlinks=True), key=lambda x: shared.natural_sort_key(x[0])):
|
||||
for dirname in sorted(dirs, key=shared.natural_sort_key):
|
||||
x = os.path.join(root, dirname)
|
||||
|
||||
if not os.path.isdir(x):
|
||||
continue
|
||||
|
||||
subdir = os.path.abspath(x)[len(parentdir):]
|
||||
|
||||
if shared.opts.extra_networks_dir_button_function:
|
||||
if not subdir.startswith(os.path.sep):
|
||||
subdir = os.path.sep + subdir
|
||||
else:
|
||||
while subdir.startswith(os.path.sep):
|
||||
subdir = subdir[1:]
|
||||
|
||||
is_empty = len(os.listdir(x)) == 0
|
||||
if not is_empty and not subdir.endswith(os.path.sep):
|
||||
subdir = subdir + os.path.sep
|
||||
|
||||
if (os.path.sep + "." in subdir or subdir.startswith(".")) and not shared.opts.extra_networks_show_hidden_directories:
|
||||
continue
|
||||
|
||||
subdirs[subdir] = 1
|
||||
|
||||
if subdirs:
|
||||
subdirs = {"": 1, **subdirs}
|
||||
|
||||
subdirs_html = "".join([f"""
|
||||
<button class='lg secondary gradio-button custom-button{" search-all" if subdir == "" else ""}' onclick='extraNetworksSearchButton("{tabname}", "{self.extra_networks_tabname}", event)'>
|
||||
{html.escape(subdir if subdir != "" else "all")}
|
||||
</button>
|
||||
""" for subdir in subdirs])
|
||||
|
||||
return subdirs_html
|
||||
|
||||
def create_card_view_html(self, tabname: str, *, none_message) -> str:
|
||||
"""Generates HTML for the network Card View section for a tab.
|
||||
|
||||
|
|
@ -529,32 +572,27 @@ class ExtraNetworksPage:
|
|||
data_sortdir = shared.opts.extra_networks_card_order
|
||||
data_sortmode = shared.opts.extra_networks_card_order_field.lower().replace("sort", "").replace(" ", "_").rstrip("_").strip()
|
||||
data_sortkey = f"{data_sortmode}-{data_sortdir}-{len(self.items)}"
|
||||
tree_view_btn_extra_class = ""
|
||||
tree_view_div_extra_class = "hidden"
|
||||
tree_view_div_default_display = "none"
|
||||
extra_network_pane_content_default_display = "flex"
|
||||
if shared.opts.extra_networks_tree_view_default_enabled:
|
||||
tree_view_btn_extra_class = "extra-network-control--enabled"
|
||||
tree_view_div_extra_class = ""
|
||||
tree_view_div_default_display = "block"
|
||||
extra_network_pane_content_default_display = "grid"
|
||||
|
||||
return self.pane_tpl.format(
|
||||
**{
|
||||
"tabname": tabname,
|
||||
"extra_networks_tabname": self.extra_networks_tabname,
|
||||
"data_sortmode": data_sortmode,
|
||||
"data_sortkey": data_sortkey,
|
||||
"data_sortdir": data_sortdir,
|
||||
"tree_view_btn_extra_class": tree_view_btn_extra_class,
|
||||
"tree_view_div_extra_class": tree_view_div_extra_class,
|
||||
"tree_html": self.create_tree_view_html(tabname),
|
||||
"items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None),
|
||||
"extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width,
|
||||
"tree_view_div_default_display": tree_view_div_default_display,
|
||||
"extra_network_pane_content_default_display": extra_network_pane_content_default_display,
|
||||
}
|
||||
)
|
||||
show_tree = shared.opts.extra_networks_tree_view_default_enabled
|
||||
|
||||
page_params = {
|
||||
"tabname": tabname,
|
||||
"extra_networks_tabname": self.extra_networks_tabname,
|
||||
"data_sortmode": data_sortmode,
|
||||
"data_sortkey": data_sortkey,
|
||||
"data_sortdir": data_sortdir,
|
||||
"tree_view_btn_extra_class": "extra-network-control--enabled" if show_tree else "",
|
||||
"items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None),
|
||||
"extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width,
|
||||
"tree_view_div_default_display_class": "" if show_tree else "extra-network-dirs-hidden",
|
||||
}
|
||||
|
||||
if shared.opts.extra_networks_tree_view_style == "Tree":
|
||||
pane_content = self.pane_content_tree_tpl.format(**page_params, tree_html=self.create_tree_view_html(tabname))
|
||||
else:
|
||||
pane_content = self.pane_content_dirs_tpl.format(**page_params, dirs_html=self.create_dirs_view_html(tabname))
|
||||
|
||||
return self.pane_tpl.format(**page_params, pane_content=pane_content)
|
||||
|
||||
def create_item(self, name, index=None):
|
||||
raise NotImplementedError()
|
||||
|
|
|
|||
14
style.css
14
style.css
|
|
@ -1205,12 +1205,24 @@ body.resizing .resize-handle {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-pane-content {
|
||||
.extra-network-pane .extra-network-pane-content-dirs {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.extra-network-pane .extra-network-pane-content-tree {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.extra-network-dirs-hidden .extra-network-dirs{ display: none; }
|
||||
.extra-network-dirs-hidden .extra-network-tree{ display: none; }
|
||||
.extra-network-dirs-hidden .resize-handle { display: none; }
|
||||
.extra-network-dirs-hidden .resize-handle-row { display: flex !important; }
|
||||
|
||||
.extra-network-pane .extra-network-tree {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue