From c67f0c52a2a4c54fc55ae276a7322f169ed6bdf1 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 16 Jan 2024 13:14:04 +1100
Subject: [PATCH] Show edit button only when hover image

This required some branching in the haml, which would be nice to avoid. But we have more work to do here so we'll refactor at the end.
---
 app/views/admin/products_v3/_table.html.haml | 11 +++++++----
 app/webpacker/css/admin/products_v3.scss     | 16 ++++++++++------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
index 4ad0d5663e..c508972722 100644
--- a/app/views/admin/products_v3/_table.html.haml
+++ b/app/views/admin/products_v3/_table.html.haml
@@ -49,10 +49,13 @@
         %tbody.relaxed{ 'data-record-id': product_form.object.id }
           %tr
             %td.with-image
-              .image-field
-                = image_tag product.image&.url(:mini) || Spree::Image.default_image_url(:mini), width: 40, height: 40
-                - if product.image.present?
-                  = link_to t('admin.products_page.image.edit'), edit_admin_product_image_path(product, product.image), class: "button secondary mini", "data-controller": "modal", "data-reflex": "click->products#edit_image", "data-current-id": product.id
+              - if product.image.present?
+                %a.image-field{ href: edit_admin_product_image_path(product, product.image), data: { controller: "modal", reflex: "click->products#edit_image", "current-id": product.id} }
+                  = image_tag product.image&.url(:mini), width: 40, height: 40
+                  .button.secondary.mini= t('admin.products_page.image.edit')
+              - else
+                .image-field
+                  = image_tag Spree::Image.default_image_url(:mini), width: 40, height: 40
             %td.field.align-left.header
               = product_form.hidden_field :id
               = product_form.text_field :name, 'aria-label': t('admin.products_page.columns.name')
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index c03f8ee016..6316027db0 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -88,10 +88,6 @@
           height: 100%;
         }
       }
-
-      .image-field .button {
-        display: block;
-      }
     }
 
     th,
@@ -379,7 +375,7 @@
     }
   }
 
-  .image-field {
+  a.image-field {
     position: relative;
 
     img {
@@ -388,10 +384,18 @@
     }
 
     .button {
-      display: none; // to be shown on tr:hover
+      display: none; // to be shown on hover
       position: absolute;
       bottom: 0;
       left: 0;
     }
+
+    &:hover,
+    &:focus {
+      .button.secondary {
+        display: block;
+        background-color: $color-btn-secondary-hover-bg;
+      }
+    }
   }
 }