feature(notifications): initial notifications module. (closes #148)

package.json

@@ -15,7 +15,7 @@
     "postinstall": "webdriver-manager update",
     "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
     "test": "ng test --code-coverage --single-run",
-    "show-coverage-win" : "start chrome ./coverage/index.html",
+    "coverage-win" : "start chrome ./coverage/index.html",
     "bump-dev": "gulp bump-version",
     "bump-patch": "gulp bump-version --ver patch",
     "bump-minor": "gulp bump-version --ver minor",

src/app/components/components/components.component.ts

@@ -77,6 +77,11 @@ export class ComponentsComponent {
     icon: 'swap_horiz',
     route: 'paging',
     title: 'Paging',
+  }, {
+    description: 'Notification count & menu',
+    icon: 'notifications',
+    route: 'notifications',
+    title: 'Notifications',
   }, {
     description: 'Search and filter items',
     icon: 'search',

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

@@ -23,6 +23,7 @@ import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
 import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
 import { MaterialComponentsComponent, DialogComponent } from './material-components/material-components.component';
+import { NotificationsDemoComponent } from './notifications/notifications.component';
 
 import { CovalentCoreModule } from '../../../platform/core';
 import { CovalentHighlightModule } from '../../../platform/highlight';
@@ -54,6 +55,7 @@ import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
     DynamicFormsDemoComponent,
     MaterialComponentsComponent,
     DialogComponent,
+    NotificationsDemoComponent,
   ],
   imports: [
     CovalentCoreModule.forRoot(),

src/app/components/components/components.routes.ts

@@ -21,6 +21,7 @@ import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
 import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
 import { MaterialComponentsComponent } from './material-components/material-components.component';
+import { NotificationsDemoComponent } from './notifications/notifications.component';
 
 const routes: Routes = [{
   children: [{
@@ -80,6 +81,9 @@ const routes: Routes = [{
     }, {
       component: PagingDemoComponent,
       path: 'paging',
+    }, {
+      component: NotificationsDemoComponent,
+      path: 'notifications',
     }, {
       component: DynamicFormsDemoComponent,
       path: 'dynamic-forms',

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

@@ -0,0 +1,160 @@
+<md-card>
+  <md-card-title>Notifications</md-card-title>
+  <md-card-subtitle>Notifications count &amp; menu for toolbar</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>Typical usage in a toolbar:</p>
+    <md-toolbar color="accent">
+      <button md-icon-button>
+        <md-icon>menu</md-icon>
+      </button>
+      <span>Toolbar</span>
+      <span flex></span>
+      <td-search-box placeholder="Search" [alwaysVisible]="false" flex></td-search-box>
+      <td-notification-count color="primary" [notifications]="true">
+        <md-icon>person</md-icon>
+      </td-notification-count>
+      <button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
+        <td-notification-count [notifications]="101">
+          <md-icon>notifications</md-icon>
+        </td-notification-count>
+      </button>
+      <md-menu #notificationsMenu="mdMenu">
+        <td-menu>
+          <div td-menu-header class="md-subhead">Notifications</div>
+          <md-nav-list dense>
+            <template let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5,6,7,8,9]">
+              <a md-list-item>
+                <md-icon md-list-avatar>today</md-icon>
+                <h4 md-line><span class="text-wrap">A user did an activity on an item that you've subscribed to follow actions on.</span></h4>
+                <p md-line>22 minutes ago</p>
+              </a>
+              <md-divider *ngIf="!last"></md-divider>
+            </template>
+          </md-nav-list>
+          <button md-button color="accent" td-menu-footer>
+            See All Notifications
+          </button>
+        </td-menu>
+      </md-menu>
+      <button md-icon-button [mdMenuTriggerFor]="toolbarMenu1"><md-icon>more_vert</md-icon></button>
+      <md-menu #toolbarMenu1="mdMenu">
+        <button md-menu-item>
+          <md-icon>settings</md-icon>
+          <span>Settings</span>
+        </button>
+        <button md-menu-item>
+          <md-icon>exit_to_app</md-icon>
+          <span>Sign out</span>
+        </button>
+      </md-menu>
+    </md-toolbar>
+    <div layout="row">
+      <div layout="column" class="bgc-grey-300">
+        <button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
+          <td-notification-count color="primary" [notifications]="12">
+            <md-icon>message</md-icon>
+          </td-notification-count>
+        </button>
+        <td-notification-count color="accent" [notifications]="true">
+          <md-icon>people</md-icon>
+        </td-notification-count>
+        <button md-icon-button>
+          <td-notification-count [notifications]="0">
+            <md-icon>notifications</md-icon>
+          </td-notification-count>
+        </button>
+      </div>
+      <md-nav-list dense flex>
+        <a md-list-item>
+          <md-icon md-list-avatar>person</md-icon>
+          <h3 md-line> Jyn Erso stole the plans to the Death Star </h3>
+          <p md-line> 10 mins ago </p>
+          <span></span>
+          <td-notification-count color="accent" [notifications]="1">
+          </td-notification-count>
+        </a>
+        <md-divider md-inset></md-divider>
+        <a md-list-item>
+          <md-icon md-list-avatar>person</md-icon>
+          <h3 md-line> Chirrut Îmwe beat down a bunch of storm troopers with a stick </h3>
+          <p md-line> 2 days ago </p>
+          <span></span>
+          <td-notification-count [notifications]="true">
+          </td-notification-count>
+        </a>
+      </md-nav-list>
+    </div>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-title>TdNotificationCountComponent</md-card-title>
+  <md-card-subtitle>How to use this component</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>Use <code><![CDATA[<td-notification-count>]]></code> element to show number of notifications.</p>
+    <h3>Properties:</h3>
+    <p>The <code><![CDATA[<td-notification-count>]]></code> component has {{notificationsAttrs.length}} properties:</p>
+    <md-list>
+      <template let-attr let-last="attr" ngFor [ngForOf]="notificationsAttrs">
+        <a md-list-item layout-align="row">
+          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p md-line> {{attr.description}} </p>
+        </a>
+        <md-divider *ngIf="!last"></md-divider>
+      </template>
+    </md-list>
+    <h3>Example:</h3>
+    <p>HTML:</p>
+    <td-highlight lang="html">
+      <![CDATA[
+        <button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
+          <td-notification-count color="accent" [notifications]="notificationCount">
+            <md-icon>notifications</md-icon>
+          </td-notification-count>
+        </button>
+        <md-menu #notificationsMenu="mdMenu">
+          <td-menu>
+            <div td-menu-header class="md-subhead">Notifications</div>
+            <md-nav-list dense>
+              <template let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5,6,7,8,9]">
+                <a md-list-item>
+                  <md-icon md-list-avatar>today</md-icon>
+                  <h4 md-line><span class="text-wrap">A user did an activity on an item that you've subscribed to follow actions on.</span></h4>
+                  <p md-line>22 minutes ago</p>
+                </a>
+                <md-divider *ngIf="!last"></md-divider>
+              </template>
+            </md-nav-list>
+            <button md-button color="accent" td-menu-footer>
+              See All Notifications
+            </button>
+          </td-menu>
+        </md-menu>
+      ]]>
+    </td-highlight>
+    <p>Typescript:</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        export class Demo {
+          notificationCount: number = 100;
+        }
+      ]]>
+    </td-highlight>
+    <h3>Setup:</h3>
+    <p>Import the [CovalentNotificationsModule] using the <code>forRoot()</code> method in your NgModule:</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        import { CovalentNotificationsModule } from '@covalent/core';
+        @NgModule({
+          imports: [
+            CovalentNotificationsModule.forRoot(), // or CovalentCoreModule.forRoot() (included inside of it)
+            ...
+          ],
+          ...
+        })
+        export class MyModule {}
+      ]]>
+    </td-highlight>
+  </md-card-content>
+</md-card>

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

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'notifications-demo',
+  styleUrls: ['./notifications.component.scss'],
+  templateUrl: './notifications.component.html',
+})
+export class NotificationsDemoComponent {
+
+  notificationsAttrs: Object[] = [{
+    description: `Number for the notification count.
+                  Shows number if the input is a positive number or its no count state if boolean 'true'`,
+    name: 'notifications',
+    type: 'number | boolean',
+  }, {
+    description: `Sets the theme color of the notification tip.
+                  Defaults to 'warn'`,
+    name: 'color',
+    type: '"primary" | "accent" | "warn"',
+  }];
+
+}

src/app/components/components/overview/overview.component.ts

@@ -71,6 +71,11 @@ export class ComponentsOverviewComponent {
       icon: 'swap_horiz',
       route: 'paging',
       title: 'Paging',
+    }, {
+      color: 'purple-700',
+      icon: 'notifications',
+      route: 'notifications',
+      title: 'Notifications',
     }, {
       color: 'lime-700',
       icon: 'search',

src/app/components/home/home.component.html

@@ -2,6 +2,56 @@
   <div toolbar-content layout="row" layout-align="center center" flex>
     <span>Covalent</span>
     <span flex></span>
+    <button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
+      <td-notification-count color="accent" [notifications]="6">
+        <md-icon>notifications</md-icon>
+      </td-notification-count>
+    </button>
+    <md-menu #notificationsMenu="mdMenu">
+      <td-menu>
+        <div td-menu-header class="md-subhead">Updates</div>
+        <md-nav-list dense>
+          <a md-list-item [routerLink]="['/components/notifications']">
+            <md-icon md-list-avatar>notifications</md-icon>
+            <h4 md-line><span class="text-wrap">Notifications component added</span></h4>
+            <p md-line>New component</p>
+          </a>
+          <md-divider></md-divider>
+          <a md-list-item [routerLink]="['/components/dynamic-forms']">
+            <md-icon md-list-avatar>format_align_center</md-icon>
+            <h4 md-line><span class="text-wrap">JSON driven dynamic forms</span></h4>
+            <p md-line>New component</p>
+          </a>
+          <md-divider></md-divider>
+          <a md-list-item [routerLink]="['/layouts']">
+            <md-icon md-list-avatar>call_to_action</md-icon>
+            <h4 md-line><span class="text-wrap">Sticky footer added to layouts</span></h4>
+            <p md-line>Component updated</p>
+          </a>
+          <md-divider></md-divider>
+          <a md-list-item [routerLink]="['/components/data-table']">
+            <md-icon md-list-avatar>grid_on</md-icon>
+            <h4 md-line><span class="text-wrap">Nested object support for data-table</span></h4>
+            <p md-line>Component updated</p>
+          </a>
+          <md-divider></md-divider>
+          <a md-list-item [routerLink]="['/components/http']">
+            <md-icon md-list-avatar>http</md-icon>
+            <h4 md-line><span class="text-wrap">HTTP path interceptors &amp; transform support</span></h4>
+            <p md-line>Service updated</p>
+          </a>
+          <md-divider></md-divider>
+          <a md-list-item href="https://github.com/Teradata/covalent/blob/develop/package.json#L53-L58" target="_blank">
+            <md-icon md-list-avatar>notifications</md-icon>
+            <h4 md-line><span class="text-wrap">Angular 2.4.1 &amp; Material2 Beta1</span></h4>
+            <p md-line>Dependencies updated</p>
+          </a>
+        </md-nav-list>
+        <a md-button color="accent" td-menu-footer href="https://github.com/Teradata/covalent/blob/develop/docs/CHANGELOG.md" target="_blank">
+          View Full Changelog
+        </a>
+      </td-menu>
+    </md-menu>
     <a md-icon-button mdTooltip="Quickstart" href="https://github.com/Teradata/covalent-quickstart" target="_blank"><md-icon>flash_on</md-icon></a>
     <a md-icon-button mdTooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><md-icon svgIcon="assets:github"></md-icon></a>
   </div>

src/platform/core/index.ts

@@ -76,6 +76,20 @@ export * from './loading/loading.module';
 import { CovalentMediaModule } from './media/media.module';
 export * from './media/media.module';
 
+/**
+ * MENU
+ */
+
+import { CovalentMenuModule } from './menu/menu.module';
+export * from './menu/menu.module';
+
+/**
+ * NOTIFICATIONS
+ */
+
+import { CovalentNotificationsModule } from './notifications/notifications.module';
+export * from './notifications/notifications.module';
+
 /**
  * PAGING
  */
@@ -114,6 +128,8 @@ export * from './steps/steps.module';
     CovalentLayoutModule.forRoot(),
     CovalentLoadingModule.forRoot(),
     CovalentMediaModule.forRoot(),
+    CovalentMenuModule.forRoot(),
+    CovalentNotificationsModule.forRoot(),
     CovalentPagingModule.forRoot(),
     CovalentSearchModule.forRoot(),
     CovalentStepsModule.forRoot(),
@@ -134,6 +150,8 @@ export * from './steps/steps.module';
     CovalentLayoutModule,
     CovalentLoadingModule,
     CovalentMediaModule,
+    CovalentMenuModule,
+    CovalentNotificationsModule,
     CovalentPagingModule,
     CovalentSearchModule,
     CovalentStepsModule,

src/platform/core/menu/menu.component.html

@@ -0,0 +1,9 @@
+<div layout="column">
+  <ng-content select="[td-menu-header]"></ng-content>
+  <md-divider></md-divider>
+  <div class="td-menu-content">
+    <ng-content></ng-content>
+  </div>
+  <md-divider></md-divider>
+  <ng-content select="[td-menu-footer]"></ng-content>
+</div>

src/platform/core/menu/menu.component.scss

@@ -0,0 +1,32 @@
+$td-menu-spacing: 8px !default;
+:host {
+  display: block;
+  margin-top: -$td-menu-spacing;
+  margin-bottom: -$td-menu-spacing;
+}
+:host /deep/ {
+  [td-menu-header] {
+    padding: $td-menu-spacing;
+    text-align: center;
+  }
+  md-list,
+  md-list[dense],
+  md-nav-list,
+  md-nav-list[dense], {
+    a[md-list-item].md-2-line .md-list-item,
+    md-list-item.md-2-line .md-list-item {
+      height: auto;
+      padding: $td-menu-spacing;
+      .md-list-text {
+        padding-right: 0px;
+      }
+      [md-line] + [md-line] {
+        margin-top: $td-menu-spacing / 2;
+      }
+    }
+  }
+}
+.td-menu-content {
+  max-height: calc(50vh);
+  overflow-y: auto;
+}