Add handle to drag tasks

src/main.ts

@@ -72,6 +72,7 @@ import {
 	faShareAlt,
 	faImage,
 	faBell,
+	faGripLines,
 } from '@fortawesome/free-solid-svg-icons'
 import {
 	faCalendarAlt,
@@ -179,6 +180,7 @@ library.add(faShareAlt)
 library.add(faImage)
 library.add(faBell)
 library.add(faBellSlash)
+library.add(faGripLines)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/styles/components/tasks.scss

@@ -16,7 +16,7 @@
 			border-radius: $radius;
 			background: $grey-100;
 			border: 3px dashed $grey-300;
-			
+
 			* {
 				opacity: 0;
 			}
@@ -149,6 +149,17 @@
 			opacity: 1;
 		}
 
+		.handle {
+			opacity: 0;
+			transition: opacity $transition;
+			margin-right: .25rem;
+			cursor: grab;
+		}
+
+		&:hover .handle {
+			opacity: 1;
+		}
+
 		.fancycheckbox {
 			height: 18px;
 			padding-top: 0;

src/views/list/views/List.vue

@@ -86,6 +86,7 @@
 						@start="() => drag = true"
 						@end="saveTaskPosition"
 						v-bind="dragOptions"
+						handle=".handle"
 					>
 						<transition-group type="transition" :name="!drag ? 'flip-list' : null">
 							<single-task-in-list
@@ -97,6 +98,9 @@
 								task-detail-route="task.detail"
 								v-for="t in tasks"
 							>
+								<span class="icon handle">
+									<icon icon="grip-lines"/>
+								</span>
 								<div
 									@click="editTask(t.id)"
 									class="icon settings"