Skip to content

Commit c5a0515

Browse files
devversiondevversion
committed
feat(): add toolbar component
1 parent 1c24278 commit c5a0515

File tree

10 files changed

+333
-1
lines changed

10 files changed

+333
-1
lines changed

‎src/components/toolbar/README.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# MdToolbar
2+
`MdToolbar` is a vertical aligned bar, which can hold the application title or actions.
3+
4+
### Screenshots
5+
![Preview](https://cloud.githubusercontent.com/assets/4987015/13727769/6d952c78-e900-11e5-890a-ccfd46996812.png)
6+
7+
## `<md-toolbar>`
8+
### Bound Properties
9+
10+
| Name | Type | Description |
11+
| --- | --- | --- |
12+
| `color` | `"primary" | "accent" | "warn"` | The color palette for the toolbar |
13+
14+
### Notes
15+
The `md-toolbar` component will use by default the background palette.
16+
17+
### Examples
18+
A basic toolbar would have the following markup.
19+
```html
20+
<md-toolbar [color]="myColor">
21+
<span>My Application Title</span>
22+
</md-toolbar>
23+
```
24+
25+
Toolbars can also have multiple rows.<br/>
26+
Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `<md-toolbar-row>` elements.
27+
28+
```html
29+
<md-toolbar [color]="myColor">
30+
<span>First Row</span>
31+
32+
<md-toolbar-row>
33+
<span>Second Row</span>
34+
</md-toolbar-row>
35+
36+
<md-toolbar-row>
37+
<span>Third Row</span>
38+
</md-toolbar-row>
39+
</md-toolbar>
40+
```
41+
42+
### Alignment
43+
The alingment inside of a toolbar row can be easily done by using the flexbox layout.<br/>
44+
For example, the following markup aligns the items on the `right`.
45+
46+
Custom HTML
47+
```html
48+
<md-toolbar color="primary">
49+
<span>Application Title</span>
50+
51+
<!-- This fills the remaining space of the current row -->
52+
<span class="example-fill-remaining-space"></span>
53+
54+
<span>Right Aligned Text</span>
55+
</md-toolbar>
56+
```
57+
58+
Custom SCSS
59+
```scss
60+
.example-fill-remaining-space {
61+
// This fills the remaining space, by using flexbox.
62+
// Every toolbar row uses a flexbox row layout.
63+
flex: 1 1 auto;
64+
}
65+
```
66+
67+
Output
68+
![image](https://cloud.githubusercontent.com/assets/4987015/13730760/0864894e-e959-11e5-9312-7f3cb990d80a.png)

‎src/components/toolbar/toolbar.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="md-toolbar-layout">
2+
<md-toolbar-row>
3+
<ng-content></ng-content>
4+
</md-toolbar-row>
5+
<ng-content select="md-toolbar-row"></ng-content>
6+
</div>

‎src/components/toolbar/toolbar.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@import "variables";
2+
@import "mixins";
3+
@import "default-theme"; //TODO: remove that soon.
4+
5+
$md-toolbar-min-height: 64px !default;
6+
$md-toolbar-font-size: 20px !default;
7+
$md-toolbar-padding: 16px !default;
8+
9+
@mixin toolbar-theme($palette) {
10+
background: md-color($palette);
11+
color: md-color($palette, default-contrast);
12+
}
13+
14+
:host {
15+
display: flex;
16+
box-sizing: border-box;
17+
18+
width: 100%;
19+
min-height: $md-toolbar-min-height;
20+
21+
// Font Styling
22+
font-size: $md-toolbar-font-size;
23+
font-weight: 400;
24+
font-family: $md-font-family;
25+
26+
padding: 0 $md-toolbar-padding;
27+
28+
flex-direction: column;
29+
30+
background: md-color($md-background, app-bar);
31+
color: md-color($md-foreground, text);
32+
33+
&.md-primary {
34+
@include toolbar-theme($md-primary);
35+
}
36+
37+
&.md-accent {
38+
@include toolbar-theme($md-accent);
39+
}
40+
41+
&.md-warn {
42+
@include toolbar-theme($md-warn);
43+
}
44+
45+
md-toolbar-row {
46+
display: flex;
47+
box-sizing: border-box;
48+
49+
width: 100%;
50+
height: $md-toolbar-min-height;
51+
52+
// Flexbox Vertical Alignment
53+
flex-direction: row;
54+
align-items: center;
55+
}
56+
57+
}

‎src/components/toolbar/toolbar.spec.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import {Component} from 'angular2/core';
2+
import {
3+
inject,
4+
TestComponentBuilder
5+
} from 'angular2/testing';
6+
7+
import {
8+
it,
9+
iit,
10+
describe,
11+
ddescribe,
12+
expect,
13+
beforeEach,
14+
} from '../../core/facade/testing';
15+
import {By} from 'angular2/platform/browser';
16+
import {MdToolbar} from './toolbar';
17+
18+
export function main() {
19+
describe('MdToolbar', () => {
20+
let builder: TestComponentBuilder;
21+
22+
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
23+
builder = tcb;
24+
}));
25+
26+
it('should apply class based on color attribute', (done: () => void) => {
27+
return builder.createAsync(TestApp).then((fixture) => {
28+
let testComponent = fixture.debugElement.componentInstance;
29+
let toolbarDebugElement = fixture.debugElement.query(By.css('md-toolbar'));
30+
31+
testComponent.toolbarColor = 'primary';
32+
fixture.detectChanges();
33+
34+
expect(toolbarDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
35+
36+
testComponent.toolbarColor = 'accent';
37+
fixture.detectChanges();
38+
39+
expect(toolbarDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
40+
41+
testComponent.toolbarColor = 'warn';
42+
fixture.detectChanges();
43+
44+
expect(toolbarDebugElement.nativeElement.classList.contains('md-warn')).toBe(true);
45+
46+
done();
47+
});
48+
});
49+
50+
});
51+
}
52+
53+
@Component({
54+
selector: 'test-app',
55+
template: `
56+
<md-toolbar [color]="toolbarColor">
57+
<span>Test Toolbar</span>
58+
</md-toolbar>
59+
`,
60+
directives: [MdToolbar]
61+
})
62+
class TestApp {
63+
toolbarColor: string;
64+
}

‎src/components/toolbar/toolbar.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
Component,
3+
ChangeDetectionStrategy,
4+
Input
5+
} from 'angular2/core';
6+
import {Renderer} from 'angular2/core';
7+
import {ElementRef} from 'angular2/core';
8+
9+
@Component({
10+
selector: 'md-toolbar',
11+
templateUrl: './components/toolbar/toolbar.html',
12+
styleUrls: ['./components/toolbar/toolbar.css'],
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
})
15+
export class MdToolbar {
16+
17+
private _color: string;
18+
19+
constructor(private elementRef: ElementRef, private renderer: Renderer) { }
20+
21+
@Input()
22+
get color(): string {
23+
return this._color;
24+
}
25+
26+
set color(value: string) {
27+
this._updateColor(value);
28+
}
29+
30+
_updateColor(newColor: string) {
31+
if (this._color != null && this._color != '') {
32+
this.renderer.setElementClass(this.elementRef.nativeElement, `md-${newColor}`, false);
33+
}
34+
35+
if (newColor != null && newColor != '') {
36+
this.renderer.setElementClass(this.elementRef.nativeElement, `md-${newColor}`, true);
37+
}
38+
39+
this._color = newColor;
40+
}
41+
42+
}

‎src/demo-app/demo-app.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ <h1>Angular Material2 Demos</h1>
77
<li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
88
<li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
99
<li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
10+
<li><a [routerLink]="['ToolbarDemo']">Toolbar demo</a></li>
1011
</ul>
1112
<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
1213
{{root.dir.toUpperCase()}}

‎src/demo-app/demo-app.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {CheckboxDemo} from './checkbox/checkbox-demo';
88
import {Dir} from '../core/rtl/dir';
99
import {MdButton} from '../components/button/button';
1010
import {PortalDemo} from './portal/portal-demo';
11+
import {ToolbarDemo} from './toolbar/toolbar-demo';
1112

1213

1314
@Component({
@@ -31,6 +32,7 @@ export class Home {}
3132
new Route({path: '/sidenav', name: 'SidenavDemo', component: SidenavDemo}),
3233
new Route({path: '/progress-circle', name: 'ProgressCircleDemo', component: ProgressCircleDemo}),
3334
new Route({path: '/portal', name: 'PortalDemo', component: PortalDemo}),
34-
new Route({path: '/checkbox', name: 'CheckboxDemo', component: CheckboxDemo})
35+
new Route({path: '/checkbox', name: 'CheckboxDemo', component: CheckboxDemo}),
36+
new Route({path: '/toolbar', name: 'ToolbarDemo', component: ToolbarDemo}),
3537
])
3638
export class DemoApp { }

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<div class="demo-toolbar">
2+
3+
<p>
4+
<md-toolbar>
5+
<i class="material-icons demo-toolbar-icon">menu</i>
6+
<span>Default Toolbar</span>
7+
8+
<span class="demo-fill-remaining"></span>
9+
10+
<i class="material-icons">code</i>
11+
</md-toolbar>
12+
</p>
13+
14+
<p>
15+
<md-toolbar color="primary">
16+
<i class="material-icons demo-toolbar-icon">menu</i>
17+
<span>Primary Toolbar</span>
18+
19+
<span class="demo-fill-remaining"></span>
20+
21+
<i class="material-icons">code</i>
22+
</md-toolbar>
23+
</p>
24+
25+
<p>
26+
<md-toolbar color="accent">
27+
<i class="material-icons demo-toolbar-icon">menu</i>
28+
<span>Accent Toolbar</span>
29+
30+
<span class="demo-fill-remaining"></span>
31+
32+
<i class="material-icons">code</i>
33+
</md-toolbar>
34+
</p>
35+
36+
<p>
37+
<md-toolbar color="accent">
38+
<span>Custom Toolbar</span>
39+
<md-toolbar-row>
40+
<span>Second Line</span>
41+
</md-toolbar-row>
42+
</md-toolbar>
43+
</p>
44+
45+
<p>
46+
<md-toolbar color="primary">
47+
<span>Custom Toolbar</span>
48+
49+
<md-toolbar-row>
50+
<span>Second Line</span>
51+
52+
<span class="demo-fill-remaining"></span>
53+
54+
<i class="material-icons demo-toolbar-icon">verified_user</i>
55+
</md-toolbar-row>
56+
57+
<md-toolbar-row>
58+
<span>Third Line</span>
59+
60+
<span class="demo-fill-remaining"></span>
61+
62+
<i class="material-icons demo-toolbar-icon">favorite</i>
63+
<i class="material-icons demo-toolbar-icon">delete</i>
64+
</md-toolbar-row>
65+
</md-toolbar>
66+
</p>
67+
68+
</div>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.demo-toolbar {
2+
padding: 6px;
3+
4+
.demo-toolbar-icon {
5+
padding: 0 14px 0 14px;
6+
}
7+
8+
.demo-fill-remaining {
9+
flex: 1 1 auto;
10+
}
11+
12+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {Component} from 'angular2/core';
2+
import {MdToolbar} from '../../components/toolbar/toolbar';
3+
4+
@Component({
5+
selector: 'toolbar-demo',
6+
templateUrl: 'demo-app/toolbar/toolbar-demo.html',
7+
styleUrls: ['demo-app/toolbar/toolbar-demo.css'],
8+
directives: [MdToolbar]
9+
})
10+
export class ToolbarDemo {
11+
12+
}

0 commit comments

Comments
 (0)