Enable dragging a bucket on task title
This commit is contained in:
parent
6dc7d8f241
commit
66b6effe87
|
@ -44,8 +44,9 @@
|
||||||
:ref="`bucket${bucket.id}title`"
|
:ref="`bucket${bucket.id}title`"
|
||||||
@focusout="() => saveBucketTitle(bucket.id)"
|
@focusout="() => saveBucketTitle(bucket.id)"
|
||||||
@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
|
@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
|
||||||
|
@click="focusBucketTitle"
|
||||||
class="title input"
|
class="title input"
|
||||||
:contenteditable="canWrite && !collapsedBuckets[bucket.id]"
|
:contenteditable="bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]"
|
||||||
spellcheck="false">{{ bucket.title }}</h2>
|
spellcheck="false">{{ bucket.title }}</h2>
|
||||||
<span
|
<span
|
||||||
:class="{'is-max': bucket.tasks.length >= bucket.limit}"
|
:class="{'is-max': bucket.tasks.length >= bucket.limit}"
|
||||||
|
@ -259,6 +260,7 @@ export default {
|
||||||
|
|
||||||
showBucketDeleteModal: false,
|
showBucketDeleteModal: false,
|
||||||
bucketToDelete: 0,
|
bucketToDelete: 0,
|
||||||
|
bucketTitleEditable: false,
|
||||||
|
|
||||||
newTaskText: '',
|
newTaskText: '',
|
||||||
showNewTaskInput: {},
|
showNewTaskInput: {},
|
||||||
|
@ -454,7 +456,13 @@ export default {
|
||||||
this.showBucketDeleteModal = false
|
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) {
|
saveBucketTitle(bucketId) {
|
||||||
|
this.bucketTitleEditable = false
|
||||||
const bucketTitleElement = this.$refs[`bucket${bucketId}title`][0]
|
const bucketTitleElement = this.$refs[`bucket${bucketId}title`][0]
|
||||||
const bucketTitle = bucketTitleElement.textContent
|
const bucketTitle = bucketTitleElement.textContent
|
||||||
const bucket = new BucketModel({
|
const bucket = new BucketModel({
|
||||||
|
|
Reference in New Issue