mirrors/stable-diffusion-webui
1
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2026-02-02 05:43:39 -08:00
Code Issues Projects Releases Packages Wiki Activity

fix firefox resize-handle issues

Browse source
This commit is contained in:
Sj-Si 2024-04-17 19:23:38 -04:00
parent 2d515580f5
commit 157073b5b2
2 changed files with 24 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

15
javascript/extraNetworks.js
View file

@ -264,14 +264,16 @@ class ExtraNetworksTab {
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.container_elem.querySelector(
`.extra-network-content.resize-handle-col:has(> #${this.tabname_full}_tree_list_scroll_area)`
);
const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
// Remove "hidden" class if button is enabled, otherwise add it.
div_dirs.classList.toggle("hidden", !("selected" in btn_dirs_view.dataset));
div_tree.classList.toggle("hidden", !("selected" in btn_tree_view.dataset));
// 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"));
await Promise.all([this.setupTreeList(), this.setupCardsList()]);
this.tree_list.enable(true);
this.cards_list.enable(true);
@ -865,6 +867,13 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
tab.tree_list.scroll_elem.parentElement.classList.toggle("hidden", !show);
tab.tree_list.enable(show);
// 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.tree_list.scroll_elem.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", !show);
event.stopPropagation();
}

12
style.css
View file

@ -1212,6 +1212,7 @@ body.resizing .resize-handle {
color: var(--input-placeholder-color) !important;
}
/* Custom scrollbar style. Only works on chromium based browsers. */
.clusterize-scroll::-webkit-scrollbar {
background: transparent;
width: var(--text-lg);
@ -1274,6 +1275,16 @@ body.resizing .resize-handle {
overflow: auto;
}
/* Can be simplified using :has but this is only recently supported in firefox. */
.resize-handle-row.resize-handle-hidden .resize-handle {
display: none;
}
/* Can be simplified using :has but this is only recently supported in firefox. */
.resize-handle-row.resize-handle-hidden {
display: flex !important;
}
/*
.resize-handle-row:has(> .resize-handle-col.hidden) {
display: flex !important;
}
@ -1281,6 +1292,7 @@ body.resizing .resize-handle {
.resize-handle-row:has(> .resize-handle-col.hidden)>.resize-handle {
display: none;
}
*/
.extra-network-tree {
display: flex;