From 8ea1086b03c9c1d62857ad7aed164bdd763a5379 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Tue, 11 Feb 2020 00:28:46 +1100
Subject: [PATCH] Make thumb buttons only visible on mouseover

---
 InvenTree/InvenTree/static/css/inventree.css  | 14 ++++++++++++++
 InvenTree/part/templates/part/part_thumb.html |  6 +++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 6dc6ad4822..6c89ff7265 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -229,6 +229,20 @@
     object-fit: contain;
 }
 
+.part-thumb-container:hover .part-thumb-overlay {
+    opacity: 1;
+}
+
+.part-thumb-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: .25s ease;
+    padding: 15px;
+    margin: 5px;
+}
+
 .checkbox {
     margin-left: 20px;
 }
diff --git a/InvenTree/part/templates/part/part_thumb.html b/InvenTree/part/templates/part/part_thumb.html
index e99b5106c0..04efdd383f 100644
--- a/InvenTree/part/templates/part/part_thumb.html
+++ b/InvenTree/part/templates/part/part_thumb.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 <div class="media">
-    <div class="media-left">
+    <div class="media-left part-thumb-container">
       <div class='dropzone' id='part-thumb'>
           <img class="part-thumb"
               {% if part.image %}
@@ -11,9 +11,9 @@
               src="{% static 'img/blank_image.png' %}"
               {% endif %}/>
       </div>
-      <div class='btn-row'>
+      <div class='btn-row part-thumb-overlay'>
           <div class='btn-group'>
-              <button type='button' class='btn btn-default btn-glyph' title="{% trans 'Select from existing images' %}" id='part-image-select'><span class='glyphicon glyphicon-edit'></span></button>
+              <button type='button' class='btn btn-default btn-glyph' title="{% trans 'Select from existing images' %}" id='part-image-select'><span class='glyphicon glyphicon-th'></span></button>
               <button type='button' class='btn btn-default btn-glyph' title="{% trans 'Upload new image' %}" id='part-image-upload'><span class='glyphicon glyphicon-upload'></span></button>
           </div>
       </div>