fix(demo): refactor notifications

src/app/pages/components/components.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { NgaCheckboxModule } from '@akveo/nga-theme';
 
 import { TreeModule } from 'ng2-tree';
 import { ToasterModule } from 'angular2-toaster';
@@ -13,6 +14,7 @@ import { ComponentsRoutingModule, routedComponents } from './components-routing.
     ComponentsRoutingModule,
     TreeModule,
     ToasterModule,
+    NgaCheckboxModule,
   ],
   declarations: [
     ...routedComponents,

src/app/pages/components/notifications/notifications.component.html

@@ -5,17 +5,33 @@
   <nga-card-body>
     <toaster-container [toasterconfig]="config"></toaster-container>
 
+    <div class="row">
+      <div class="col-md-6 col-sm-12">
         <div class="form-group">
           <label class="form-control-label">Place to show toast:</label>
-      <select class="form-control" [(ngModel)]="position" name="position">
+          <div ngbDropdown>
-        <option *ngFor="let position of positions" [ngValue]="position">{{position}}</option>
+            <button class="btn btn-primary" type="button" ngbDropdownToggle>
-      </select>
+              {{ position }}
+            </button>
+            <ul class="dropdown-menu">
+              <li class="dropdown-item" *ngFor="let p of positions" (click)="position = p">
+                {{ p }}
+              </li>
+            </ul>
+          </div>
         </div>
         <div class="form-group">
           <label class="form-control-label">Animation type:</label>
-      <select class="form-control" [(ngModel)]="animationType"name="animation">
+          <div ngbDropdown>
-        <option *ngFor="let type of animations" [ngValue]="type">{{type}}</option>
+            <button class="btn btn-primary" type="button" ngbDropdownToggle>
-      </select>
+              {{ animationType }}
+            </button>
+            <ul class="dropdown-menu">
+              <li class="dropdown-item" *ngFor="let at of animations" (click)="animationType = at">
+                {{ at }}
+              </li>
+            </ul>
+          </div>
         </div>
         <div class="form-group">
           <label class="form-control-label">Title:</label>
@@ -28,30 +44,39 @@
           </div>
         </form>
         <div class="form-group">
-      <label class="form-control-label">Time to hide toast, ms. 0 to persistent toast:</label><input class="form-control" type="number" [(ngModel)]="timeout"name="timeout">
+          <label class="form-control-label">Time to hide toast, ms. 0 to persistent toast:</label>
+          <input class="form-control" type="number" [(ngModel)]="timeout"name="timeout">
         </div>
+      </div>
+
+      <div class="col-md-6 col-sm-12">
         <div class="form-group">
-      <label class="form-control-label">Limit number of toasts:</label><input class="form-control" type="number" [(ngModel)]="toastsLimit" name="limit">
+          <label class="form-control-label">Limit number of toasts:</label>
+          <input class="form-control" type="number" [(ngModel)]="toastsLimit" name="limit">
         </div>
         <div class="form-group">
           <label class="form-control-label">Toast type:</label>
-                <select class="form-control" [(ngModel)]="type" name="type">
+          <div ngbDropdown>
-                  <option *ngFor="let type of types" [ngValue]="type">{{type}}</option>
+            <button class="btn btn-primary" type="button" ngbDropdownToggle>
-                </select>
+              {{ type }}
+            </button>
+            <ul class="dropdown-menu">
+              <li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
+            </ul>
           </div>
-    <div class="form-group">
-      <label class="form-control-label"><input type="checkbox" [(ngModel)]="isNewestOnTop" name="onTop">Newest on top</label>
         </div>
-    <div class="form-group">
+
-      <label class="form-control-label"><input type="checkbox" [(ngModel)]="isHideOnClick"name="hideOnClick">Hide on click</label>
+        <div><nga-checkbox [(ngModel)]="isNewestOnTop">Newest on top</nga-checkbox></div>
+        <div><nga-checkbox [(ngModel)]="isHideOnClick">Hide on click</nga-checkbox></div>
+        <div><nga-checkbox [(ngModel)]="isDuplicatesPrevented">Prevent arising of duplicate toast</nga-checkbox></div>
+        <div><nga-checkbox [(ngModel)]="isCloseButton">Close button</nga-checkbox></div>
       </div>
-    <div class="form-group">
-      <label class="form-control-label"><input type="checkbox" [(ngModel)]="isDuplicatesPrevented" name="noDupl">Prevent arising of duplicate toast</label>
     </div>
-    <div class="form-group">
-      <label class="form-control-label"><input type="checkbox" [(ngModel)]="isCloseButton" name="closeBtn">Close button</label>
-    </div>
-    <button class="btn btn-default" (click)="makeToast()">Show toast</button>
-    <button class="btn btn-default" (click)="clearToasts()">Clear all toasts</button>
   </nga-card-body>
+
+  <nga-card-footer>
+    <button class="btn btn-primary" (click)="makeToast()">Show toast</button>
+    <button class="btn btn-success" (click)="openRandomToast()">Random toast</button>
+    <button class="btn btn-danger" (click)="clearToasts()">Clear all toasts</button>
+  </nga-card-footer>
 </nga-card>

src/app/pages/components/notifications/notifications.component.scss

@@ -1,3 +1,12 @@
-input[type='checkbox'] {
+@import '../../../@theme/styles/variables';
-  margin-right: 0.5rem;
+
+@include nga-install-component() {
+
+  nga-card-footer {
+    padding-bottom: 0.25rem;
+
+    button {
+      margin: 0 1rem 1rem 0;
+    }
+  }
 }

src/app/pages/components/notifications/notifications.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
-import { ToasterService, ToasterConfig, Toast } from 'angular2-toaster';
+import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';
 
-// import 'style-loader!angular2-notifications/notifications.css';
+import 'style-loader!angular2-toaster/toaster.css';
 
 @Component({
   selector: 'ngx-notifications',
@@ -11,37 +11,60 @@ import { ToasterService, ToasterConfig, Toast } from 'angular2-toaster';
 export class NotificationsComponent {
   constructor(private toasterService: ToasterService) {}
 
-  title: string = 'HI there!';
-  content: string = `I'm cool toaster!`;
-  type: string = 'default';
-  isCloseButton: boolean = true;
   config: ToasterConfig;
 
-  isHideOnClick: boolean = true;
+  position: string = 'toast-top-right';
-  isNewestOnTop: boolean = true;
-  toastsLimit: number = 5;
-  position: string = 'toast-bottom-right';
-  timeout: number = 5000;
-  isDuplicatesPrevented: boolean = false;
   animationType: string = 'fade';
-  types: string[] = ['default', 'info', 'wait', 'success', 'warning', 'error'];
+  title: string = 'HI there!';
+  content: string = `I'm cool toaster!`;
+  timeout: number = 5000;
+  toastsLimit: number = 5;
+  type: string = 'default';
+
+  isNewestOnTop: boolean = true;
+  isHideOnClick: boolean = true;
+  isDuplicatesPrevented: boolean = false;
+  isCloseButton: boolean = true;
+
+  types: string[] = ['default', 'info', 'success', 'warning', 'error'];
   animations: string[] = ['fade', 'flyLeft', 'flyRight', 'slideDown', 'slideUp'];
   positions: string[] = ['toast-top-full-width', 'toast-bottom-full-width', 'toast-top-left', 'toast-top-center',
     'toast-top-right', 'toast-bottom-right', 'toast-bottom-center', 'toast-bottom-left', 'toast-center'];
 
+  quotes = [
+    { title: null, body: 'We rock at <i>Angular</i>' },
+    { title: null, body: 'Titles are not always needed' },
+    { title: null, body: 'Toastr rock!' },
+    { title: 'What about nice html?', body: '<b>Sure you <em>can!</em></b>' },
+  ];
+
   makeToast() {
+    this.showToast(this.type, this.title, this.content);
+  }
+
+  openRandomToast () {
+    const typeIndex = Math.floor(Math.random() * this.types.length);
+    const quoteIndex = Math.floor(Math.random() * this.quotes.length);
+    const type = this.types[typeIndex];
+    const quote = this.quotes[quoteIndex];
+
+    this.showToast(type, quote.title, quote.body);
+  };
+
+  private showToast(type: string, title: string, body: string) {
     this.config = new ToasterConfig({
       positionClass: this.position,
       timeout: this.timeout,
       newestOnTop: this.isNewestOnTop,
+      tapToDismiss: this.isHideOnClick,
       preventDuplicates: this.isDuplicatesPrevented,
       animation: this.animationType,
       limit: this.toastsLimit,
     });
     const toast: Toast = {
-      type: this.type,
+      type: type,
-      title: this.title,
+      title: title,
-      body: this.content,
+      body: body,
       timeout: this.timeout,
       showCloseButton: this.isCloseButton,
     };

src/app/pages/pages-menu.ts

@@ -56,7 +56,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([
         title: 'Tree',
         link: '/pages/components/tree',
       }, {
-        title: 'Toaster',
+        title: 'Notifications',
         link: '/pages/components/notifications',
       },
     ]),