From 7de067d141f046c4af561c6e5538bd9334a82f7c Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 13 Feb 2022 15:47:26 +0100
Subject: [PATCH 1/3] feat: ProgressBar component

---
 src/components/misc/ProgressBar.vue           | 164 ++++++++++++++++++
 src/components/tasks/partials/attachments.vue |  15 +-
 src/components/tasks/partials/kanban-card.vue |  18 +-
 src/styles/components/tasks.scss              |   5 -
 src/styles/global.scss                        |   2 +-
 src/styles/theme/theme.scss                   |  17 +-
 6 files changed, 186 insertions(+), 35 deletions(-)
 create mode 100644 src/components/misc/ProgressBar.vue

diff --git a/src/components/misc/ProgressBar.vue b/src/components/misc/ProgressBar.vue
new file mode 100644
index 000000000..f2dddfd04
--- /dev/null
+++ b/src/components/misc/ProgressBar.vue
@@ -0,0 +1,164 @@
+<template>
+	<progress
+		class="progress-bar"
+		:class="{
+			'is-small': isSmall,
+			'is-primary': isPrimary,
+		}"
+		:value="value"
+		max="100"
+	>
+		{{ value }}%
+	</progress>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+	value: {
+		type: Number,
+		required: true,
+	},
+	isSmall: {
+		type: Boolean,
+		default: false,
+	},
+	isPrimary: {
+		type: Boolean,
+		required: false,
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.progress-bar {
+	--progress-height: var(--size-normal, #{$size-normal});
+	--progress-bar-background-color: var(--border-light, #{$border-light});
+	--progress-value-background-color: var(--text, #{$text});
+	--progress-border-radius: var(--radius-rounded, #{$radius-rounded});
+	--progress-indeterminate-duration: 1.5s;
+
+	--size-small: #{$size-small};
+	--size-medium: #{$size-medium};
+	--size-large: #{$size-large};
+
+	appearance: none;
+	border: none;
+	border-radius: var(--progress-border-radius);
+	display: block;
+	height: var(--progress-height);
+	overflow: hidden;
+	padding: 0;
+	width: 100%;
+
+	&::-webkit-progress-bar {
+		background-color: var(--progress-bar-background-color);
+	}
+	&::-webkit-progress-value {
+		background-color: var(--progress-value-background-color);
+	}
+	&::-moz-progress-bar {
+		background-color: var(--progress-value-background-color);
+	}
+	&::-ms-fill {
+		background-color: var(--progress-value-background-color);
+		border: none;
+	}
+
+	// Colors
+	@each $name, $pair in $colors {
+		$color: nth($pair, 1);
+		&.is-#{$name} {
+			&::-webkit-progress-value {
+				--progress-value-background-color: var(--#{$name}, #{$color});
+			}
+
+			&::-moz-progress-bar {
+				--progress-value-background-color: var(--#{$name}, #{$color});
+			}
+
+			&::-ms-fill {
+				--progress-value-background-color: var(--#{$name}, #{$color});
+			}
+
+			&:indeterminate {
+				background-image: linear-gradient(
+					to right,
+					var(--#{$name}, #{$color}) 30%,
+					var(--progress-bar-background-color) 30%
+				);
+			}
+		}
+	}
+
+	&:indeterminate {
+		animation-duration: var(--progress-indeterminate-duration);
+		animation-iteration-count: infinite;
+		animation-name: moveIndeterminate;
+		animation-timing-function: linear;
+		background-color: var(--progress-bar-background-color);
+		background-image: linear-gradient(
+			to right,
+			var(--text, #{$text}) 30%,
+			var(--progress-bar-background-color) 30%
+		);
+		background-position: top left;
+		background-repeat: no-repeat;
+		background-size: 150% 150%;
+
+		&::-webkit-progress-bar {
+			background-color: transparent;
+		}
+
+		&::-moz-progress-bar {
+			background-color: transparent;
+		}
+
+		&::-ms-fill {
+			animation-name: none;
+		}
+	}
+
+	// Sizes
+	&.is-small {
+		--progress-height: var(--size-small, #{$size-small});
+	}
+	&.is-medium {
+		--progress-height: var(--size-medium, #{$size-medium});
+	}
+	&.is-large {
+		--progress-height: var(--size-large, #{$size-large});
+	}
+}
+
+@keyframes moveIndeterminate {
+	from {
+		background-position: 200% 0;
+	}
+	to {
+		background-position: -200% 0;
+	}
+}
+
+.progress-bar {
+	--progress-height: var(--size-normal, 1rem);
+
+	border-radius: $radius-large;
+	width: inherit; // overwrite bulma
+	min-width: 6vw;
+
+	@media screen and (max-width: $tablet) {
+		width: 100%;
+	}
+
+	&::-moz-progress-bar,
+	&::-webkit-progress-value {
+		background: var(--grey-500);
+	}
+}
+
+.progress-bar.is-small {
+	--progress-height: var(--size-small, 0.75rem);
+}
+</style>
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 7d507e5eb..c701d8193 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -16,14 +16,11 @@
 			type="file"
 			v-if="editEnabled"
 		/>
-		<progress
-			:value="attachmentService.uploadProgress"
-			class="progress is-primary"
-			max="100"
+		<ProgressBar
 			v-if="attachmentService.uploadProgress > 0"
-		>
-			{{ attachmentService.uploadProgress }}%
-		</progress>
+			:value="attachmentService.uploadProgress * 100"
+			is-primary
+		/>
 
 		<div class="files" v-if="attachments.length > 0">
 			<a
@@ -138,7 +135,8 @@
 <script>
 import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
-import User from '../../misc/user'
+import User from '@/components/misc/user'
+import ProgressBar from '@/components/misc/ProgressBar'
 import {mapState} from 'vuex'
 import copy from 'copy-to-clipboard'
 
@@ -148,6 +146,7 @@ export default {
 	name: 'attachments',
 	components: {
 		User,
+		ProgressBar,
 	},
 	data() {
 		return {
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index a3694a1b4..eb6698555 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -33,12 +33,11 @@
 			</time>
 		</span>
 		<h3>{{ task.title }}</h3>
-		<progress
-			class="progress is-small"
+		<ProgressBar
 			v-if="task.percentDone > 0"
-			:value="task.percentDone * 100" max="100">
-			{{ task.percentDone * 100 }}%
-		</progress>
+			:value="task.percentDone * 100"
+			is-small
+		/>
 		<div class="footer">
 			<labels :labels="task.labels"/>
 			<priority-label :priority="task.priority" :done="task.done"/>
@@ -67,10 +66,11 @@
 
 <script>
 import {playPop} from '../../../helpers/playPop'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-import User from '../../../components/misc/user'
+import PriorityLabel from '@/components/tasks/partials/priorityLabel'
+import User from '@/components/misc/user'
+import ProgressBar from '@/components/misc/ProgressBar'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels'
+import Labels from '@/components/tasks/partials/labels'
 import ChecklistSummary from './checklist-summary'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
@@ -81,6 +81,7 @@ export default {
 		ChecklistSummary,
 		Done,
 		PriorityLabel,
+		ProgressBar,
 		User,
 		Labels,
 	},
@@ -138,6 +139,7 @@ $task-background: var(--white);
 	border: 3px solid transparent;
 
 	font-size: .9rem;
+	margin: .5rem;
 	padding: .4rem;
 	border-radius: $radius;
 	background: $task-background;
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index e001c3686..c3114b689 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -15,11 +15,6 @@
 		}
 	}
 
-	.progress {
-		// overwrite bulma
-		margin-bottom: 0;
-	}
-
 	&.noborder {
 		margin: 1rem -0.5rem;
 	}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index bd187fe5a..ad0e63a18 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -24,7 +24,7 @@
 @import "bulma-css-variables/sass/elements/icon";
 @import "bulma-css-variables/sass/elements/image";
 //@import "bulma-css-variables/sass/elements/notification"; // not used
-@import "bulma-css-variables/sass/elements/progress";
+// @import "bulma-css-variables/sass/elements/progress"; // not used
 @import "bulma-css-variables/sass/elements/table";
 @import "bulma-css-variables/sass/elements/tag";
 @import "bulma-css-variables/sass/elements/title";
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 77a9ec068..f3d190ac9 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -38,20 +38,12 @@ h6 {
 // - kanban-card.vue
 // - singleTaskInList.vue
 .progress {
-  border-radius: $radius-large;
-	width: 50px;
-	margin: 0 0.5rem 0 0;
-	flex: 3 1 auto;
-
-	&::-moz-progress-bar,
-	&::-webkit-progress-value {
-	  background: var(--grey-500);
-	}
+	// margin: 0 0.5rem 0 0;
+	// flex: 3 1 auto;
 
 	@media screen and (max-width: $tablet) {
-		margin: 0.5rem 0 0 0;
-		order: 1;
-		width: 100%;
+		// margin: 0.5rem 0 0 0;
+		// order: 1;
 	}
 }
 
@@ -136,7 +128,6 @@ button.table {
 .color-bubble {
   display: inline-block;
   border-radius: 100%;
-  margin-right: 4px;
 }
 
 .dropdown-menu  .dropdown-content {
-- 
2.45.1


From 5f8294a64f67f92e54bb404814d2ba3e4c3aaa1c Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 13 Feb 2022 15:51:29 +0100
Subject: [PATCH 2/3] fix: button variant

---
 src/components/tasks/partials/attachments.vue | 52 ++++++-------------
 1 file changed, 17 insertions(+), 35 deletions(-)

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index c701d8193..89694c6de 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -31,7 +31,7 @@
 			>
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
-					<p class="attachment-info-meta">
+					<p class="collapses">
 						<i18n-t keypath="task.attachment.createdBy">
 							<span v-tooltip="formatDate(a.created)">
 								{{ formatDateSince(a.created) }}
@@ -80,7 +80,7 @@
 			@click="$refs.files.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
-			variant="secondary"
+			type="secondary"
 			:shadow="false"
 		>
 			{{ $t('task.attachment.upload') }}
@@ -288,6 +288,21 @@ export default {
             content: '·';
             padding: 0 .25rem;
           }
+
+          @media screen and (max-width: $mobile) {
+            &.collapses {
+              flex-direction: column;
+
+              > span:not(:last-child):after,
+              > a:not(:last-child):after {
+                display: none;
+              }
+
+              .user .username {
+                display: none;
+              }
+            }
+          }
         }
       }
     }
@@ -325,10 +340,6 @@ export default {
         height: auto;
         text-shadow: var(--shadow-md);
         animation: bounce 2s infinite;
-		
-		@media (prefers-reduced-motion: reduce) {
-          animation: none;
-		}
       }
 
       .hint {
@@ -345,35 +356,6 @@ export default {
   }
 }
 
-.attachment-info-meta {
-	display: flex;
-	align-items: center;
-	
-	:deep(.user) {
-		display: flex !important;
-		align-items: center;
-		margin: 0 .5rem;
-	}
-
-	@media screen and (max-width: $mobile) {
-		flex-direction: column;
-		align-items: flex-start;
-		
-		:deep(.user) {
-			margin: .5rem 0;
-		}
-
-		> span:not(:last-child):after,
-		> a:not(:last-child):after {
-			display: none;
-		}
-
-		.user .username {
-			display: none;
-		}
-	}
-}
-
 @keyframes bounce {
   from,
   20%,
-- 
2.45.1


From 41bf7bdaff755343447a25fc003d08b3a7c435ef Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 10 Apr 2022 02:34:57 +0200
Subject: [PATCH 3/3] WIP: rework single task in list

---
 src/components/tasks/partials/attachments.vue |   2 -
 src/components/tasks/partials/kanban-card.vue |   7 +-
 .../tasks/partials/singleTaskInList.vue       | 659 +++++++++---------
 3 files changed, 338 insertions(+), 330 deletions(-)

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 89694c6de..173bb5f14 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -381,6 +381,4 @@ export default {
     transform: translate3d(0, -4px, 0);
   }
 }
-
-@include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index eb6698555..86dac88be 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -28,9 +28,9 @@
 			<span class="icon">
 				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
-			<time :datetime="formatISO(task.dueDate)">
+			<span>
 				{{ formatDateSince(task.dueDate) }}
-			</time>
+			</span>
 		</span>
 		<h3>{{ task.title }}</h3>
 		<ProgressBar
@@ -73,8 +73,6 @@ import Done from '@/components/misc/Done.vue'
 import Labels from '@/components/tasks/partials/labels'
 import ChecklistSummary from './checklist-summary'
 
-import {colorIsDark} from '@/helpers/color/colorIsDark'
-
 export default {
 	name: 'kanban-card',
 	components: {
@@ -101,7 +99,6 @@ export default {
 		},
 	},
 	methods: {
-		colorIsDark,
 		async toggleTaskDone(task) {
 			this.loadingInternal = true
 			try {
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 85293deca..7ff5e6bf2 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -1,365 +1,378 @@
 <template>
-	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
-		<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
+	<div
+		class="task loader-container"
+		:class="{'is-loading': taskService.loading}"
+		@click="$router.push({ name: taskDetailRoute, params: { id: task.id } })"
+	>
+		<fancycheckbox
+			class="fancycheckbox"
+			:disabled="isArchived || disabled" @change="markAsDone"
+			v-model="task.done"
+		/>
+
 		<span
 			v-if="showListColor && listColor !== ''"
-			:style="{backgroundColor: listColor }"
 			class="color-bubble"
-		>
-		</span>
-		<router-link
-			:to="taskDetailRoute"
-			:class="{ 'done': task.done}"
-			class="tasktext">
-			<span>
-				<router-link
-					:to="{ name: 'list.list', params: { listId: task.listId } }"
-					class="task-list"
-					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
-					v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-					{{ $store.getters['lists/getListById'](task.listId).title }}
-				</router-link>
+			:style="{backgroundColor: listColor }"
+		/>
 
-				<!-- Show any parent tasks to make it clear this task is a sub task of something -->
-				<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
-					<template v-for="(pt, i) in task.relatedTasks.parenttask">
-						{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
-					</template>
-					>
-				</span>
-				{{ task.title }}
-			</span>
-
-			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0"/>
-			<user
-				:avatar-size="27"
-				:is-inline="true"
-				:key="task.id + 'assignee' + a.id + i"
-				:show-username="false"
-				:user="a"
-				v-for="(a, i) in task.assignees"
-			/>
-			<time
-				:datetime="formatISO(task.dueDate)"
-				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-				class="is-italic"
-				@click.prevent.stop="showDefer = !showDefer"
-				v-if="+new Date(task.dueDate) > 0"
-				v-tooltip="formatDate(task.dueDate)"
-				:aria-expanded="showDefer ? 'true' : 'false'"
-			>
-				- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
-			</time>
-			<transition name="fade">
-				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
-			</transition>
-			<priority-label :priority="task.priority" :done="task.done"/>
-			<span>
-				<span class="list-task-icon" v-if="task.attachments.length > 0">
-					<icon icon="paperclip"/>
-				</span>
-				<span class="list-task-icon" v-if="task.description">
-					<icon icon="align-left"/>
-				</span>
-				<span class="list-task-icon" v-if="task.repeatAfter.amount > 0">
-					<icon icon="history"/>
-				</span>
-			</span>
-			<checklist-summary :task="task"/>
-		</router-link>
-		<progress
-			class="progress is-small"
-			v-if="task.percentDone > 0"
-			:value="task.percentDone * 100" max="100">
-			{{ task.percentDone * 100 }}%
-		</progress>
 		<router-link
-			:to="{ name: 'list.list', params: { listId: task.listId } }"
+			v-if="showList && list !== null"
 			class="task-list"
-			v-if="!showList && currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
-			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-			{{ $store.getters['lists/getListById'](task.listId).title }}
+			:to="{ name: 'list.list', params: { listId: task.listId } }"
+			v-tooltip="$t('task.detail.belongsToList', {list: list.title})"
+		>
+			{{ list.title }}
 		</router-link>
+
+		<router-link
+			class="tasktext"
+			:to="{ name: taskDetailRoute, params: { id: task.id } }"
+			:class="{ 'done': task.done }"
+		>
+			<!-- Show any parent tasks to make it clear this task is a sub task of something -->
+			<span
+				v-if="task.relatedTasks.parenttask"
+				class="parent-tasks"
+			>
+				<template v-for="(pt, i) in task.relatedTasks.parenttask">
+					{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
+				</template>
+				>
+			</span>
+			<span class="task-title">{{ task.title }}</span>
+		</router-link>
+
+		<labels class="labels" :labels="task.labels" v-if="task.labels.length > 0"/>
+
+		<user
+			v-for="(a, i) in task.assignees"
+			:key="task.id + 'assignee' + a.id + i"
+			:avatar-size="27"
+			:show-username="false"
+			:user="a"
+		/>
+
+		<popup v-if="+new Date(task.dueDate) > 0">
+			<template #trigger="{toggle}">
+				<em
+					:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+					@click.prevent.stop="toggle()"
+					v-tooltip="formatDate(task.dueDate)"
+				>
+					- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
+				</em>
+			</template>
+
+			<template #content="{isOpen}">
+				<transition name="fade">
+					<defer-task v-if="isOpen" v-model="task" />
+				</transition>
+			</template>
+		</popup>
+
+		<priority-label :priority="task.priority" :done="task.done"/>
+
+		<icon
+			v-if="task.attachments.length > 0"
+			class="list-task-icon"
+			icon="paperclip"
+		/>
+
+		<icon
+			v-if="task.description"
+			class="list-task-icon"
+			icon="align-left"
+		/>
+
+		<icon
+			v-if="task.repeatAfter.amount > 0"
+			class="list-task-icon"
+			icon="history"
+		/>
+
+		<checklist-summary :task="task"/>
+
+		<ProgressBar
+			v-if="task.percentDone > 0"
+			:value="task.percentDone * 100"
+			is-small
+		/>
+
+		<router-link
+			v-if="!showList && currentList.id !== task.listId && list !== null"
+			class="task-list"
+			:to="{ name: 'list.list', params: { listId: task.listId } }"
+			v-tooltip="$t('task.detail.belongsToList', {list: list.title})"
+		>
+			{{ list.title }}
+		</router-link>
+
 		<a
+			class="favorite"
 			:class="{'is-favorite': task.isFavorite}"
 			@click="toggleFavorite"
-			class="favorite">
-			<icon icon="star" v-if="task.isFavorite"/>
-			<icon :icon="['far', 'star']" v-else/>
+		>
+			<icon :icon="task.isFavorite ? 'star' : ['far', 'star']" />
 		</a>
+
 		<slot></slot>
 	</div>
 </template>
 
-<script>
-import TaskModel from '../../../models/task'
+<script lang="ts" setup>
+import {reactive, computed, watch, defineProps, defineEmits, PropType } from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useStore} from 'vuex'
+
+import TaskModel from '@/models/task'
+import TaskService from '@/services/task'
+
 import PriorityLabel from './priorityLabel'
-import TaskService from '../../../services/task'
-import Labels from './labels'
-import User from '../../misc/user'
-import Fancycheckbox from '../../input/fancycheckbox'
 import DeferTask from './defer-task'
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {playPop} from '@/helpers/playPop'
+import Labels from './labels'
 import ChecklistSummary from './checklist-summary'
 
-export default {
-	name: 'singleTaskInList',
-	data() {
-		return {
-			taskService: new TaskService(),
-			task: new TaskModel(),
-			showDefer: false,
+import User from '@/components/misc/user'
+import Fancycheckbox from '@/components/input/fancycheckbox'
+import Popup from '@/components/misc/popup.vue'
+import ProgressBar from '@/components/misc/ProgressBar'
+
+import {playPop} from '@/helpers/playPop'
+import {success} from '@/message'
+
+const props = defineProps({
+	theTask: {
+		type: Object as PropType<TaskModel>,
+		required: true,
+	},
+	isArchived: {
+		type: Boolean,
+		default: false,
+	},
+	taskDetailRoute: {
+		type: String,
+		default: 'task.list.detail',
+	},
+	showList: {
+		type: Boolean,
+		default: false,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	showListColor: {
+		type: Boolean,
+		default: true,
+	},
+})
+
+const emit = defineEmits(['task-updated'])
+
+const taskService = reactive(new TaskService())
+const task = reactive(new TaskModel())
+
+watch(props.theTask, (newVal) => {
+	Object.assign(task, newVal)
+}, { immediate: true },
+)
+
+const store = useStore()
+const currentList = computed(() => {
+	return typeof store.state.currentList === 'undefined' ? {
+		id: 0,
+		title: '',
+	} : store.state.currentList
+})
+
+const list = computed(() => store.getters['lists/getListById'](task.listId))
+const listColor = computed(() => list.value?.hexColor || '')
+
+const { t } = useI18n()
+
+async function markAsDone(checked: boolean) {
+	async function updateFunc() {
+		const newTask = await taskService.update(task)
+		if (task.done) {
+			playPop()
 		}
-	},
-	components: {
-		ChecklistSummary,
-		DeferTask,
-		Fancycheckbox,
-		User,
-		Labels,
-		PriorityLabel,
-	},
-	props: {
-		theTask: {
-			type: TaskModel,
-			required: true,
-		},
-		isArchived: {
-			type: Boolean,
-			default: false,
-		},
-		showList: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		showListColor: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	emits: ['task-updated'],
-	watch: {
-		theTask(newVal) {
-			this.task = newVal
-		},
-	},
-	mounted() {
-		this.task = this.theTask
-		document.addEventListener('click', this.hideDeferDueDatePopup)
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.hideDeferDueDatePopup)
-	},
-	computed: {
-		listColor() {
-			const list = this.$store.getters['lists/getListById'](this.task.listId)
-			return list !== null ? list.hexColor : ''
-		},
-		currentList() {
-			return typeof this.$store.state.currentList === 'undefined' ? {
-				id: 0,
-				title: '',
-			} : this.$store.state.currentList
-		},
-		taskDetailRoute() {
-			return {
-				name: 'task.detail',
-				params: { id: this.task.id },
-				// TODO: re-enable opening task detail in modal
-				// state: { backdropView: this.$router.currentRoute.value.fullPath },
-			}
-		},
-	},
-	methods: {
-		async markAsDone(checked) {
-			const updateFunc = async () => {
-				const task = await this.taskService.update(this.task)
-				if (this.task.done) {
-					playPop()
-				}
-				this.task = task
-				this.$emit('task-updated', task)
-				this.$message.success({
-					message: this.task.done ?
-						this.$t('task.doneSuccess') :
-						this.$t('task.undoneSuccess'),
-				}, [{
-					title: 'Undo',
-					callback() {
-						this.task.done = !this.task.done
-						this.markAsDone(!checked)
-					},
-				}])
-			}
+		Object.assign(task, newTask)
+		emit('task-updated', task)
+		success({
+			message: task.done ?
+				t('task.doneSuccess') :
+				t('task.undoneSuccess'),
+		}, [{
+			title: 'Undo',
+			callback() {
+				task.done = !task.done
+				markAsDone(!checked)
+			},
+		}])
+	}
 
-			if (checked) {
-				setTimeout(updateFunc, 300) // Delay it to show the animation when marking a task as done
-			} else {
-				await updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
-			}
-		},
+	if (checked) {
+		// Delay it to show the animation when marking a task as done
+		setTimeout(updateFunc, 300)
+	} else {
+		// Don't delay it when un-marking it as it doesn't have an animation the other way around
+		await updateFunc()
+	}
+}
 
-		async toggleFavorite() {
-			this.task.isFavorite = !this.task.isFavorite
-			this.task = await this.taskService.update(this.task)
-			this.$emit('task-updated', this.task)
-			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
-		},
-		hideDeferDueDatePopup(e) {
-			if (!this.showDefer) {
-				return
-			}
-			closeWhenClickedOutside(e, this.$refs.deferDueDate.$el, () => {
-				this.showDefer = false
-			})
-		},
-	},
+async function toggleFavorite() {
+	task.isFavorite = !task.isFavorite
+	const newTask = await taskService.update(task)
+	Object.assign(task, newTask)
+	emit('task-updated', task)
+	store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
 }
 </script>
 
 <style lang="scss" scoped>
+$line-height: 2.5;
 .task {
-	display: flex;
-	flex-wrap: wrap;
-	padding: .4rem;
+	display: grid;
+	grid-template-areas:
+		"checkbox color-bubble list1 text list2";
+	grid-template-columns: min-content max-content fit-content(10ch) minmax(0, 3fr) fit-content(10ch);
+	grid-auto-flow: column;
+	grid-auto-columns: min-content;
+	grid-template-rows: 1fr;
+	place-items: center start;
 	transition: background-color $transition;
-	align-items: center;
 	cursor: pointer;
 	border-radius: $radius;
 	border: 2px solid transparent;
+	line-height: $line-height;
 
 	&:hover {
 		background-color: var(--grey-100);
 	}
 
-	.tasktext,
-	&.tasktext {
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		display: inline-block;
-		flex: 1 0 50%;
-
-		.overdue {
-			color: var(--danger);
-		}
+	> * {
+		min-width: min-content;
 	}
 
-	.task-list {
-		width: auto;
-		color: var(--grey-400);
-		font-size: .9rem;
-		white-space: nowrap;
-	}
-
-	.color-bubble {
-		height: 10px;
-		flex: 0 0 10px;
-	}
-
-	.avatar {
-		border-radius: 50%;
-		vertical-align: bottom;
-		margin-left: 5px;
-		height: 27px;
-		width: 27px;
-	}
-
-	.list-task-icon {
-		margin-left: 6px;
-
-		&:not(:first-of-type) {
-			margin-left: 8px;
-		}
-
-	}
-
-	a {
-		color: var(--text);
-		transition: color ease $transition-duration;
-
-		&:hover {
-			color: var(--grey-900);
-		}
-	}
-
-	.favorite {
-		opacity: 0;
-		text-align: center;
-		width: 27px;
-		transition: opacity $transition, color $transition;
-
-		&:hover {
-			color: var(--warning);
-		}
-
-		&.is-favorite {
-			opacity: 1;
-			color: var(--warning);
-		}
-	}
-
-	&:hover .favorite {
-		opacity: 1;
-	}
-
-	.handle {
-		opacity: 0;
-		transition: opacity $transition;
-		margin-right: .25rem;
-		cursor: grab;
-	}
-
-	&:hover .handle {
-		opacity: 1;
-	}
-
-	:deep(.fancycheckbox) {
-		height: 18px;
-		padding-top: 0;
-		padding-right: .5rem;
-
-		span {
-			display: none;
-		}
-	}
-
-	.tasktext.done {
-		text-decoration: line-through;
-		color: var(--grey-500);
-	}
-
-	span.parent-tasks {
-		color: var(--grey-500);
-		width: auto;
-	}
-
-	.remove {
-		color: var(--danger);
-	}
-
-	input[type="checkbox"] {
-		vertical-align: middle;
-	}
-
-	.settings {
-		float: right;
-		width: 24px;
-		cursor: pointer;
-	}
-
-	&.loader-container.is-loading:after {
-		top: calc(50% - 1rem);
-		left: calc(50% - 1rem);
-		width: 2rem;
-		height: 2rem;
-		border-left-color: var(--grey-300);
-		border-bottom-color: var(--grey-300);
+	> * + * {
+		// gap does not work since we have collapsed tracks
+		margin-left: 0.5rem;
 	}
 }
+
+.task.loader-container.is-loading::after {
+	top: 50%;
+	left: 50%;
+	width: 2rem;
+	height: 2rem;
+	transform: translate(-50%, -50%);
+	border-left-color: var(--grey-300);
+	border-bottom-color: var(--grey-300);
+}
+
+.fancycheckbox {
+	grid-area: checkbox;
+	align-self: stretch;
+	padding-left: .25rem;
+	padding-right: .5rem;
+	margin-right: -0.5rem;
+}
+
+.color-bubble {
+	grid-area: color-bubble;
+	width: 10px;
+	height: 10px;
+}
+
+@mixin overflow-text() {
+	display: inline-block;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.task-list {
+	grid-area: list1;
+	max-width: 100%;
+	min-width: 0; // this is needed for the overflow text
+	@include overflow-text();
+	font-size: .9rem;
+	color: var(--grey-400);
+}
+
+.tasktext {
+	grid-area: text;
+	max-width: 100%;
+	min-width: 0; // this is needed for the overflow text
+	display: flex;
+    justify-content: space-between;
+	align-items: center;
+}
+
+.tasktext.done {
+	text-decoration: line-through;
+	color: var(--grey-500);
+}
+
+.parent-tasks {
+	color: var(--grey-500);
+	width: auto;
+}
+
+.task-title {
+	flex: 1 1 0;
+	@include overflow-text();
+	min-width: 6vw;
+}
+
+.overdue {
+	color: var(--danger);
+}
+
+.avatar {
+	border-radius: 50%;
+	vertical-align: bottom;
+	height: 27px;
+	width: 27px;
+}
+
+a {
+	color: var(--text);
+	transition: color ease $transition-duration;
+
+	&:hover {
+		color: var(--grey-900);
+	}
+}
+
+.favorite {
+	opacity: 0;
+	text-align: center;
+	width: 27px;
+	transition: opacity $transition, color $transition;
+
+	&:hover {
+		color: var(--warning);
+	}
+
+	&.is-favorite {
+		opacity: 1;
+		color: var(--warning);
+	}
+}
+
+.task:hover .favorite {
+	opacity: 1;
+}
+
+:deep(.handle) {
+	opacity: 0;
+	transition: opacity $transition;
+	cursor: grab;
+}
+
+.task:hover :deep(.handle) {
+	opacity: 1;
+}
 </style>
\ No newline at end of file
-- 
2.45.1