From ab5532c8e6d42046d4294c4f594466d1dd341e6c Mon Sep 17 00:00:00 2001 From: EtSL33py Date: Thu, 19 Sep 2024 11:47:34 +0300 Subject: [PATCH] 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;