Add style on toast

Scille · Dec 5, 2023 · dfb0919 · dfb0919
1 parent ee1ed9c
commit dfb0919
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 28 deletions.
diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
@@ -257,7 +257,8 @@
         "noWorkspaces": "You haven't created a workspace, and no workspace has been shared with you yet.",
         "listError": "Could not list the workspaces.",
         "newWorkspaceError": "Could not create the new workspace.",
-        "newWorkspaceSuccess": "The workspace '{workspace}' has been created!",
+        "newWorkspaceSuccessTitle": "Workspace created",
+        "newWorkspaceSuccessText": "The workspace '{workspace}' has been created!",
         "workspaceContextMenu": {
             "titleOffline": "Offline",
             "titleManage": "Manage workspace",

diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
@@ -257,7 +257,8 @@
         "noWorkspaces": "Vous n'avez pas encore créé d'espace de travail, et aucun espace de travail n'a été partagé avec vous.",
         "listError": "Impossible de lister les espaces de travail.",
         "newWorkspaceError": "Impossible de créer le nouvel espace de travail.",
-        "newWorkspaceSuccess": "L'espace de travail '{workspace}' a été créé !",
+        "newWorkspaceSuccessTitle": "Espace de travail créé",
+        "newWorkspaceSuccessText": "L'espace de travail '{workspace}' a été créé !",
         "workspaceContextMenu": {
             "titleOffline": "Hors Connexion",
             "titleManage": "Gestion de l'espace",

diff --git a/client/src/services/toastManager.ts b/client/src/services/toastManager.ts
@@ -2,7 +2,7 @@
 
 import { toastController } from '@ionic/vue';
 import { MsReportTheme } from '@/components/core/ms-types';
-import { informationCircle, checkmarkCircle, warning, closeCircle } from 'ionicons/icons';
+import { information, checkmark, warning, closeCircle } from 'ionicons/icons';
 import { ComposerTranslation } from 'vue-i18n';
 
 const DEFAULT_TOAST_DURATION = 3000;
@@ -19,6 +19,7 @@ export class ToastManager {
   async createAndPresent(toastConfig: {
     title?: string;
     icon?: string;
+    header?: string;
     message: string;
     theme: MsReportTheme;
     confirmButtonLabel?: string;
@@ -29,7 +30,9 @@ export class ToastManager {
       message: toastConfig.message,
       cssClass: ['notification-toast', toastConfig.theme],
       mode: 'ios',
-      duration: toastConfig.duration ?? DEFAULT_TOAST_DURATION,
+      // duration: toastConfig.duration ?? DEFAULT_TOAST_DURATION,
+      // at the end of this PR, removed 0
+      duration: 0,
       icon: toastConfig.theme ? this._getIcon(toastConfig.theme) : toastConfig.icon,
       buttons: [
         {
@@ -58,9 +61,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,61 +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-700);
-    --ms-notification-toast-background-color: var(--parsec-color-light-primary-100);
-    --ms-notification-toast-border-color: var(--parsec-color-light-primary-500);
+    --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-700);
-    --ms-notification-toast-background-color: var(--parsec-color-light-success-100);
     --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-700);
-    --ms-notification-toast-background-color: var(--parsec-color-light-warning-100);
     --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-700);
-    --ms-notification-toast-background-color: var(--parsec-color-light-danger-100);
     --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-8);
-    --border-width: 1px;
-    --border-style: solid;
-    --box-shadow: var(--parsec-shadow-light);
+    --border-radius: var(--parsec-radius-12);
+    --box-shadow: 0;
     --button-color: var(--parsec-color-light-secondary-text);
     --color: var(--ms-notification-toast-text-color);
     --max-width: 27rem;
   }
 
   &::part(container) {
-    padding-right: .625rem;
+    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;
+    }
   }
 
-  &::part(button) {
-    padding: .375rem .75rem;
-    font-size: .875rem;
-    min-height: 10px;
-    letter-spacing: 0.015rem;
+  &::role(status) {
+    display: none;
+  }
+
+  &::part(message) {
+    color: var(--parsec-color-light-secondary-text);
+    font-size: 0.825rem;
+    padding-top: 0.25rem;
   }
-}
 
-.notification-toast {
-  .toast-wrapper {
-      transform: translateY(70px) !important;
+  &::part(icon) {
+    margin: 0;
+    padding: .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/workspaces/WorkspacesPage.vue b/client/src/views/workspaces/WorkspacesPage.vue
@@ -215,7 +215,8 @@ async function openCreateWorkspaceModal(): Promise<void> {
     if (result.ok) {
       notificationManager.showToast(
         new Notification({
-          message: t('WorkspacesPage.newWorkspaceSuccess', {
+          title: t('WorkspacesPage.newWorkspaceSuccessTitle'),
+          message: t('WorkspacesPage.newWorkspaceSuccessText', {
             workspace: workspaceName,
           }),
           level: NotificationLevel.Success,