Replace a whole bunch o' drop-down options with pretty buttons

InvenTree/part/templates/part/detail.html

@@ -4,31 +4,6 @@
 
 {% include 'part/tabs.html' with tab='detail' %}
 
-<div class='row'>
-    <div class='col-sm-6'>
-    </div>
-    <div class='col-sm-6'>
-        <div class="btn-group" style="float: right;">
-            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
-            <span class="caret"></span></button>
-            <ul class="dropdown-menu">
-                {% if part.active %}
-                <li><a href="#" id='edit-part' title='Edit part'>Edit</a></li>
-                {% if part.purchaseable %}
-                <li><a href='#' id='order-part' title='Order part'>Order</a></li>
-                {% endif %}
-                <li><a href='#' id='duplicate-part' title='Duplicate Part'>Duplicate</a></li>
-                <hr>
-                <li><a href="#" id='deactivate-part' title='Deactivate part'>Deactivate</a></li>
-                {% else %}
-                <li><a href="#" id='activate-part' title='Activate part'>Activate</a></li>
-                <li><a href='#' id='delete-part' title='Delete part'>Delete</a></li>
-                {% endif %}
-            </ul>
-        </div>
-    </div>
-</div>
-
 <div class='row'>
     <div class='col-sm-6'>
         <h4>Part Details</h4>
@@ -195,31 +170,6 @@
         );
     });
 
-    $("#duplicate-part").click(function() {
-        launchModalForm(
-            "{% url 'part-duplicate' part.id %}",
-            {
-                follow: true,
-            }
-        );
-    });
-
-    $("#order-part").click(function() {
-        launchModalForm("/order/purchase-order/order-parts/", {
-            data: {
-                part: {{ part.id }},
-            },
-        });
-    });
-    
-    $("#edit-part").click(function() {
-        launchModalForm(
-                        "{% url 'part-edit' part.id %}",
-                        {
-                            reload: true,
-                        });
-    });
-
     $('#activate-part').click(function() {
         showQuestionDialog(
             'Activate Part?',
@@ -265,13 +215,4 @@
         );
     });
     
-
-    $('#delete-part').click(function() {
-        launchModalForm(
-            "{% url 'part-delete' part.id %}",
-            {
-                redirect: {% if part.category %}"{% url 'category-detail' part.category.id %}"{% else %}"{% url 'part-index' %}"{% endif %}
-            });
-    });
-
 {% endblock %}

InvenTree/part/templates/part/part_base.html

@@ -46,9 +46,27 @@
                 </button>
                 {% if part.is_template == False %}
                 {% include "qr_button.html" %}
+                {% if part.active %}
                 <button type='button' class='btn btn-default btn-glyph' id='price-button' title='Show pricing information'>
                     <span id='part-price-icon' class='part-price glyphicon glyphicon-usd'/>
                 </button>
+                {% if part.purchaseable %}
+                <button type='button' class='btn btn-default btn-glyph' id='part-order' title='Order part'>
+                    <span id='part-order-icon' class='part-order glyphicon glyphicon-shopping-cart'/>
+                </button>
+                {% endif %}
+                {% endif %}
+                {% endif %}
+                <button type='button' class='btn btn-default btn-glyph' id='part-duplicate' title='Duplicate part'>
+                    <span id='part-duplicate-icon' class='part-duplicate glyphicon glyphicon-duplicate'/>
+                </button>
+                <button type='button' class='btn btn-default btn-glyph' id='part-edit' title='Edit part'>
+                    <span id='part-edit-icon' class='glyphicon glyphicon-cog part-cog'/>
+                </button>
+                {% if not part.active %}
+                <button type='button' class='btn btn-default btn-glyph' id='part-delete' title='Delete part'>
+                    <span id='part-delete-icon' class='glyphicon glyphicon-trash' style='color: #a11;'/>
+                </button>
                 {% endif %}
             </div>
         </p>
@@ -170,9 +188,6 @@
         });
     });
 
-    $('#toggle-starred').click(function() {
-    });
-
     $("#part-thumb").click(function() {
         launchModalForm(
                         "{% url 'part-image' part.id %}",
@@ -182,4 +197,41 @@
                         );
     });
 
+    $("#part-edit").click(function() {
+        launchModalForm(
+            "{% url 'part-edit' part.id %}",
+            {
+                reload: true,
+            }
+        );
+    });
+
+    $("#part-order").click(function() {
+        launchModalForm("/order/purchase-order/order-parts/", {
+            data: {
+                part: {{ part.id }},
+            },
+        });
+    });
+
+    $("#part-duplicate").click(function() {
+        launchModalForm(
+            "{% url 'part-duplicate' part.id %}",
+            {
+                follow: true,
+            }
+        );
+    });
+
+    {% if not part.active %}
+    $("#part-delete").click(function() {
+        launchModalForm(
+            "{% url 'part-delete' part.id %}",
+            {
+                redirect: {% if part.category %}"{% url 'category-detail' part.category.id %}"{% else %}"{% url 'part-index' %}"{% endif %}
+            }
+        );
+    });
+    {% endif %}
+
 {% endblock %}