feat(): add toolbar component

src/components/toolbar/README.md

@@ -0,0 +1,68 @@
+# MdToolbar
+`MdToolbar` is a vertical aligned bar, which can hold the application title or actions.
+
+### Screenshots
+![Preview](https://cloud.githubusercontent.com/assets/4987015/13727769/6d952c78-e900-11e5-890a-ccfd46996812.png)
+
+## `<md-toolbar>`
+### Bound Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `color` | `"primary" | "accent" | "warn"` | The color palette for the toolbar |
+
+### Notes
+The `md-toolbar` component will use by default the background palette.
+
+### Examples
+A basic toolbar would have the following markup.
+```html
+<md-toolbar [color]="myColor">
+  <span>My Application Title</span>
+</md-toolbar>
+```
+
+Toolbars can also have multiple rows.<br/>
+Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `<md-toolbar-row>` elements.
+
+```html
+<md-toolbar [color]="myColor">
+  <span>First Row</span>
+
+  <md-toolbar-row>
+    <span>Second Row</span>
+  </md-toolbar-row>
+
+  <md-toolbar-row>
+    <span>Third Row</span>
+  </md-toolbar-row>
+</md-toolbar>
+```
+
+### Alignment
+The alingment inside of a toolbar row can be easily done by using the flexbox layout.<br/>
+For example, the following markup aligns the items on the `right`.
+
+Custom HTML
+```html
+<md-toolbar color="primary">
+  <span>Application Title</span>
+
+  <!-- This fills the remaining space of the current row -->
+  <span class="example-fill-remaining-space"></span>
+
+  <span>Right Aligned Text</span>
+</md-toolbar>
+```
+
+Custom SCSS
+```scss
+.example-fill-remaining-space {
+  // This fills the remaining space, by using flexbox. 
+  // Every toolbar row uses a flexbox row layout.
+  flex: 1 1 auto;
+}
+```
+
+Output
+![image](https://cloud.githubusercontent.com/assets/4987015/13730760/0864894e-e959-11e5-9312-7f3cb990d80a.png)

src/components/toolbar/toolbar.html

@@ -0,0 +1,6 @@
+<div class="md-toolbar-layout">
+  <md-toolbar-row>
+    <ng-content></ng-content>
+  </md-toolbar-row>
+  <ng-content select="md-toolbar-row"></ng-content>
+</div>

src/components/toolbar/toolbar.scss

@@ -0,0 +1,57 @@
+@import "variables";
+@import "mixins";
+@import "default-theme"; //TODO: remove that soon.
+
+$md-toolbar-min-height: 64px !default;
+$md-toolbar-font-size: 20px !default;
+$md-toolbar-padding: 16px !default;
+
+@mixin toolbar-theme($palette) {
+  background: md-color($palette);
+  color: md-color($palette, default-contrast);
+}
+
+:host {
+  display: flex;
+  box-sizing: border-box;
+
+  width: 100%;
+  min-height: $md-toolbar-min-height;
+
+  // Font Styling
+  font-size: $md-toolbar-font-size;
+  font-weight: 400;
+  font-family: $md-font-family;
+
+  padding: 0 $md-toolbar-padding;
+
+  flex-direction: column;
+
+  background: md-color($md-background, app-bar);
+  color: md-color($md-foreground, text);
+
+  &.md-primary {
+    @include toolbar-theme($md-primary);
+  }
+
+  &.md-accent {
+    @include toolbar-theme($md-accent);
+  }
+
+  &.md-warn {
+    @include toolbar-theme($md-warn);
+  }
+
+  md-toolbar-row {
+    display: flex;
+    box-sizing: border-box;
+
+    width: 100%;
+    height: $md-toolbar-min-height;
+
+    // Flexbox Vertical Alignment
+    flex-direction: row;
+    align-items: center;
+  }
+
+}

src/components/toolbar/toolbar.spec.ts

@@ -0,0 +1,64 @@
+import {Component} from 'angular2/core';
+import {
+  inject,
+  TestComponentBuilder
+} from 'angular2/testing';
+
+import {
+  it,
+  iit,
+  describe,
+  ddescribe,
+  expect,
+  beforeEach,
+} from '../../core/facade/testing';
+import {By} from 'angular2/platform/browser';
+import {MdToolbar} from './toolbar';
+
+export function main() {
+  describe('MdToolbar', () => {
+    let builder: TestComponentBuilder;
+
+    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+      builder = tcb;
+    }));
+
+    it('should apply class based on color attribute', (done: () => void) => {
+      return builder.createAsync(TestApp).then((fixture) => {
+        let testComponent = fixture.debugElement.componentInstance;
+        let toolbarDebugElement = fixture.debugElement.query(By.css('md-toolbar'));
+
+        testComponent.toolbarColor = 'primary';
+        fixture.detectChanges();
+
+        expect(toolbarDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
+
+        testComponent.toolbarColor = 'accent';
+        fixture.detectChanges();
+
+        expect(toolbarDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
+
+        testComponent.toolbarColor = 'warn';
+        fixture.detectChanges();
+
+        expect(toolbarDebugElement.nativeElement.classList.contains('md-warn')).toBe(true);
+
+        done();
+      });
+    });
+
+  });
+}
+
+@Component({
+  selector: 'test-app',
+  template: `
+    <md-toolbar [color]="toolbarColor">
+      <span>Test Toolbar</span>
+    </md-toolbar>
+  `,
+  directives: [MdToolbar]
+})
+class TestApp {
+  toolbarColor: string;
+}

src/components/toolbar/toolbar.ts

@@ -0,0 +1,42 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input
+} from 'angular2/core';
+import {Renderer} from 'angular2/core';
+import {ElementRef} from 'angular2/core';
+
+@Component({
+  selector: 'md-toolbar',
+  templateUrl: './components/toolbar/toolbar.html',
+  styleUrls: ['./components/toolbar/toolbar.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MdToolbar {
+
+  private _color: string;
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer) { }
+
+  @Input()
+  get color(): string {
+    return this._color;
+  }
+
+  set color(value: string) {
+    this._updateColor(value);
+  }
+
+  _updateColor(newColor: string) {
+    if (this._color != null && this._color != '') {
+      this.renderer.setElementClass(this.elementRef.nativeElement, `md-${newColor}`, false);
+    }
+
+    if (newColor != null && newColor != '') {
+      this.renderer.setElementClass(this.elementRef.nativeElement, `md-${newColor}`, true);
+    }
+
+    this._color = newColor;
+  }
+
+}

src/demo-app/demo-app.html

@@ -7,6 +7,7 @@ <h1>Angular Material2 Demos</h1>
     <li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
     <li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
     <li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
+    <li><a [routerLink]="['ToolbarDemo']">Toolbar demo</a></li>
   </ul>
   <button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
     {{root.dir.toUpperCase()}}

src/demo-app/demo-app.ts

@@ -8,6 +8,7 @@ import {CheckboxDemo} from './checkbox/checkbox-demo';
 import {Dir} from '../core/rtl/dir';
 import {MdButton} from '../components/button/button';
 import {PortalDemo} from './portal/portal-demo';
+import {ToolbarDemo} from './toolbar/toolbar-demo';
 
 
 @Component({
@@ -31,6 +32,7 @@ export class Home {}
   new Route({path: '/sidenav', name: 'SidenavDemo', component: SidenavDemo}),
   new Route({path: '/progress-circle', name: 'ProgressCircleDemo', component: ProgressCircleDemo}),
   new Route({path: '/portal', name: 'PortalDemo', component: PortalDemo}),
-  new Route({path: '/checkbox', name: 'CheckboxDemo', component: CheckboxDemo})
+  new Route({path: '/checkbox', name: 'CheckboxDemo', component: CheckboxDemo}),
+  new Route({path: '/toolbar', name: 'ToolbarDemo', component: ToolbarDemo}),
 ])
 export class DemoApp { }

src/demo-app/toolbar/toolbar-demo.html

@@ -0,0 +1,68 @@
+<div class="demo-toolbar">
+
+  <p>
+    <md-toolbar>
+      <i class="material-icons demo-toolbar-icon">menu</i>
+      <span>Default Toolbar</span>
+
+      <span class="demo-fill-remaining"></span>
+
+      <i class="material-icons">code</i>
+    </md-toolbar>
+  </p>
+
+  <p>
+    <md-toolbar color="primary">
+      <i class="material-icons demo-toolbar-icon">menu</i>
+      <span>Primary Toolbar</span>
+
+      <span class="demo-fill-remaining"></span>
+
+      <i class="material-icons">code</i>
+    </md-toolbar>
+  </p>
+
+  <p>
+    <md-toolbar color="accent">
+      <i class="material-icons demo-toolbar-icon">menu</i>
+      <span>Accent Toolbar</span>
+
+      <span class="demo-fill-remaining"></span>
+
+      <i class="material-icons">code</i>
+    </md-toolbar>
+  </p>
+
+  <p>
+    <md-toolbar color="accent">
+      <span>Custom Toolbar</span>
+      <md-toolbar-row>
+        <span>Second Line</span>
+      </md-toolbar-row>
+    </md-toolbar>
+  </p>
+
+  <p>
+    <md-toolbar color="primary">
+      <span>Custom Toolbar</span>
+
+      <md-toolbar-row>
+        <span>Second Line</span>
+
+        <span class="demo-fill-remaining"></span>
+
+        <i class="material-icons demo-toolbar-icon">verified_user</i>
+      </md-toolbar-row>
+
+      <md-toolbar-row>
+        <span>Third Line</span>
+
+        <span class="demo-fill-remaining"></span>
+
+        <i class="material-icons demo-toolbar-icon">favorite</i>
+        <i class="material-icons demo-toolbar-icon">delete</i>
+      </md-toolbar-row>
+    </md-toolbar>
+  </p>
+
+</div>

src/demo-app/toolbar/toolbar-demo.scss

@@ -0,0 +1,12 @@
+.demo-toolbar {
+  padding: 6px;
+
+  .demo-toolbar-icon {
+    padding: 0 14px 0 14px;
+  }
+
+  .demo-fill-remaining {
+    flex: 1 1 auto;
+  }
+
+}

src/demo-app/toolbar/toolbar-demo.ts

@@ -0,0 +1,12 @@
+import {Component} from 'angular2/core';
+import {MdToolbar} from '../../components/toolbar/toolbar';
+
+@Component({
+  selector: 'toolbar-demo',
+  templateUrl: 'demo-app/toolbar/toolbar-demo.html',
+  styleUrls: ['demo-app/toolbar/toolbar-demo.css'],
+  directives: [MdToolbar]
+})
+export class ToolbarDemo {
+
+}