ami/tl-vikunja
1
0
Fork 0
Code

fix(task): dragging and dropping on mobile

Browse Source 
This change fixes a regression introduced in 1cbb93ea9beea3049c469ba7cc05b07beebf2062.
In that change, the whole task area was made clickable using mouse events directly. Unfortunately, this also prevented the parent component of the task component to recieve them, essentially never getting notified about the mouse movement and thus never dragging the task. I don't know why this is only a problem on Safari, but it might be related to https://github.com/SortableJS/Sortable/issues/1571#issuecomment-535684451

Resolves https://community.vikunja.io/t/task-re-ordering-is-not-working-in-safari/1916
Resolves https://kolaente.dev/vikunja/vikunja/issues/2092
Resolves https://github.com/go-vikunja/vikunja/issues/304

(cherry picked from commit abf92e29facfa91a75fdce4ab04729010cb510f1)
This commit is contained in:
kolaente 2024-09-18 18:00:27 +02:00
parent 9e5d6bad8d
commit 6a68736ca5
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/.gitignore vendored
View File

@ -13,6 +13,7 @@ node_modules
dist
coverage
*.zip
.vite/
# Test files
cypress/screenshots

32
frontend/src/components/tasks/partials/SingleTaskInProject.vue
View File

@ -1,17 +1,17 @@
<template>
<div>
<div
ref="taskContainerRef"
:class="{'is-loading': taskService.loading}"
class="task loader-container single-task"
tabindex="-1"
@mouseup.stop.self="openTaskDetail"
@mousedown.stop.self="focusTaskLink"
@click="openTaskDetail"
@keyup.enter="openTaskDetail"
>
<FancyCheckbox
v-model="task.done"
:disabled="(isArchived || disabled) && !canMarkAsDone"
@update:modelValue="markAsDone"
@click.stop
/>
<ColorBubble
@ -23,8 +23,6 @@
<div
:class="{ 'done': task.done, 'show-project': showProject && project}"
class="tasktext"
@mouseup.stop.self="openTaskDetail"
@mousedown.stop.self="focusTaskLink"
>
<span>
<RouterLink
@ -33,6 +31,7 @@
:to="{ name: 'project.index', params: { projectId: task.projectId } }"
class="task-project mr-1"
:class="{'mr-2': task.hexColor !== ''}"
@click.stop
>
{{ project.title }}
</RouterLink>
@ -50,7 +49,7 @@
/>
<RouterLink
ref="taskLink"
ref="taskLinkRef"
:to="taskDetailRoute"
class="task-link"
tabindex="-1"
@ -141,6 +140,7 @@
v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
:to="{ name: 'project.index', params: { projectId: task.projectId } }"
class="task-project"
@click.stop
>
{{ project.title }}
</RouterLink>
@ -148,7 +148,7 @@
<BaseButton
:class="{'is-favorite': task.isFavorite}"
class="favorite"
@click="toggleFavorite"
@click.stop="toggleFavorite"
>
<Icon
v-if="task.isFavorite"
@ -343,24 +343,22 @@ async function toggleFavorite() {
emit('taskUpdated', task.value)
}
const taskLink = ref<HTMLElement | null>(null)
const taskContainerRef = ref<HTMLElement | null>(null)
const taskLinkRef = ref<HTMLElement | null>(null)
function hasTextSelected() {
const isTextSelected = window.getSelection().toString()
return !(typeof isTextSelected === 'undefined' || isTextSelected === '' || isTextSelected === '\n')
}
function openTaskDetail() {
if (!hasTextSelected()) {
taskLink.value.$el.click()
function openTaskDetail(event: MouseEvent | KeyboardEvent) {
if (event.target instanceof HTMLElement) {
const isInteractiveElement = event.target.closest('a, button, input, .favorite, [role="button"]')
if (isInteractiveElement || hasTextSelected()) {
return
}
}
}
function focusTaskLink() {
if (!hasTextSelected()) {
taskContainerRef.value.focus()
}
taskLinkRef.value?.$el.click()
}
</script>