From beb016400e03befe47e0b015a6226fb195ca1a2a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 6 Sep 2023 15:53:40 +0200
Subject: [PATCH] feat(task): move task priority to the front when showing
 tasks inline

---
 .../tasks/partials/priorityLabel.vue          |  7 +-
 .../tasks/partials/singleTaskInProject.vue    |  3 +-
 .../partials/singleTaskInlineReadonly.vue     | 82 +++++++++----------
 3 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue
index f4ba86a52..669f05ab4 100644
--- a/src/components/tasks/partials/priorityLabel.vue
+++ b/src/components/tasks/partials/priorityLabel.vue
@@ -40,17 +40,12 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-.priority-label {
-	display: inline-flex;
-	align-items: center;
-}
-
 span.high-priority {
 	color: var(--danger);
 	width: auto !important; // To override the width set in tasks
 
 	.icon {
-		vertical-align: middle;
+		vertical-align: top;
 		width: auto !important;
 		padding: 0 .5rem;
 	}
diff --git a/src/components/tasks/partials/singleTaskInProject.vue b/src/components/tasks/partials/singleTaskInProject.vue
index 880cca45d..961c2883b 100644
--- a/src/components/tasks/partials/singleTaskInProject.vue
+++ b/src/components/tasks/partials/singleTaskInProject.vue
@@ -17,6 +17,7 @@
 			:class="{ 'done': task.done, 'show-project': showProject && project}"
 			class="tasktext"
 		>
+			<priority-label :priority="task.priority" :done="task.done"/>
 			<span>
 				<router-link
 					v-if="showProject && typeof project !== 'undefined'"
@@ -77,8 +78,6 @@
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
 			</CustomTransition>
 
-			<priority-label :priority="task.priority" :done="task.done"/>
-
 			<span>
 				<span class="project-task-icon" v-if="task.attachments.length > 0">
 					<icon icon="paperclip"/>
diff --git a/src/components/tasks/partials/singleTaskInlineReadonly.vue b/src/components/tasks/partials/singleTaskInlineReadonly.vue
index 23b974259..af06c8103 100644
--- a/src/components/tasks/partials/singleTaskInlineReadonly.vue
+++ b/src/components/tasks/partials/singleTaskInlineReadonly.vue
@@ -1,31 +1,32 @@
 <template>
 	<div class="task">
-		
-	<span>
-		<span
-			v-if="showProject && typeof project !== 'undefined'"
-			class="task-project"
-			:class="{'mr-2': task.hexColor !== ''}"
-			v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
-		>
-			{{ project.title }}
-		</span>
+		<priority-label :priority="task.priority" :done="task.done"/>
 
-		<ColorBubble
-			v-if="task.hexColor !== ''"
-			:color="getHexColor(task.hexColor)"
-			class="mr-1"
-		/>
+		<span>
+			<span
+				v-if="showProject && typeof project !== 'undefined'"
+				class="task-project"
+				:class="{'mr-2': task.hexColor !== ''}"
+				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
+			>
+				{{ project.title }}
+			</span>
 
-		<!-- 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>
-			&rsaquo;
+			<ColorBubble
+				v-if="task.hexColor !== ''"
+				:color="getHexColor(task.hexColor)"
+				class="mr-1"
+			/>
+
+			<!-- 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>
+				&rsaquo;
+			</span>
+			{{ task.title }}
 		</span>
-		{{ task.title }}
-	</span>
 
 		<labels
 			v-if="task.labels.length > 0"
@@ -46,28 +47,27 @@
 			class="dueDate"
 			v-tooltip="formatDateLong(task.dueDate)"
 		>
-		<time
-			:datetime="formatISO(task.dueDate)"
-			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-			class="is-italic"
-		>
-			– {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
-		</time>
-	</span>
+			<time
+				:datetime="formatISO(task.dueDate)"
+				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				class="is-italic"
+			>
+				– {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
+			</time>
+		</span>
 
-		<priority-label :priority="task.priority" :done="task.done"/>
 
 		<span>
-		<span class="project-task-icon" v-if="task.attachments.length > 0">
-			<icon icon="paperclip"/>
+			<span class="project-task-icon" v-if="task.attachments.length > 0">
+				<icon icon="paperclip"/>
+			</span>
+			<span class="project-task-icon" v-if="task.description">
+				<icon icon="align-left"/>
+			</span>
+			<span class="project-task-icon" v-if="task.repeatAfter.amount > 0">
+				<icon icon="history"/>
+			</span>
 		</span>
-		<span class="project-task-icon" v-if="task.description">
-			<icon icon="align-left"/>
-		</span>
-		<span class="project-task-icon" v-if="task.repeatAfter.amount > 0">
-			<icon icon="history"/>
-		</span>
-	</span>
 
 		<checklist-summary :task="task"/>