Merge pull request #1565 from matmair/clipboard-ui

Clipboard UI

InvenTree/InvenTree/static/css/inventree.css

@@ -936,4 +936,15 @@ input[type="submit"] {
 
 input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control {
 	line-height: unset;
-}
+}
+
+.clip-btn {
+    font-size: 10px;
+    padding: 0px 6px;
+    color: var(--label-grey);
+    background: none;
+}
+
+.clip-btn:hover {
+    background: var(--label-grey);
+}

InvenTree/InvenTree/static/script/inventree/inventree.js

@@ -48,6 +48,13 @@ function inventreeDocReady() {
             no_post: true,
         });
     });
+
+    // Initialize clipboard-buttons
+    new ClipboardJS('.clip-btn', {
+        text: function(trigger) {
+            return trigger.parentElement.parentElement.textContent;
+        }
+    });
 }
 
 function isFileTransfer(transfer) {

InvenTree/part/templates/part/detail.html

@@ -20,20 +20,20 @@
         <tr>
             <td><span class='fas fa-font'></span></td>
             <td><strong>{% trans "Part name" %}</strong></td>
-            <td>{{ part.name }}</td>
+            <td>{{ part.name }}{% include "clip.html"%}</td>
         </tr>
         {% if part.IPN %}
         <tr>
             <td></td>
             <td><strong>{% trans "IPN" %}</strong></td>
-            <td>{{ part.IPN }}</td>
+            <td>{{ part.IPN }}{% include "clip.html"%}</td>
         </tr>
         {% endif %}
         {% if part.revision %}
         <tr>
             <td><span class='fas fa-code-branch'></span></td>
             <td><strong>{% trans "Revision" %}</strong></td>
-            <td>{{ part.revision }}</td>
+            <td>{{ part.revision }}{% include "clip.html"%}</td>
         </tr>
         {% endif %}
         {% if part.trackable %}
@@ -42,7 +42,7 @@
             <td><strong>{% trans "Latest Serial Number" %}</strong></td>
             <td>
                 {% if part.getLatestSerialNumber %}
-                {{ part.getLatestSerialNumber }}
+                {{ part.getLatestSerialNumber }}{% include "clip.html"%}
                 {% else %}
                 <em>{% trans "No serial numbers recorded" %}</em>
                 {% endif %}
@@ -52,7 +52,7 @@
         <tr>
             <td><span class='fas fa-info-circle'></span></td>
             <td><strong>{% trans "Description" %}</strong></td>
-            <td>{{ part.description }}</td>
+            <td>{{ part.description }}{% include "clip.html"%}</td>
         </tr>
         {% if part.variant_of %}
         <tr>
@@ -96,7 +96,7 @@
             <td></td>
             <td><strong>{% trans "Default Supplier" %}</strong></td>
             <td><a href="{% url 'supplier-part-detail' part.default_supplier.id %}">
-                {{ part.default_supplier.supplier.name }} | {{ part.default_supplier.SKU }}
+                {{ part.default_supplier.supplier.name }} | {{ part.default_supplier.SKU }}{% include "clip.html"%}
             </a></td>
         </tr>
         {% endif %}

InvenTree/templates/base.html

@@ -133,11 +133,14 @@
 <!-- boostrap-table-treegrid -->
 <script type='text/javascript' src='{% static "bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js" %}'></script>
 
+<!-- 3rd party general js -->
 <script type="text/javascript" src="{% static 'fullcalendar/main.js' %}"></script>
 <script type="text/javascript" src="{% static 'fullcalendar/locales-all.js' %}"></script>
 <script type="text/javascript" src="{% static 'script/select2/select2.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/moment.js' %}"></script>
+<script type='text/javascript' src="{% static 'script/clipboard.min.js' %}"></script>
 
+<!-- general InvenTree -->
 <script type='text/javascript' src="{% static 'script/inventree/inventree.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/inventree/api.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/inventree/notification.js' %}"></script>

InvenTree/templates/clip.html

@@ -0,0 +1,5 @@
+{% load i18n %}
+
+<span class="float-right">
+    <button class="btn clip-btn" type="button" data-toggle='tooltip' title='{% trans "copy to clipboard" %}'><i class="fas fa-copy"></i></button>
+</span>