mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2026-02-01 13:22:04 -08:00
fix bugs. add initial card detail view code
This commit is contained in:
Sj-Si
parent
17e17ce7df
commit
ee81dadda8
6 changed files with 251 additions and 123 deletions
|
|
@ -137,6 +137,14 @@
|
|||
<rect x="9" y="9" width="4" height="4" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="extra-network-control extra-network-control--dets-view" title="Enable Card Detail View"
|
||||
{btn_dets_view_data_attributes}>
|
||||
<svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M 3 3 H 12 M 3 6 H 12 M 3 9 H 12 M 3 12 H 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra-network-controls--container">
|
||||
|
|
@ -152,18 +160,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra-network-content--container">
|
||||
<div class="extra-network-content--main-view resize-grid">
|
||||
<div class="resize-grid--row" style="{dirs_view_row_style}" {dirs_view_row_data_attributes}>
|
||||
<div class="resize-grid--col" style="flex: 1;">
|
||||
<div class="extra-network-content extra-network-content--dirs-view styled-scrollbar">
|
||||
{dirs_html}
|
||||
</div>
|
||||
<div class="extra-network-content extra-network-content--container resize-grid">
|
||||
<div id="{tabname}_{extra_networks_tabname}_dirs_view_row" class="resize-grid--row"
|
||||
style="{dirs_view_row_style}" {dirs_view_row_data_attributes}>
|
||||
<div id="{tabname}_{extra_networks_tabname}_dirs_view_col" class="resize-grid--col">
|
||||
<div class="extra-network-content extra-network-content--dirs-view styled-scrollbar">
|
||||
{dirs_html}
|
||||
</div>
|
||||
</div>
|
||||
<div class="resize-grid--row" style="{tree_and_card_view_row_style}" {tree_and_card_view_row_data_attributes}>
|
||||
<div class="resize-grid--col extra-network-content extra-network-content--tree-view"
|
||||
style="{tree_view_style}" {tree_view_data_attributes}>
|
||||
</div>
|
||||
<div id="{tabname}_{extra_networks_tabname}_main_row" class="resize-grid--row" style="{main_row_style}"
|
||||
{main_row_data_attributes}>
|
||||
<div id="{tabname}_{extra_networks_tabname}_tree_view_col" class="resize-grid--col"
|
||||
style="{tree_view_col_style}" {tree_view_col_data_attributes}>
|
||||
<div class="extra-network-content extra-network-content--tree-view">
|
||||
<div id='{tabname}_{extra_networks_tabname}_tree_list_loading_splash'
|
||||
class='extra-network-list-splash'>
|
||||
{tree_list_loading_splash_content}</div>
|
||||
|
|
@ -175,8 +185,10 @@
|
|||
class='extra-network-tree-content clusterize-content'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resize-grid--col extra-network-content extra-network-content--card-view extra-network-cards"
|
||||
style="{card_view_style}" {card_view_data_attributes}>
|
||||
</div>
|
||||
<div id="{tabname}_{extra_networks_tabname}_card_view_col" class="resize-grid--col"
|
||||
style="{card_view_col_style}" {card_view_col_data_attributes}>
|
||||
<div class="extra-network-content extra-network-content--card-view extra-network-cards">
|
||||
<div id='{tabname}_{extra_networks_tabname}_card_list_loading_splash'
|
||||
class='extra-network-list-splash'>
|
||||
{card_list_loading_splash_content}</div>
|
||||
|
|
@ -190,6 +202,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="{tabname}_{extra_networks_tabname}_dets_view_col" class="resize-grid--col"
|
||||
style="{dets_view_col_style}" {dets_view_col_data_attributes}>
|
||||
<div class="extra-network-content extra-network-content--dets-view"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ class ExtraNetworksTab {
|
|||
dirs_view_en = false;
|
||||
tree_view_en = false;
|
||||
card_view_en = false;
|
||||
dets_view_en = false;
|
||||
card_list_splash_state = null;
|
||||
tree_list_splash_state = null;
|
||||
directory_filters = {};
|
||||
|
|
@ -149,6 +150,7 @@ class ExtraNetworksTab {
|
|||
this.dirs_view_en = opts.extra_networks_dirs_view_default_enabled;
|
||||
this.tree_view_en = opts.extra_networks_tree_view_default_enabled;
|
||||
this.card_view_en = opts.extra_networks_card_view_default_enabled;
|
||||
this.dets_view_en = opts.extra_networks_dets_view_default_enabled;
|
||||
|
||||
// setup this tab's controls
|
||||
this.controls_elem.id = `${this.tabname_full}_controls`;
|
||||
|
|
@ -195,6 +197,7 @@ class ExtraNetworksTab {
|
|||
this.tree_view_en = false;
|
||||
this.dirs_view_en = false;
|
||||
this.card_view_en = false;
|
||||
this.dets_view_en = false;
|
||||
this.directory_filters = {};
|
||||
this.list_button_states = {};
|
||||
this.resize_grid.destroy();
|
||||
|
|
@ -357,16 +360,20 @@ 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_card_view = this.controls_elem.querySelector(".extra-network-control--card-view");
|
||||
const btn_dets_view = this.controls_elem.querySelector(".extra-network-control--dets-view");
|
||||
this.dirs_view_en = "selected" in btn_dirs_view.dataset;
|
||||
this.tree_view_en = "selected" in btn_tree_view.dataset;
|
||||
this.card_view_en = "selected" in btn_card_view.dataset;
|
||||
this.dets_view_en = "selected" in btn_dets_view.dataset;
|
||||
|
||||
const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
|
||||
const div_tree = this.container_elem.querySelector(".extra-network-content--tree-view");
|
||||
const div_card = this.container_elem.querySelector(".extra-network-content--card-view");
|
||||
const div_dets = this.container_elem.querySelector(".extra-network-content--dets-view");
|
||||
this.resize_grid.toggleElem(div_dirs, this.dirs_view_en);
|
||||
this.resize_grid.toggleElem(div_tree, this.tree_view_en);
|
||||
this.resize_grid.toggleElem(div_card, this.card_view_en);
|
||||
this.resize_grid.toggleElem(div_dets, this.dets_view_en);
|
||||
|
||||
await Promise.all([this.setupTreeList(), this.setupCardList()]);
|
||||
this.tree_list.enable(this.tree_view_en);
|
||||
|
|
@ -390,6 +397,31 @@ class ExtraNetworksTab {
|
|||
this.refresh_in_progress = false;
|
||||
}
|
||||
|
||||
setupResizeGrid() {
|
||||
const set_size_override = (grid_item, size_px) => {
|
||||
// Limit dirs_view max height to the max height of its contents.
|
||||
if (grid_item.elem.id === `${this.tabname_full}_dirs_view_row`) {
|
||||
const elem = grid_item.elem.querySelector(".extra-network-content--dirs-view");
|
||||
if (!isElementLogError(elem)) {
|
||||
return;
|
||||
}
|
||||
const max_height = elem.scrollHeight + getComputedBorderDims(elem).height;
|
||||
return Math.min(size_px, max_height);
|
||||
}
|
||||
};
|
||||
|
||||
const grid_elem = this.container_elem.querySelector(".resize-grid");
|
||||
this.resize_grid = resizeGridSetup(
|
||||
grid_elem,
|
||||
{
|
||||
id: `${this.tabname_full}_resize_grid`,
|
||||
callbacks: {
|
||||
set_size_override: set_size_override.bind(this),
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async load(show_prompt, show_neg_prompt) {
|
||||
this.movePrompt(show_prompt, show_neg_prompt);
|
||||
this.updateSplashState({
|
||||
|
|
@ -399,16 +431,17 @@ class ExtraNetworksTab {
|
|||
this.showControls();
|
||||
|
||||
if (isNullOrUndefined(this.resize_grid)) {
|
||||
const elem = this.container_elem.querySelector(".resize-grid");
|
||||
this.resize_grid = resizeGridSetup(elem, {id: `${this.tabname_full}_resize_grid`});
|
||||
this.setupResizeGrid();
|
||||
}
|
||||
|
||||
const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
|
||||
const div_tree = this.container_elem.querySelector(".extra-network-content--tree-view");
|
||||
const div_card = this.container_elem.querySelector(".extra-network-content--card-view");
|
||||
const div_dets = this.container_elem.querySelector(".extra-network-content--dets-view");
|
||||
this.resize_grid.toggleElem(div_dirs, this.dirs_view_en);
|
||||
this.resize_grid.toggleElem(div_tree, this.tree_view_en);
|
||||
this.resize_grid.toggleElem(div_card, this.card_view_en);
|
||||
this.resize_grid.toggleElem(div_dets, this.dets_view_en);
|
||||
|
||||
this.tree_list.enable(this.tree_view_en);
|
||||
this.card_list.enable(this.card_view_en);
|
||||
|
|
@ -1238,6 +1271,21 @@ async function extraNetworksControlCardViewOnClick(event) {
|
|||
}
|
||||
}
|
||||
|
||||
function extraNetworksControlDetsViewOnClick(event) {
|
||||
/** Handles `onclick` events for the Card Details View button.
|
||||
*
|
||||
* Toggles the card details view in the extra networks pane.
|
||||
*/
|
||||
const btn = event.target.closest(".extra-network-control--dets-view");
|
||||
const controls = btn.closest(".extra-network-controls");
|
||||
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
|
||||
btn.toggleAttribute("data-selected");
|
||||
tab.dets_view_en = "selected" in btn.dataset;
|
||||
|
||||
const div_dets = tab.container_elem.querySelector(".extra-network-content--dets-view");
|
||||
tab.resize_grid.toggleElem(div_dets, tab.dets_view_en);
|
||||
}
|
||||
|
||||
function extraNetworksControlRefreshOnClick(event) {
|
||||
/** Handles `onclick` events for the Refresh Page button.
|
||||
*
|
||||
|
|
@ -1593,6 +1641,7 @@ function extraNetworksSetupEventDelegators() {
|
|||
".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick,
|
||||
".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick,
|
||||
".extra-network-control--card-view": extraNetworksControlCardViewOnClick,
|
||||
".extra-network-control--dets-view": extraNetworksControlDetsViewOnClick,
|
||||
".extra-network-control--refresh": extraNetworksControlRefreshOnClick,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -123,12 +123,31 @@ class ResizeGridItem {
|
|||
handle = null;
|
||||
visible = true;
|
||||
pad_px = PAD_PX;
|
||||
constructor({id, parent, elem, axis} = {}) {
|
||||
callbacks = {
|
||||
/** Allows user to modify the `size_px` value passed to setSize().
|
||||
* Default callback just returns null. (no op).
|
||||
* Args:
|
||||
* item [ResizeGridItem]: This class instance.
|
||||
* size_px [int]: The size (in px) to be overridden.
|
||||
* Returns:
|
||||
* int: The overridden setSize `size_px` paremeter. If null/undefined,
|
||||
* then `size_px` does not get modified.
|
||||
*/
|
||||
set_size_override: (item, size_px) => { return; },
|
||||
};
|
||||
constructor({id, parent, elem, axis, callbacks} = {}) {
|
||||
this.id = isNullOrUndefined(id) ? _gen_id_string() : id;
|
||||
this.parent = parent; // the parent class instance
|
||||
this.elem = elem;
|
||||
this.axis = _axis_to_int(axis);
|
||||
|
||||
// Parse user specified callback overrides.
|
||||
if (isObject(callbacks)) {
|
||||
if (isFunction(callbacks.set_size_override)) {
|
||||
this.callbacks.set_size_override = callbacks.set_size_override;
|
||||
}
|
||||
}
|
||||
|
||||
this.is_flex_grow = Boolean(parseInt(this.elem.style.flexGrow));
|
||||
this.default_is_flex_grow = this.is_flex_grow;
|
||||
let flex_basis = parseInt(cssRelativeUnitToPx(this.elem.style.flexBasis));
|
||||
|
|
@ -227,9 +246,14 @@ class ResizeGridItem {
|
|||
return new_size - curr_size;
|
||||
}
|
||||
|
||||
setSize(px) {
|
||||
this.elem.style.flexBasis = parseInt(px) + 'px';
|
||||
this.render();
|
||||
setSize(size_px) {
|
||||
const new_size_px = this.callbacks.set_size_override(this, size_px);
|
||||
if (isNumber(new_size_px)) {
|
||||
size_px = new_size_px;
|
||||
}
|
||||
this.elem.style.flexBasis = parseInt(size_px) + 'px';
|
||||
//this.render();
|
||||
return size_px;
|
||||
}
|
||||
|
||||
getSize() {
|
||||
|
|
@ -281,10 +305,11 @@ class ResizeGridItem {
|
|||
|
||||
class ResizeGridContainer {
|
||||
/** Class defining a collection of ResizeGridItem and ResizeGridHandle instances. */
|
||||
constructor({id, parent, elem} = {}) {
|
||||
constructor({id, parent, elem, callbacks} = {}) {
|
||||
this.id = isNullOrUndefined(id) ? _gen_id_string() : id;
|
||||
this.parent = parent;
|
||||
this.elem = elem;
|
||||
this.callbacks = callbacks;
|
||||
this.original_css_text = this.elem.style.cssText;
|
||||
|
||||
this.grid = [];
|
||||
|
|
@ -312,6 +337,7 @@ class ResizeGridContainer {
|
|||
id: id,
|
||||
parent: this,
|
||||
elem: elem,
|
||||
callbacks: this.callbacks,
|
||||
axis: 0,
|
||||
});
|
||||
row.genHandle('resize-grid--row-handle');
|
||||
|
|
@ -327,6 +353,7 @@ class ResizeGridContainer {
|
|||
id: id,
|
||||
parent: this,
|
||||
elem: elem,
|
||||
callbacks: this.callbacks,
|
||||
axis: 1,
|
||||
});
|
||||
col.genHandle('resize-grid--col-handle');
|
||||
|
|
@ -339,7 +366,8 @@ class ResizeGridContainer {
|
|||
|
||||
build() {
|
||||
/** Generates rows/cols based on this instance element's content. */
|
||||
let row_elems = Array.from(this.elem.querySelectorAll('.resize-grid--row'));
|
||||
let row_elems = Array.from(this.elem.querySelectorAll(":scope > .resize-grid--row"));
|
||||
|
||||
// If we do not have any rows, then we generate a single row to contain the cols.
|
||||
if (!row_elems.length) {
|
||||
const elem = document.createElement('div');
|
||||
|
|
@ -363,6 +391,9 @@ class ResizeGridContainer {
|
|||
row_elems.forEach((row_elem, i) => {
|
||||
this.addRow(id++, row_elem, i);
|
||||
const col_elems = row_elem.querySelectorAll('.resize-grid--col');
|
||||
if (col_elems.length === 1) {
|
||||
col_elems[0].style.flexGrow = 1;
|
||||
}
|
||||
col_elems.forEach((col_elem, j) => {
|
||||
this.addCol(id++, col_elem, i, j);
|
||||
});
|
||||
|
|
@ -760,10 +791,11 @@ class ResizeGrid {
|
|||
prev_dims = null;
|
||||
resize_observer = null;
|
||||
resize_observer_timer;
|
||||
constructor(id, elem) {
|
||||
constructor(id, elem, {callbacks}={}) {
|
||||
this.id = id;
|
||||
this.elem = elem;
|
||||
this.elem.dataset.gridId = this.id;
|
||||
this.callbacks = callbacks;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
|
@ -786,7 +818,11 @@ class ResizeGrid {
|
|||
this.container = null;
|
||||
}
|
||||
|
||||
this.container = new ResizeGridContainer(this, null, this.elem);
|
||||
this.container = new ResizeGridContainer({
|
||||
parent: this,
|
||||
elem: this.elem,
|
||||
callbacks: this.callbacks,
|
||||
});
|
||||
this.container.build();
|
||||
this.prev_dims = this.elem.getBoundingClientRect();
|
||||
this.setupEvents();
|
||||
|
|
@ -865,6 +901,12 @@ class ResizeGrid {
|
|||
|
||||
handle.elem.setPointerCapture(event.pointerId);
|
||||
|
||||
// Temporarily set styles for elements. These are cleared on pointerup.
|
||||
// See `onMove()` comments for more info.
|
||||
prev.elem.style.flexGrow = 0;
|
||||
next.elem.style.flexGrow = 1;
|
||||
next.elem.style.flexShrink = 1;
|
||||
|
||||
document.body.classList.add('resizing');
|
||||
if (handle.axis === 0) {
|
||||
document.body.classList.add('resizing-col');
|
||||
|
|
@ -925,6 +967,14 @@ class ResizeGrid {
|
|||
|
||||
handle.elem.releasePointerCapture(event.pointerId);
|
||||
|
||||
// Set the new flexBasis value for the `next` element then revert
|
||||
// the style changes set in the `pointerup` event.
|
||||
next.elem.style.flexBasis = next.setSize(next.getSize());
|
||||
prev.elem.style.flexGrow = Number(prev.is_flex_grow);
|
||||
next.elem.style.flexGrow = Number(next.is_flex_grow);
|
||||
next.elem.style.flexShrink = 0;
|
||||
|
||||
|
||||
document.body.classList.remove('resizing');
|
||||
document.body.classList.remove('resizing-col');
|
||||
document.body.classList.remove('resizing-row');
|
||||
|
|
@ -995,39 +1045,25 @@ class ResizeGrid {
|
|||
this.resize_observer_timer = null;
|
||||
}
|
||||
|
||||
onMove(event, prev, handle, next) {
|
||||
/** Handles pointermove events. */
|
||||
const par_dims = this.elem.getBoundingClientRect();
|
||||
const a_dims = prev.elem.getBoundingClientRect();
|
||||
const b_dims = next.elem.getBoundingClientRect();
|
||||
let pos = handle.axis === 0 ? parseInt(event.y) : parseInt(event.x);
|
||||
pos = Math.min(
|
||||
handle.axis === 0 ? parseInt(par_dims.height) : parseInt(par_dims.width),
|
||||
pos
|
||||
);
|
||||
const a_start =
|
||||
handle.axis === 0 ? parseInt(a_dims.top) : parseInt(a_dims.left);
|
||||
const b_end =
|
||||
handle.axis === 0 ? parseInt(b_dims.bottom) : parseInt(b_dims.right);
|
||||
|
||||
let a = pos - Math.floor(handle.pad_px / 2);
|
||||
let b = pos + Math.floor(handle.pad_px / 2);
|
||||
|
||||
let a_lim = a_start + prev.min_size;
|
||||
let b_lim = b_end - next.min_size;
|
||||
|
||||
if (a < a_lim) {
|
||||
a = a_lim;
|
||||
b = a + handle.pad_px;
|
||||
}
|
||||
|
||||
if (b > b_lim) {
|
||||
b = b_lim;
|
||||
a = b - handle.pad_px;
|
||||
}
|
||||
|
||||
prev.setSize(a - a_start);
|
||||
next.setSize(b_end - b);
|
||||
onMove(event, a, handle, b) {
|
||||
/** Handles pointermove events by calculating and setting new size of elements.
|
||||
*
|
||||
* While we are dragging the handle, we only manually set size for the
|
||||
* item before the handle. During this time, the element after the handle
|
||||
* should have flexGrow=1 and flexShrink=1 so that it can react to the size
|
||||
* of the element before the handle. This simplifies calculations since we
|
||||
* only have to do math for one side of handle.
|
||||
*/
|
||||
const a_dims = a.elem.getBoundingClientRect();
|
||||
const b_dims = b.elem.getBoundingClientRect();
|
||||
const a_start = Math.ceil(handle.axis === 0 ? a_dims.top : a_dims.left);
|
||||
const b_end = Math.floor(handle.axis === 0 ? b_dims.bottom : b_dims.right);
|
||||
const a_lim = a_start + a.min_size;
|
||||
const b_lim = b_end - b.min_size;
|
||||
const half_pad = Math.floor(handle.pad_px / 2);
|
||||
let pos = parseInt(handle.axis === 0 ? event.y : event.x);
|
||||
pos = Math.min(Math.max(pos, a_lim + half_pad), b_lim - half_pad);
|
||||
a.setSize((pos - half_pad) - a_start);
|
||||
}
|
||||
|
||||
onResize() {
|
||||
|
|
@ -1155,13 +1191,13 @@ function resizeGridGetGrid(elem) {
|
|||
return grid;
|
||||
}
|
||||
|
||||
function resizeGridSetup(elem, {id} = {}) {
|
||||
function resizeGridSetup(elem, {id, callbacks} = {}) {
|
||||
/** Sets up a new ResizeGrid instance for the provided element. */
|
||||
isElementThrowError(elem);
|
||||
if (!isString(id)) {
|
||||
id = _get_unique_id();
|
||||
}
|
||||
const grid = new ResizeGrid(id, elem);
|
||||
const grid = new ResizeGrid(id, elem, {callbacks: callbacks});
|
||||
grid.setup();
|
||||
resize_grids[id] = grid;
|
||||
return grid;
|
||||
|
|
|
|||
|
|
@ -266,9 +266,11 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
|
|||
"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_dets_view_default_enabled": OptionInfo(False, "Show the Extra Networks card details 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_dirs_view_default_height": OptionInfo(90, "Default height for the Directory Buttons view", gr.Number).info("in pixels").needs_reload_ui(),
|
||||
"extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).info("in pixels").needs_reload_ui(),
|
||||
"extra_networks_dets_view_default_width": OptionInfo(180, "Default width for the Extra Networks card details view", gr.Number).info("in pixels").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(),
|
||||
"textual_inversion_print_at_load": OptionInfo(False, "Print a list of Textual Inversion embeddings when loading model"),
|
||||
|
|
|
|||
|
|
@ -841,6 +841,38 @@ class ExtraNetworksPage:
|
|||
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
|
||||
dets_view_en = shared.opts.extra_networks_dets_view_default_enabled
|
||||
|
||||
btn_sort_mode_path_data_attributes = "data-selected" if sort_mode == "path" else ""
|
||||
btn_sort_mode_name_data_attributes = "data-selected" if sort_mode == "name" else ""
|
||||
btn_sort_mode_date_created_data_attributes = "data-selected" if sort_mode == "date_created" else ""
|
||||
btn_sort_mode_date_modified_data_attributes = "data-selected" if sort_mode == "date_modified" else ""
|
||||
btn_sort_dir_ascending_data_attributes = "data-selected" if sort_dir == "ascending" else ""
|
||||
btn_sort_dir_descending_data_attributes = "data-selected" if sort_dir == "descending" 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 ""
|
||||
btn_dets_view_data_attributes = "data-selected" if dets_view_en else ""
|
||||
|
||||
dirs_view_row_data_attributes = "data-min-size=\"5vh\""
|
||||
if not dirs_view_en:
|
||||
dirs_view_row_data_attributes += ""
|
||||
|
||||
main_row_data_attributes = "data-min-size=\"5vh\""
|
||||
if not tree_view_en and not card_view_en and not dets_view_en:
|
||||
main_row_data_attributes += ""
|
||||
|
||||
tree_view_col_data_attributes = "data-min-size=\"10vw\""
|
||||
if not tree_view_en:
|
||||
tree_view_col_data_attributes += ""
|
||||
|
||||
card_view_col_data_attributes = "data-min-size=\"10vw\""
|
||||
if not card_view_en:
|
||||
card_view_col_data_attributes += ""
|
||||
|
||||
dets_view_col_data_attributes = "data-min-size=\"10vw\""
|
||||
if not dets_view_en:
|
||||
dets_view_col_data_attributes += ""
|
||||
|
||||
dirs_view_row_size = shared.opts.extra_networks_dirs_view_default_height
|
||||
tree_view_size = shared.opts.extra_networks_tree_view_default_width
|
||||
|
|
@ -848,34 +880,42 @@ class ExtraNetworksPage:
|
|||
card_view_size = shared.opts.extra_networks_card_width
|
||||
else:
|
||||
card_view_size = 50
|
||||
dets_view_size = shared.opts.extra_networks_dets_view_default_width
|
||||
|
||||
dirs_view_row_style = f"flex: 0 0 {dirs_view_row_size}px;"
|
||||
main_row_style = "flex: 1 0 0px;" # expand to fill
|
||||
tree_view_col_style = f"flex: 0 0 {tree_view_size}px;"
|
||||
card_view_col_style = f"flex: 1 0 {card_view_size}px;"
|
||||
dets_view_col_style = f"flex: 0 0 {dets_view_size}px;"
|
||||
|
||||
return self.pane_tpl.format(
|
||||
**{
|
||||
"tabname": tabname,
|
||||
"extra_networks_tabname": self.extra_networks_tabname,
|
||||
"btn_sort_mode_path_data_attributes": "data-selected" if sort_mode == "path" else "",
|
||||
"btn_sort_mode_name_data_attributes": "data-selected" if sort_mode == "name" else "",
|
||||
"btn_sort_mode_date_created_data_attributes": "data-selected" if sort_mode == "date_created" else "",
|
||||
"btn_sort_mode_date_modified_data_attributes": "data-selected" if sort_mode == "date_modified" else "",
|
||||
"btn_sort_dir_ascending_data_attributes": "data-selected" if sort_dir == "ascending" else "",
|
||||
"btn_sort_dir_descending_data_attributes": "data-selected" if sort_dir == "descending" 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 "",
|
||||
"dirs_view_row_style": f"flex: 0 0 {dirs_view_row_size}px;",
|
||||
"tree_and_card_view_row_style": "flex: 1 0 0px;", # expand to fill
|
||||
"tree_view_style": f"flex: 0 0 {tree_view_size}px;",
|
||||
"card_view_style": f"flex: 1 0 {card_view_size}px;",
|
||||
"dirs_view_row_data_attributes": "data-min-size=\"5vh\"",
|
||||
"tree_and_card_view_row_data_attributes": "data-min-size=\"5vh\"",
|
||||
"tree_view_data_attributes": "data-min-size=\"10vw\"",
|
||||
"card_view_data_attributes": "data-min-size=\"10vw\"",
|
||||
"dirs_html": dirs_html,
|
||||
"card_list_loading_splash_content": card_list_loading_splash_content,
|
||||
"card_list_no_data_splash_content": card_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,
|
||||
}
|
||||
tabname=tabname,
|
||||
extra_networks_tabname=self.extra_networks_tabname,
|
||||
btn_sort_mode_path_data_attributes=btn_sort_mode_path_data_attributes,
|
||||
btn_sort_mode_name_data_attributes=btn_sort_mode_name_data_attributes,
|
||||
btn_sort_mode_date_created_data_attributes=btn_sort_mode_date_created_data_attributes,
|
||||
btn_sort_mode_date_modified_data_attributes=btn_sort_mode_date_modified_data_attributes,
|
||||
btn_sort_dir_ascending_data_attributes=btn_sort_dir_ascending_data_attributes,
|
||||
btn_sort_dir_descending_data_attributes=btn_sort_dir_descending_data_attributes,
|
||||
btn_dirs_view_data_attributes=btn_dirs_view_data_attributes,
|
||||
btn_tree_view_data_attributes=btn_tree_view_data_attributes,
|
||||
btn_card_view_data_attributes=btn_card_view_data_attributes,
|
||||
btn_dets_view_data_attributes=btn_dets_view_data_attributes,
|
||||
dirs_view_row_style=dirs_view_row_style,
|
||||
main_row_style=main_row_style,
|
||||
tree_view_col_style=tree_view_col_style,
|
||||
card_view_col_style=card_view_col_style,
|
||||
dets_view_col_style=dets_view_col_style,
|
||||
dirs_view_row_data_attributes=dirs_view_row_data_attributes,
|
||||
main_row_data_attributes=main_row_data_attributes,
|
||||
tree_view_col_data_attributes=tree_view_col_data_attributes,
|
||||
card_view_col_data_attributes=card_view_col_data_attributes,
|
||||
dets_view_col_data_attributes=dets_view_col_data_attributes,
|
||||
dirs_html=dirs_html,
|
||||
card_list_loading_splash_content=card_list_loading_splash_content,
|
||||
card_list_no_data_splash_content=card_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,
|
||||
)
|
||||
|
||||
def create_item(self, name, index=None):
|
||||
|
|
|
|||
63
style.css
63
style.css
|
|
@ -1200,37 +1200,34 @@ body.resizing.resize-grid-row {
|
|||
}
|
||||
|
||||
/* ==== RESIZE HANDLE GRID ==== */
|
||||
.resize-grid {
|
||||
|
||||
.resize-grid, .resize-grid--row, .resize-grid--col {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
gap: 0 !important; /* prevent gap between handle and cells. */
|
||||
/* prevent elements from oversizing the container. */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.resize-grid {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* prevent elements from oversizing the container. */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.resize-grid--row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
flex-wrap: nowrap;
|
||||
/* prevent elements from oversizing the container. */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.resize-grid--col {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
flex-wrap: nowrap;
|
||||
/* prevent elements from oversizing the container. */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.resize-grid--cell {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.resize-grid--handle {
|
||||
|
|
@ -1316,20 +1313,22 @@ body.resizing.resize-grid-row {
|
|||
.extra-network-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
gap: var(--spacing-sm);
|
||||
border: 1px solid var(--block-border-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* prevent children from oversizing this container */
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.extra-network-content--container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Dirs View needs a different display style. */
|
||||
.extra-network-content--dirs-view {
|
||||
display: block;
|
||||
flex: 1;
|
||||
|
|
@ -1342,10 +1341,6 @@ body.resizing.resize-grid-row {
|
|||
margin: var(--spacing-xs) !important;
|
||||
}
|
||||
|
||||
.extra-network-content--main-view {
|
||||
min-height: 0; /* prevent children from oversizing this container */
|
||||
}
|
||||
|
||||
.extra-network-content.resize-handle-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1371,16 +1366,6 @@ body.resizing.resize-grid-row {
|
|||
}
|
||||
*/
|
||||
|
||||
.extra-network-content--tree-view {
|
||||
display: flex;
|
||||
border: 1px solid var(--block-border-color);
|
||||
}
|
||||
|
||||
.extra-network-content--card-view {
|
||||
display: flex;
|
||||
border: 1px solid var(--block-border-color);
|
||||
}
|
||||
|
||||
.extra-network-controls-div {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue