diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index 3650aa5ddf..153931f974 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/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; } diff --git a/InvenTree/part/templates/part/part_base.html b/InvenTree/part/templates/part/part_base.html index fdc5624741..96c9636c88 100644 --- a/InvenTree/part/templates/part/part_base.html +++ b/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 %}", diff --git a/InvenTree/templates/js/modals.js b/InvenTree/templates/js/modals.js index 12639749f6..2c246d2a36 100644 --- a/InvenTree/templates/js/modals.js +++ b/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(); + }); +} \ No newline at end of file diff --git a/InvenTree/templates/modals.html b/InvenTree/templates/modals.html index dea7a8bbfa..9850f482c5 100644 --- a/InvenTree/templates/modals.html +++ b/InvenTree/templates/modals.html @@ -1,5 +1,12 @@ {% load i18n %} + +