ami/tl-vikunja
1
0
Fork 0
Code

fix(task): scroll the task field into view after activating it

Browse Source
This commit is contained in:
kolaente 2022-10-23 15:39:27 +02:00
parent 820823b5c3
commit d7ac2ad697
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/tasks/TaskDetailView.vue
View File

@ -26,7 +26,7 @@
:disabled="!canWrite" :disabled="!canWrite"
:list-id="task.listId" :list-id="task.listId"
:task-id="task.id" :task-id="task.id"
ref="assignees" :ref="e => setFieldRef('assignees', e)"
v-model="task.assignees" v-model="task.assignees"
/> />
</div> </div>
@ -40,7 +40,7 @@
<priority-select <priority-select
:disabled="!canWrite" :disabled="!canWrite"
@update:model-value="setPriority" @update:model-value="setPriority"
ref="priority" :ref="e => setFieldRef('priority', e)"
v-model="task.priority"/> v-model="task.priority"/>
</div> </div>
</transition> </transition>
@ -57,7 +57,7 @@
@close-on-change="() => saveTask()" @close-on-change="() => saveTask()"
:choose-date-label="$t('task.detail.chooseDueDate')" :choose-date-label="$t('task.detail.chooseDueDate')"
:disabled="taskService.loading || !canWrite" :disabled="taskService.loading || !canWrite"
ref="dueDate" :ref="e => setFieldRef('dueDate', e)"
/> />
<BaseButton <BaseButton
@click="() => {task.dueDate = null;saveTask()}" @click="() => {task.dueDate = null;saveTask()}"
@ -80,7 +80,7 @@
<percent-done-select <percent-done-select
:disabled="!canWrite" :disabled="!canWrite"
@update:model-value="setPercentDone" @update:model-value="setPercentDone"
ref="percentDone" :ref="e => setFieldRef('percentDone', e)"
v-model="task.percentDone"/> v-model="task.percentDone"/>
</div> </div>
</transition> </transition>
@ -97,7 +97,7 @@
@close-on-change="() => saveTask()" @close-on-change="() => saveTask()"
:choose-date-label="$t('task.detail.chooseStartDate')" :choose-date-label="$t('task.detail.chooseStartDate')"
:disabled="taskService.loading || !canWrite" :disabled="taskService.loading || !canWrite"
ref="startDate" :ref="e => setFieldRef('startDate', e)"
/> />
<BaseButton <BaseButton
@click="() => {task.startDate = null;saveTask()}" @click="() => {task.startDate = null;saveTask()}"
@ -124,7 +124,7 @@
@close-on-change="() => saveTask()" @close-on-change="() => saveTask()"
:choose-date-label="$t('task.detail.chooseEndDate')" :choose-date-label="$t('task.detail.chooseEndDate')"
:disabled="taskService.loading || !canWrite" :disabled="taskService.loading || !canWrite"
ref="endDate" :ref="e => setFieldRef('endDate', e)"
/> />
<BaseButton <BaseButton
@click="() => {task.endDate = null;saveTask()}" @click="() => {task.endDate = null;saveTask()}"
@ -146,7 +146,7 @@
</div> </div>
<reminders <reminders
:disabled="!canWrite" :disabled="!canWrite"
ref="reminders" :ref="e => setFieldRef('reminders', e)"
v-model="task.reminderDates" v-model="task.reminderDates"
@update:model-value="saveTask" @update:model-value="saveTask"
/> />
@ -171,7 +171,7 @@
</div> </div>
<repeat-after <repeat-after
:disabled="!canWrite" :disabled="!canWrite"
ref="repeatAfter" :ref="e => setFieldRef('repeatAfter', e)"
v-model="task" v-model="task"
@update:model-value="saveTask" @update:model-value="saveTask"
/> />
@ -186,7 +186,7 @@
</div> </div>
<color-picker <color-picker
menu-position="bottom" menu-position="bottom"
ref="color" :ref="e => setFieldRef('color', e)"
v-model="taskColor" v-model="taskColor"
@update:model-value="saveTask" @update:model-value="saveTask"
/> />
@ -202,7 +202,11 @@
</span> </span>
{{ $t('task.attributes.labels') }} {{ $t('task.attributes.labels') }}
</div> </div>
<edit-labels :disabled="!canWrite" :task-id="taskId" ref="labels" v-model="task.labels"/> <edit-labels
:disabled="!canWrite"
:task-id="taskId"
:ref="e => setFieldRef('labels', e)"
v-model="task.labels"/>
</div> </div>
<!-- Description --> <!-- Description -->
@ -220,7 +224,7 @@
:edit-enabled="canWrite" :edit-enabled="canWrite"
:task="task" :task="task"
@task-changed="({coverImageAttachmentId}) => task.coverImageAttachmentId = coverImageAttachmentId" @task-changed="({coverImageAttachmentId}) => task.coverImageAttachmentId = coverImageAttachmentId"
ref="attachments" :ref="e => setFieldRef('attachments', e)"
/> />
</div> </div>
@ -238,7 +242,7 @@
:list-id="task.listId" :list-id="task.listId"
:show-no-relations-notice="true" :show-no-relations-notice="true"
:task-id="taskId" :task-id="taskId"
ref="relatedTasks" :ref="e => setFieldRef('relatedTasks', e)"
/> />
</div> </div>
@ -252,7 +256,10 @@
</h3> </h3>
<div class="field has-addons"> <div class="field has-addons">
<div class="control is-expanded"> <div class="control is-expanded">
<list-search @update:modelValue="changeList" ref="moveList"/> <list-search
@update:modelValue="changeList"
:ref="e => setFieldRef('moveList', e)"
/>
</div> </div>
</div> </div>
</div> </div>
@ -659,10 +666,14 @@ const activeFieldElements : {[id in FieldType]: HTMLElement | null} = reactive({
startDate: null, startDate: null,
}) })
function setFieldRef(name, e) {
activeFieldElements[name] = unrefElement(e)
}
function setFieldActive(fieldName: keyof typeof activeFields) { function setFieldActive(fieldName: keyof typeof activeFields) {
activeFields[fieldName] = true activeFields[fieldName] = true
nextTick(() => { nextTick(() => {
const el = unrefElement(activeFieldElements[fieldName]) const el = activeFieldElements[fieldName]
if (!el) { if (!el) {
return return