From d15dfe671c27932c16df01e22d7b16b571ce3836 Mon Sep 17 00:00:00 2001
From: Icepick <remi.jara@laposte.net>
Date: Mon, 31 Jul 2023 00:51:09 +0200
Subject: [PATCH] update notification design + new animation

---
 .../Notification/Notification.v2.vue          |  85 -----------
 src/components/Notification/Notification.vue  | 141 ++++++++----------
 .../Notification/NotificationsWrapper.vue     |  49 +++---
 src/locales/en.json                           |   7 +-
 src/locales/es.json                           |   7 +-
 src/locales/fr.json                           |   7 +-
 src/locales/it.json                           |   7 +-
 src/utils/LocalStorage.ts                     |   6 +-
 src/views/Home.vue                            |  10 +-
 src/views/LearnTemplate.vue                   |   7 +-
 10 files changed, 116 insertions(+), 210 deletions(-)
 delete mode 100644 src/components/Notification/Notification.v2.vue

diff --git a/src/components/Notification/Notification.v2.vue b/src/components/Notification/Notification.v2.vue
deleted file mode 100644
index ab85585..0000000
--- a/src/components/Notification/Notification.v2.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import type { Notification, NotificationType } from '@/plugins/notifications';
-import { IconCircleCheckFilled, IconX } from '@tabler/icons-vue';
-import { computed, onMounted, ref } from 'vue';
-import Badge from '../Badge.vue';
-
-const props = defineProps<{ notification: Notification }>();
-const timeoutMapping: Record<NotificationType, number> = {
-    success: 5000,
-    warning: 7500,
-    error: 15000,
-}
-
-const emit = defineEmits(['close']);
-const close = () => emit('close');
-
-const timeout = computed(() => timeoutMapping[props.notification.type])
-
-const progress = ref(0);
-const intervalDuration = 10;
-
-onMounted(() => {
-    const interval = setInterval(() => {
-        progress.value = ((Date.now() - startTime) / timeout.value) * 100;
-        if (progress.value >= 100) {
-            close();
-            clearInterval(interval);
-        }
-    }, intervalDuration);
-});
-const startTime = Date.now();
-</script>
-
-<template>
-    <div class="w-full">
-        <div class="relative">
-            <div
-                class="absolute top-0 left-0 h-[4px] bg-green-300 rounded"
-                :style="{ width: `${progress}%` }"
-            ></div>
-        </div>
-        <div
-            class="bg-white border-gray-300 border p-3 shadow-lg rounded-md"
-        >
-            <div class="flex flex-row">
-                <div
-                    class="px-2 flex gap-3 items-center"
-                    v-if="!notification.flag && !notification.score"
-                >
-                    <IconCircleCheckFilled
-                        class="w-8 h-8 text-green-500"
-                    />
-                </div>
-                <div class="ml-3 mr-3">
-                    <div
-                        class="flex flex-row justify-between items-center mb-2"
-                    >
-                        <span>{{ notification.title }}</span>
-                        <template v-if="notification.flag && notification.score">
-                            <Badge :score="notification.score" />
-                            <img
-                                v-if="notification.flag"
-                                class="w-12 h-8 border-[1px] border-gray-700 rounded"
-                                :src="notification.flag"
-                                :alt="notification.title"
-                            />
-                        </template>
-                    </div>
-                    <span class="block text-gray-500">{{
-                        notification.message
-                    }}</span>
-                    <slot name="badge"></slot>
-                </div>
-                <div class="px-2">
-                    <button @click="close">
-                        <IconX
-                            class="w-6 h-6 text-gray-500 hover:text-gray-700 transition-all duration-300"
-                        />
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
diff --git a/src/components/Notification/Notification.vue b/src/components/Notification/Notification.vue
index 7a2f186..559ee91 100644
--- a/src/components/Notification/Notification.vue
+++ b/src/components/Notification/Notification.vue
@@ -1,31 +1,32 @@
 <script setup lang="ts">
-import { IconCircleCheckFilled, IconX } from '@tabler/icons-vue';
-import { onMounted, ref } from 'vue';
+import type { Notification, NotificationType } from '@/plugins/notifications';
+import {
+    IconCircleCheckFilled,
+    IconExclamationCircle,
+    IconX
+} from '@tabler/icons-vue';
+import { computed, onMounted, ref } from 'vue';
 import Badge from '../Badge.vue';
 
-export interface Properties {
-    title: string;
-    message?: string;
-    type: 'success' | 'error' | 'warning';
-    flag?: string;
-    score?: number;
-    timeout?: number;
-}
+const props = defineProps<{ notification: Notification }>();
+const timeoutMapping: Record<NotificationType, number | undefined> = {
+    success: 5000,
+    warning: 7500,
+    error: undefined
+};
 
-const props = defineProps<Properties>();
+const emit = defineEmits(['close']);
+const close = () => emit('close');
 
-const enabled = ref(true);
-const timeout = props.timeout || 5000;
-const close = () => {
-    enabled.value = false;
-};
+const timeout = computed(() => timeoutMapping[props.notification.type]);
 
 const progress = ref(0);
 const intervalDuration = 10;
 
 onMounted(() => {
+    if (!timeout.value) return;
     const interval = setInterval(() => {
-        progress.value = ((Date.now() - startTime) / timeout) * 100;
+        progress.value = ((Date.now() - startTime) / timeout.value!) * 100;
         if (progress.value >= 100) {
             close();
             clearInterval(interval);
@@ -36,76 +37,60 @@ const startTime = Date.now();
 </script>
 
 <template>
-    <div class="fixed bottom-0 right-0 m-6 z-50">
-        <transition name="fade-slide">
-            <div v-if="enabled" class="m-auto">
-                <div class="relative mt-3">
-                    <div
-                        class="absolute top-0 left-0 h-[4px] bg-green-300 rounded"
-                        :style="{ width: `${progress}%` }"
-                    ></div>
-                </div>
-                <div
-                    class="bg-white border-gray-300 border p-3 shadow-lg rounded-md"
-                >
-                    <div class="flex flex-row">
+    <div class="w-full">
+        <div class="relative">
+            <div
+                class="absolute top-0 left-0 h-[4px] rounded"
+                :class="{
+                    'bg-green-300': notification.type === 'success',
+                    'bg-yellow-300': notification.type === 'warning'
+                }"
+                :style="{ width: `${progress}%` }"
+            ></div>
+        </div>
+        <div class="bg-white border-gray-300 border p-3 shadow-lg rounded-md">
+            <div class="flex flex-col gap-2">
+                <div class="flex flex-row justify-between">
+                    <div class="flex flex-row gap-3 items-center">
                         <div
                             class="px-2 flex gap-3 items-center"
-                            v-if="!flag && !score"
+                            v-if="!notification.flag && !notification.score"
                         >
                             <IconCircleCheckFilled
+                                v-if="notification.type === 'success'"
                                 class="w-8 h-8 text-green-500"
                             />
+                            <IconExclamationCircle
+                                v-else-if="notification.type === 'error'"
+                                class="w-8 h-8 text-red-500"
+                            />
                         </div>
-                        <div class="ml-3 mr-3">
-                            <div
-                                class="flex flex-row justify-between items-center mb-2"
-                            >
-                                <span>{{ title }}</span>
-                                <template v-if="flag && score">
-                                    <Badge :score="score" />
-                                    <img
-                                        v-if="flag"
-                                        class="w-12 h-8 border-[1px] border-gray-700 rounded"
-                                        :src="flag"
-                                        :alt="title"
-                                    />
-                                </template>
-                            </div>
-                            <span class="block text-gray-500">{{
-                                message
-                            }}</span>
-                            <slot name="badge"></slot>
-                        </div>
-                        <div class="px-2">
-                            <button @click="close">
-                                <IconX
-                                    class="w-6 h-6 text-gray-500 hover:text-gray-700 transition-all duration-300"
-                                />
-                            </button>
-                        </div>
+                        <img
+                            v-else
+                            class="w-12 h-8 border-[1px] border-gray-700 rounded"
+                            :src="notification.flag"
+                            :alt="notification.title"
+                        />
+                        <span class="text-lg">{{ notification.title }}</span>
                     </div>
+                    <div class="px-2">
+                        <button @click="close">
+                            <IconX
+                                class="w-6 h-6 text-gray-500 hover:text-gray-700 transition-all duration-300"
+                            />
+                        </button>
+                    </div>
+                </div>
+                <div class="flex flex-row justify-start items-center gap-3">
+                    <span class="block text-gray-500">{{
+                        notification.message
+                    }}</span>
+                    <Badge
+                        v-if="notification.score"
+                        :score="notification.score"
+                    />
                 </div>
             </div>
-        </transition>
+        </div>
     </div>
 </template>
-
-<style scoped>
-.fade-slide-enter-active,
-.fade-slide-leave-active {
-    transition: all 0.5s ease;
-}
-
-.fade-slide-enter-from,
-.fade-slide-leave-to {
-    opacity: 0;
-    transform: translateX(100px);
-}
-
-.fade-slide-enter-to,
-.fade-slide-leave-from {
-    opacity: 1;
-    transform: translateX(0px);
-}
-</style>
diff --git a/src/components/Notification/NotificationsWrapper.vue b/src/components/Notification/NotificationsWrapper.vue
index e233b15..eb23c3c 100644
--- a/src/components/Notification/NotificationsWrapper.vue
+++ b/src/components/Notification/NotificationsWrapper.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import type { Notification } from '@/plugins/notifications';
 import { Ref, inject } from 'vue';
-import NotificationComponent from './Notification.v2.vue';
+import NotificationComponent from './Notification.vue';
 
-const notifications = inject<Ref<Notification[]>>('notifications') as Ref<Notification[]>;
+const notifications = inject<Ref<Notification[]>>('notifications') as Ref<
+    Notification[]
+>;
 function removeNotification(id: string) {
-    console.log("Delete " + id);
-    console.log(
-        notifications.value.map((n) => n.id).join(', ')
-    )
-    notifications.value = notifications.value.filter(n => n.id !== id);
+    notifications.value = notifications.value.filter((n) => n.id !== id);
 }
 </script>
 
 <template>
     <transition-group
-        name="fade-slide"
+        name="slide-fade"
+        enter-active-class="slide-fade-enter-active"
+        leave-active-class="slide-fade-leave-active"
         tag="div"
-        class="absolute bottom-0 right-0 z-50 p-6 w-full max-w-md flex flex-col gap-y-3 overflow-hidden"
+        class="absolute bottom-0 right-0 z-50 p-6 w-full max-w-md flex flex-col gap-y-4 overflow-hidden"
     >
         <NotificationComponent
             v-for="notification in notifications"
@@ -29,20 +29,29 @@ function removeNotification(id: string) {
 </template>
 
 <style scoped>
-.fade-slide-enter-active,
-.fade-slide-leave-active {
-    transition: all 0.5s ease;
+.slide-fade-enter-active {
+    animation: slide-up 0.5s ease-out;
 }
 
-.fade-slide-enter-from,
-.fade-slide-leave-to {
-    opacity: 0;
-    transform: translateX(100px);
+.slide-fade-leave-active {
+    animation: slide-right 0.5s ease-out;
 }
 
-.fade-slide-enter-to,
-.fade-slide-leave-from {
-    opacity: 1;
-    transform: translateY(0);
+@keyframes slide-up {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes slide-right {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(100%);
+    }
 }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index a60e0e6..62c5fb8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -129,10 +129,9 @@
     "deleteAccountConfirmation": "Are you sure you want to delete your account ?",
     "signedUpSuccessfully": "Signed up successfully, now you can log in",
     "world": "World",
-    "congratulations": "Congratulations",
-    "tooBad": "Too bad",
-    "levelUp": "You've reached the next level ! 🚀🎉",
-    "levelDown": "You've lost a level ! 😔",
+    "congratulations": "Congratulations! 🚀🎉",
+    "tooBad": "Too bad! 😔",
+    "levelUp": "You've reached the level",
     "confirmDialog": {
         "cancel": "Cancel",
         "confirm": "Confirm"
diff --git a/src/locales/es.json b/src/locales/es.json
index 444b70c..1e4ac16 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -129,10 +129,9 @@
     "deleteAccountConfirmation": "¿Estás seguro de que quieres eliminar tu cuenta?",
     "signedUpSuccessfully": "¡Te has registrado con éxito!",
     "world": "Mundo",
-    "congratulations": "¡Felicidades!",
-    "tooBad": "¡Qué pena!",
-    "levelUp": "¡Has pasado al siguiente nivel! 🚀🎉",
-    "levelDown": "¡Has bajado de nivel! 😔",
+    "congratulations": "¡Felicidades! 🚀🎉",
+    "tooBad": "¡Qué pena! 😔",
+    "levelUp": "Has pasado al nivel ",
     "confirmDialog": {
         "cancel": "Cancelar",
         "confirm": "Confirmar"
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 45a638b..32c737b 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -129,10 +129,9 @@
     "deleteAccountConfirmation": "Êtes-vous sûr de vouloir supprimer votre compte ?",
     "signedUpSuccessfully": "Inscription réussie ! Veuillez vous connecter pour continuer.",
     "world": "Monde",
-    "congratulations": "Félicitations !",
-    "tooBad": "Dommage !",
-    "levelUp": "Vous êtes passé au niveau supérieur ! 🚀🎉",
-    "levelDown": "Vous êtes redescendu d'un niveau ! 😔",
+    "congratulations": "Félicitations ! 🚀🎉",
+    "tooBad": "Dommage ! 😔",
+    "levelUp": "Vous êtes passé au niveau",
     "confirmDialog": {
         "cancel": "Annuler",
         "confirm": "Confirmer"
diff --git a/src/locales/it.json b/src/locales/it.json
index da20c6c..4213e99 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -129,10 +129,9 @@
     "deleteAccountConfirmation": "Sei sicuro di voler eliminare il tuo account?",
     "signedUpSuccessfully": "Registrazione avvenuta con successo!",
     "world": "Mondo",
-    "congratulations": "Congratulazioni!",
-    "tooBad": "Peccato!",
-    "levelUp": "Siete passati al livello successivo ! 🚀🎉",
-    "levelDown": "Siete tornati al livello precedente ! 😔",
+    "congratulations": "Congratulazioni! 🚀🎉",
+    "tooBad": "Peccato! 😔",
+    "levelUp": "Siete passati al livello",
     "confirmDialog": {
         "cancel": "Cancella",
         "confirm": "Conferma"
diff --git a/src/utils/LocalStorage.ts b/src/utils/LocalStorage.ts
index 076363f..641539a 100644
--- a/src/utils/LocalStorage.ts
+++ b/src/utils/LocalStorage.ts
@@ -19,7 +19,7 @@ export class LocalStorage {
         const parsedValue = SuperJSON.parse<StoredValue<T>>(v);
         if (this.isExpire(parsedValue)) {
             this.remove(key);
-            return;
+            return undefined;
         }
 
         return parsedValue.value;
@@ -55,7 +55,9 @@ export class LocalStorage {
             return undefined;
         }
 
-        const { minutes: diffInMinutes } = DateTime.fromISO(parsedValue.expiredAt).diffNow('minutes');
+        const { minutes: diffInMinutes } = DateTime.fromISO(
+            parsedValue.expiredAt
+        ).diffNow('minutes');
 
         return Math.round(diffInMinutes);
     }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 42ea312..ea3a9d4 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -35,18 +35,18 @@ const navigateToCountry = (country: CountryI) => {
 const scrollTo = (id: string) => {
     const element = document.querySelector(id) as HTMLElement;
     if (element) {
-        document.body.scrollTo({
+        window.scrollTo({
             top: element.offsetTop,
             behavior: 'smooth'
         });
     } else if (id === 'top') {
         imageScale.value = 1;
-        document.body.scrollTo({
+        window.scrollTo({
             top: 0,
             behavior: 'smooth'
         });
     } else if (id === 'bottom') {
-        document.body.scrollTo({
+        window.scrollTo({
             top: document.body.scrollHeight,
             behavior: 'smooth'
         });
@@ -66,11 +66,11 @@ onBeforeMount(async () => {
         finishedWaited.value = true;
         noCountriesFound.value = true;
     }
-    document.body.addEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', handleScroll);
 });
 
 onUnmounted(() => {
-    document.body.removeEventListener('scroll', handleScroll);
+    window.removeEventListener('scroll', handleScroll);
 });
 
 const handleScroll = () => {
diff --git a/src/views/LearnTemplate.vue b/src/views/LearnTemplate.vue
index dde228e..3aac9ea 100644
--- a/src/views/LearnTemplate.vue
+++ b/src/views/LearnTemplate.vue
@@ -73,11 +73,10 @@ async function handleClick(score: ScoreType) {
                 response.data.level === 'up'
                     ? t('congratulations')
                     : t('tooBad'),
-            message:
-                response.data.level === 'up' ? t('levelUp') : t('levelDown'),
-            type: response.data.level === 'up' ? 'success' : 'error',
+            message: t('levelUp'),
+            type: response.data.level === 'up' ? 'success' : 'warning',
             flag: country.value.flag,
-            score: response.data.score,
+            score: response.data.score
         });
     }