Mirror/stable-diffusion-webui
1
0
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2024-06-07 21:20:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

add button to disable cards view

Browse Source
This commit is contained in:
Sj-Si 2024-05-07 16:31:37 -04:00
parent 792ef083e9
commit 14442b8ad3
4 changed files with 82 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
html/extra-networks-pane.html
View File

@ -105,6 +105,16 @@
d="M 5 5 V 14 H 8 M 5 8 H 8" />
</svg>
</button>
<button class="extra-network-control extra-network-control--cards-view" title="Enable Card View"
{btn_card_view_data_attributes}>
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" stroke="none">
<rect x="3" y="3" width="4" height="4" rx="1" />
<rect x="3" y="9" width="4" height="4" rx="1" />
<rect x="9" y="3" width="4" height="4" rx="1" />
<rect x="9" y="9" width="4" height="4" rx="1" />
</svg>
</button>
</div>
</div>
<div class="extra-network-controls--container">
@ -127,11 +137,9 @@
<div class="extra-network-content extra-network-content--cards resize-handle-row">
<div class="extra-network-content resize-handle-col" style="{tree_view_style}">
<div id='{tabname}_{extra_networks_tabname}_tree_list_loading_splash'
class='extra-network-tree extra-network-list-splash'
>{tree_list_loading_splash_content}</div>
class='extra-network-tree extra-network-list-splash'>{tree_list_loading_splash_content}</div>
<div id='{tabname}_{extra_networks_tabname}_tree_list_no_data_splash'
class='extra-network-tree extra-network-list-splash hidden'
>{tree_list_no_data_splash_content}</div>
class='extra-network-tree extra-network-list-splash hidden'>{tree_list_no_data_splash_content}</div>
<div id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
class='extra-network-tree styled-scrollbar clusterize-scroll'>
<div id='{tabname}_{extra_networks_tabname}_tree_list_content_area'
@ -140,11 +148,10 @@
</div>
<div class="extra-network-content resize-handle-col" style="{cards_view_style}">
<div id='{tabname}_{extra_networks_tabname}_cards_list_loading_splash'
class='extra-network-cards extra-network-list-splash'
>{cards_list_loading_splash_content}</div>
class='extra-network-cards extra-network-list-splash'>{cards_list_loading_splash_content}</div>
<div id='{tabname}_{extra_networks_tabname}_cards_list_no_data_splash'
class='extra-network-cards extra-network-list-splash hidden'
>{cards_list_no_data_splash_content}</div>
class='extra-network-cards extra-network-list-splash hidden'>{cards_list_no_data_splash_content}
</div>
<div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area'
class='extra-network-cards styled-scrollbar clusterize-scroll'>
<div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'

67
javascript/extraNetworks.js
View File

@ -109,6 +109,7 @@ class ExtraNetworksTab {
refresh_in_progress = false;
dirs_view_en = false;
tree_view_en = false;
cards_view_en = false;
cards_list_splash_state = null;
tree_list_splash_state = null;
directory_filters = {};
@ -144,6 +145,9 @@ class ExtraNetworksTab {
this.tree_view_en = "selected" in this.controls_elem.querySelector(
".extra-network-control--tree-view"
).dataset;
this.cards_view_en = "selected" in this.controls_elem.querySelector(
".extra-network-control--cards-view"
).dataset;
// determine whether compact prompt mode is enabled.
// cannot await this since it may not exist on page depending on user setting.
@ -166,20 +170,24 @@ class ExtraNetworksTab {
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view");
const btn_cards_view = this.controls_elem.querySelector(".extra-network-control--cards-view");
const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
// We actually want to select the tree view's column in the resize-handle-row.
// This is what we actually show/hide, not the inner elements.
const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
const div_cards = this.cards_list.scroll_elem.closest(".resize-handle-col");
this.dirs_view_en = "selected" in btn_dirs_view.dataset;
this.tree_view_en = "selected" in btn_tree_view.dataset;
this.cards_view_en = "selected" in btn_cards_view.dataset;
// Remove "hidden" class if button is enabled, otherwise add it.
div_dirs.classList.toggle("hidden", !this.dirs_view_en);
div_tree.classList.toggle("hidden", !this.tree_view_en);
div_cards.classList.toggle("hidden", !this.cards_view_en);
// Apply the current resize handle classes.
const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
resize_handle_row.classList.toggle("resize-handle-hidden", !this.tree_view_en || !this.cards_view_en);
const sort_mode_elem = this.controls_elem.querySelector(".extra-network-control--sort-mode[data-selected]");
isElementThrowError(sort_mode_elem);
@ -219,6 +227,7 @@ class ExtraNetworksTab {
this.refresh_in_progress = false;
this.tree_view_en = false;
this.dirs_view_en = false;
this.cards_view_en = false;
this.directory_filters = {};
this.list_button_states = {};
}
@ -383,20 +392,28 @@ class ExtraNetworksTab {
// We actually want to select the tree view's column in the resize-handle-row.
// This is what we actually show/hide, not the inner elements.
const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
const div_cards = this.cards_list.scroll_elem.closest(".resize-handle-col");
this.dirs_view_en = "selected" in btn_dirs_view.dataset;
this.tree_view_en = "selected" in btn_tree_view.dataset;
this.cards_view_en = "selected" in btn_tree_view.dataset;
// Remove "hidden" class if button is enabled, otherwise add it.
div_dirs.classList.toggle("hidden", !this.dirs_view_en);
div_tree.classList.toggle("hidden", !this.tree_view_en);
div_cards.classList.toggle("hidden", !this.cards_view_en);
// Apply the current resize handle classes.
const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
if (this.tree_view_en && !this.cards_view_en) {
this.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
} else {
this.tree_list.scroll_elem.parentElement.style.flexGrow = null;
}
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
this.tree_list.enable(this.tree_view_en);
this.cards_list.enable(true);
this.cards_list.enable(this.cards_view_en);
await Promise.all([this.tree_list.load(true), this.cards_list.load(true)]);
// apply the previous sort/filter options
@ -424,7 +441,7 @@ class ExtraNetworksTab {
});
this.showControls();
this.tree_list.enable(this.tree_view_en);
this.cards_list.enable(true);
this.cards_list.enable(this.cards_view_en);
await Promise.all([this.tree_list.load(), this.cards_list.load()]);
}
@ -1137,7 +1154,13 @@ async function extraNetworksControlTreeViewOnClick(event) {
// this is only recently supported in firefox. So for now we just add a class
// to the resize-handle-row instead.
const resize_handle_row = tab.tree_list.scroll_elem.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.tree_view_en);
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.cards_view_en || !tab.tree_view_en);
if (tab.tree_view_en && !tab.cards_view_en) {
tab.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
} else {
tab.tree_list.scroll_elem.parentElement.style.flexGrow = null;
}
// If the tree list hasn't loaded yet, we need to force it to load.
// This can happen if tree view is disabled by default or before refresh.
@ -1167,6 +1190,41 @@ function extraNetworksControlDirsViewOnClick(event) {
tab.applyListButtonStates();
}
async function extraNetworksControlCardsViewOnClick(event) {
/** Handles `onclick` events for the Card View button.
*
* Toggles the card view in the extra networks pane.
*/
const btn = event.target.closest(".extra-network-control--cards-view");
const controls = btn.closest(".extra-network-controls");
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
btn.toggleAttribute("data-selected");
tab.cards_view_en = "selected" in btn.dataset;
tab.cards_list.scroll_elem.parentElement.classList.toggle("hidden", !tab.cards_view_en);
tab.cards_list.enable(tab.cards_view_en);
// Apply the resize-handle-hidden class to the resize-handle-row.
// NOTE: This can be simplified using only css with the ":has" selector however
// this is only recently supported in firefox. So for now we just add a class
// to the resize-handle-row instead.
const resize_handle_row = tab.cards_list.scroll_elem.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.cards_view_en || !tab.tree_view_en);
if (tab.tree_view_en && !tab.cards_view_en) {
tab.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
} else {
tab.tree_list.scroll_elem.parentElement.style.flexGrow = null;
}
// If the tree list hasn't loaded yet, we need to force it to load.
// This can happen if tree view is disabled by default or before refresh.
// Then after refresh, enabling the tree view will require a load.
if (tab.cards_view_en && !tab.cards_list.initial_load) {
await tab.cards_list.load();
}
}
function extraNetworksControlRefreshOnClick(event) {
/** Handles `onclick` events for the Refresh Page button.
*
@ -1483,6 +1541,7 @@ function extraNetworksSetupEventDelegators() {
".extra-network-control--sort-dir": extraNetworksControlSortDirOnClick,
".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick,
".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick,
".extra-network-control--cards-view": extraNetworksControlCardsViewOnClick,
".extra-network-control--refresh": extraNetworksControlRefreshOnClick,
};

1
modules/shared_options.py
View File

@ -264,6 +264,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
"extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(),
"extra_networks_dirs_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default.").needs_reload_ui(),
"extra_networks_tree_view_default_enabled": OptionInfo(False, "Show the Extra Networks tree view by default").needs_reload_ui(),
"extra_networks_card_view_default_enabled": OptionInfo(True, "Show the Extra Networks card view by default").needs_reload_ui(),
"extra_networks_tree_view_show_files": OptionInfo(True, "Show files in tree view.").info("Disabling this option will remove file entries from the tree view and only show directories.").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"),

2
modules/ui_extra_networks.py
View File

@ -840,6 +840,7 @@ class ExtraNetworksPage:
sort_dir = shared.opts.extra_networks_card_order.lower().strip()
dirs_view_en = shared.opts.extra_networks_dirs_view_default_enabled
tree_view_en = shared.opts.extra_networks_tree_view_default_enabled
card_view_en = shared.opts.extra_networks_card_view_default_enabled
return self.pane_tpl.format(
**{
@ -852,6 +853,7 @@ class ExtraNetworksPage:
"btn_sort_mode_date_modified_data_attributes": "data-selected" if sort_mode == "date_modified" else "",
"btn_dirs_view_data_attributes": "data-selected" if dirs_view_en else "",
"btn_tree_view_data_attributes": "data-selected" if tree_view_en else "",
"btn_card_view_data_attributes": "data-selected" if card_view_en else "",
"tree_view_style": f"flex-basis: {shared.opts.extra_networks_tree_view_default_width}px;",
"cards_view_style": "flex-grow: 1;",
"dirs_html": dirs_html,