From b0913a73e47ffe3f1af6bc6e1f88f977b3947e75 Mon Sep 17 00:00:00 2001 From: EtSL33py Date: Mon, 23 Sep 2024 15:42:33 +0300 Subject: [PATCH 1/2] Added preview size sliders to settings --- __init__.py | 2 ++ web/model-manager.css | 7 ++++-- web/model-manager.js | 58 ++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 61 insertions(+), 6 deletions(-) diff --git a/__init__.py b/__init__.py index 111e564..a8c112b 100644 --- a/__init__.py +++ b/__init__.py @@ -183,6 +183,8 @@ 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), diff --git a/web/model-manager.css b/web/model-manager.css index 33fcd14..7c222cd 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; diff --git a/web/model-manager.js b/web/model-manager.js index 0f9a28d..2005ded 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,10 @@ 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); if (models.length > 0) { const $overlay = IS_FIREFOX @@ -2092,8 +2094,8 @@ class ModelGrid { src: imageUri( previewInfo?.path, previewInfo?.dateModified, - PREVIEW_THUMBNAIL_WIDTH, - PREVIEW_THUMBNAIL_HEIGHT, + previewThumbnailWidth, + previewThumbnailHeight, previewThumbnailFormat, ), draggable: false, @@ -4361,6 +4363,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, @@ -4632,6 +4636,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'] = @@ -5448,6 +5480,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 = () => { From 6fa3b357c3facccde1650ed8eeaf19343b8a4a13 Mon Sep 17 00:00:00 2001 From: EtSL33py Date: Mon, 23 Sep 2024 20:19:38 +0300 Subject: [PATCH 2/2] Added 'Show buttons on hover only' setting for preview buttons --- __init__.py | 1 + web/model-manager.css | 10 +++++++++- web/model-manager.js | 13 +++++++++++-- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/__init__.py b/__init__.py index a8c112b..f63cc65 100644 --- a/__init__.py +++ b/__init__.py @@ -190,6 +190,7 @@ def ui_rules(): 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 7c222cd..394185e 100644 --- a/web/model-manager.css +++ b/web/model-manager.css @@ -492,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; @@ -506,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 2005ded..551c11f 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -2044,6 +2044,8 @@ class ModelGrid { 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 @@ -2085,6 +2087,8 @@ class ModelGrid { draggable: true, }); }); + const forHiddingButtonsClass = buttonsOnlyOnHover + ? 'model-buttons-hidden' : 'model-buttons-visible'; return models.map((item) => { const previewInfo = item.preview; @@ -2182,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, }, @@ -4372,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, @@ -4690,6 +4695,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),