From 66b6effe87d0336f9c9f51ba032210375cdaca10 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 28 Jul 2021 20:33:19 +0200
Subject: [PATCH] Enable dragging a bucket on task title

---
 src/views/list/views/Kanban.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index a21ad98b4..6473d90b7 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -44,8 +44,9 @@
 								:ref="`bucket${bucket.id}title`"
 								@focusout="() => saveBucketTitle(bucket.id)"
 								@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
+								@click="focusBucketTitle"
 								class="title input"
-								:contenteditable="canWrite && !collapsedBuckets[bucket.id]"
+								:contenteditable="bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]"
 								spellcheck="false">{{ bucket.title }}</h2>
 							<span
 								:class="{'is-max': bucket.tasks.length >= bucket.limit}"
@@ -259,6 +260,7 @@ export default {
 
 			showBucketDeleteModal: false,
 			bucketToDelete: 0,
+			bucketTitleEditable: false,
 
 			newTaskText: '',
 			showNewTaskInput: {},
@@ -454,7 +456,13 @@ export default {
 					this.showBucketDeleteModal = false
 				})
 		},
+		focusBucketTitle(e) {
+			// This little helper allows us to drag a bucket around at the title without focusing on it right away.
+			this.bucketTitleEditable = true
+			this.$nextTick(() => e.target.focus())
+		},
 		saveBucketTitle(bucketId) {
+			this.bucketTitleEditable = false
 			const bucketTitleElement = this.$refs[`bucket${bucketId}title`][0]
 			const bucketTitle = bucketTitleElement.textContent
 			const bucket = new BucketModel({