[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

@@ -21,7 +21,7 @@ import { TranslationService } from '../../translation/translation.service';
import { Subject } from 'rxjs';
import { NotificationModel } from '../models/notification.model';
import { info, warning, error } from '../helpers/notification.factory';
import { SnackbarContentComponent } from '../../snackbar-content';
import { SnackbarContentComponent } from '../../snackbar-content';
import { SnackBarData } from '../../snackbar-content/snack-bar-data';
const INFO_SNACK_CLASS = 'adf-info-snackbar';
@@ -34,9 +34,7 @@ const ERROR_SNACK_CLASS = 'adf-error-snackbar';
export class NotificationService {
notifications$: Subject<NotificationModel> = new Subject();
constructor(private snackBar: MatSnackBar,
private translationService: TranslationService) {
}
constructor(private snackBar: MatSnackBar, private translationService: TranslationService) {}
/**
* 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
* @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);
}
@@ -59,7 +61,12 @@ export class NotificationService {
* @param interpolateArgs The interpolation parameters to add for the translation
* @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);
}
@@ -73,12 +80,17 @@ export class NotificationService {
* @returns snackbar reference
*/
showError(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: ERROR_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
return this.dispatchNotification(
message,
action,
{
panelClass: ERROR_SNACK_CLASS,
data: {
showAction
}
},
interpolateArgs
);
}
/**
@@ -91,12 +103,17 @@ export class NotificationService {
* @returns snackbar reference
*/
showInfo(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: INFO_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
return this.dispatchNotification(
message,
action,
{
panelClass: INFO_SNACK_CLASS,
data: {
showAction
}
},
interpolateArgs
);
}
/**
@@ -109,12 +126,17 @@ export class NotificationService {
* @returns snackbar reference
*/
showWarning(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
return this.dispatchNotification(message, action, {
panelClass: WARN_SNACK_CLASS,
data: {
showAction
}
}, interpolateArgs);
return this.dispatchNotification(
message,
action,
{
panelClass: WARN_SNACK_CLASS,
data: {
showAction
}
},
interpolateArgs
);
}
/**
@@ -133,25 +155,30 @@ export class NotificationService {
this.notifications$.next(notification);
}
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 translatedAction: string = this.translationService.instant(action, interpolateArgs);
const createNotification = this.getNotificationCreator(config);
this.notifications$.next(createNotification(translatedMessage));
return this.snackBar.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, {
...(typeof config === 'number' && {duration: config}),
panelClass: INFO_SNACK_CLASS,
...( (typeof config === 'object') ? config : {} ),
data: {
actionLabel: translatedAction,
actionIcon: 'close',
actionIconAriaLabel: 'CLOSE',
message: translatedMessage,
showAction: true,
callActionOnIconClick: false,
...( (typeof config === 'object') ? config.data : {} )
}
});
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 translatedAction: string = this.translationService.instant(action, interpolateArgs);
const createNotification = this.getNotificationCreator(config);
this.notifications$.next(createNotification(translatedMessage));
return this.snackBar.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, {
...(typeof config === 'number' && { duration: config }),
panelClass: INFO_SNACK_CLASS,
...(typeof config === 'object' ? config : {}),
data: {
actionLabel: translatedAction,
actionIcon: 'close',
actionIconAriaLabel: 'CLOSE',
message: translatedMessage,
showAction: true,
callActionOnIconClick: false,
...(typeof config === 'object' ? config.data : {})
}
});
}
private getNotificationCreator(config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>) {

View File

@@ -1,13 +1,24 @@
@mixin adf-snackbar-theme() {
.adf-error-snackbar {
background-color: var(--theme-warn-color);
}
/* stylelint-disable selector-class-pattern */
.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 {
background-color: var(--theme-accent-color);
}
&.adf-warning-snackbar {
--mdc-snackbar-container-color: var(--theme-accent-color);
}
.adf-info-snackbar {
background-color: var(--theme-primary-color);
&.adf-info-snackbar {
--mdc-snackbar-container-color: var(--theme-primary-color);
}
&.adf-error-snackbar {
--mdc-snackbar-container-color: var(--theme-warn-color);
}
}
}