Fix task title heading ux

This commit is contained in:
kolaente 2021-01-15 23:47:14 +01:00
parent 09b7a903d2
commit b778c76cbd
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B

View file

@ -11,11 +11,9 @@
class="title input" class="title input"
:class="{'disabled': !canWrite}" :class="{'disabled': !canWrite}"
@focusout="save()" @focusout="save()"
@keyup.ctrl.enter="save()" @keydown.enter.prevent.stop="save()"
:contenteditable="canWrite ? 'true' : 'false'" :contenteditable="canWrite ? 'true' : 'false'"
ref="taskTitle"> ref="taskTitle">{{ task.title.trim() }}</h1>
{{ task.title }}
</h1>
<transition name="fade"> <transition name="fade">
<span class="is-inline-flex is-align-items-center" v-if="loading && saving"> <span class="is-inline-flex is-align-items-center" v-if="loading && saving">
<span class="loader is-inline-block mr-2"></span> <span class="loader is-inline-block mr-2"></span>
@ -78,6 +76,7 @@ export default {
// we're building it ourselves and only calling saveTask() // we're building it ourselves and only calling saveTask()
// if the task title changed. // if the task title changed.
if (this.task.title !== this.taskTitle) { if (this.task.title !== this.taskTitle) {
this.$refs.taskTitle.blur()
this.saveTask() this.saveTask()
this.taskTitle = taskTitle this.taskTitle = taskTitle
} }