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/clipboard.min.js

@@ -0,0 +1,7 @@
+/*!
+ * clipboard.js v2.0.8
+ * https://clipboardjs.com/
+ *
+ * Licensed MIT © Zeno Rocha
+ */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return n={134:function(t,e,n){"use strict";n.d(e,{default:function(){return r}});var e=n(279),i=n.n(e),e=n(370),a=n.n(e),e=n(817),o=n.n(e);function c(t){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function u(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var l=function(){function e(t){!function(t){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this),this.resolveOptions(t),this.initSelection()}var t,n,r;return t=e,(n=[{key:"resolveOptions",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.container=t.container,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"createFakeElement",value:function(){var t="rtl"===document.documentElement.getAttribute("dir");this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[t?"right":"left"]="-9999px";t=window.pageYOffset||document.documentElement.scrollTop;return this.fakeElem.style.top="".concat(t,"px"),this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.fakeElem}},{key:"selectFake",value:function(){var t=this,e=this.createFakeElement();this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.container.appendChild(e),this.selectedText=o()(e),this.copyText(),this.removeFake()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=o()(this.target),this.copyText()}},{key:"copyText",value:function(){var e;try{e=document.execCommand(this.action)}catch(t){e=!1}this.handleResult(e)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),document.activeElement.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==c(t)||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}])&&u(t.prototype,n),r&&u(t,r),e}();function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function f(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function h(t,e){return(h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function d(n){var r=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}();return function(){var t,e=p(n);return t=r?(t=p(this).constructor,Reflect.construct(e,arguments,t)):e.apply(this,arguments),e=this,!(t=t)||"object"!==s(t)&&"function"!=typeof t?function(t){if(void 0!==t)return t;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}(e):t}}function p(t){return(p=Object.setPrototypeOf?ObjLine truncated

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>