Merge branch 'main' into feature/date-math

src/components/home/contentAuth.vue

@@ -236,6 +236,11 @@ store.dispatch('labels/loadAllLabels')
   .app-content {
     padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
 
+	// Used to make sure the spinner is always in the middle while loading
+	> .loader-container {
+      min-height: calc(100vh -  #{$navbar-height + 1.5rem + 1rem});
+	}
+
     @media screen and (max-width: $tablet) {
       margin-left: 0;
       padding-top: 1.5rem;
@@ -264,7 +269,9 @@ store.dispatch('labels/loadAllLabels')
 	bottom: 0;
 	left: 0;
 	right: 0;
-	background: rgba(250, 250, 250, 0.8);
+	height: 100vh;
+	width: 100vw;
+	background: hsla(var(--grey-100-hsl), 0.8);
 	z-index: 5;
 	opacity: 0;
 	transition: all $transition;

src/components/home/navigation.vue

@@ -6,7 +6,7 @@
 			</router-link>
 			<ul class="menu-list">
 				<li>
-					<router-link :to="{ name: 'home'}">
+					<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
 						<span class="icon">
 							<icon icon="calendar"/>
 						</span>
@@ -14,7 +14,7 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'tasks.range'}">
+					<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
 						<span class="icon">
 							<icon :icon="['far', 'calendar-alt']"/>
 						</span>
@@ -22,7 +22,7 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'namespaces.index'}">
+					<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
 						<span class="icon">
 							<icon icon="layer-group"/>
 						</span>
@@ -30,7 +30,7 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'labels.index'}">
+					<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
 						<span class="icon">
 							<icon icon="tags"/>
 						</span>
@@ -38,7 +38,7 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'teams.index'}">
+					<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
 						<span class="icon">
 							<icon icon="users"/>
 						</span>

src/components/input/multiselect.vue

@@ -450,7 +450,6 @@ export default {
 
 		button {
 			background: transparent;
-			display: block;
 			text-align: left;
 			box-shadow: none;
 			border-radius: 0;
@@ -460,6 +459,7 @@ export default {
 			padding: .5rem;
 			border: none;
 			cursor: pointer;
+			color: var(--grey-800);
 
 			display: flex;
 			justify-content: space-between;

src/components/input/password.vue

@@ -16,7 +16,7 @@
 		<a
 			@click="togglePasswordFieldType"
 			class="password-field-type-toggle"
-			aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
+			:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
 			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
 		</a>

src/components/misc/keyboard-shortcuts/index.vue

@@ -6,9 +6,13 @@
 
 				<message class="mb-4" v-if="s.available">
 					{{
-						s.available($route)
-							? $t('keyboardShortcuts.currentPageOnly')
-							: $t('keyboardShortcuts.allPages')
+						typeof s.available === 'undefined' ?
+							$t('keyboardShortcuts.allPages') :
+							(
+								s.available($route)
+									? $t('keyboardShortcuts.currentPageOnly')
+									: $t('keyboardShortcuts.somePagesOnly')
+							)
 					}}
 				</message>
 
@@ -38,6 +42,7 @@ import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
 import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
 
 const store = useStore()
+
 function close() {
 	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
 }

src/components/misc/keyboard-shortcuts/shortcuts.ts

@@ -30,6 +30,36 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 			},
 		],
 	},
+	{
+		title: 'keyboardShortcuts.navigation.title',
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.navigation.overview',
+				keys: ['g', 'o'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.upcoming',
+				keys: ['g', 'u'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.namespaces',
+				keys: ['g', 'n'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.labels',
+				keys: ['g', 'a'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.teams',
+				keys: ['g', 'm'],
+				combination: 'then',
+			},
+		],
+	},
 	{
 		title: 'list.kanban.title',
 		available: (route) => route.name === 'list.kanban',
@@ -70,6 +100,10 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 		title: 'keyboardShortcuts.task.title',
 		available: (route) => route.name === 'task.detail',
 		shortcuts: [
+			{
+				title: 'keyboardShortcuts.task.done',
+				keys: ['t'],
+			},
 			{
 				title: 'keyboardShortcuts.task.assign',
 				keys: ['a'],
@@ -90,6 +124,14 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 				title: 'keyboardShortcuts.task.related',
 				keys: ['r'],
 			},
+			{
+				title: 'keyboardShortcuts.task.move',
+				keys: ['m'],
+			},
+			{
+				title: 'keyboardShortcuts.task.color',
+				keys: ['c'],
+			},
 		],
 	},
 ]

src/components/modal/modal.vue

@@ -210,14 +210,14 @@ export default {
 	font-size: 2rem;
 
 	@media screen and (max-width: $desktop) {
-		color: var(--dark);
+		color: var(--grey-900);
 	}
 }
 </style>
 
 <style lang="scss">
 // Close icon SVG uses currentColor, change the color to keep it visible
-.dark .task-detail-view-modal .close {
+.dark .close {
 	color: var(--grey-900);
 }
 </style>

src/components/tasks/add-task.vue

@@ -5,6 +5,7 @@
 				<textarea
 					:disabled="taskService.loading || undefined"
 					class="add-task-textarea input"
+					:class="{'textarea-empty': newTaskTitle === ''}"
 					:placeholder="$t('list.list.addPlaceholder')"
 					rows="1"
 					v-focus
@@ -24,15 +25,18 @@
 					@click="addTask()"
 					icon="plus"
 					:loading="taskService.loading"
+					:aria-label="$t('list.list.add')"
 				>
-					{{ $t('list.list.add') }}
+					<span class="button-text">
+						{{ $t('list.list.add') }}
+					</span>
 				</x-button>
 			</p>
 		</div>
 		<p class="help is-danger" v-if="errorMessage !== ''">
 			{{ errorMessage }}
 		</p>
-		<quick-add-magic v-else />
+		<quick-add-magic v-else/>
 	</div>
 </template>
 
@@ -40,7 +44,7 @@
 import {ref, watch, unref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
-import { tryOnMounted, debouncedWatch, useWindowSize, MaybeRef } from '@vueuse/core'
+import {tryOnMounted, debouncedWatch, useWindowSize, MaybeRef} from '@vueuse/core'
 
 import TaskService from '@/services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
@@ -54,12 +58,12 @@ function useAutoHeightTextarea(value: MaybeRef<string>) {
 	const minHeight = ref(0)
 
 	// adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34
-	function resize(textareaEl: HTMLInputElement|undefined) {
+	function resize(textareaEl: HTMLInputElement | undefined) {
 		if (!textareaEl) return
 
 		let empty
 
-		// the value here is the the attribute value
+		// the value here is the attribute value
 		if (!textareaEl.value && textareaEl.placeholder) {
 			empty = true
 			textareaEl.value = textareaEl.placeholder
@@ -95,12 +99,12 @@ function useAutoHeightTextarea(value: MaybeRef<string>) {
 		}
 	})
 
-	const { width: windowWidth } = useWindowSize()
+	const {width: windowWidth} = useWindowSize()
 
 	debouncedWatch(
 		windowWidth,
 		() => resize(textarea.value),
-		{ debounce: 200 },
+		{debounce: 200},
 	)
 
 	// It is not possible to get notified of a change of the value attribute of a textarea without workarounds (setTimeout) 
@@ -129,14 +133,14 @@ const emit = defineEmits(['taskAdded'])
 const newTaskTitle = ref('')
 const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 
-const { t } = useI18n()
+const {t} = useI18n()
 const store = useStore()
 
 const taskService = shallowReactive(new TaskService())
 const errorMessage = ref('')
 
 function resetEmptyTitleError() {
-	if(newTaskTitle.value !== '') {
+	if (newTaskTitle.value !== '') {
 		errorMessage.value = ''
 	}
 }
@@ -200,9 +204,26 @@ function handleEnter(e: KeyboardEvent) {
 
 .add-task-button {
 	height: 2.5rem;
+
+	@media screen and (max-width: $mobile) {
+		.button-text {
+			display: none;
+		}
+		
+		:deep(.icon) {
+			margin: 0 !important;
+		}
+	}
 }
+
 .add-task-textarea {
 	transition: border-color $transition;
 	resize: none;
 }
+
+// Adding this class when the textarea has no text prevents the textarea from wrapping the placeholder.
+.textarea-empty {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
 </style>

src/components/tasks/partials/relatedTasks.vue

@@ -83,7 +83,7 @@
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
-					<router-link :to="{ name: $route.name, params: { id: t.id } }" :class="{ 'done': t.done}">
+					<router-link :to="{ name: $route.name, params: { id: t.id } }" :class="{ 'is-strikethrough': t.done}">
 						<span
 							class="different-list"
 							v-if="t.listId !== listId"