From ab5532c8e6d42046d4294c4f594466d1dd341e6c Mon Sep 17 00:00:00 2001 From: EtSL33py Date: Thu, 19 Sep 2024 11:47:34 +0300 Subject: [PATCH 1/5] upd --- __init__.py | 1 + web/model-manager.css | 20 ++++++++++++++------ web/model-manager.js | 33 +++++++++++++++++++++++++-------- 3 files changed, 40 insertions(+), 14 deletions(-) diff --git a/__init__.py b/__init__.py index 6aadb9b..09af7e3 100644 --- a/__init__.py +++ b/__init__.py @@ -200,6 +200,7 @@ def ui_rules(): Rule("sidebar-control-always-compact", False, bool), Rule("sidebar-default-width", 0.5, float, 0.0, 1.0), Rule("sidebar-default-height", 0.5, float, 0.0, 1.0), + Rule("sidebar-default-state", "left", str), Rule("text-input-always-hide-search-button", False, bool), Rule("text-input-always-hide-clear-button", False, bool), diff --git a/web/model-manager.css b/web/model-manager.css index 305ced2..33fcd14 100644 --- a/web/model-manager.css +++ b/web/model-manager.css @@ -10,7 +10,7 @@ position: fixed; overflow: hidden; width: 100%; - z-index: 2000; + z-index: 1100; /*override comfy-modal settings*/ border-radius: 0; @@ -87,6 +87,7 @@ overflow: hidden; color: var(--input-text); display: flex; + gap: 2px; flex-direction: row-reverse; flex-wrap: wrap; } @@ -148,7 +149,7 @@ width: 100%; } -.model-manager button { +.model-manager button, .model-manager .model-manager-head .topbar-right select { margin: 0; border: 2px solid var(--border-color); } @@ -168,6 +169,11 @@ cursor: not-allowed; } +.model-manager select:hover{ + filter: brightness(1.2); + cursor: pointer; +} + .model-manager button.block { width: 100%; } @@ -248,7 +254,7 @@ .model-manager .model-tab-group { display: flex; gap: 4px; - height: 40px; + height: 44px; } .model-manager .model-tab-group .tab-button { @@ -264,6 +270,7 @@ .model-manager .model-tab-group .tab-button.active { background-color: var(--bg-color); + margin-bottom: -2px; cursor: default; position: relative; z-index: 1; @@ -451,7 +458,7 @@ } .model-manager .comfy-grid .model-label { - background-color: rgb(from var(--content-hover-bg) r g b / 0.5); + background-color: rgb(from var(--content-hover-bg) r g b / 0.6); width: 100%; height: 2.2rem; position: absolute; @@ -589,7 +596,8 @@ position: relative; top: 0; bottom: 0; - font-size: 24px; + font-size: 20px; + text-align-last: center; -o-appearance: none; -ms-appearance: none; -webkit-appearance: none; @@ -690,7 +698,7 @@ .model-manager .model-manager-settings input[type="number"], .model-manager .tag-generator-settings input[type="number"]{ - width: 50px; + width: 60px; } .model-manager .search-settings-text { diff --git a/web/model-manager.js b/web/model-manager.js index fd55c67..714613f 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -2095,10 +2095,7 @@ class ModelGrid { systemSeparator, ); let actionButtons = []; - if ( - showAddButton && - !(modelType === 'embeddings' && !navigator.clipboard) - ) { + if (showCopyButton) { actionButtons.push( new ComfyButton({ icon: 'content-copy', @@ -2114,7 +2111,7 @@ class ModelGrid { }).element, ); } - if (showCopyButton) { + if (showAddButton && !(modelType === 'embeddings' && !navigator.clipboard)) { actionButtons.push( new ComfyButton({ icon: 'plus-box-outline', @@ -4394,6 +4391,9 @@ class SettingsView { /** @return {() => Promise} */ #updateModels = () => {}; + /** @return {() => void} */ + #updateSidebarSettings = () => {}; + /** * @param {Object} settingsData * @param {boolean} updateModels @@ -4427,6 +4427,8 @@ class SettingsView { } } + this.#updateSidebarSettings(settings); + if (updateModels) { await this.#updateModels(); // Is this slow? } @@ -4491,9 +4493,11 @@ class SettingsView { /** * @param {() => Promise} updateModels * @param {() => void} updateSidebarButtons + * @param {(settings: Object) => void} updateSidebarSettings */ - constructor(updateModels, updateSidebarButtons) { + constructor(updateModels, updateSidebarButtons, updateSidebarSettings) { this.#updateModels = updateModels; + this.#updateSidebarSettings = updateSidebarSettings; const settings = this.elements.settings; const sidebarControl = $checkbox({ @@ -4569,6 +4573,7 @@ class SettingsView { { style: { color: 'var(--fg-color)' }, href: 'https://github.com/hayden-fr/ComfyUI-Model-Manager/issues/', + target: '_blank', }, ['File bugs and issues here.'], ), @@ -4604,6 +4609,11 @@ class SettingsView { 'vae_approx', ], }), + $select({ + $: (el) => (settings['sidebar-default-state'] = el), + textContent: 'Default model manager position', + options: ['left', 'right', 'top', 'bottom', 'none'], + }), $checkbox({ $: (el) => (settings['model-real-time-search'] = el), textContent: 'Real-time search', @@ -4833,6 +4843,7 @@ function GenerateSidebarToggleRadioAndSelect(labels, activationCallbacks = []) { 'select', { name: 'sidebar-select', + classList: 'icon-button', onchange: (event) => { const select = event.target; const children = select.children; @@ -4970,6 +4981,7 @@ class ModelManager extends ComfyDialog { this.#settingsView = new SettingsView(this.#refreshModels, () => this.#updateSidebarButtons(), + this.#updateSidebarSettings, ); this.#modelInfo = new ModelInfo( @@ -5350,9 +5362,13 @@ class ModelManager extends ComfyDialog { async #init() { await this.#settingsView.reload(false); await this.#refreshModels(); + } - const settings = this.#settingsView.elements.settings; - + /** + * @param {settings: Object} + * @return {void} + */ + #updateSidebarSettings = (settings) => { { // initialize buttons' visibility state const hideSearchButtons = @@ -5374,6 +5390,7 @@ class ModelManager extends ComfyDialog { const xDecimal = settings['sidebar-default-width'].value; const yDecimal = settings['sidebar-default-height'].value; + this.element.dataset['sidebarState'] = settings['sidebar-default-state'].value; this.element.dataset['sidebarLeftWidthDecimal'] = xDecimal; this.element.dataset['sidebarRightWidthDecimal'] = xDecimal; this.element.dataset['sidebarTopHeightDecimal'] = yDecimal; From 844f286f24ed8e992f442ec1de55296aa2799002 Mon Sep 17 00:00:00 2001 From: EtSL33py Date: Thu, 19 Sep 2024 15:04:50 +0300 Subject: [PATCH 2/5] buttons are updated when default position is changed --- __init__.py | 2 +- web/model-manager.js | 31 ++++++++++++++++++------------- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/__init__.py b/__init__.py index 09af7e3..5258cd5 100644 --- a/__init__.py +++ b/__init__.py @@ -200,7 +200,7 @@ def ui_rules(): Rule("sidebar-control-always-compact", False, bool), Rule("sidebar-default-width", 0.5, float, 0.0, 1.0), Rule("sidebar-default-height", 0.5, float, 0.0, 1.0), - Rule("sidebar-default-state", "left", str), + Rule("sidebar-default-state", "Left", str), Rule("text-input-always-hide-search-button", False, bool), Rule("text-input-always-hide-clear-button", False, bool), diff --git a/web/model-manager.js b/web/model-manager.js index 714613f..c7caea4 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -4612,7 +4612,7 @@ class SettingsView { $select({ $: (el) => (settings['sidebar-default-state'] = el), textContent: 'Default model manager position', - options: ['left', 'right', 'top', 'bottom', 'none'], + options: ['Left', 'Right', 'Top', 'Bottom', 'None'], }), $checkbox({ $: (el) => (settings['model-real-time-search'] = el), @@ -4922,9 +4922,7 @@ function GenerateSidebarToggleRadioAndSelect(labels, activationCallbacks = []) { ); } radioButtonGroup.append.apply(radioButtonGroup, buttons); - buttons[0].click(); buttons[0].style.display = 'none'; - return [radioButtonGroup, select]; } @@ -5031,11 +5029,7 @@ class ModelManager extends ComfyDialog { ['◼', '◨', '⬒', '⬓', '◧'], [ () => { - const element = this.element; - if (element) { - // callback on initialization as default state - element.dataset['sidebarState'] = 'none'; - } + this.element.dataset['sidebarState'] = 'none'; }, () => { this.element.dataset['sidebarState'] = 'right'; @@ -5364,11 +5358,23 @@ class ModelManager extends ComfyDialog { await this.#refreshModels(); } - /** - * @param {settings: Object} - * @return {void} - */ #updateSidebarSettings = (settings) => { + + const newSidebarState = settings['sidebar-default-state'].value; + let buttonNumb = 0; + if (newSidebarState === 'Left') { + buttonNumb = 4; + } else if (newSidebarState === 'Right') { + buttonNumb = 1; + } else if (newSidebarState === 'Top') { + buttonNumb = 2; + } else if (newSidebarState === 'Bottom') { + buttonNumb = 3; + } + if(!this.#sidebarButtonGroup.children[buttonNumb].classList.contains('radio-button-group-active')){ + this.#sidebarButtonGroup.children[buttonNumb].click(); + } + { // initialize buttons' visibility state const hideSearchButtons = @@ -5390,7 +5396,6 @@ class ModelManager extends ComfyDialog { const xDecimal = settings['sidebar-default-width'].value; const yDecimal = settings['sidebar-default-height'].value; - this.element.dataset['sidebarState'] = settings['sidebar-default-state'].value; this.element.dataset['sidebarLeftWidthDecimal'] = xDecimal; this.element.dataset['sidebarRightWidthDecimal'] = xDecimal; this.element.dataset['sidebarTopHeightDecimal'] = yDecimal; From 7a5d19eeec65426472760946532779ce08fafb10 Mon Sep 17 00:00:00 2001 From: EtSL33py Date: Fri, 20 Sep 2024 03:30:11 +0300 Subject: [PATCH 3/5] defauls state is None, state and sizes are not updated when Save or Reload is pressed --- __init__.py | 2 +- web/model-manager.js | 65 ++++++++++++++++++++++++-------------------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/__init__.py b/__init__.py index 5258cd5..111e564 100644 --- a/__init__.py +++ b/__init__.py @@ -200,7 +200,7 @@ def ui_rules(): Rule("sidebar-control-always-compact", False, bool), Rule("sidebar-default-width", 0.5, float, 0.0, 1.0), Rule("sidebar-default-height", 0.5, float, 0.0, 1.0), - Rule("sidebar-default-state", "Left", str), + Rule("sidebar-default-state", "None", str), Rule("text-input-always-hide-search-button", False, bool), Rule("text-input-always-hide-clear-button", False, bool), diff --git a/web/model-manager.js b/web/model-manager.js index c7caea4..b23e06d 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -4611,7 +4611,7 @@ class SettingsView { }), $select({ $: (el) => (settings['sidebar-default-state'] = el), - textContent: 'Default model manager position', + textContent: 'Default model manager position (on start up)', options: ['Left', 'Right', 'Top', 'Bottom', 'None'], }), $checkbox({ @@ -5356,37 +5356,27 @@ class ModelManager extends ComfyDialog { async #init() { await this.#settingsView.reload(false); await this.#refreshModels(); - } - #updateSidebarSettings = (settings) => { - - const newSidebarState = settings['sidebar-default-state'].value; - let buttonNumb = 0; - if (newSidebarState === 'Left') { - buttonNumb = 4; - } else if (newSidebarState === 'Right') { - buttonNumb = 1; - } else if (newSidebarState === 'Top') { - buttonNumb = 2; - } else if (newSidebarState === 'Bottom') { - buttonNumb = 3; - } - if(!this.#sidebarButtonGroup.children[buttonNumb].classList.contains('radio-button-group-active')){ - this.#sidebarButtonGroup.children[buttonNumb].click(); - } - + const settings = this.#settingsView.elements.settings; + { - // initialize buttons' visibility state - const hideSearchButtons = - settings['text-input-always-hide-search-button'].checked; - const hideClearSearchButtons = - settings['text-input-always-hide-clear-button'].checked; - this.#downloadView.elements.searchButton.style.display = hideSearchButtons - ? 'none' - : ''; - this.#downloadView.elements.clearSearchButton.style.display = - hideClearSearchButtons ? 'none' : ''; - } + // set initial sidebar state + const newSidebarState = settings['sidebar-default-state'].value; + let buttonNumb = 0; + if (newSidebarState === 'Right') { + buttonNumb = 1; + } else if (newSidebarState === 'Top') { + buttonNumb = 2; + } else if (newSidebarState === 'Bottom') { + buttonNumb = 3; + } else if (newSidebarState === 'Left') { + buttonNumb = 4; + } + const button = this.#sidebarButtonGroup.children[buttonNumb]; + if(!button.classList.contains('radio-button-group-active')){ + button.click(); + } + } { // set initial sidebar widths & heights @@ -5430,6 +5420,21 @@ class ModelManager extends ComfyDialog { } } + #updateSidebarSettings = (settings) => { + { + // update buttons' visibility state + const hideSearchButtons = + settings['text-input-always-hide-search-button'].checked; + const hideClearSearchButtons = + settings['text-input-always-hide-clear-button'].checked; + this.#downloadView.elements.searchButton.style.display = hideSearchButtons + ? 'none' + : ''; + this.#downloadView.elements.clearSearchButton.style.display = + hideClearSearchButtons ? 'none' : ''; + } + } + #resetManagerContentsScroll = () => { this.#tabManagerContents.scrollTop = 0; }; From 5abbd0ccb893a20cbab85f8c0052ad32cc3ef320 Mon Sep 17 00:00:00 2001 From: EtSL33py Date: Fri, 20 Sep 2024 03:35:02 +0300 Subject: [PATCH 4/5] Update model-manager.js --- web/model-manager.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/web/model-manager.js b/web/model-manager.js index b23e06d..a95c940 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -5372,10 +5372,7 @@ class ModelManager extends ComfyDialog { } else if (newSidebarState === 'Left') { buttonNumb = 4; } - const button = this.#sidebarButtonGroup.children[buttonNumb]; - if(!button.classList.contains('radio-button-group-active')){ - button.click(); - } + this.#sidebarButtonGroup.children[buttonNumb].click(); } { From 81739c6d219cdfaf3a51ec522bb91d7cb00394e7 Mon Sep 17 00:00:00 2001 From: EtSL33py Date: Fri, 20 Sep 2024 03:37:45 +0300 Subject: [PATCH 5/5] Update model-manager.js --- web/model-manager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/model-manager.js b/web/model-manager.js index a95c940..1e391b7 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -5373,7 +5373,7 @@ class ModelManager extends ComfyDialog { buttonNumb = 4; } this.#sidebarButtonGroup.children[buttonNumb].click(); - } + } { // set initial sidebar widths & heights