From 2a662249524839515f68176928d0e0feb60be8ab Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Wed, 8 May 2019 19:15:41 +1000
Subject: [PATCH] Part image hover preview working in part-category-list

- Yay for CSS!
---
 InvenTree/part/templates/part/category.html   |  2 +-
 InvenTree/static/css/inventree.css            | 24 +++++++++++++++++++
 .../static/script/inventree/inventree.js      | 15 ++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/InvenTree/part/templates/part/category.html b/InvenTree/part/templates/part/category.html
index 220ebc9d65..b0b7fe44a1 100644
--- a/InvenTree/part/templates/part/category.html
+++ b/InvenTree/part/templates/part/category.html
@@ -152,7 +152,7 @@
                 title: 'Part',
                 sortable: true,
                 formatter: function(value, row, index, field) {
-                    return renderLink(value, row.url);
+                    return imageHoverIcon(row.image_url) + renderLink(value, row.url);
                 }
             },
             {
diff --git a/InvenTree/static/css/inventree.css b/InvenTree/static/css/inventree.css
index 2104bf92af..17802bd58e 100644
--- a/InvenTree/static/css/inventree.css
+++ b/InvenTree/static/css/inventree.css
@@ -10,6 +10,30 @@
     color: #ffcc00;
 }
 
+/* Part image icons with full-display on mouse hover */
+
+.hover-img-thumb {
+    width: 28px;
+    height: 28px;
+    border: 1px solid #cce;
+}
+
+.hover-img-large {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    border: 1px solid #555;
+    max-width: 250px;
+}
+
+.hover-icon {
+    margin-right: 10px;
+}
+
+.hover-icon:hover > .hover-img-large {
+    display: block;
+}
+
 /* dropzone class - for Drag-n-Drop file uploads */
 .dropzone {
     border: 1px solid #555;
diff --git a/InvenTree/static/script/inventree/inventree.js b/InvenTree/static/script/inventree/inventree.js
index cc025477c0..48ba874262 100644
--- a/InvenTree/static/script/inventree/inventree.js
+++ b/InvenTree/static/script/inventree/inventree.js
@@ -117,4 +117,19 @@ function enableDragAndDrop(element, url, options) {
             console.log('Ignoring drag-and-drop event (not a file)');
         }
     });
+}
+
+function imageHoverIcon(url) {
+    /* Render a small thumbnail icon for an image.
+     * On mouseover, display a full-size version of the image
+     */
+
+    var html = `
+        <a class='hover-icon'>
+            <img class='hover-img-thumb' src='` + url + `'>
+            <img class='hover-img-large' src='` + url + `'>
+        </a>
+        `;
+
+    return html;
 }
\ No newline at end of file