From fe764a46e931ae79f1651f4a669a8c777e260f16 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 27 Feb 2023 16:00:08 +0100
Subject: [PATCH] fix(task): allow clicking on the whole task to open the task
 detail view

Resolves #3172
---
 src/components/input/fancycheckbox.vue        |  7 ++++-
 .../tasks/partials/singleTaskInList.vue       | 28 +++++++++----------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue
index 8c844bd6d0..43f55b7db2 100644
--- a/src/components/input/fancycheckbox.vue
+++ b/src/components/input/fancycheckbox.vue
@@ -7,7 +7,7 @@
 			@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
 			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">
 				<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('change', newChecked)
 }
+
+function check() {
+	checked.value = !checked.value
+	updateData(checked.value)
+}
 </script>
 
 
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index b203d41fd9..1056cbaac6 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -1,5 +1,9 @@
 <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
 			:disabled="(isArchived || disabled) && !canMarkAsDone"
 			@change="markAsDone"
@@ -12,8 +16,7 @@
 			class="mr-1"
 		/>
 		
-		<router-link
-			:to="taskDetailRoute"
+		<div
 			:class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
 			class="tasktext"
 		>
@@ -93,7 +96,7 @@
 			</span>
 
 			<checklist-summary :task="task"/>
-		</router-link>
+		</div>
 
 		<progress
 			class="progress is-small"
@@ -114,14 +117,14 @@
 
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
-			@click="toggleFavorite"
+			@click.prevent="toggleFavorite"
 			class="favorite"
 		>
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
 		</BaseButton>
 		<slot />
-	</div>
+	</router-link>
 </template>
 
 <script setup lang="ts">
@@ -284,8 +287,12 @@ function hideDeferDueDatePopup(e) {
 	cursor: pointer;
 	border-radius: $radius;
 	border: 2px solid transparent;
+	
+	color: var(--text);
+	transition: color ease $transition-duration;
 
 	&:hover {
+		color: var(--grey-900);
 		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 {
 		opacity: 0;
 		text-align: center;