[ADF-4484] Quick notifications (#4688)

* quick notifications (info, error, warning)

* update code docs

demo-shell/src/app/components/notifications/notifications.component.html

@@ -65,4 +65,10 @@
             {{snackBarConfigObject}}
         </p>
     </div>
+    <div>
+        <h3>Quick Messages</h3>
+        <button mat-button color="primary" (click)="quickInfo()">Info</button>
+        <button mat-button color="warn" (click)="quickError()">Error</button>
+        <button mat-button color="accent" (click)="quickWarning()">Warning</button>
+    </div>
 </div>

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');
+    }
 }

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]
 })

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<any> {
+        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<any> {
+        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<any> {
+        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<any> {
+        return this.showMessage(message, 'adf-warning-snackbar', action);
+    }
 }

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);
 }

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;
+      }
+    }
+  }