Add "modal image" display for part thumbnails

InvenTree/InvenTree/static/css/inventree.css

@@ -626,6 +626,53 @@
     z-index: 11000;
 }
 
+.modal-close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.25s;
+}
+
+.modal-close:hover,
+.modal-close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal-image-content {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+    text-align: center;
+    color: #ccc;
+    padding: 10px 0;
+}
+
+@media only screen and (max-width: 700px){
+    .modal-image-content {
+      width: 100%;
+    }
+}
+
+.modal-image {
+    display: none;
+    position: fixed;
+    z-index: 10000;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
+}
+
 .js-modal-form .checkbox {
     margin-left: 0px;
 }

InvenTree/part/templates/part/part_base.html

@@ -206,6 +206,12 @@
         toggleId: '#part-menu-toggle',
     });
 
+    {% if part.image %}
+    $('#part-thumb').click(function() {
+        showModalImage('{{ part.image.url }}');
+    });
+    {% endif %}
+
     enableDragAndDrop(
         '#part-thumb',
         "{% url 'part-image-upload' part.id %}",

InvenTree/templates/js/modals.js

@@ -909,3 +909,42 @@ function launchModalForm(url, options = {}) {
     // Send the AJAX request
     $.ajax(ajax_data);
 }
+
+
+function hideModalImage() {
+
+    var modal = $('#modal-image-dialog');
+
+    modal.animate({
+        opacity: 0.0,
+    }, 250, function() {
+        modal.hide();
+    });
+
+}
+
+
+function showModalImage(image_url) {
+    // Display full-screen modal image
+
+    console.log('showing modal image: ' + image_url);
+
+    var modal = $('#modal-image-dialog');
+
+    // Set image content
+    $('#modal-image').attr('src', image_url);
+
+    modal.show();
+
+    modal.animate({
+        opacity: 1.0,
+    }, 250);
+
+    $('#modal-image-close').click(function() {
+        hideModalImage();
+    });
+
+    modal.click(function() {
+        hideModalImage();
+    });
+}

InvenTree/templates/modals.html

@@ -1,5 +1,12 @@
 {% load i18n %}
 
+<div class='modal fade modal-image' role='dialog' id='modal-image-dialog'>
+  <span class='modal-close' id='modal-image-close'>&times;</span>
+
+  <img class='modal-image-content' id='modal-image'>
+
+</div>
+
 <div class='modal fade modal-fixed-footer modal-primary' tabindex='-1' role='dialog' id='modal-form'>
     <div class='modal-dialog'>
         <div class='modal-content'>