feat(message): introducing message module. (closes #316)

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

@@ -75,6 +75,11 @@ export class ComponentsComponent implements AfterViewInit {
     icon: 'notifications',
     route: 'notifications',
     title: 'Notifications',
+  }, {
+    description: 'Info, warning & alert messages',
+    icon: 'info_outline',
+    route: 'message',
+    title: 'Messages & Alerts',
   }, {
     description: 'Search and filter items',
     icon: 'search',

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

@@ -14,6 +14,7 @@ import { FileUploadDemoComponent } from './file-upload/file-upload.component';
 import { LoadingDemoComponent } from './loading/loading.component';
 import { MarkdownDemoComponent } from './markdown/markdown.component';
 import { MediaDemoComponent } from './media/media.component';
+import { MessageDemoComponent } from './message/message.component';
 import { HttpDemoComponent } from './http/http.component';
 import { JsonFormatterDemoComponent } from './json-formatter/json-formatter.component';
 import { ChipsDemoComponent } from './chips/chips.component';
@@ -38,7 +39,7 @@ import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdMenuModule,
 import { CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, CovalentExpansionPanelModule, CovalentFileModule,
          CovalentStepsModule, CovalentLoadingModule, CovalentDialogsModule, CovalentSearchModule, CovalentPagingModule,
          CovalentNotificationsModule, CovalentMenuModule, CovalentChipsModule, CovalentDataTableModule, CovalentJsonFormatterModule,
-         } from '../../../platform/core';
+         CovalentMessageModule } from '../../../platform/core';
 import { CovalentHighlightModule } from '../../../platform/highlight';
 import { CovalentMarkdownModule } from '../../../platform/markdown';
 import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
@@ -57,6 +58,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
     LoadingDemoComponent,
     MarkdownDemoComponent,
     MediaDemoComponent,
+    MessageDemoComponent,
     HttpDemoComponent,
     JsonFormatterDemoComponent,
     ChipsDemoComponent,
@@ -109,6 +111,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
     CovalentHighlightModule,
     CovalentMarkdownModule,
     CovalentDynamicFormsModule,
+    CovalentMessageModule,
     DocumentationToolsModule,
     NgxChartsModule,
     TranslateModule,

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

@@ -10,6 +10,7 @@ import { FileUploadDemoComponent } from './file-upload/file-upload.component';
 import { LoadingDemoComponent } from './loading/loading.component';
 import { MarkdownDemoComponent } from './markdown/markdown.component';
 import { MediaDemoComponent } from './media/media.component';
+import { MessageDemoComponent } from './message/message.component';
 import { HttpDemoComponent } from './http/http.component';
 import { JsonFormatterDemoComponent } from './json-formatter/json-formatter.component';
 import { ChipsDemoComponent } from './chips/chips.component';
@@ -52,6 +53,9 @@ const routes: Routes = [{
     }, {
       component: MediaDemoComponent,
       path: 'media',
+    }, {
+      component: MessageDemoComponent,
+      path: 'message',
     }, {
       component: HttpDemoComponent,
       path: 'http',

src/app/components/components/message/message.component.html

@@ -0,0 +1,118 @@
+<md-card>
+  <md-card-title>Messages &amp; Alerts</md-card-title>
+  <md-card-subtitle>Info, warning &amp; alert messages</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-tab-group md-stretch-tabs dynamicHeight>
+    <md-tab>
+      <ng-template md-tab-label>Demo</ng-template>
+      <md-card-content>
+        <p class="md-body-1">Standalone message:</p>
+        <td-message label="Error!" sublabel="You did something wrong!" color="warn" icon="error"></td-message>
+        <p class="md-body-1">Message in a card with action</p>
+        <md-card>
+          <td-message label="Warning!" sublabel="Your probably shouldn't do that!" color="primary" icon="warning">
+            <button td-message-actions md-button>VIEW MORE</button>
+          </td-message>
+        </md-card>
+        <p class="md-body-1">Message in a card content:</p>
+        <md-card>
+          <md-card-title>Card title</md-card-title>
+          <md-divider></md-divider>
+          <td-message label="Info" sublabel="Maybe you want to know this" color="accent" icon="info"></td-message>
+          <md-card-content>
+            content
+          </md-card-content>
+        </md-card>
+        <p class="md-body-1">Toggle visibility:</p>
+        <td-message #messageDemo color="primary" class="pad-sm" label="Hide me!" sublabel="You can toggle my visibility & add a class!">
+          <button td-message-actions md-icon-button (click)="messageDemo.close()"><md-icon>cancel</md-icon></button>
+        </td-message>
+      </md-card-content>
+    </md-tab>
+    <md-tab>
+      <ng-template md-tab-label>Code</ng-template>
+      <md-card-content>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <p class="md-body-1">Standalone message:</p>
+            <td-message label="Error!" sublabel="You did something wrong!" color="warn" icon="error"></td-message>
+            <p class="md-body-1">Message in a card with action</p>
+            <md-card>
+              <td-message label="Warning!" sublabel="Your probably shouldn't do that!" color="primary" icon="warning">
+                <button td-message-actions md-button>VIEW MORE</button>
+              </td-message>
+            </md-card>
+            <p class="md-body-1">Message in a card content:</p>
+            <md-card>
+              <md-card-title>Card title</md-card-title>
+              <md-divider></md-divider>
+              <td-message label="Info" sublabel="Maybe you want to know this" color="accent" icon="info"></td-message>
+              <md-card-content>
+                content
+              </md-card-content>
+            </md-card>
+            <p class="md-body-1">Toggle visibility:</p>
+            <td-message #messageDemo color="primary" class="pad-sm" label="Hide me!" sublabel="You can toggle my visibility & add a class!">
+              <button td-message-actions md-icon-button (click)="messageDemo.close()"><md-icon>cancel</md-icon></button>
+            </td-message>
+            <button md-button color="accent" (click)="messageDemo.toggle()">
+              Toggle Visibility
+            </button>
+          ]]>
+        </td-highlight>
+      </md-card-content>
+    </md-tab>
+  </md-tab-group>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <button md-button color="accent" class="text-upper" (click)="messageDemo.toggle()">
+      Toggle Visibility
+    </button>
+  </md-card-actions>
+</md-card>
+<md-card>
+  <md-card-title>Material Colored Messages</md-card-title>
+  <md-card-subtitle>Use the full Material Design color palette</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-tab-group md-stretch-tabs dynamicHeight>
+    <md-tab>
+      <ng-template md-tab-label>Demo</ng-template>
+      <md-card-content>
+        <p class="md-body-1">Using <code>color</code>:</p>
+        <td-message label="Purple!" sublabel="Simply add color=blah" color="purple" icon="error">
+          <button td-message-actions md-button>VIEW MORE</button>
+        </td-message>
+        <p class="md-body-1">Using <code>class</code>:</p>
+        <td-message label="Cyan!" sublabel="Reference the Covalent style guide" class="bgc-cyan-800 tc-cyan-100" icon="error">
+          <button td-message-actions md-button>VIEW MORE</button>
+        </td-message>
+      </md-card-content>
+    </md-tab>
+    <md-tab>
+      <ng-template md-tab-label>Code</ng-template>
+      <md-card-content>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <p class="md-body-1">Using <code>color</code>:</p>
+            <td-message label="Purple!" sublabel="Simply add color=blah" color="purple" icon="error">
+              <button td-message-actions md-button>VIEW MORE</button>
+            </td-message>
+            <p class="md-body-1">Using <code>class</code>:</p>
+            <td-message label="Cyan!" sublabel="Reference the Covalent style guide" class="bgc-cyan-800 tc-cyan-100" icon="error">
+              <button td-message-actions md-button>VIEW MORE</button>
+            </td-message>
+          ]]>
+        </td-highlight>
+      </md-card-content>
+    </md-tab>
+  </md-tab-group>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <a md-button color="accent" class="text-upper" [routerLink]="['/style-guide/colors']">
+      Color Guide
+    </a>
+  </md-card-actions>
+</md-card>
+<td-readme-loader resourceUrl="platform/core/message/README.md"></td-readme-loader>

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

@@ -0,0 +1,15 @@
+import { Component, HostBinding } from '@angular/core';
+import { slideInDownAnimation } from '../../../app.animations';
+
+@Component({
+  selector: 'message-demo',
+  styleUrls: ['./message.component.scss' ],
+  templateUrl: './message.component.html',
+  animations: [slideInDownAnimation],
+})
+export class MessageDemoComponent {
+
+  @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+  @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+}

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

@@ -68,6 +68,11 @@ export class ComponentsOverviewComponent {
       icon: 'notifications',
       route: 'notifications',
       title: 'Notifications',
+    }, {
+      color: 'light-blue-A400',
+      icon: 'info_outline',
+      route: 'message',
+      title: 'Messages',
     }, {
       color: 'lime-700',
       icon: 'search',

src/platform/core/index.ts

@@ -81,6 +81,13 @@ export * from './media/media.module';
 import { CovalentMenuModule } from './menu/menu.module';
 export * from './menu/menu.module';
 
+/**
+ * MESSAGE
+ */
+
+import { CovalentMessageModule } from './message/message.module';
+export * from './message/message.module';
+
 /**
  * NOTIFICATIONS
  */

src/platform/core/message/README.md

@@ -0,0 +1,49 @@
+# td-message
+
+`td-message` element generates an inline message with an icon, color, label and sublabel.
+
+`color` can be either with any theme color (`primary`, `accent` or `warn`)
+But you can also set a `color` from our lib can be applied in the component to get any material color not in the theme. (`blue`, `red`, etc)
+
+## API Summary
+
+Properties:
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `label?` | `string` | Sets the label of the message.
+| `sublabel?` | `string` | Sets the sublabel of the message.
+| `icon?` | `string` | The icon to be displayed before the title. Defaults to `info_outline` icon
+| `color?` | `'primary', 'accent' or 'warn'` | Sets the color of the message. Can also use any material color: `purple`, `light-blue`, etc.
+| `opened?` | `boolean` | Shows or hiddes the message depending on its value. Defaults to 'true'.
+| `open` | `function()` | Renders the message on screen.
+| `close` | `function()` | Removes the message content from screen.
+| `toggle` | `function()` | Toggles between open and close depending on state.
+
+## Setup
+
+Import the [CovalentMessageModule] in your NgModule:
+
+```typescript
+import { CovalentMessageModule } from '@covalent/core';
+@NgModule({
+  imports: [
+    CovalentMessageModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Example for HTML usage:
+
+```html
+<td-message #message label="Label" sublabel="Sublabel goes here" icon="warning" color="primary | blue | red" [opened]="true">
+  <button td-message-actions md-button>View More<button>
+  <button td-message-actions md-button (click)="message.close()">Close<button>
+  // .. body goes here
+</td-message>  
+```

src/platform/core/message/_message-theme.scss

@@ -0,0 +1,22 @@
+@import '../common/styles/theme-functions';
+
+@mixin td-message-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  .td-message {
+    &.mat-primary {
+      color: mat-color($primary);
+      background-color: mat-color($primary, 0.15);
+    }
+    &.mat-accent {
+      color: mat-color($accent);
+      background-color: mat-color($accent, 0.15);
+    }
+    &.mat-warn {
+      color: mat-color($warn);
+      background-color: mat-color($warn, 0.15);
+    }
+  }
+}

src/platform/core/message/message.component.html

@@ -0,0 +1,12 @@
+<div tdMessageContainer></div>
+<ng-template>
+  <div class="pad-left pad-right td-message-wrapper" layout="row" layout-align="center center">
+    <md-icon class="push-right">{{icon}}</md-icon>
+    <div>
+      <div *ngIf="label" class="td-message-label md-body-2">{{label}}</div>
+      <div *ngIf="sublabel" class="td-message-sublabel md-body-1">{{sublabel}}</div>
+    </div>
+    <span flex></span>
+    <ng-content select="[td-message-actions]"></ng-content>
+  </div>
+</ng-template>

src/platform/core/message/message.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  .td-message-wrapper {
+    min-height: 52px;
+  }
+}