Merge branch 'main' into feature/vue3-modals-with-router-4

# Conflicts:
#	src/router/index.ts
#	src/views/tasks/TaskDetailView.vue

src/components/tasks/add-task.vue

@@ -42,7 +42,7 @@ import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
 import { tryOnMounted, debouncedWatch, useWindowSize, MaybeRef } from '@vueuse/core'
 
-import TaskService from '../../services/task'
+import TaskService from '@/services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 
 function cleanupTitle(title: string) {
@@ -117,9 +117,6 @@ function useAutoHeightTextarea(value: MaybeRef<string>) {
 	return textarea
 }
 
-const emit = defineEmits(['taskAdded'])
-
-
 const props = defineProps({
 	defaultPosition: {
 		type: Number,
@@ -127,8 +124,7 @@ const props = defineProps({
 	},
 })
 
-const taskService = shallowReactive(new TaskService())
-const errorMessage = ref('')
+const emit = defineEmits(['taskAdded'])
 
 const newTaskTitle = ref('')
 const newTaskInput = useAutoHeightTextarea(newTaskTitle)
@@ -136,6 +132,9 @@ const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 const { t } = useI18n()
 const store = useStore()
 
+const taskService = shallowReactive(new TaskService())
+const errorMessage = ref('')
+
 async function addTask() {
 	if (newTaskTitle.value === '') {
 		errorMessage.value = t('list.create.addTitleRequired')

src/components/tasks/edit-task.vue

@@ -78,7 +78,6 @@
 <script>
 import AsyncEditor from '@/components/input/AsyncEditor'
 
-import ListService from '../../services/list'
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
 import priorities from '../../models/constants/priorities'
@@ -90,14 +89,10 @@ export default {
 	name: 'edit-task',
 	data() {
 		return {
-			listId: this.$route.params.id,
-			listService: new ListService(),
 			taskService: new TaskService(),
 
 			priorities: priorities,
-			list: {},
 			editorActive: false,
-			newTask: new TaskModel(),
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
 		}

src/components/tasks/gantt-component.vue

@@ -183,6 +183,8 @@ import {mapState} from 'vuex'
 import Rights from '../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 
+import {colorIsDark} from '@/helpers/color/colorIsDark'
+
 export default {
 	name: 'GanttChart',
 	components: {
@@ -252,6 +254,7 @@ export default {
 		canWrite: (state) => state.currentList.maxRight > Rights.READ,
 	}),
 	methods: {
+		colorIsDark,
 		buildTheGanttChart() {
 			this.setDates()
 			this.prepareGanttDays()

src/components/tasks/partials/attachments.vue

@@ -34,7 +34,7 @@
 			>
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
-					<p class="collapses">
+					<p class="attachment-info-meta">
 						<i18n-t keypath="task.attachment.createdBy">
 							<span v-tooltip="formatDate(a.created)">
 								{{ formatDateSince(a.created) }}
@@ -289,21 +289,6 @@ 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;
-              }
-            }
-          }
         }
       }
     }
@@ -341,6 +326,10 @@ export default {
         height: auto;
         text-shadow: var(--shadow-md);
         animation: bounce 2s infinite;
+		
+		@media (prefers-reduced-motion: reduce) {
+          animation: none;
+		}
       }
 
       .hint {
@@ -357,6 +346,35 @@ 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%,

src/components/tasks/partials/date-table-cell.vue

@@ -1,6 +1,8 @@
 <template>
 	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
-		{{ +date === 0 ? '-' : formatDateSince(date) }}
+		<time :datetime="date ? formatISO(date) : null">
+			{{ +date === 0 ? '-' : formatDateSince(date) }}
+		</time>
 	</td>
 </template>
 

src/components/tasks/partials/kanban-card.vue

@@ -28,9 +28,9 @@
 			<span class="icon">
 				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
-			<span>
+			<time :datetime="formatISO(task.dueDate)">
 				{{ formatDateSince(task.dueDate) }}
-			</span>
+			</time>
 		</span>
 		<h3>{{ task.title }}</h3>
 		<progress
@@ -73,6 +73,8 @@ 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: {
@@ -98,6 +100,7 @@ export default {
 		},
 	},
 	methods: {
+		colorIsDark,
 		async toggleTaskDone(task) {
 			this.loadingInternal = true
 			try {

src/components/tasks/partials/singleTaskInList.vue

@@ -39,14 +39,17 @@
 				:user="a"
 				v-for="(a, i) in task.assignees"
 			/>
-			<i
+			<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)}) }}
-			</i>
+			</time>
 			<transition name="fade">
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
 			</transition>