From 8db915bd2a48eb964823fffee26cfba0e4520e45 Mon Sep 17 00:00:00 2001
From: Denys Vuika
Date: Tue, 7 May 2019 13:25:12 +0100
Subject: [PATCH] [ADF-4484] Quick notifications (#4688)
* quick notifications (info, error, warning)
* update code docs
---
.../notifications.component.html | 6 ++++
.../notifications/notifications.component.ts | 12 +++++++
.../notifications/notifications.module.ts | 4 ++-
lib/core/services/notification.service.ts | 36 +++++++++++++++++++
lib/core/styles/_index.scss | 2 ++
lib/core/styles/snackbar.scss | 29 +++++++++++++++
6 files changed, 88 insertions(+), 1 deletion(-)
create mode 100644 lib/core/styles/snackbar.scss
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;
+ }
+ }
+ }