diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json index 5d3e43db6d0..e77fe0a07e6 100644 --- 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 index 45122acc94b..ecc1854dcfe 100644 --- 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 index 9689c362161..3a85bd6b89e 100644 --- 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 index 82fc86ff5b9..ea438078e9b 100644 --- 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 index c526c983cf3..bc81b312175 100644 --- a/client/src/views/workspaces/WorkspacesPage.vue +++ b/client/src/views/workspaces/WorkspacesPage.vue @@ -215,7 +215,8 @@ async function openCreateWorkspaceModal(): Promise { if (result.ok) { notificationManager.showToast( new Notification({ - message: t('WorkspacesPage.newWorkspaceSuccess', { + title: t('WorkspacesPage.newWorkspaceSuccessTitle'), + message: t('WorkspacesPage.newWorkspaceSuccessText', { workspace: workspaceName, }), level: NotificationLevel.Success,