diff --git a/__init__.py b/__init__.py index 111e564..f63cc65 100644 --- a/__init__.py +++ b/__init__.py @@ -183,11 +183,14 @@ def ui_rules(): Rule("model-preview-thumbnail-type", "AUTO", str), Rule("model-preview-fallback-search-safetensors-thumbnail", False, bool), + Rule("model-preview-thumbnail-width", 240, int, 150, 480), + Rule("model-preview-thumbnail-height", 360, int, 185, 480), Rule("model-show-label-extensions", False, bool), Rule("model-show-add-button", True, bool), Rule("model-show-copy-button", True, bool), Rule("model-show-load-workflow-button", True, bool), Rule("model-info-button-on-left", False, bool), + Rule("model-buttons-only-on-hover", False, bool), Rule("model-add-embedding-extension", False, bool), Rule("model-add-drag-strict-on-field", False, bool), diff --git a/web/model-manager.css b/web/model-manager.css index 33fcd14..394185e 100644 --- a/web/model-manager.css +++ b/web/model-manager.css @@ -51,6 +51,9 @@ --model-manager-sidebar-height-top: 50vh; --model-manager-sidebar-height-bottom: 50vh; + --model-manager-thumbnail-width: 240px; + --model-manager-thumbnail-height: 360px; + --model-manager-left: 0; --model-manager-right: 0; --model-manager-top: 0; @@ -399,8 +402,8 @@ /* preview image */ .model-manager .item { position: relative; - width: 240px; - height: 360px; + width: var(--model-manager-thumbnail-width);; + height: var(--model-manager-thumbnail-height);; text-align: center; overflow: hidden; border-radius: 8px; @@ -489,7 +492,6 @@ .model-manager .comfy-grid .model-preview-top-right, .model-manager .comfy-grid .model-preview-top-left { position: absolute; - display: flex; flex-direction: column; gap: 8px; top: 8px; @@ -503,6 +505,15 @@ left: 8px; } +.model-manager .item .model-buttons-hidden { + display: none; +} + +.model-manager .item:hover .model-buttons-hidden, +.model-manager .comfy-grid .model-buttons-visible { + display: flex; +} + .model-manager .comfy-grid .model-button { opacity: 0.65; } diff --git a/web/model-manager.js b/web/model-manager.js index ae045d1..4a8413b 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -250,8 +250,6 @@ function imageUri( return uri; } const PREVIEW_NONE_URI = imageUri(); -const PREVIEW_THUMBNAIL_WIDTH = 320; -const PREVIEW_THUMBNAIL_HEIGHT = 480; /** * @@ -2042,6 +2040,12 @@ class ModelGrid { !settingsElements['model-add-embedding-extension'].checked; const previewThumbnailFormat = settingsElements['model-preview-thumbnail-type'].value; + const previewThumbnailWidth = + Math.round(settingsElements['model-preview-thumbnail-width'].value / 0.75); + const previewThumbnailHeight = + Math.round(settingsElements['model-preview-thumbnail-height'].value / 0.75); + const buttonsOnlyOnHover = + settingsElements['model-buttons-only-on-hover'].checked; if (models.length > 0) { const $overlay = IS_FIREFOX @@ -2083,6 +2087,8 @@ class ModelGrid { draggable: true, }); }); + const forHiddingButtonsClass = buttonsOnlyOnHover + ? 'model-buttons-hidden' : 'model-buttons-visible'; return models.map((item) => { const previewInfo = item.preview; @@ -2092,8 +2098,8 @@ class ModelGrid { src: imageUri( previewInfo?.path, previewInfo?.dateModified, - PREVIEW_THUMBNAIL_WIDTH, - PREVIEW_THUMBNAIL_HEIGHT, + previewThumbnailWidth, + previewThumbnailHeight, previewThumbnailFormat, ), draggable: false, @@ -2180,14 +2186,14 @@ class ModelGrid { strictDragToAdd, ), $el( - 'div.model-preview-top-right', + 'div.model-preview-top-right.' + forHiddingButtonsClass, { draggable: false, }, modelInfoButtonOnLeft ? infoButtons : actionButtons, ), $el( - 'div.model-preview-top-left', + 'div.model-preview-top-left.' + forHiddingButtonsClass, { draggable: false, }, @@ -4361,6 +4367,8 @@ class SettingsView { /** @type {HTMLInputElement} */ 'model-persistent-search': null, /** @type {HTMLInputElement} */ 'model-preview-thumbnail-type': null, + /** @type {HTMLInputElement} */ 'model-preview-thumbnail-width': null, + /** @type {HTMLInputElement} */ 'model-preview-thumbnail-height': null, /** @type {HTMLInputElement} */ 'model-preview-fallback-search-safetensors-thumbnail': null, /** @type {HTMLInputElement} */ 'model-show-label-extensions': null, @@ -4368,6 +4376,7 @@ class SettingsView { /** @type {HTMLInputElement} */ 'model-show-copy-button': null, /** @type {HTMLInputElement} */ 'model-show-load-workflow-button': null, /** @type {HTMLInputElement} */ 'model-info-button-on-left': null, + /** @type {HTMLInputElement} */ 'model-buttons-only-on-hover': null, /** @type {HTMLInputElement} */ 'model-add-embedding-extension': null, /** @type {HTMLInputElement} */ 'model-add-drag-strict-on-field': null, @@ -4628,6 +4637,34 @@ class SettingsView { textContent: 'Preview thumbnail type', options: ['AUTO', 'JPEG'], // should use AUTO to avoid artifacts from changing between formats; use JPEG for backward compatibility }), + $el('label', [ + 'Preview thumbnail width', + $el('input', { + $: (el) => (settings['model-preview-thumbnail-width'] = el), + type: 'range', + name: 'default thumbnail width', + value: 240, + min: 150, + max: 480, + step: 5, + oninput: function(){ this.nextElementSibling.textContent = this.value + 'px'}, + }), + $el('span'), + ]), + $el('label', [ + 'Preview thumbnail height', + $el('input', { + $: (el) => (settings['model-preview-thumbnail-height'] = el), + type: 'range', + name: 'default thumbnail height', + value: 360, + min: 185, + max: 480, + step: 5, + oninput: function(){ this.nextElementSibling.textContent = this.value + 'px'}, + }), + $el('span'), + ]), $checkbox({ $: (el) => (settings['model-preview-fallback-search-safetensors-thumbnail'] = @@ -4654,6 +4691,10 @@ class SettingsView { $: (el) => (settings['model-info-button-on-left'] = el), textContent: '"Model Info" button on left', }), + $checkbox({ + $: (el) => (settings['model-buttons-only-on-hover'] = el), + textContent: 'Show buttons on hover only', + }), $el('h2', ['Node Graph']), $checkbox({ $: (el) => (settings['model-add-embedding-extension'] = el), @@ -5443,6 +5484,24 @@ class ModelManager extends ComfyDialog { this.#downloadView.elements.clearSearchButton.style.display = hideClearSearchButtons ? 'none' : ''; } + + { + // update thumbnail widths & heights + const thumbnailWidthEl = settings['model-preview-thumbnail-width']; + const thumbnailHeightEl = settings['model-preview-thumbnail-height']; + + this.element.style.setProperty( + '--model-manager-thumbnail-width', + thumbnailWidthEl.value.toString() + 'px', + ); + thumbnailWidthEl.dispatchEvent(new Event('input')); + + this.element.style.setProperty( + '--model-manager-thumbnail-height', + thumbnailHeightEl.value.toString() + 'px', + ); + thumbnailHeightEl.dispatchEvent(new Event('input')); + } } #resetManagerContentsScroll = () => {