From 6fa3b357c3facccde1650ed8eeaf19343b8a4a13 Mon Sep 17 00:00:00 2001
From: EtSL33py <dimone48@mail.ru>
Date: Mon, 23 Sep 2024 20:19:38 +0300
Subject: [PATCH] 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),