[MS] Fixes animation for toast progress bar

Scille · Jan 16, 2024 · 3a93660 · 3a93660
1 parent bbfa28b
commit 3a93660
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/client/src/services/toastManager.ts b/client/src/services/toastManager.ts
@@ -5,7 +5,7 @@ import { toastController } from '@ionic/vue';
 import { checkmark, closeCircle, information, warning } from 'ionicons/icons';
 import { ComposerTranslation } from 'vue-i18n';
 
-const DEFAULT_TOAST_DURATION = 3000;
+const DEFAULT_TOAST_DURATION = 5000;
 
 export class ToastManager {
   toasts: HTMLIonToastElement[];
@@ -24,12 +24,14 @@ export class ToastManager {
     confirmButtonLabel?: string;
     duration?: number;
   }): Promise<any> {
+    const duration = toastConfig.duration || DEFAULT_TOAST_DURATION;
+
     const toast = await toastController.create({
       header: toastConfig.title,
       message: toastConfig.message,
       cssClass: ['notification-toast', toastConfig.theme],
       mode: 'ios',
-      duration: toastConfig.duration ?? DEFAULT_TOAST_DURATION,
+      duration: duration,
       icon: toastConfig.theme ? this._getIcon(toastConfig.theme) : toastConfig.icon,
       buttons: [
         {
@@ -39,13 +41,8 @@ export class ToastManager {
         },
       ],
     });
-    this.toasts.push(toast);
-    const toastActive = toast;
-    // when the class active is added progress bar width is set to 0%
-    setTimeout(() => {
-      toastActive.classList.add('active');
-    }, 100);
 
+    this.toasts.push(toast);
     await this.managePresentQueue();
 
     const result = await toast.onDidDismiss();
@@ -57,7 +54,16 @@ export class ToastManager {
   }
 
   async managePresentQueue(): Promise<any> {
-    await this.toasts.at(0)?.present();
+    const currentToast = this.toasts.at(0);
+
+    if (currentToast) {
+      document.documentElement.style.setProperty('--ms-toast-duration', `${currentToast.duration}ms`);
+      // when the class active is added progress bar width is set to 0%
+      setTimeout(() => {
+        currentToast.classList.add('active');
+      }, 100);
+      await currentToast.present();
+    }
   }
 
   private _getIcon(theme: MsReportTheme): string {

diff --git a/client/src/theme/components/toasts.scss b/client/src/theme/components/toasts.scss
@@ -84,7 +84,7 @@ ion-toast.notification-toast {
     &::part(container) {
       &::after {
         width: 0%;
-        transition: width 5s ease-in-out;
+        transition: width var(--ms-toast-duration) ease-in-out;
       }
     }
   }