diff --git a/demo-shell/src/app/components/notifications/notifications.component.html b/demo-shell/src/app/components/notifications/notifications.component.html index ad53942ece..e13dc3d061 100644 --- a/demo-shell/src/app/components/notifications/notifications.component.html +++ b/demo-shell/src/app/components/notifications/notifications.component.html @@ -65,4 +65,10 @@ {{snackBarConfigObject}}

+
+

Quick Messages

+ + + +
diff --git a/demo-shell/src/app/components/notifications/notifications.component.ts b/demo-shell/src/app/components/notifications/notifications.component.ts index 54af09b251..2c2074bd8d 100644 --- a/demo-shell/src/app/components/notifications/notifications.component.ts +++ b/demo-shell/src/app/components/notifications/notifications.component.ts @@ -117,4 +117,16 @@ export class NotificationsComponent implements OnInit { dismissSnackBar() { this.notificationService.dismissSnackMessageAction(); } + + quickError() { + this.notificationService.showError(this.message, 'Fix'); + } + + quickInfo() { + this.notificationService.showInfo(this.message); + } + + quickWarning() { + this.notificationService.showWarning(this.message, 'Undo'); + } } diff --git a/demo-shell/src/app/components/notifications/notifications.module.ts b/demo-shell/src/app/components/notifications/notifications.module.ts index 18651acd3e..3e8361f46a 100644 --- a/demo-shell/src/app/components/notifications/notifications.module.ts +++ b/demo-shell/src/app/components/notifications/notifications.module.ts @@ -20,6 +20,7 @@ import { NotificationsComponent } from './notifications.component'; import { Routes, RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { CoreModule } from '@alfresco/adf-core'; +import { MatButtonModule } from '@angular/material/button'; const routes: Routes = [ { @@ -32,7 +33,8 @@ const routes: Routes = [ imports: [ CommonModule, CoreModule.forChild(), - RouterModule.forChild(routes) + RouterModule.forChild(routes), + MatButtonModule ], declarations: [NotificationsComponent] }) diff --git a/lib/core/services/notification.service.ts b/lib/core/services/notification.service.ts index f71527e4aa..748ec3f3ad 100644 --- a/lib/core/services/notification.service.ts +++ b/lib/core/services/notification.service.ts @@ -85,4 +85,40 @@ export class NotificationService { dismissSnackMessageAction() { return this.snackBar.dismiss(); } + + protected showMessage(message: string, panelClass: string, action?: string): MatSnackBarRef { + message = this.translationService.instant(message); + + return this.snackBar.open(message, action, { + duration: this.DEFAULT_DURATION_MESSAGE, + panelClass + }); + } + + /** + * Rase error message + * @param message Text message or translation key for the message. + * @param action (optional) Action name + */ + showError(message: string, action?: string): MatSnackBarRef { + return this.showMessage(message, 'adf-error-snackbar', action); + } + + /** + * Rase info message + * @param message Text message or translation key for the message. + * @param action (optional) Action name + */ + showInfo(message: string, action?: string): MatSnackBarRef { + return this.showMessage(message, 'adf-info-snackbar', action); + } + + /** + * Rase warning message + * @param message Text message or translation key for the message. + * @param action (optional) Action name + */ + showWarning(message: string, action?: string): MatSnackBarRef { + return this.showMessage(message, 'adf-warning-snackbar', action); + } } diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss index 9a147e1647..0469c1e456 100644 --- a/lib/core/styles/_index.scss +++ b/lib/core/styles/_index.scss @@ -33,6 +33,7 @@ @import '../login/components/login-dialog.component'; @import '../login/components/login-dialog-panel.component'; @import '../../core/clipboard/clipboard.component'; +@import './snackbar'; @mixin adf-core-theme($theme) { @include adf-colors-theme($theme); @@ -68,4 +69,5 @@ @include adf-login-dialog-panel-theme($theme); @include adf-sidenav-layout-theme($theme); @include adf-clipboard-theme($theme); + @include adf-snackbar-theme($theme); } diff --git a/lib/core/styles/snackbar.scss b/lib/core/styles/snackbar.scss new file mode 100644 index 0000000000..cc98a1b8e0 --- /dev/null +++ b/lib/core/styles/snackbar.scss @@ -0,0 +1,29 @@ +@mixin adf-snackbar-theme($theme) { + $warn: map-get($theme, warn); + $accent: map-get($theme, accent); + $primary: map-get($theme, primary); + + .adf-error-snackbar { + background-color: mat-color($warn); + + .mat-simple-snackbar-action { + color: white; + } + } + + .adf-warning-snackbar { + background-color: mat-color($accent); + + .mat-simple-snackbar-action { + color: white; + } + } + + .adf-info-snackbar { + background-color: mat-color($primary); + + .mat-simple-snackbar-action { + color: white; + } + } + }