Use dropdown for copy to clipboard/delete tasks

src/styles/_base.sass

@@ -195,4 +195,5 @@ select.input-transparent
 	img
 		transition: all 1s ease-out
 
-
+.btn:active
+	box-shadow: none

src/styles/_tasks.sass

@@ -8,6 +8,43 @@
 	.item-name
 		font-size: 1.6em
 
+	.dropdown button
+		height: 38px
+		margin-left: 10px
+
+	.dropdown-menu
+		left: initial
+		right: 0
+		padding-top: 0
+		padding-bottom: 0
+		border: thin solid $color-background
+		box-shadow: 1px 1px 2px rgba(black, .1), 0 5px 25px rgba(black, .1)
+
+		li
+			display: flex
+			height: 100%
+			width: 100%
+			padding: 0
+			margin: 0
+
+			&.divider
+				height: 2px
+
+			&.item-delete a:hover
+				color: $color-danger
+
+			a
+				padding: 10px 15px 10px 12px
+				flex: 1
+				height: 100%
+				color: $color-text-dark-primary
+				i
+					position: relative
+					top: -1px
+					left: -4px
+					font-size: .9em
+
+
 #task-add
 	margin-left: auto
 	font-size: .85em

src/templates/attract/layout.jade

@@ -15,9 +15,11 @@ html(lang="en")
 		link(href="{{ url_for('static_attract', filename='assets/css/main.css') }}", rel="stylesheet")
 		link(href="{{ url_for('static_attract', filename='assets/css/plugins/js_select2.css') }}", rel="stylesheet")
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery-3.1.0.min.js')}}")
+		script(src="{{ url_for('static_attract', filename='assets/js/vendor/bootstrap.min.js') }}")
 		script(src="{{ url_for('static_pillar', filename='assets/js/tutti.min.js') }}")
 		script(src="{{ url_for('static_attract', filename='assets/js/tutti.min.js') }}")
 
+
 		| {% block style %}{% endblock %}
 
 	body("{% block bodyattrs %}{% if project %}data-project-url='{{ project.url }}'{% endif %}{% endblock %}")

src/templates/attract/shots/for_project.jade

@@ -23,6 +23,7 @@
 				.table-cell.task-type(class="{{ task_type }}")
 					span.collapser(title="Collapse {{ task_type or 'Other' }} column") {{ task_type or 'other' }}
 				| {% endfor %}
+
 		.table-body
 			| {% for shot in shots %}
 			.table-row(

src/templates/attract/tasks/view_task_embed.jade

@@ -7,12 +7,25 @@
 				type="text",
 				placeholder='Name',
 				value="{{ task.name | hide_none }}")
-			button.copy-to-clipboard.btn.item-id(
-				name="Copy to Clipboard",
-				type="text",
-				data-clipboard-text="{{ task._id }}",
-				title="Copy ID to clipboard")
-				| ID
+
+			.dropdown
+				button#item-dropdown.btn.btn-default.dropdown-toggle(
+					type='button',
+					data-toggle='dropdown',
+					aria-haspopup='true', aria-expanded='true')
+					i.pi-more-vertical
+				ul.dropdown-menu(aria-labelledby='item-dropdown')
+					li.copy-to-clipboard(data-clipboard-text="{{ task._id }}")
+						a(href="javascript:void(0)")
+							i.pi-clipboard-copy
+							| Copy ID to Clipboard
+					| {% if 'DELETE' in task.allowed_methods %}
+					li.divider(role='separator')
+					li.item-delete
+						a(href="javascript:task_delete('{{ task._id }}', '{{ task._etag }}', '{{ url_for('attract.tasks.delete', task_id=task._id, _method='DELETE') }}')")
+							i.pi-trash
+							| Delete Task
+					| {% endif %}
 
 		.input-transparent-group
 			textarea.input-transparent(
@@ -54,9 +67,6 @@
 				| {% endfor %}
 
 		.input-transparent-group
-			| {% if 'DELETE' in task.allowed_methods %}
-			button.btn.btn-danger(type='button',onclick="task_delete('{{ task._id }}', '{{ task._etag }}', '{{ url_for('attract.tasks.delete', task_id=task._id, _method='DELETE') }}')") Delete
-			| {% endif %}
 			| {% if 'PUT' in task.allowed_methods %}
 			button.btn.btn-default(type='submit')
 				i.pi-check