Toast modifications:

• Add title • Update style • Update tests
Scille · Dec 20, 2023 · 37f7f31 · 37f7f31
1 parent 36c3e5d
commit 37f7f31
Show file tree

Hide file tree

Showing 34 changed files with 767 additions and 276 deletions.
diff --git a/client/src/components/users/InvitationListItem.vue b/client/src/components/users/InvitationListItem.vue
@@ -86,14 +86,16 @@ async function copyLink(invitation: UserInvitation): Promise<void> {
   if (result) {
     notificationManager.showToast(
       new Notification({
-        message: t('UsersPage.invitation.linkCopiedToClipboard'),
+        title: t('UsersPage.invitation.linkCopiedToClipboard.title'),
+        message: t('UsersPage.invitation.linkCopiedToClipboard.message'),
         level: NotificationLevel.Info,
       }),
     );
   } else {
     notificationManager.showToast(
       new Notification({
-        message: t('UsersPage.invitation.linkNotCopiedToClipboard'),
+        title: t('UsersPage.invitation.linkNotCopiedToClipboard.title'),
+        message: t('UsersPage.invitation.linkNotCopiedToClipboard.message'),
         level: NotificationLevel.Error,
       }),
     );

diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
diff --git a/client/src/main.ts b/client/src/main.ts
@@ -210,7 +210,8 @@ async function setupApp(): Promise<void> {
       } else {
         await notificationManager.showModal(
           new Notification({
-            message: t('link.invalid'),
+            title: t('link.invalid.title'),
+            message: t('link.invalid.message'),
             level: NotificationLevel.Error,
           }),
         );

diff --git a/client/src/services/notificationManager.ts b/client/src/services/notificationManager.ts
@@ -21,11 +21,11 @@ export class Notification {
   id: string;
   time: DateTime;
   read: boolean;
+  title: string;
   message: string;
   level: NotificationLevel;
   data?: object;
-  title?: string;
-  constructor({ message, level, data = {}, title }: { message: string; level: NotificationLevel; data?: object; title?: string }) {
+  constructor({ title, level, data = {}, message }: { title: string; message: string; level: NotificationLevel; data?: object }) {
     this.id = uuid4();
     this.time = DateTime.now();
     this.read = false;
@@ -67,11 +67,9 @@ export class NotificationManager {
 
     const alertModalConfig: MsAlertModalConfig = {
       theme: this._getMsReportTheme(notification.level),
+      title: notification.title,
       message: notification.message,
     };
-    if (notification.title) {
-      alertModalConfig.title = notification.title;
-    }
 
     const result = await this._createAndPresentModal(alertModalConfig);
     if (result && result.role === MsModalResult.Confirm) {
@@ -112,8 +110,8 @@ export class NotificationManager {
     this.toastManager
       .createAndPresent({
         theme: this._getMsReportTheme(notification.level),
-        message: notification.message,
         title: notification.title,
+        message: notification.message,
         duration: DEFAULT_NOTIFICATION_DURATION,
       })
       .then(async (result) => {

diff --git a/client/src/services/toastManager.ts b/client/src/services/toastManager.ts
@@ -2,7 +2,7 @@
 
 import { MsReportTheme } from '@/components/core';
 import { toastController } from '@ionic/vue';
-import { checkmarkCircle, closeCircle, informationCircle, warning } from 'ionicons/icons';
+import { checkmark, closeCircle, information, warning } from 'ionicons/icons';
 import { ComposerTranslation } from 'vue-i18n';
 
 const DEFAULT_TOAST_DURATION = 3000;
@@ -58,9 +58,9 @@ export class ToastManager {
   private _getIcon(theme: MsReportTheme): string {
     switch (theme) {
       case MsReportTheme.Info:
-        return informationCircle;
+        return information;
       case MsReportTheme.Success:
-        return checkmarkCircle;
+        return checkmark;
       case MsReportTheme.Warning:
         return warning;
       case MsReportTheme.Error:

diff --git a/client/src/theme/components/toasts.scss b/client/src/theme/components/toasts.scss
@@ -2,39 +2,115 @@
 
 /* **** Parsec toasts **** */
 
+// animation not working because of shadow-root element
+// need to be investigated
+@keyframes progress-bar {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+
 ion-toast.notification-toast {
   --start: var(--parsec-sidebar-menu-width);
+
   &.ms-info {
-    --ms-notification-toast-text-color: var(--parsec-color-light-primary-600);
-    --ms-notification-toast-background-color: var(--parsec-color-light-primary-100);
-    --ms-notification-toast-button-color: var(--parsec-color-light-primary-700);
+    --ms-notification-toast-text-color: var(--parsec-color-light-info-700);
+    --ms-notification-toast-border-color: var(--parsec-color-light-info-500);
+    --ms-notification-toast-progress-bg-color: var(--parsec-color-light-info-100);
+    --ms-notification-toast-progress-color: var(--parsec-color-light-info-500);
   }
 
   &.ms-success {
-    --ms-notification-toast-text-color: var(--parsec-color-light-success-500);
-    --ms-notification-toast-background-color: var(--parsec-color-light-success-100);
-    --ms-notification-toast-button-color: var(--parsec-color-light-success-700);
+    --ms-notification-toast-text-color: var(--parsec-color-light-success-700);
+    --ms-notification-toast-border-color: var(--parsec-color-light-success-500);
+    --ms-notification-toast-progress-bg-color: var(--parsec-color-light-success-100);
+    --ms-notification-toast-progress-color: var(--parsec-color-light-success-500);
   }
 
   &.ms-warning {
-    --ms-notification-toast-text-color: var(--parsec-color-light-warning-500);
-    --ms-notification-toast-background-color: var(--parsec-color-light-warning-100);
-    --ms-notification-toast-button-color: var(--parsec-color-light-warning-700);
+    --ms-notification-toast-text-color: var(--parsec-color-light-warning-700);
+    --ms-notification-toast-border-color: var(--parsec-color-light-warning-500);
+    --ms-notification-toast-progress-bg-color: var(--parsec-color-light-warning-100);
+    --ms-notification-toast-progress-color: var(--parsec-color-light-warning-500);
   }
 
   &.ms-error {
-    --ms-notification-toast-text-color: var(--parsec-color-light-danger-500);
-    --ms-notification-toast-background-color: var(--parsec-color-light-danger-100);
-    --ms-notification-toast-button-color: var(--parsec-color-light-danger-700);
+    --ms-notification-toast-text-color: var(--parsec-color-light-danger-700);
+    --ms-notification-toast-border-color: var(--parsec-color-light-danger-500);
+    --ms-notification-toast-progress-bg-color: var(--parsec-color-light-danger-100);
+    --ms-notification-toast-progress-color: var(--parsec-color-light-danger-500);
   }
 
   &.ms-info,
   &.ms-success,
   &.ms-warning,
   &.ms-error {
-    --background: var(--ms-notification-toast-background-color);
+    --background: var(--parsec-color-light-secondary-inversed-contrast);
+    --border-color: var(--ms-notification-toast-border-color);
+    --border-radius: var(--parsec-radius-12);
+    --box-shadow: 0;
+    --button-color: var(--parsec-color-light-secondary-text);
     --color: var(--ms-notification-toast-text-color);
-    --button-color: var(--ms-notification-toast-button-color);
-    --box-shadow: 2px 2px 4px 0px var(--parsec-color-light-secondary-contrast);
+    --max-width: 27rem;
+  }
+
+  &::part(container) {
+    border-radius: var(--parsec-radius-12);
+    box-shadow: var(--parsec-shadow-strong);
+    margin-bottom: 2rem;
+    overflow: hidden;
+    padding: 0.5rem 1rem;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 0.25rem;
+      background: var(--ms-notification-toast-progress-bg-color);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 0.25rem;
+      background: var(--ms-notification-toast-progress-color);
+      animation-name: progress-bar;
+      animation-duration: 5s;
+      animation-timing-function: ease-out;
+    }
+  }
+
+  &::role(status) {
+    display: none;
+  }
+
+  &::part(message) {
+    color: var(--parsec-color-light-secondary-text);
+    font-size: 0.825rem;
+    padding-top: 0.25rem;
+  }
+
+  &::part(icon) {
+    margin: 0;
+    padding: 0.25rem;
+    background: var(--ms-notification-toast-text-color);
+    border-radius: var(--parsec-radius-8);
+    color: var(--parsec-color-light-secondary-inversed-contrast);
+  }
+
+  &::part(button) {
+    background: var(--parsec-color-light-secondary-background);
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    min-height: 0;
+    letter-spacing: 0.015rem;
   }
 }
diff --git a/client/src/views/devices/DevicesPage.vue b/client/src/views/devices/DevicesPage.vue
@@ -141,11 +141,13 @@ import GreetDeviceModal from '@/views/devices/GreetDeviceModal.vue';
 import { IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, IonPage, IonText, modalController } from '@ionic/vue';
 import { add, download, sparkles } from 'ionicons/icons';
 import { Ref, inject, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const notificationManager: NotificationManager = inject(NotificationKey)!;
 const devices: Ref<OwnDeviceInfo[]> = ref([]);
 const passwordSaved = ref(false);
+const { t } = useI18n();
 
 onMounted(async () => {
   await refreshDevicesList();
@@ -165,7 +167,8 @@ async function refreshDevicesList(): Promise<void> {
   } else {
     notificationManager.showToast(
       new Notification({
-        message: 'Failed to retrieve devices',
+        title: t('DevicesPage.greet.errors.retrieveDeviceInfoFailed.title'),
+        message: t('DevicesPage.greet.errors.retrieveDeviceInfoFailed.message'),
         level: NotificationLevel.Error,
       }),
     );

diff --git a/client/src/views/devices/ExportRecoveryDevicePage.vue b/client/src/views/devices/ExportRecoveryDevicePage.vue
@@ -198,6 +198,7 @@ async function exportDevice(): Promise<void> {
     // toast atm but to be changed
     notificationManager.showToast(
       new Notification({
+        title: t('PasswordInputModal.invalid'),
         message: notificationMsg,
         level: NotificationLevel.Error,
       }),
@@ -215,7 +216,8 @@ async function downloadRecoveryKey(): Promise<void> {
     recoveryKeyDownloaded.value = true;
     notificationManager.showToast(
       new Notification({
-        message: t('ExportRecoveryDevicePage.toasts.keyDownloadOk'),
+        title: t('ExportRecoveryDevicePage.toasts.keyDownloadOk.title'),
+        message: t('ExportRecoveryDevicePage.toasts.keyDownloadOk.message'),
         level: NotificationLevel.Success,
       }),
     );
@@ -228,7 +230,8 @@ async function downloadRecoveryFile(): Promise<void> {
     recoveryFileDownloaded.value = true;
     notificationManager.showToast(
       new Notification({
-        message: t('ExportRecoveryDevicePage.toasts.fileDownloadOk'),
+        title: t('ExportRecoveryDevicePage.toasts.fileDownloadOk.title'),
+        message: t('ExportRecoveryDevicePage.toasts.fileDownloadOk.message'),
         level: NotificationLevel.Success,
       }),
     );

diff --git a/client/src/views/devices/GreetDeviceModal.vue b/client/src/views/devices/GreetDeviceModal.vue
@@ -234,7 +234,8 @@ async function startProcess(): Promise<void> {
   if (!result.ok) {
     notificationManager.showToast(
       new Notification({
-        message: t('DevicesPage.greet.errors.startFailed'),
+        title: t('DevicesPage.greet.errors.startFailed.title'),
+        message: t('DevicesPage.greet.errors.startFailed.message'),
         level: NotificationLevel.Error,
       }),
     );
@@ -245,7 +246,8 @@ async function startProcess(): Promise<void> {
   if (!waitResult.ok) {
     notificationManager.showToast(
       new Notification({
-        message: t('DevicesPage.greet.errors.startFailed'),
+        title: t('DevicesPage.greet.errors.startFailed.title'),
+        message: t('DevicesPage.greet.errors.startFailed.message'),
         level: NotificationLevel.Error,
       }),
     );
@@ -297,6 +299,7 @@ async function cancelModal(): Promise<boolean> {
 async function showErrorAndRestart(message: string): Promise<void> {
   notificationManager.showToast(
     new Notification({
+      title: t('DevicesPage.greet.errors.unexpected.title'),
       message: message,
       level: NotificationLevel.Error,
     }),
@@ -312,9 +315,10 @@ async function nextStep(): Promise<void> {
   if (pageStep.value === GreetDeviceStep.Summary) {
     notificationManager.showToast(
       new Notification({
-        message: t('DevicesPage.greet.success', {
+        title: t('DevicesPage.greet.success.title', {
           label: greeter.value.requestedDeviceLabel,
         }),
+        message: t('DevicesPage.greet.success.message'),
         level: NotificationLevel.Success,
       }),
     );
@@ -333,7 +337,7 @@ async function nextStep(): Promise<void> {
     if (result.ok) {
       await nextStep();
     } else {
-      await showErrorAndRestart(t('DevicesPage.greet.errors.unexpected', { reason: result.error.tag }));
+      await showErrorAndRestart(t('DevicesPage.greet.errors.unexpected.message', { reason: result.error.tag }));
     }
   } else if (pageStep.value === GreetDeviceStep.WaitForGuestInfo) {
     waitingForGuest.value = true;
@@ -356,7 +360,8 @@ async function copyLink(): Promise<void> {
   await navigator.clipboard.writeText(greeter.value.invitationLink);
   notificationManager.showToast(
     new Notification({
-      message: t('DevicesPage.greet.linkCopiedToClipboard'),
+      title: t('DevicesPage.greet.linkCopiedToClipboard.title'),
+      message: t('DevicesPage.greet.linkCopiedToClipboard.message'),
       level: NotificationLevel.Info,
     }),
   );