ami/tl-vikunja
1
0
Fork 0
Code

fix(task): allow clicking on the whole task to open the task detail view

Browse Source 
Resolves #3172
This commit is contained in:
kolaente 2023-02-27 16:00:08 +01:00
parent 000e3080a5
commit fe764a46e9
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/input/fancycheckbox.vue
View File

@ -7,7 +7,7 @@
@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)" @change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
type="checkbox" type="checkbox"
/> />
<label :for="checkBoxId" class="check"> <label :for="checkBoxId" class="check" @click.prevent="check">
<svg height="18px" viewBox="0 0 18 18" width="18px"> <svg height="18px" viewBox="0 0 18 18" width="18px">
<path <path
d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path> d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
@ -56,6 +56,11 @@ function updateData(newChecked: boolean) {
emit('update:modelValue', newChecked) emit('update:modelValue', newChecked)
emit('change', newChecked) emit('change', newChecked)
} }
function check() {
checked.value = !checked.value
updateData(checked.value)
}
</script> </script>

28
src/components/tasks/partials/singleTaskInList.vue
View File

@ -1,5 +1,9 @@
<template> <template>
<div :class="{'is-loading': taskService.loading}" class="task loader-container"> <router-link
:to="taskDetailRoute"
:class="{'is-loading': taskService.loading}"
class="task loader-container"
>
<fancycheckbox <fancycheckbox
:disabled="(isArchived || disabled) && !canMarkAsDone" :disabled="(isArchived || disabled) && !canMarkAsDone"
@change="markAsDone" @change="markAsDone"
@ -12,8 +16,7 @@
class="mr-1" class="mr-1"
/> />
<router-link <div
:to="taskDetailRoute"
:class="{ 'done': task.done, 'show-list': showList && taskList !== null}" :class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
class="tasktext" class="tasktext"
> >
@ -93,7 +96,7 @@
</span> </span>
<checklist-summary :task="task"/> <checklist-summary :task="task"/>
</router-link> </div>
<progress <progress
class="progress is-small" class="progress is-small"
@ -114,14 +117,14 @@
<BaseButton <BaseButton
:class="{'is-favorite': task.isFavorite}" :class="{'is-favorite': task.isFavorite}"
@click="toggleFavorite" @click.prevent="toggleFavorite"
class="favorite" class="favorite"
> >
<icon icon="star" v-if="task.isFavorite"/> <icon icon="star" v-if="task.isFavorite"/>
<icon :icon="['far', 'star']" v-else/> <icon :icon="['far', 'star']" v-else/>
</BaseButton> </BaseButton>
<slot /> <slot />
</div> </router-link>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -285,7 +288,11 @@ function hideDeferDueDatePopup(e) {
border-radius: $radius; border-radius: $radius;
border: 2px solid transparent; border: 2px solid transparent;
color: var(--text);
transition: color ease $transition-duration;
&:hover { &:hover {
color: var(--grey-900);
background-color: var(--grey-100); background-color: var(--grey-100);
} }
@ -331,15 +338,6 @@ function hideDeferDueDatePopup(e) {
} }
a {
color: var(--text);
transition: color ease $transition-duration;
&:hover {
color: var(--grey-900);
}
}
.favorite { .favorite {
opacity: 0; opacity: 0;
text-align: center; text-align: center;