From 332e5f2fda24532dce6d1892dc1c2bd1f5e3fc88 Mon Sep 17 00:00:00 2001
From: Uwe Ilgenstein <uwe.ilgenstein@dataport.de>
Date: Mon, 6 Nov 2023 15:19:47 +0100
Subject: [PATCH] BC-5726: fix task items layout

---
 src/components/molecules/TaskItemMenu.vue     |   4 +
 src/components/molecules/TaskItemStudent.vue  |  34 +--
 src/components/molecules/TaskItemTeacher.vue  | 201 ++++++++++--------
 .../molecules/vCustomDoublePanels.vue         |  15 +-
 src/components/organisms/TasksList.vue        |   9 +-
 .../templates/TasksDashboardMain.vue          |   2 +-
 6 files changed, 149 insertions(+), 116 deletions(-)

diff --git a/src/components/molecules/TaskItemMenu.vue b/src/components/molecules/TaskItemMenu.vue
index db1350ba4b..001eedf612 100644
--- a/src/components/molecules/TaskItemMenu.vue
+++ b/src/components/molecules/TaskItemMenu.vue
@@ -194,6 +194,10 @@ export default defineComponent({
 		shareTaskEnabled() {
 			return envConfigModule?.getEnv.FEATURE_TASK_SHARE;
 		},
+		ariaLabel() {
+			// VUE3_UPGRADE we need a proper label here. was missing before.
+			return `${this.$t("common.words.task")}`;
+		},
 	},
 	methods: {
 		handleFinish() {
diff --git a/src/components/molecules/TaskItemStudent.vue b/src/components/molecules/TaskItemStudent.vue
index d7fbfd4ead..b53f9b9d2b 100644
--- a/src/components/molecules/TaskItemStudent.vue
+++ b/src/components/molecules/TaskItemStudent.vue
@@ -11,10 +11,12 @@
 			@focus="handleFocus(true)"
 			@keydown.tab.shift="handleFocus(false)"
 		>
-			<v-list-item-avatar>
-				<v-icon class="fill" :color="iconColor">{{ taskIcon }}</v-icon>
-			</v-list-item-avatar>
-			<v-list-item-content>
+			<template v-slot:prepend>
+				<v-avatar>
+					<v-icon class="fill" :color="iconColor">{{ taskIcon }}</v-icon>
+				</v-avatar>
+			</template>
+			<div>
 				<v-list-item-subtitle data-testid="taskSubtitle">
 					{{ taskLabel }}
 				</v-list-item-subtitle>
@@ -22,11 +24,11 @@
 					{{ task.name }}
 				</v-list-item-title>
 				<v-list-item-subtitle>{{ topic }}</v-list-item-subtitle>
-			</v-list-item-content>
+			</div>
 			<v-list-item-action>
-				<v-list-item-action-text class="subtitle-2" data-test-id="dueDateLabel">
+				<div class="text-subtitle-2" data-test-id="dueDateLabel">
 					{{ dueDateLabel }}
-				</v-list-item-action-text>
+				</div>
 				<v-spacer />
 				<v-custom-chip-time-remaining
 					v-if="taskState === 'warning'"
@@ -35,15 +37,15 @@
 					:shorten-unit="$vuetify.display.xsOnly"
 				/>
 			</v-list-item-action>
-			<v-list-item-action :id="`task-menu-${task.id}`" class="context-menu-btn">
-				<task-item-menu
-					:task-id="task.id"
-					:task-is-finished="task.status.isFinished"
-					user-role="student"
-					@toggled-menu="toggleMenu"
-					@focus-changed="handleFocus"
-				/>
-			</v-list-item-action>
+			<template v-slot:append>
+				<div :id="`task-menu-${task.id}`" class="context-menu-btn">
+					<task-item-menu
+						:task-id="task.id"
+						:task-is-finished="task.status.isFinished"
+						user-role="student"
+					/>
+				</div>
+			</template>
 		</v-list-item>
 	</v-hover>
 </template>
diff --git a/src/components/molecules/TaskItemTeacher.vue b/src/components/molecules/TaskItemTeacher.vue
index c6685de0e0..5e2f4a44d1 100644
--- a/src/components/molecules/TaskItemTeacher.vue
+++ b/src/components/molecules/TaskItemTeacher.vue
@@ -11,101 +11,121 @@
 			@focus="handleFocus(true)"
 			@keydown.tab.shift="handleFocus(false)"
 		>
-			<v-list-item-avatar>
-				<v-icon
-					class="fill"
+			<!-- item avatar -->
+			<template v-slot:prepend>
+				<v-avatar>
+					<v-icon
+						class="fill"
+						:class="hasUnpublishedLesson ? 'opacity-0-5' : ''"
+						:color="iconColor"
+					>
+						{{ avatarIcon }}
+					</v-icon>
+				</v-avatar>
+			</template>
+
+			<!-- item main info -->
+			<div class="d-flex">
+				<!-- item title -->
+				<div
 					:class="hasUnpublishedLesson ? 'opacity-0-5' : ''"
-					:color="iconColor"
-				>
-					{{ avatarIcon }}
-				</v-icon>
-			</v-list-item-avatar>
-			<v-list-item-content :class="hasUnpublishedLesson ? 'opacity-0-5' : ''">
-				<v-list-item-subtitle data-testId="task-label" class="d-inline-flex">
-					<span class="text-truncate" data-testid="taskSubtitle">
-						{{ taskLabel }}
-					</span>
-				</v-list-item-subtitle>
-				<v-list-item-title data-testid="taskTitle">
-					{{ task.name }}
-				</v-list-item-title>
-				<v-list-item-subtitle
-					v-if="topic && currentBreakpoint !== 'xs'"
-					data-testid="task-topic"
-					class="d-inline-flex"
+					class="task-item__main-info align-self-center"
 				>
-					<span class="text-truncate">{{ topic }}</span>
-				</v-list-item-subtitle>
-				<v-list-item-subtitle class="hidden-sm-and-up text--primary text-wrap">
-					<v-chip
-						v-if="hasUnpublishedLesson"
-						size="x-small"
-						data-testid="task-lesson-chip-small"
+					<v-list-item-subtitle data-testId="task-label" class="d-inline-flex">
+						<span class="text-truncate" data-testid="taskSubtitle">
+							{{ taskLabel }}
+						</span>
+					</v-list-item-subtitle>
+					<v-list-item-title data-testid="taskTitle">
+						{{ task.name }}
+					</v-list-item-title>
+					<v-list-item-subtitle
+						v-if="topic && currentBreakpoint !== 'xs'"
+						data-testid="task-topic"
+						class="d-inline-flex"
 					>
+						<span class="text-truncate">{{ topic }}</span>
+					</v-list-item-subtitle>
+					<v-list-item-subtitle
+						class="hidden-sm-and-up text--primary text-wrap"
+					>
+						<v-chip
+							v-if="hasUnpublishedLesson"
+							size="x-small"
+							data-testid="task-lesson-chip-small"
+						>
+							{{
+								$t("components.molecules.TaskItemTeacher.lessonIsNotPublished")
+							}}
+						</v-chip>
+						<i18n
+							v-else
+							path="components.molecules.TaskItemTeacher.status"
+							data-testid="task-status-small"
+						>
+							<template #submitted>{{ task.status.submitted }}</template>
+							<template #max>{{ task.status.maxSubmissions }}</template>
+							<template #graded>{{ task.status.graded }}</template>
+						</i18n>
+					</v-list-item-subtitle>
+				</div>
+
+				<!-- item additional info -->
+				<section
+					v-if="hasUnpublishedLesson"
+					data-testid="task-lesson-chip-large"
+					class="hidden-xs-only mr-8 pl-4 align-self-center"
+				>
+					<v-chip size="small">
 						{{
 							$t("components.molecules.TaskItemTeacher.lessonIsNotPublished")
 						}}
 					</v-chip>
-					<i18n
-						v-else
-						path="components.molecules.TaskItemTeacher.status"
-						data-testid="task-status-small"
-					>
-						<template #submitted>{{ task.status.submitted }}</template>
-						<template #max>{{ task.status.maxSubmissions }}</template>
-						<template #graded>{{ task.status.graded }}</template>
-					</i18n>
-				</v-list-item-subtitle>
-			</v-list-item-content>
+				</section>
+				<section
+					v-else-if="showTaskStatus"
+					data-testid="task-status"
+					class="mr-4 d-flex align-self-center"
+				>
+					<div class="hidden-xs-only px-4 mr-4 text-center">
+						<v-list-item-subtitle>
+							{{ $t("components.molecules.TaskItemTeacher.submitted") }}
+						</v-list-item-subtitle>
+						<v-list-item-title data-testid="taskSubmitted">
+							{{ task.status.submitted }}/{{ task.status.maxSubmissions }}
+						</v-list-item-title>
+					</div>
+					<div class="hidden-xs-only px-4 text-center">
+						<v-list-item-subtitle>
+							{{ $t("components.molecules.TaskItemTeacher.graded") }}
+						</v-list-item-subtitle>
+						<v-list-item-title data-testid="taskGraded">
+							{{ task.status.graded }}
+						</v-list-item-title>
+					</div>
+				</section>
+			</div>
 
-			<section
-				v-if="hasUnpublishedLesson"
-				data-testid="task-lesson-chip-large"
-				class="hidden-xs-only mr-8 pl-4"
-			>
-				<v-chip size="small">
-					{{ $t("components.molecules.TaskItemTeacher.lessonIsNotPublished") }}
-				</v-chip>
-			</section>
-			<section
-				v-else-if="showTaskStatus"
-				data-testid="task-status"
-				class="mr-8"
-			>
-				<v-list-item-action class="hidden-xs-only pl-4">
-					<v-list-item-subtitle>
-						{{ $t("components.molecules.TaskItemTeacher.submitted") }}
-					</v-list-item-subtitle>
-					<v-list-item-title data-testid="taskSubmitted">
-						{{ task.status.submitted }}/{{ task.status.maxSubmissions }}
-					</v-list-item-title>
-				</v-list-item-action>
-				<v-list-item-action class="hidden-xs-only">
-					<v-list-item-subtitle>
-						{{ $t("components.molecules.TaskItemTeacher.graded") }}
-					</v-list-item-subtitle>
-					<v-list-item-title data-testid="taskGraded">
-						{{ task.status.graded }}
-					</v-list-item-title>
+			<!-- item menu -->
+			<template v-slot:append>
+				<v-list-item-action
+					:id="`task-menu-${task.id}`"
+					class="context-menu-min-width"
+				>
+					<task-item-menu
+						:task-id="task.id"
+						:task-is-finished="task.status.isFinished"
+						:task-is-published="!task.status.isDraft && !task.status.isFinished"
+						:task-title="task.name"
+						:course-id="task.courseId"
+						user-role="teacher"
+						@toggled-menu="toggleMenu"
+						@focus-changed="handleFocus"
+						@copy-task="onCopyTask"
+						@share-task="onShareTask"
+					/>
 				</v-list-item-action>
-			</section>
-			<v-list-item-action
-				:id="`task-menu-${task.id}`"
-				class="context-menu-min-width"
-			>
-				<task-item-menu
-					:task-id="task.id"
-					:task-is-finished="task.status.isFinished"
-					:task-is-published="!task.status.isDraft && !task.status.isFinished"
-					:task-title="task.name"
-					:course-id="task.courseId"
-					user-role="teacher"
-					@toggled-menu="toggleMenu"
-					@focus-changed="handleFocus"
-					@copy-task="onCopyTask"
-					@share-task="onShareTask"
-				/>
-			</v-list-item-action>
+			</template>
 		</v-list-item>
 	</v-hover>
 </template>
@@ -261,4 +281,13 @@ export default {
 .context-menu-min-width {
 	min-width: 45px;
 }
+
+:deep(.v-list-item__prepend .v-icon) {
+	width: inherit;
+	height: inherit;
+}
+
+:deep(.task-item__main-info) {
+	width: 60%;
+}
 </style>
diff --git a/src/components/molecules/vCustomDoublePanels.vue b/src/components/molecules/vCustomDoublePanels.vue
index c0f3989b36..9566e84f8c 100644
--- a/src/components/molecules/vCustomDoublePanels.vue
+++ b/src/components/molecules/vCustomDoublePanels.vue
@@ -1,12 +1,7 @@
 <template>
 	<section>
-		<v-expansion-panels
-			:model-value="expanded"
-			flat
-			variant="accordion"
-			mandatory
-		>
-			<v-expansion-panel :disabled="isPanelOneDisabled">
+		<v-expansion-panels :model-value="expanded" variant="accordion" mandatory>
+			<v-expansion-panel elevation="0" :disabled="isPanelOneDisabled">
 				<v-expansion-panel-title v-if="isLoading">
 					<v-skeleton-loader type="text" max-width="30%" />
 					<template #actions>
@@ -31,7 +26,7 @@
 					<slot name="panelOne" />
 				</v-expansion-panel-text>
 			</v-expansion-panel>
-			<v-expansion-panel :disabled="isPanelTwoDisabled">
+			<v-expansion-panel elevation="0" :disabled="isPanelTwoDisabled">
 				<v-expansion-panel-title v-if="isLoading">
 					<v-skeleton-loader type="text" max-width="30%" />
 					<template #actions>
@@ -166,7 +161,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-:deep(.v-expansion-panel-text__wrap) {
-	padding: 0;
+:deep(.v-expansion-panel-text__wrapper) {
+	padding: 0 0 8px 0;
 }
 </style>
diff --git a/src/components/organisms/TasksList.vue b/src/components/organisms/TasksList.vue
index 1aba5cd359..e95bafc132 100644
--- a/src/components/organisms/TasksList.vue
+++ b/src/components/organisms/TasksList.vue
@@ -1,8 +1,11 @@
 <template>
-	<v-list role="feed" subheader two-line>
-		<v-subheader v-if="title && isListFilled" class="subtitle-1 mx-n4 mx-sm-0">
+	<v-list role="feed" lines="two">
+		<v-list-subheader
+			v-if="title && isListFilled"
+			class="text-subtitle-1 mx-n4 mx-sm-0"
+		>
 			{{ title }}
-		</v-subheader>
+		</v-list-subheader>
 		<template v-if="showSkeleton">
 			<v-skeleton-loader type="text" :max-width="'15%'" />
 			<v-skeleton-loader
diff --git a/src/components/templates/TasksDashboardMain.vue b/src/components/templates/TasksDashboardMain.vue
index 1e053e7f7a..4ffdace6d8 100644
--- a/src/components/templates/TasksDashboardMain.vue
+++ b/src/components/templates/TasksDashboardMain.vue
@@ -283,7 +283,7 @@ export default {
 			let title = "";
 			let subtitle = undefined;
 
-			if (this.hasFilterSelected) {
+			if (this.tasksModule.hasFilterSelected) {
 				title = this.$t("pages.tasks.emptyStateOnFilter.title");
 			} else {
 				if (this.tab === this.tabRoutes[0]) {