feature: add clipboard link to various identifiers (resolves #148)

Disco.Web/ClientSource/Scripts/Core.js

@@ -58540,7 +58540,7 @@ jQuery.fn.DataTable.defaults.aLengthMenu = [[10, 20, 50, 100, 200, -1], [10, 20,
                             .append(template)
                             .appendTo(ul);
                     };
-                    
+
                 }
                 quickSearchInited = true;
             }
@@ -58665,5 +58665,41 @@ jQuery.fn.DataTable.defaults.aLengthMenu = [[10, 20, 50, 100, 200, -1], [10, 20,
         $(window).resize(function () {
             $('.ui-dialog-content').filter(':visible').dialog('option', 'position', 'center');
         });
+
+        if (navigator.clipboard) {
+            window.setTimeout(() => {
+                $('[data-clipboard]')
+                    .on('mouseenter', e => {
+                        const $this = $(e.currentTarget);
+                        const previousPosition = $this.css('position');
+                        $this.css('position', 'relative');
+                        const link = $('<i class="clipboard-link fa fa-clipboard fa-fw">');
+                        link.appendTo($this)
+                        link.on('click', e => {
+                            e.preventDefault();
+                            let value = $this.attr('data-clipboard');
+                            if (!value) {
+                                value = $this.text().trim();
+                            }
+                            navigator.clipboard.writeText(value).then(() => {
+                                link.removeClass('fa-clipboard').addClass('fa-check');
+                            })
+                            return false;
+                        });
+                        $this.data('clipboard', {
+                            previousPosition: previousPosition,
+                            link: link
+                        })
+                    }).on('mouseleave', e => {
+                        const $this = $(e.currentTarget);
+                        const data = $this.data('clipboard');
+                        if (data) {
+                            data.link.remove();
+                            $this.css('position', data.previousPosition);
+                            $this.removeData('clipboard');
+                        }
+                    });
+            }, 100);
+        }
     });
 })(jQuery, window, document, Modernizr);

Disco.Web/ClientSource/Scripts/Core/disco.uicore.js

@@ -70,7 +70,7 @@
                             .append(template)
                             .appendTo(ul);
                     };
-                    
+
                 }
                 quickSearchInited = true;
             }
@@ -195,5 +195,41 @@
         $(window).resize(function () {
             $('.ui-dialog-content').filter(':visible').dialog('option', 'position', 'center');
         });
+
+        if (navigator.clipboard) {
+            window.setTimeout(() => {
+                $('[data-clipboard]')
+                    .on('mouseenter', e => {
+                        const $this = $(e.currentTarget);
+                        const previousPosition = $this.css('position');
+                        $this.css('position', 'relative');
+                        const link = $('<i class="clipboard-link fa fa-clipboard fa-fw">');
+                        link.appendTo($this)
+                        link.on('click', e => {
+                            e.preventDefault();
+                            let value = $this.attr('data-clipboard');
+                            if (!value) {
+                                value = $this.text().trim();
+                            }
+                            navigator.clipboard.writeText(value).then(() => {
+                                link.removeClass('fa-clipboard').addClass('fa-check');
+                            })
+                            return false;
+                        });
+                        $this.data('clipboard', {
+                            previousPosition: previousPosition,
+                            link: link
+                        })
+                    }).on('mouseleave', e => {
+                        const $this = $(e.currentTarget);
+                        const data = $this.data('clipboard');
+                        if (data) {
+                            data.link.remove();
+                            $this.css('position', data.previousPosition);
+                            $this.removeData('clipboard');
+                        }
+                    });
+            }, 100);
+        }
     });
 })(jQuery, window, document, Modernizr);

Disco.Web/ClientSource/Style/BundleSite.css

@@ -6013,4 +6013,17 @@ ul.list-group li:not(:first-child) {
 }
 .whitespace-pre-wrap {
   white-space: pre-wrap;
+}
+i.clipboard-link {
+  cursor: pointer;
+  position: absolute;
+  padding-left: 4px;
+  right: calc(-1.28571429em - 4px);
+  top: calc(100% - 14px);
+  z-index: 100;
+  color: #D1D1D1;
+  background-color: #fff;
+}
+i.clipboard-link:hover {
+  color: #333;
 }

Disco.Web/ClientSource/Style/Job.less

@@ -983,9 +983,9 @@
         border-bottom: 1px dashed #ccc;
     }
 
-        .createJob_Component:last-child {
-            border-bottom: none;
-        }
+    .createJob_Component:last-child {
+        border-bottom: none;
+    }
 
 
     #createJob_Type {
@@ -1006,34 +1006,34 @@
         }
     }
 
-        #createJob_Type li, #createJob_SubTypes li {
-            margin: 2px 0;
-            padding: 0 0 0 4px;
+    #createJob_Type li, #createJob_SubTypes li {
+        margin: 2px 0;
+        padding: 0 0 0 4px;
+
+        i {
+            display: none;
+            cursor: default;
+            font-weight: normal;
+        }
+
+        &:hover i {
+            display: inline-block;
+        }
+
+        &.highlight {
+            background-color: @HighlightColour;
+            font-weight: 600;
+            color: @black;
 
             i {
-                display: none;
-                cursor: default;
-                font-weight: normal;
-            }
-
-            &:hover i {
                 display: inline-block;
             }
-
-            &.highlight {
-                background-color: @HighlightColour;
-                font-weight: 600;
-                color: @black;
-
-                i {
-                    display: inline-block;
-                }
-            }
         }
+    }
 
-        #createJob_SubTypes.isQuickLog li i {
-            display: none;
-        }
+    #createJob_SubTypes.isQuickLog li i {
+        display: none;
+    }
 
 
     #createJob_CommentsContainer {

Disco.Web/ClientSource/Style/Site.css

@@ -1581,4 +1581,17 @@ ul.list-group li:not(:first-child) {
 }
 .whitespace-pre-wrap {
   white-space: pre-wrap;
+}
+i.clipboard-link {
+  cursor: pointer;
+  position: absolute;
+  padding-left: 4px;
+  right: calc(-1.28571429em - 4px);
+  top: calc(100% - 14px);
+  z-index: 100;
+  color: #D1D1D1;
+  background-color: #fff;
+}
+i.clipboard-link:hover {
+  color: #333;
 }

Disco.Web/ClientSource/Style/Site.less

@@ -1681,3 +1681,18 @@ ul.list-group {
 .whitespace-pre-wrap {
     white-space: pre-wrap;
 }
+
+i.clipboard-link {
+    cursor: pointer;
+    position: absolute;
+    padding-left: 4px;
+    right: calc(-1.28571429em - 4px);
+    top: calc(100% - 14px);
+    z-index: 100;
+    color: @BackgroundColour;
+    background-color: #fff;
+
+    &:hover {
+        color: @HeaderBackgroundColour;
+    }
+}