Part image hover preview working in part-category-list

- Yay for CSS!

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);
                 }
             },
             {

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;

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;
 }