From e5a19a94c84c427caed722a051a4e94a7f084ef7 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Wed, 10 Apr 2024 14:58:44 +0200
Subject: [PATCH] Add tooltip for topic status icon
---
.../DocumentationCompactDetails.vue | 2 +-
.../DocumentationFullDetails.vue | 2 +-
.../documentation/LessonSummary.vue | 29 ++++++++++++++-----
.../apps/alsijil/frontend/messages/de.json | 8 ++++-
.../apps/alsijil/frontend/messages/en.json | 8 ++++-
5 files changed, 37 insertions(+), 12 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationCompactDetails.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationCompactDetails.vue
index 9160bd795..09ae0e5d0 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationCompactDetails.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationCompactDetails.vue
@@ -1,7 +1,7 @@
<template>
<v-card outlined dense rounded="lg" v-bind="$attrs" v-on="$listeners">
<div class="font-weight-medium mr-2">
- {{ $t("alsijil.coursebook.summary.topic") }}:
+ {{ $t("alsijil.coursebook.summary.topic.label") }}:
</div>
<div class="text-truncate">{{ documentation.topic || "–" }}</div>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationFullDetails.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationFullDetails.vue
index ddb7ae276..58ef42856 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationFullDetails.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationFullDetails.vue
@@ -2,7 +2,7 @@
<div v-bind="$attrs" v-on="$listeners">
<v-card outlined dense rounded="lg" class="mb-2">
<v-card-title class="text-subtitle-2 pb-1 font-weight-medium">
- {{ $t("alsijil.coursebook.summary.topic") }}
+ {{ $t("alsijil.coursebook.summary.topic.label") }}
</v-card-title>
<v-card-text>{{ documentation.topic || "–" }}</v-card-text>
</v-card>
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
index 47bca3b28..7e3cc8841 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonSummary.vue
@@ -46,7 +46,7 @@
}"
hide-details
outlined
- :label="$t('alsijil.coursebook.summary.topic')"
+ :label="$t('alsijil.coursebook.summary.topic.label')"
:value="documentation.topic"
@input="topic = $event"
@focusout="save"
@@ -54,11 +54,16 @@
:loading="loading"
>
<template #append>
- <v-scroll-x-transition>
- <v-icon v-if="appendIcon" :color="appendIconColor">{{
- appendIcon
- }}</v-icon>
- </v-scroll-x-transition>
+ <v-tooltip bottom>
+ <template v-slot:activator="{ on, attrs }">
+ <v-scroll-x-transition>
+ <v-icon v-if="appendIcon" :color="appendIconColor" v-on="on" v-bind="attrs">{{
+ appendIcon
+ }}</v-icon>
+ </v-scroll-x-transition>
+ </template>
+ <span>{{ appendIconTooltip }}</span>
+ </v-tooltip>
</template>
</v-text-field>
<div
@@ -97,7 +102,7 @@
<v-text-field
filled
v-if="!compact && documentation.canEdit"
- :label="$t('alsijil.coursebook.summary.topic')"
+ :label="$t('alsijil.coursebook.summary.topic.label')"
:value="documentation.topic"
@input="topic = $event"
/>
@@ -148,6 +153,7 @@ export default {
homework: null,
groupNote: null,
appendIcon: null,
+ topicError: null,
};
},
methods: {
@@ -174,6 +180,7 @@ export default {
};
},
handleAppendIconSuccess() {
+ this.topicError = null;
this.appendIcon = "$success";
setTimeout(() => {
this.appendIcon = "";
@@ -209,8 +216,9 @@ export default {
this.save();
event.target.blur();
},
- handleError() {
+ handleError(error) {
this.appendIcon = "$error";
+ this.topicError = error;
},
},
computed: {
@@ -245,6 +253,11 @@ export default {
{ $success: "success", $error: "error" }[this.appendIcon] || "primary"
);
},
+ appendIconTooltip() {
+ return (
+ { $success: this.$t("alsijil.coursebook.summary.topic.status.success"), $error: this.$t("alsijil.coursebook.summary.topic.status.error", { error: this.topicError }) }[this.appendIcon] || ""
+ );
+ },
},
mounted() {
this.$on("save", this.handleAppendIconSuccess);
diff --git a/aleksis/apps/alsijil/frontend/messages/de.json b/aleksis/apps/alsijil/frontend/messages/de.json
index 614c3142e..f38f1621d 100644
--- a/aleksis/apps/alsijil/frontend/messages/de.json
+++ b/aleksis/apps/alsijil/frontend/messages/de.json
@@ -45,7 +45,13 @@
"pending": "Stunde in der Zukunft"
},
"summary": {
- "topic": "Thema",
+ "topic": {
+ "label": "Topic",
+ "status": {
+ "success": "Topic saved successfully",
+ "error": "There has been an error while saving the topic: {error}"
+ }
+ },
"homework": {
"label": "Hausaufgaben",
"value": "HA: {homework}",
diff --git a/aleksis/apps/alsijil/frontend/messages/en.json b/aleksis/apps/alsijil/frontend/messages/en.json
index 679044209..acadfea9a 100644
--- a/aleksis/apps/alsijil/frontend/messages/en.json
+++ b/aleksis/apps/alsijil/frontend/messages/en.json
@@ -45,7 +45,13 @@
"pending": "Lesson pending"
},
"summary": {
- "topic": "Topic",
+ "topic": {
+ "label": "Topic",
+ "status": {
+ "success": "Topic saved successfully",
+ "error": "There has been an error while saving the topic: {error}"
+ }
+ },
"homework": {
"label": "Homework",
"value": "HW: {homework}",
--
GitLab