TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed sidebar buttons/select to update automatically on setting change.

Browse Source
This commit is contained in:
Christian Bastian
2024-07-23 15:43:10 -04:00
parent debb0dd07b
commit 3cb8d1b5bd
1 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/model-manager.js
View File

@@ -3500,10 +3500,20 @@ class SettingsView {
/**
* @param {() => Promise<void>} updateModels
* @param {() => void} updateSidebarButtons
*/
constructor(updateModels) {
constructor(updateModels, updateSidebarButtons) {
this.#updateModels = updateModels;
const settings = this.elements.settings;
const sidebarControl = $checkbox({
$: (el) => (settings["sidebar-control-always-compact"] = el),
textContent: "Sidebar controls always compact",
});
sidebarControl.getElementsByTagName('input')[0].addEventListener("change", () => {
updateSidebarButtons();
});
$el("div.model-manager-settings", {
$: (el) => (this.element = el),
}, [
@@ -3602,10 +3612,7 @@ class SettingsView {
textContent: "Save model descriptions in .txt files by default.",
}),
$el("h2", ["Window"]),
$checkbox({
$: (el) => (settings["sidebar-control-always-compact"] = el),
textContent: "Sidebar controls always compact (requires window resize or page refresh to recalculate)",
}),
sidebarControl,
/*
$el("div", [
$el("p", ["Default sidebar width"]),
@@ -3857,6 +3864,12 @@ class ModelManager extends ComfyDialog {
/** @type {HTMLDivElement} */
#tabInfoContents = null;
/** @type {HTMLButtonElement} */
#sidebarButtonGroup = null;
/** @type {HTMLButtonElement} */
#sidebarSelect = null;
/** @type {HTMLButtonElement} */
#closeModelInfoButton = null;
@@ -3867,6 +3880,7 @@ class ModelManager extends ComfyDialog {
this.#settingsView = new SettingsView(
this.#refreshModels,
() => this.#updateSidebarButtons(),
);
this.#modelInfo = new ModelInfo(
@@ -3914,6 +3928,8 @@ class ModelManager extends ComfyDialog {
() => { this.element.dataset["sidebarState"] = "left"; },
],
);
this.#sidebarButtonGroup = sidebarButtonGroup;
this.#sidebarSelect = sidebarSelect;
sidebarButtonGroup.classList.add("sidebar-buttons");
const sidebarButtonGroupChildren = sidebarButtonGroup.children;
for (let i = 0; i < sidebarButtonGroupChildren.length; i++) {
@@ -3980,19 +3996,7 @@ class ModelManager extends ComfyDialog {
new ResizeObserver(GenerateDynamicTabTextCallback(modelManager, tabManagerButtons, 768)).observe(modelManager);
new ResizeObserver(GenerateDynamicTabTextCallback(modelManager, tabInfoButtons, 768)).observe(modelManager);
new ResizeObserver(() => {
const managerRect = document.body.getBoundingClientRect();
const isNarrow = managerRect.width < 768; // TODO: `minWidth` is a magic value
const alwaysShowCompactSidebarControls = this.#settingsView.elements.settings["sidebar-control-always-compact"].checked;
if (isNarrow || alwaysShowCompactSidebarControls) {
sidebarButtonGroup.style.display = "none";
sidebarSelect.style.display = "";
}
else {
sidebarButtonGroup.style.display = "";
sidebarSelect.style.display = "none";
}
}).observe(modelManager);
new ResizeObserver(() => this.#updateSidebarButtons()).observe(modelManager);
this.#init();
}
@@ -4062,6 +4066,20 @@ class ModelManager extends ComfyDialog {
}
return true;
}
#updateSidebarButtons = () => {
const managerRect = document.body.getBoundingClientRect();
const isNarrow = managerRect.width < 768; // TODO: `minWidth` is a magic value
const alwaysShowCompactSidebarControls = this.#settingsView.elements.settings["sidebar-control-always-compact"].checked;
if (isNarrow || alwaysShowCompactSidebarControls) {
this.#sidebarButtonGroup.style.display = "none";
this.#sidebarSelect.style.display = "";
}
else {
this.#sidebarButtonGroup.style.display = "";
this.#sidebarSelect.style.display = "none";
}
}
}
/** @type {ModelManager | undefined} */