From c5a051589772c0afadb66aa4783692fe4ad24d78 Mon Sep 17 00:00:00 2001 From: DevVersion Date: Sun, 13 Mar 2016 20:24:41 +0100 Subject: [PATCH] feat(): add toolbar component --- src/components/toolbar/README.md | 68 ++++++++++++++++++++++++++ src/components/toolbar/toolbar.html | 6 +++ src/components/toolbar/toolbar.scss | 57 +++++++++++++++++++++ src/components/toolbar/toolbar.spec.ts | 64 ++++++++++++++++++++++++ src/components/toolbar/toolbar.ts | 42 ++++++++++++++++ src/demo-app/demo-app.html | 1 + src/demo-app/demo-app.ts | 4 +- src/demo-app/toolbar/toolbar-demo.html | 68 ++++++++++++++++++++++++++ src/demo-app/toolbar/toolbar-demo.scss | 12 +++++ src/demo-app/toolbar/toolbar-demo.ts | 12 +++++ 10 files changed, 333 insertions(+), 1 deletion(-) create mode 100644 src/components/toolbar/README.md create mode 100644 src/components/toolbar/toolbar.html create mode 100644 src/components/toolbar/toolbar.scss create mode 100644 src/components/toolbar/toolbar.spec.ts create mode 100644 src/components/toolbar/toolbar.ts create mode 100644 src/demo-app/toolbar/toolbar-demo.html create mode 100644 src/demo-app/toolbar/toolbar-demo.scss create mode 100644 src/demo-app/toolbar/toolbar-demo.ts diff --git a/src/components/toolbar/README.md b/src/components/toolbar/README.md new file mode 100644 index 000000000000..a31ffa81693a --- /dev/null +++ b/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) + +## `` +### 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 + + My Application Title + +``` + +Toolbars can also have multiple rows.
+Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `` elements. + +```html + + First Row + + + Second Row + + + + Third Row + + +``` + +### Alignment +The alingment inside of a toolbar row can be easily done by using the flexbox layout.
+For example, the following markup aligns the items on the `right`. + +Custom HTML +```html + + Application Title + + + + + Right Aligned Text + +``` + +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) diff --git a/src/components/toolbar/toolbar.html b/src/components/toolbar/toolbar.html new file mode 100644 index 000000000000..9a0b3df0b388 --- /dev/null +++ b/src/components/toolbar/toolbar.html @@ -0,0 +1,6 @@ +
+ + + + +
\ No newline at end of file diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss new file mode 100644 index 000000000000..23f83d2650df --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/src/components/toolbar/toolbar.spec.ts b/src/components/toolbar/toolbar.spec.ts new file mode 100644 index 000000000000..a3f6dfb5b6fa --- /dev/null +++ b/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: ` + + Test Toolbar + + `, + directives: [MdToolbar] +}) +class TestApp { + toolbarColor: string; +} diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts new file mode 100644 index 000000000000..6c97ce740778 --- /dev/null +++ b/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; + } + +} diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html index b160e6247fa4..d44ada6fd5ee 100644 --- a/src/demo-app/demo-app.html +++ b/src/demo-app/demo-app.html @@ -7,6 +7,7 @@

Angular Material2 Demos

  • Progress Circle demo
  • Portal demo
  • Checkbox demo
    • +
  • Toolbar demo