mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2024-06-07 21:20:49 +00:00
fix loading/nodata messages
This commit is contained in:
Sj-Si
parent
2f8ee1998f
commit
c8e21f6c8b
@ -126,23 +126,29 @@
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<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'
|
||||
class='extra-network-tree-content clusterize-content'>
|
||||
<div class="clusterize-loading">Loading...</div>
|
||||
<div class="clusterize-no-data">No Data</div>
|
||||
</div>
|
||||
class='extra-network-tree-content clusterize-content'></div>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<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'
|
||||
class='extra-network-cards-content clusterize-content'>
|
||||
<div class="clusterize-loading">Loading...</div>
|
||||
<div class="clusterize-no-data">{no_cards_html}</div>
|
||||
</div>
|
||||
class='extra-network-cards-content clusterize-content'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,24 +19,19 @@ class Clusterize {
|
||||
content_elem = null;
|
||||
scroll_id = null;
|
||||
content_id = null;
|
||||
no_data_class_default = "clusterize-no-data";
|
||||
loading_class_default = "clusterize-loading";
|
||||
options = {
|
||||
rows_in_block: 50,
|
||||
cols_in_block: 1,
|
||||
blocks_in_cluster: 5,
|
||||
rows_in_cluster: 50 * 5, // default is rows_in_block * blocks_in_cluster
|
||||
tag: null,
|
||||
id_attr: "data-div-id",
|
||||
no_data_class: "clusterize-no-data",
|
||||
no_data_text: "No Data",
|
||||
show_no_data_row: true,
|
||||
no_data_class: this.no_data_class_default,
|
||||
loading_class: this.loading_class_default,
|
||||
keep_parity: true,
|
||||
callbacks: {},
|
||||
};
|
||||
loading_html_default = `<div class="${this.loading_class_default}">Loading...</div>`;
|
||||
no_data_html_default = `<div class="${this.no_data_class_default}">No Data</div>`;
|
||||
loading_html = null;
|
||||
no_data_html = null;
|
||||
setup_has_run = false;
|
||||
enabled = false;
|
||||
#is_mac = null;
|
||||
@ -105,9 +100,6 @@ class Clusterize {
|
||||
this.#max_items = args.max_items;
|
||||
|
||||
this.#on_scroll_bound = this.#onScroll.bind(this);
|
||||
|
||||
this.loading_html = args.loading_html;
|
||||
this.no_data_html = args.no_data_html;
|
||||
}
|
||||
|
||||
// ==== PUBLIC FUNCTIONS ====
|
||||
@ -133,13 +125,12 @@ class Clusterize {
|
||||
this.setup_has_run = true;
|
||||
}
|
||||
|
||||
clear(custom_html) {
|
||||
clear() {
|
||||
if (!this.setup_has_run || !this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
custom_html = custom_html || this.no_data_html;
|
||||
this.#html(custom_html);
|
||||
this.#html(this.#generateEmptyRow().join(""));
|
||||
}
|
||||
|
||||
destroy() {
|
||||
@ -147,7 +138,7 @@ class Clusterize {
|
||||
this.#teardownElementObservers();
|
||||
this.#teardownResizeObservers();
|
||||
|
||||
this.#html(this.no_data_html);
|
||||
this.#html(this.#generateEmptyRow().join(""));
|
||||
|
||||
this.setup_has_run = false;
|
||||
}
|
||||
@ -279,29 +270,13 @@ class Clusterize {
|
||||
if (this.#ie && this.#ie <= 9 && !this.options.tag) {
|
||||
this.options.tag = rows[0].match(/<([^>\s/]*)/)[1].toLowerCase();
|
||||
}
|
||||
// Temporarily add one row so that we can calculate row dimensions.
|
||||
if (this.content_elem.children.length <= 1) {
|
||||
cache.data = this.#html(rows[0]);
|
||||
}
|
||||
if (!this.options.tag) {
|
||||
this.options.tag = this.content_elem.children[0].tagName.toLowerCase();
|
||||
}
|
||||
|
||||
if (!isString(this.loading_html)) {
|
||||
const loading_elem = this.content_elem.querySelector(`.${this.options.loading_class}`);
|
||||
if (isElement(loading_elem)) {
|
||||
this.loading_html = loading_elem.outerHTML;
|
||||
loading_elem.remove();
|
||||
}
|
||||
}
|
||||
|
||||
if (!isString(this.no_data_html)) {
|
||||
const no_data_elem = this.content_elem.querySelector(`.${this.options.no_data_class}`);
|
||||
if (isElement(no_data_elem)) {
|
||||
this.no_data_html = no_data_elem.outerHTML;
|
||||
no_data_elem.remove();
|
||||
}
|
||||
}
|
||||
|
||||
this.#recalculateDims();
|
||||
}
|
||||
|
||||
@ -317,7 +292,7 @@ class Clusterize {
|
||||
|
||||
// Get the first element that isn't one of our placeholder rows.
|
||||
const node = this.content_elem.querySelector(
|
||||
`:scope > :not(.clusterize-extra-row,.${this.options.no_data_class},.${this.options.loading_class})`
|
||||
`:scope > :not(.clusterize-extra-row,.${this.options.no_data_class})`
|
||||
);
|
||||
if (!isElement(node)) {
|
||||
// dont attempt to compute dims if we have no data.
|
||||
@ -368,6 +343,21 @@ class Clusterize {
|
||||
return prev_options !== JSON.stringify(this.options);
|
||||
}
|
||||
|
||||
#generateEmptyRow() {
|
||||
const row = document.createElement(this.options.tag);
|
||||
row.className = this.options.no_data_class;
|
||||
const node = document.createTextNode(this.options.no_data_text);
|
||||
if (this.options.tag === "tr") {
|
||||
const td = document.createElement("td");
|
||||
td.colSpan = 100;
|
||||
td.appendChild(node);
|
||||
row.appendChild(td);
|
||||
} else {
|
||||
row.appendChild(node);
|
||||
}
|
||||
return [row.outerHTML];
|
||||
}
|
||||
|
||||
#getClusterNum() {
|
||||
this.options.scroll_top = this.scroll_elem.scrollTop;
|
||||
const cluster_divider = this.options.cluster_height - this.options.block_height;
|
||||
@ -397,7 +387,7 @@ class Clusterize {
|
||||
top_offset: 0,
|
||||
bottom_offset: 0,
|
||||
rows_above: 0,
|
||||
rows: this_cluster_rows.length ? this_cluster_rows : [this.no_data_html],
|
||||
rows: this_cluster_rows.length ? this_cluster_rows : this.#generateEmptyRow(),
|
||||
};
|
||||
}
|
||||
|
||||
@ -417,12 +407,13 @@ class Clusterize {
|
||||
if (!Array.isArray(rows) || !rows.length) {
|
||||
// This implies there is no data for this list. Not an error.
|
||||
// Errors should be handled in the fetchData callback, not here.
|
||||
this.#html(this.no_data_html);
|
||||
this.#html(this.#generateEmptyRow().join(""));
|
||||
return;
|
||||
} else {
|
||||
this.#html(rows.join(""));
|
||||
this.#exploreEnvironment(rows, this.#cache);
|
||||
// Remove the temporary item from the data since we calculated its size.
|
||||
this.#html(this.loading_html);
|
||||
this.#html(this.#generateEmptyRow().join(""));
|
||||
}
|
||||
}
|
||||
|
||||
@ -472,6 +463,7 @@ class Clusterize {
|
||||
} else {
|
||||
content_elem.innerHTML = data;
|
||||
}
|
||||
return content_elem.innerHTML;
|
||||
}
|
||||
|
||||
#renderExtraTag(class_name, height) {
|
||||
|
||||
@ -111,10 +111,12 @@ class ExtraNetworksTab {
|
||||
refresh_in_progress = false;
|
||||
dirs_view_en = false;
|
||||
tree_view_en = false;
|
||||
tree_list_no_data_html_bkp = null;
|
||||
tree_list_loading_html_bkp = null;
|
||||
cards_list_no_data_html_bkp = null;
|
||||
cards_list_loading_html_bkp = null;
|
||||
cards_list_loading_splash_elem = null;
|
||||
cards_list_no_data_splash_elem = null;
|
||||
tree_list_loading_splash_elem = null;
|
||||
tree_list_no_data_splash_elem = null;
|
||||
cards_list_splash_state = null;
|
||||
tree_list_splash_state = null;
|
||||
constructor({tabname, extra_networks_tabname}) {
|
||||
this.tabname = tabname;
|
||||
this.extra_networks_tabname = extra_networks_tabname;
|
||||
@ -137,6 +139,21 @@ class ExtraNetworksTab {
|
||||
waitForElement(`#${this.tabname_full}_cards_list_content_area`),
|
||||
]);
|
||||
|
||||
this.cards_list_loading_splash_elem = document.getElementById(
|
||||
`${this.tabname_full}_cards_list_loading_splash`
|
||||
);
|
||||
this.cards_list_no_data_splash_elem = document.getElementById(
|
||||
`${this.tabname_full}_cards_list_no_data_splash`
|
||||
);
|
||||
this.tree_list_loading_splash_elem = document.getElementById(
|
||||
`${this.tabname_full}_tree_list_loading_splash`
|
||||
);
|
||||
this.tree_list_no_data_splash_elem = document.getElementById(
|
||||
`${this.tabname_full}_tree_list_no_data_splash`
|
||||
);
|
||||
|
||||
this.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
|
||||
|
||||
this.txt_search_elem = this.controls_elem.querySelector(".extra-network-control--search-text");
|
||||
this.dirs_view_en = "selected" in this.controls_elem.querySelector(
|
||||
".extra-network-control--dirs-view"
|
||||
@ -153,26 +170,6 @@ class ExtraNetworksTab {
|
||||
this.controls_elem.id = `${this.tabname_full}_controls`;
|
||||
controls_div.insertBefore(this.controls_elem, null);
|
||||
|
||||
// create backups of the no-data and loading elements for tree/cards list
|
||||
const tree_loading_elem = this.container_elem.querySelector(
|
||||
".extra-network-tree .clusterize-loading"
|
||||
);
|
||||
const tree_no_data_elem = this.container_elem.querySelector(
|
||||
".extra-network-tree .clusterize-no-data"
|
||||
);
|
||||
const cards_loading_elem = this.container_elem.querySelector(
|
||||
".extra-network-cards-content .clusterize-loading"
|
||||
);
|
||||
const cards_no_data_elem = this.container_elem.querySelector(
|
||||
".extra-network-cards-content .clusterize-no-data"
|
||||
);
|
||||
// need to store backup of these since they are removed on clusterize clear.
|
||||
// we re-apply them next time we call setup.
|
||||
this.cards_list_no_data_html_bkp = cards_no_data_elem.outerHTML;
|
||||
this.cards_list_loading_html_bkp = cards_loading_elem.outerHTML;
|
||||
this.tree_list_no_data_html_bkp = tree_no_data_elem.outerHTML;
|
||||
this.tree_list_loading_html_bkp = tree_loading_elem.outerHTML;
|
||||
|
||||
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
|
||||
|
||||
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
|
||||
@ -256,8 +253,6 @@ class ExtraNetworksTab {
|
||||
initData: this.onInitTreeData.bind(this),
|
||||
fetchData: this.onFetchTreeData.bind(this),
|
||||
},
|
||||
no_data_html: this.tree_list_no_data_html_bkp,
|
||||
loading_html: this.tree_list_loading_html_bkp,
|
||||
});
|
||||
await this.tree_list.setup();
|
||||
}
|
||||
@ -276,8 +271,6 @@ class ExtraNetworksTab {
|
||||
initData: this.onInitCardsData.bind(this),
|
||||
fetchData: this.onFetchCardsData.bind(this),
|
||||
},
|
||||
no_data_html: this.cards_list_no_data_html_bkp,
|
||||
loading_html: this.cards_list_loading_html_bkp,
|
||||
});
|
||||
await this.cards_list.setup();
|
||||
}
|
||||
@ -345,11 +338,53 @@ class ExtraNetworksTab {
|
||||
this.controls_elem.classList.add("hidden");
|
||||
}
|
||||
|
||||
updateSplashState({cards_list_state, tree_list_state} = {}) {
|
||||
const _handle_state = (state_str, loading_elem, no_data_elem) => {
|
||||
switch (state_str) {
|
||||
case "loading":
|
||||
no_data_elem.classList.add("hidden");
|
||||
loading_elem.classList.remove("hidden");
|
||||
break;
|
||||
case "no_data":
|
||||
loading_elem.classList.add("hidden");
|
||||
no_data_elem.classList.remove("hidden");
|
||||
break;
|
||||
case "show":
|
||||
no_data_elem.classList.add("hidden");
|
||||
loading_elem.classList.add("hidden");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
if (isString(cards_list_state)) {
|
||||
this.cards_list_splash_state = cards_list_state;
|
||||
}
|
||||
_handle_state(
|
||||
cards_list_state,
|
||||
this.cards_list_loading_splash_elem,
|
||||
this.cards_list_no_data_splash_elem,
|
||||
);
|
||||
|
||||
if (isString(tree_list_state)) {
|
||||
this.tree_list_splash_state = tree_list_state;
|
||||
}
|
||||
_handle_state(
|
||||
tree_list_state,
|
||||
this.tree_list_loading_splash_elem,
|
||||
this.tree_list_no_data_splash_elem,
|
||||
);
|
||||
}
|
||||
|
||||
async #refresh() {
|
||||
this.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
|
||||
|
||||
try {
|
||||
await this.waitForServerPageReady();
|
||||
} catch (error) {
|
||||
console.error(`refresh error: ${error.message}`);
|
||||
this.updateSplashState({cards_list_state: "no_data", tree_list_state: "no_data"});
|
||||
return;
|
||||
}
|
||||
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
|
||||
@ -370,7 +405,7 @@ class ExtraNetworksTab {
|
||||
resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
|
||||
|
||||
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
|
||||
this.tree_list.enable(true);
|
||||
this.tree_list.enable(this.tree_view_en);
|
||||
this.cards_list.enable(true);
|
||||
await Promise.all([this.tree_list.load(true), this.cards_list.load(true)]);
|
||||
// apply the previous sort/filter options
|
||||
@ -391,8 +426,12 @@ class ExtraNetworksTab {
|
||||
|
||||
async load(show_prompt, show_neg_prompt) {
|
||||
this.movePrompt(show_prompt, show_neg_prompt);
|
||||
this.updateSplashState({
|
||||
cards_list_state: this.cards_list_splash_state,
|
||||
tree_list_state: this.tree_list_splash_state,
|
||||
});
|
||||
this.showControls();
|
||||
this.tree_list.enable(true);
|
||||
this.tree_list.enable(this.tree_view_en);
|
||||
this.cards_list.enable(true);
|
||||
await Promise.all([this.tree_list.load(), this.cards_list.load()]);
|
||||
}
|
||||
@ -449,10 +488,12 @@ class ExtraNetworksTab {
|
||||
}
|
||||
|
||||
async onInitCardsData() {
|
||||
this.updateSplashState({cards_list_state: "loading"});
|
||||
try {
|
||||
await this.waitForServerPageReady();
|
||||
} catch (error) {
|
||||
console.error(`onInitCardsData error: ${error.message}`);
|
||||
this.updateSplashState({cards_list_state: "no_data"});
|
||||
return {};
|
||||
}
|
||||
|
||||
@ -474,18 +515,26 @@ class ExtraNetworksTab {
|
||||
const opts = {timeout_ms: timeout_ms, response_handler: response_handler};
|
||||
try {
|
||||
const response = await fetchWithRetryAndBackoff(url, payload, opts);
|
||||
if (Object.keys(response.data).length === 0) {
|
||||
this.updateSplashState({cards_list_state: "no_data"});
|
||||
} else {
|
||||
this.updateSplashState({cards_list_state: "show"});
|
||||
}
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error(`onInitCardsData error: ${error.message}`);
|
||||
this.updateSplashState({cards_list_state: "no_data"});
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
async onInitTreeData() {
|
||||
this.updateSplashState({tree_list_state: "loading"});
|
||||
try {
|
||||
await this.waitForServerPageReady();
|
||||
} catch (error) {
|
||||
console.error(`onInitTreeData error: ${error.message}`);
|
||||
this.updateSplashState({tree_list_state: "no_data"});
|
||||
return {};
|
||||
}
|
||||
|
||||
@ -507,9 +556,15 @@ class ExtraNetworksTab {
|
||||
const opts = {timeout_ms: timeout_ms, response_handler: response_handler};
|
||||
try {
|
||||
const response = await fetchWithRetryAndBackoff(url, payload, opts);
|
||||
if (Object.keys(response.data).length === 0) {
|
||||
this.updateSplashState({tree_list_state: "no_data"});
|
||||
} else {
|
||||
this.updateSplashState({tree_list_state: "show"});
|
||||
}
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error(`onInitTreeData error: ${error.message}`);
|
||||
this.updateSplashState({tree_list_state: "no_data"});
|
||||
return {};
|
||||
}
|
||||
}
|
||||
@ -1061,6 +1116,13 @@ async function extraNetworksControlTreeViewOnClick(event) {
|
||||
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);
|
||||
|
||||
// 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.tree_view_en && !tab.tree_list.initial_load) {
|
||||
await tab.tree_list.load();
|
||||
}
|
||||
|
||||
if ((tab.tree_view_en && tab.dirs_view_en) || (!tab.tree_view_en && tab.dirs_view_en)) {
|
||||
tab.setDirectoryButtons({source_class: ".extra-network-dirs-view-button"});
|
||||
} else if (tab.tree_view_en) {
|
||||
@ -1117,6 +1179,7 @@ function extraNetworksControlRefreshOnClick(event) {
|
||||
const btn = event.target.closest(".extra-network-control--refresh");
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
|
||||
tab.updateSplashState({cards_list_state: "loading", tree_list_state: "loading"});
|
||||
// We want to reset tab lists on refresh click so that the viewing area
|
||||
// shows that it is loading new data.
|
||||
tab.tree_list.clear();
|
||||
|
||||
@ -39,6 +39,7 @@ class ExtraNetworksClusterize extends Clusterize {
|
||||
sort_fn = this.default_sort_fn;
|
||||
tabname = "";
|
||||
extra_networks_tabname = "";
|
||||
initial_load = false;
|
||||
|
||||
// Override base class defaults
|
||||
default_sort_mode_str = "divId";
|
||||
@ -91,6 +92,7 @@ class ExtraNetworksClusterize extends Clusterize {
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.initial_load = false;
|
||||
this.data_obj = {};
|
||||
this.data_obj_keys_sorted = [];
|
||||
if (this.lru instanceof LRUCache) {
|
||||
@ -101,12 +103,13 @@ class ExtraNetworksClusterize extends Clusterize {
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.initial_load = false;
|
||||
this.data_obj = {};
|
||||
this.data_obj_keys_sorted = [];
|
||||
if (this.lru instanceof LRUCache) {
|
||||
this.lru.clear();
|
||||
}
|
||||
super.clear(this.loading_html);
|
||||
super.clear();
|
||||
}
|
||||
|
||||
async load(force_init_data) {
|
||||
@ -114,6 +117,7 @@ class ExtraNetworksClusterize extends Clusterize {
|
||||
return;
|
||||
}
|
||||
|
||||
this.initial_load = true;
|
||||
if (!this.setup_has_run) {
|
||||
await this.setup();
|
||||
} else if (force_init_data) {
|
||||
@ -174,17 +178,7 @@ class ExtraNetworksClusterize extends Clusterize {
|
||||
}
|
||||
|
||||
idxRangeToDivIds(idx_start, idx_end) {
|
||||
const n_items = idx_end - idx_start;
|
||||
const div_ids = [];
|
||||
for (const div_id of this.data_obj_keys_sorted.slice(idx_start)) {
|
||||
if (this.data_obj[div_id].visible) {
|
||||
div_ids.push(div_id);
|
||||
}
|
||||
if (div_ids.length >= n_items) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return div_ids;
|
||||
return this.data_obj_keys_sorted.slice(idx_start, idx_end);
|
||||
}
|
||||
|
||||
async fetchDivIds(div_ids) {
|
||||
@ -272,7 +266,7 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
|
||||
|
||||
clear() {
|
||||
this.selected_div_id = null;
|
||||
super.clear(this.loading_html);
|
||||
super.clear();
|
||||
}
|
||||
|
||||
async onRowSelected(elem) {
|
||||
|
||||
@ -759,15 +759,18 @@ class ExtraNetworksPage:
|
||||
include_hidden=shared.opts.extra_networks_show_hidden_directories,
|
||||
)
|
||||
|
||||
cards_list_loading_splash_content = "Loading..."
|
||||
no_cards_html_dirs = "".join(
|
||||
[f"<li>{x}</li>" for x in self.allowed_directories_for_previews()]
|
||||
)
|
||||
no_cards_html = (
|
||||
cards_list_no_data_splash_content = (
|
||||
"<div class='nocards'>"
|
||||
"<h1>Nothing here. Add some content to the following directories:</h1>"
|
||||
f"<ul>{no_cards_html_dirs}</ul>"
|
||||
"</div>"
|
||||
)
|
||||
tree_list_loading_splash_content = "Loading..."
|
||||
tree_list_no_data_splash_content = "No Data"
|
||||
|
||||
# Now use tree roots to generate a mapping of div_ids to nodes.
|
||||
# Flatten roots into a single sorted list of nodes.
|
||||
@ -804,7 +807,10 @@ class ExtraNetworksPage:
|
||||
"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,
|
||||
"no_cards_html": no_cards_html,
|
||||
"cards_list_loading_splash_content": cards_list_loading_splash_content,
|
||||
"cards_list_no_data_splash_content": cards_list_no_data_splash_content,
|
||||
"tree_list_loading_splash_content": tree_list_loading_splash_content,
|
||||
"tree_list_no_data_splash_content": tree_list_no_data_splash_content,
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
21
style.css
21
style.css
@ -1217,11 +1217,6 @@ body.resizing .resize-handle {
|
||||
color: var(--input-placeholder-color) !important;
|
||||
}
|
||||
|
||||
.clusterize-loading {
|
||||
text-align: center;
|
||||
color: var(--input-placeholder-color) !important;
|
||||
}
|
||||
|
||||
.extra-network-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1233,6 +1228,7 @@ body.resizing .resize-handle {
|
||||
}
|
||||
|
||||
.extra-network-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
@ -1822,4 +1818,17 @@ body.resizing .resize-handle {
|
||||
|
||||
.tree-list-item-indent > *[data-selected]::after {
|
||||
border-left: 1px solid var(--button-primary-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.extra-network-list-splash {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
background: var(--body-background-fill);
|
||||
padding: var(--block-label-padding);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user