Part image delete (#3963)

* Add button to remove an associated image from a part

- Also fixes some issues with onclick event propagation

* Similar feature for company image

InvenTree/InvenTree/static/css/inventree.css

@@ -458,7 +458,7 @@ main {
 }
 
 .part-thumb-container:hover .part-thumb-overlay {
-    opacity: 1;
+    opacity: 0.75;
 }
 
 .part-thumb-overlay {
@@ -467,8 +467,6 @@ main {
     left: 0;
     opacity: 0;
     transition: .25s ease;
-    padding-top: 10px;
-    padding-left: 25px;
     margin: 5px;
 }
 

InvenTree/company/templates/company/company_base.html

@@ -58,6 +58,9 @@
             {% if allow_download %}
             <button type='button' class='btn btn-outline-secondary' title="{% trans 'Download image from URL' %}" id='company-image-url'><span class='fas fa-cloud-download-alt'></span></button>
             {% endif %}
+            {% if company.image %}
+            <button type='button' class='btn btn-outline-secondary' title='{% trans "Delete image" %}' id='company-image-delete'><span class='fas fa-trash-alt icon-red'></span></button>
+            {% endif %}
         </div>
     </div>
 </div>
@@ -194,10 +197,37 @@
     $('#company-image').click(function() {
         showModalImage('{{ company.image.url }}');
     });
+
+    $('#company-image-delete').click(function(event) {
+        event.stopPropagation();
+        showQuestionDialog(
+            '{% trans "Remove Image" %}',
+            '{% trans "Remove associated image from this company" %}',
+            {
+                accept_text: '{% trans "Remove" %}',
+                submitClass: 'danger',
+                accept: function() {
+                    inventreePut(
+                        '{% url "api-company-detail" company.pk %}',
+                        {
+                            'image': null,
+                        },
+                        {
+                            method: 'PATCH',
+                            success: function() {
+                                location.reload();
+                            }
+                        }
+                    );
+                }
+            }
+        );
+    });
+
     {% endif %}
 
-    $("#company-image-upload").click(function() {
+    $("#company-image-upload").click(function(event) {
-
+        event.stopPropagation();
         constructForm(
             '{% url "api-company-detail" company.pk %}',
             {

InvenTree/part/templates/part/part_base.html

@@ -502,8 +502,34 @@
         });
     });
 
-    $("#part-image-upload").click(function() {
+    $('#part-image-delete').click(function(event) {
+        event.stopPropagation();
+        showQuestionDialog(
+            '{% trans "Remove Image" %}',
+            '{% trans "Remove associated image from this part" %}',
+            {
+                accept_text: '{% trans "Remove" %}',
+                submitClass: 'danger',
+                accept: function() {
+                    inventreePut(
+                        '{% url "api-part-detail" part.pk %}',
+                        {
+                            'image': null,
+                        },
+                        {
+                            method: 'PATCH',
+                            success: function(data) {
+                                location.reload();
+                            }
+                        }
+                    );
+                }
+            }
+        );
+    });
 
+    $("#part-image-upload").click(function(event) {
+        event.stopPropagation();
         constructForm(
             '{% url "api-part-detail" part.pk %}',
             {
@@ -576,9 +602,9 @@
         });
     }
 
-    $("#part-image-select").click(function() {
+    $("#part-image-select").click(function(event) {
-        launchModalForm("{% url 'part-image-select' part.id %}",
+        event.stopPropagation();
-                        {
+        launchModalForm("{% url 'part-image-select' part.id %}", {
             reload: true,
             after_render: onSelectImage
         });

InvenTree/part/templates/part/part_thumb.html

@@ -13,6 +13,9 @@
             {% if allow_download %}
             <button type='button' class='btn btn-outline-secondary' title="{% trans 'Download image from URL' %}" id='part-image-url'><span class='fas fa-cloud-download-alt'></span></button>
             {% endif %}
+            {% if part.image %}
+            <button type='button' class='btn btn-outline-secondary' title='{% trans "Delete image" %}' id='part-image-delete'><span class='fas fa-trash-alt icon-red'></span></button>
+            {% endif %}
         </div>
     </div>
     {% endif %}

InvenTree/templates/js/translated/modals.js

@@ -621,11 +621,11 @@ function showQuestionDialog(title, content, options={}) {
      *   cancel - Functino to run if the user presses 'Cancel'
      */
 
-    var modal = createNewModal({
+    options.title = title;
-        title: title,
+    options.submitText = options.accept_text || '{% trans "Accept" %}';
-        submitText: options.accept_text || '{% trans "Accept" %}',
+    options.closeText = options.cancel_text || '{% trans "Cancel" %}';
-        closeText: options.cancel_text || '{% trans "Cancel" %}',
+
-    });
+    var modal = createNewModal(options);
 
     modalSetContent(modal, content);