Skip to content

Commit

Permalink
BC-5726: fix task items layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@uidp
uidp committed Nov 6, 2023
1 parent a4b63ed commit 332e5f2
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 116 deletions.
4 changes: 4 additions & 0 deletions src/components/molecules/TaskItemMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
34 changes: 18 additions & 16 deletions src/components/molecules/TaskItemStudent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,24 @@
@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>
<v-list-item-title data-testid="taskTitle">
{{ 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'"
Expand All @@ -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>
Expand Down
201 changes: 115 additions & 86 deletions src/components/molecules/TaskItemTeacher.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
15 changes: 5 additions & 10 deletions src/components/molecules/vCustomDoublePanels.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
9 changes: 6 additions & 3 deletions src/components/organisms/TasksList.vue
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/templates/TasksDashboardMain.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]) {
Expand Down

0 comments on commit 332e5f2

Please sign in to comment.