[ACS-7448] Fix wrong notifications colors

This commit is contained in:
Tomasz Nastaly
2024-04-04 15:46:38 +02:00
parent 098cfe362f
commit 230b40bdcd
2 changed files with 89 additions and 51 deletions

View File

@@ -34,9 +34,7 @@ const ERROR_SNACK_CLASS = 'adf-error-snackbar';
export class NotificationService { export class NotificationService {
notifications$: Subject<NotificationModel> = new Subject(); notifications$: Subject<NotificationModel> = new Subject();
constructor(private snackBar: MatSnackBar, constructor(private snackBar: MatSnackBar, private translationService: TranslationService) {}
private translationService: TranslationService) {
}
/** /**
* Opens a SnackBar notification to show a message. * Opens a SnackBar notification to show a message.
@@ -46,7 +44,11 @@ export class NotificationService {
* @param interpolateArgs The interpolation parameters to add for the translation * @param interpolateArgs The interpolation parameters to add for the translation
* @returns Information/control object for the SnackBar * @returns Information/control object for the SnackBar
*/ */
openSnackMessage(message: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> { openSnackMessage(
message: string,
config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>,
interpolateArgs?: any
): MatSnackBarRef<any> {
return this.dispatchNotification(message, null, config, interpolateArgs); return this.dispatchNotification(message, null, config, interpolateArgs);
} }
@@ -59,7 +61,12 @@ export class NotificationService {
* @param interpolateArgs The interpolation parameters to add for the translation * @param interpolateArgs The interpolation parameters to add for the translation
* @returns Information/control object for the SnackBar * @returns Information/control object for the SnackBar
*/ */
openSnackMessageAction(message: string, action: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> { openSnackMessageAction(
message: string,
action: string,
config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>,
interpolateArgs?: any
): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, config, interpolateArgs); return this.dispatchNotification(message, action, config, interpolateArgs);
} }
@@ -73,12 +80,17 @@ export class NotificationService {
* @returns snackbar reference * @returns snackbar reference
*/ */
showError(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> { showError(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { return this.dispatchNotification(
message,
action,
{
panelClass: ERROR_SNACK_CLASS, panelClass: ERROR_SNACK_CLASS,
data: { data: {
showAction showAction
} }
}, interpolateArgs); },
interpolateArgs
);
} }
/** /**
@@ -91,12 +103,17 @@ export class NotificationService {
* @returns snackbar reference * @returns snackbar reference
*/ */
showInfo(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> { showInfo(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { return this.dispatchNotification(
message,
action,
{
panelClass: INFO_SNACK_CLASS, panelClass: INFO_SNACK_CLASS,
data: { data: {
showAction showAction
} }
}, interpolateArgs); },
interpolateArgs
);
} }
/** /**
@@ -109,12 +126,17 @@ export class NotificationService {
* @returns snackbar reference * @returns snackbar reference
*/ */
showWarning(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> { showWarning(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, { return this.dispatchNotification(
message,
action,
{
panelClass: WARN_SNACK_CLASS, panelClass: WARN_SNACK_CLASS,
data: { data: {
showAction showAction
} }
}, interpolateArgs); },
interpolateArgs
);
} }
/** /**
@@ -133,15 +155,20 @@ export class NotificationService {
this.notifications$.next(notification); this.notifications$.next(notification);
} }
private dispatchNotification(message: string, action?: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> { private dispatchNotification(
message: string,
action?: string,
config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>,
interpolateArgs?: any
): MatSnackBarRef<any> {
const translatedMessage: string = this.translationService.instant(message, interpolateArgs); const translatedMessage: string = this.translationService.instant(message, interpolateArgs);
const translatedAction: string = this.translationService.instant(action, interpolateArgs); const translatedAction: string = this.translationService.instant(action, interpolateArgs);
const createNotification = this.getNotificationCreator(config); const createNotification = this.getNotificationCreator(config);
this.notifications$.next(createNotification(translatedMessage)); this.notifications$.next(createNotification(translatedMessage));
return this.snackBar.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, { return this.snackBar.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, {
...(typeof config === 'number' && {duration: config}), ...(typeof config === 'number' && { duration: config }),
panelClass: INFO_SNACK_CLASS, panelClass: INFO_SNACK_CLASS,
...( (typeof config === 'object') ? config : {} ), ...(typeof config === 'object' ? config : {}),
data: { data: {
actionLabel: translatedAction, actionLabel: translatedAction,
actionIcon: 'close', actionIcon: 'close',
@@ -149,7 +176,7 @@ export class NotificationService {
message: translatedMessage, message: translatedMessage,
showAction: true, showAction: true,
callActionOnIconClick: false, callActionOnIconClick: false,
...( (typeof config === 'object') ? config.data : {} ) ...(typeof config === 'object' ? config.data : {})
} }
}); });
} }

View File

@@ -1,13 +1,24 @@
@mixin adf-snackbar-theme() { @mixin adf-snackbar-theme() {
.adf-error-snackbar { /* stylelint-disable selector-class-pattern */
background-color: var(--theme-warn-color); .mat-mdc-snack-bar-container {
&.adf-warning-snackbar,
&.adf-info-snackbar,
&.adf-error-snackbar {
--mat-mdc-snack-bar-button-color: #fff;
--mdc-snackbar-supporting-text-color: #fff;
--mdc-text-button-label-text-color: #fff;
} }
.adf-warning-snackbar { &.adf-warning-snackbar {
background-color: var(--theme-accent-color); --mdc-snackbar-container-color: var(--theme-accent-color);
} }
.adf-info-snackbar { &.adf-info-snackbar {
background-color: var(--theme-primary-color); --mdc-snackbar-container-color: var(--theme-primary-color);
}
&.adf-error-snackbar {
--mdc-snackbar-container-color: var(--theme-warn-color);
}
} }
} }