feat(task): move task priority to the front when showing tasks inline

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;
 	}

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"/>

src/components/tasks/partials/singleTaskInlineReadonly.vue

@@ -1,31 +1,32 @@
 <template>
 	<div class="task">
-		
+		<priority-label :priority="task.priority" :done="task.done"/>
-	<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>
 
-		<ColorBubble
+		<span>
-			v-if="task.hexColor !== ''"
+			<span
-			:color="getHexColor(task.hexColor)"
+				v-if="showProject && typeof project !== 'undefined'"
-			class="mr-1"
+				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 -->
+			<ColorBubble
-		<span class="parent-tasks" v-if="typeof task.relatedTasks?.parenttask !== 'undefined'">
+				v-if="task.hexColor !== ''"
-			<template v-for="(pt, i) in task.relatedTasks.parenttask">
+				:color="getHexColor(task.hexColor)"
-				{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
+				class="mr-1"
-			</template>
+			/>
-			&rsaquo;
+
+			<!-- 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
+			<time
-			:datetime="formatISO(task.dueDate)"
+				:datetime="formatISO(task.dueDate)"
-			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-			class="is-italic"
+				class="is-italic"
-		>
+			>
-			– {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
+				– {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
-		</time>
+			</time>
-	</span>
+		</span>
 
-		<priority-label :priority="task.priority" :done="task.done"/>
 
 		<span>
-		<span class="project-task-icon" v-if="task.attachments.length > 0">
+			<span class="project-task-icon" v-if="task.attachments.length > 0">
-			<icon icon="paperclip"/>
+				<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"/>