From 5f3bab95e230393e7c88fe49f9eb3b7ba6a8fa84 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Fri, 23 Sep 2016 18:07:11 +0200
Subject: [PATCH] Copy to clipboard for shots

---
 attract/static/js/tasks.js                    |  8 +++++
 src/styles/_shots.sass                        | 36 +++++++++++++++++--
 .../attract/shots/view_shot_embed.jade        |  7 ++++
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/attract/static/js/tasks.js b/attract/static/js/tasks.js
index 9981968..839a44c 100644
--- a/attract/static/js/tasks.js
+++ b/attract/static/js/tasks.js
@@ -303,3 +303,11 @@ $(function() {
         task_open(task_id);
     });
 });
+
+/* Copy to clipboard when clicking on an input with 'copy-to-clipboard' class */
+$('body').on('click', '.copy-to-clipboard', function(e){
+    e.preventDefault();
+
+    $(this).select();
+    document.execCommand('copy');
+});
diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass
index 94c1411..98fe829 100644
--- a/src/styles/_shots.sass
+++ b/src/styles/_shots.sass
@@ -71,7 +71,6 @@
 
 				a
 					display: inline-block /* Each task in a new line */
-					opacity: 0
 					border-radius: 50%
 					width: 16px
 					height: 16px
@@ -84,12 +83,14 @@
 					&.active
 						opacity: 1
 						border-radius: 3px
+						display: inline-block
 
 					&.task-add
 						width: auto
 						border-radius: initial
+						opacity: 0
 
-				a[class^="status-"]
+				&:hover a.task-add
 					opacity: 1
 
 			&:hover
@@ -98,3 +99,34 @@
 
 .attract-form span.shot_id
 	float: right
+
+.attract-form
+	.item-id
+		padding: 8px
+		margin-left: 10px
+		width: 40px
+		border: thin solid transparent
+
+		&:hover
+			border-color: $color-text-dark-hint
+
+		&:active
+			background-color: $color-background
+
+	.btn.copy-to-clipboard.item-id
+		color: transparent
+		position: relative
+		&::selection
+			color: transparent
+			background-color: transparent
+
+	.btn.copy-to-clipboard+.copy-to-clipboard-icon
+		position: relative
+		height: 40px
+		pointer-events: none
+		color: $color-text-dark-primary
+		i
+			position: absolute
+			top: 8px
+			left: -32px
+			font-size: 1.2em
diff --git a/src/templates/attract/shots/view_shot_embed.jade b/src/templates/attract/shots/view_shot_embed.jade
index 0a652a4..df23665 100644
--- a/src/templates/attract/shots/view_shot_embed.jade
+++ b/src/templates/attract/shots/view_shot_embed.jade
@@ -8,6 +8,13 @@
 				type="text",
 				placeholder='Name',
 				value="{{ shot.name | hide_none }}")
+			input.copy-to-clipboard.btn.item-id(
+				name="Copy to Clipboard",
+				type="text",
+				title="{{ shot._id }}",
+				value="{{ shot._id }}")
+			.copy-to-clipboard-icon
+				i.pi-clipboard-copy
 
 		.input-transparent-group
 			textarea.input-transparent(