Skip to content

Commit f167934

Browse files
karakara
committed
chore(demos): add router to separate demo pages
Closes #46
1 parent bd8cfef commit f167934

15 files changed

+193
-149
lines changed

‎ember-cli-build.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ var autoprefixerOptions = require('./build/autoprefixer-options');
1414

1515
module.exports = function(defaults) {
1616
var demoAppCssTree = new BroccoliSass(['src/demo-app'], './demo-app.scss', 'demo-app/demo-app.css');
17-
var componentCssTree = getComponentsCssTree();
17+
var demoCssTree = getCssTree('demo-app');
18+
var componentCssTree = getCssTree('components');
1819
var angularAppTree = new Angular2App(defaults);
1920
var dartAppTree = new BroccoliTs2Dart('src/', {
2021
generateLibraryName: true,
@@ -26,32 +27,31 @@ module.exports = function(defaults) {
2627
angularAppTree.toTree(),
2728
componentCssTree,
2829
demoAppCssTree,
30+
demoCssTree,
2931
dartAppTree,
3032
]);
3133
};
3234

33-
3435
/** Gets the tree for all of the components' CSS. */
35-
function getComponentsCssTree() {
36-
// Assume that the list of components is all directories in `src/components/`
37-
var componentsSrc = 'src/components/';
38-
var components = fs.readdirSync(componentsSrc)
39-
.filter(file => fs.statSync(path.join(componentsSrc, file)).isDirectory());
36+
function getCssTree(folder) {
37+
var srcPath = `src/${folder}/`;
38+
var components = fs.readdirSync(srcPath)
39+
.filter(file => fs.statSync(path.join(srcPath, file)).isDirectory());
4040

4141
var componentCssTrees = components.reduce((trees, component) => {
4242
// We want each individual scss file to be compiled into a corresponding css file
4343
// so that they can be individually included in styleUrls.
44-
var scssFiles = fs.readdirSync(path.join(componentsSrc, component))
44+
var scssFiles = fs.readdirSync(path.join(srcPath, component))
4545
.filter(file => path.extname(file) === '.scss')
4646
.map(file => path.basename(file, '.scss'));
4747

4848
return scssFiles.map(fileName => {
4949
return BroccoliSass(
50-
[`src/components/${component}`, 'src/core/style'], // Directories w/ scss sources
51-
`./${fileName}.scss`, // Root scss input file
52-
`components/${component}/${fileName}.css`); // Css output file
50+
[`${srcPath}/${component}`, 'src/core/style'], // Directories w/ scss sources
51+
`./${fileName}.scss`, // Root scss input file
52+
`${folder}/${component}/${fileName}.css`); // Css output file
5353
}).concat(trees);
5454
}, []);
55-
5655
return broccoliAutoprefixer(mergeTrees(componentCssTrees), autoprefixerOptions);
5756
}
57+

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<button md-button>HELLO</button>
2+
<button md-raised-button class="md-primary">HELLO</button>
3+
<button md-fab class="md-accent">HI</button>

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

Whitespace-only changes.

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

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

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<div class="card-container">
2+
<md-card>
3+
<md-card-title-group>
4+
<md-card-title>Card with title</md-card-title>
5+
<md-card-subtitle>Subtitle</md-card-subtitle>
6+
<img md-card-md-image>
7+
</md-card-title-group>
8+
</md-card>
9+
10+
<md-card>
11+
<md-card-subtitle>Subtitle</md-card-subtitle>
12+
<md-card-title>Card with title</md-card-title>
13+
<md-card-content>
14+
<p>This is supporting text.</p>
15+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
16+
</md-card-content>
17+
<md-card-actions>
18+
<button md-button>LIKE</button>
19+
<button md-button>SHARE</button>
20+
</md-card-actions>
21+
</md-card>
22+
23+
<md-card>
24+
<img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
25+
<md-card-title>Content Title</md-card-title>
26+
<md-card-content>
27+
<p>Here is some content</p>
28+
</md-card-content>
29+
</md-card>
30+
31+
<md-card>
32+
<md-card-header>
33+
<img md-card-avatar>
34+
<md-card-title>Header title</md-card-title>
35+
<md-card-subtitle>Header subtitle</md-card-subtitle>
36+
</md-card-header>
37+
<img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
38+
<md-card-content>
39+
<p>Here is some content</p>
40+
</md-card-content>
41+
</md-card>
42+
43+
<md-card class="blue md-card-flat">
44+
<md-card-title>Easily customizable</md-card-title>
45+
<md-card-actions>
46+
<button md-button>First</button>
47+
<button md-button>Second</button>
48+
</md-card-actions>
49+
</md-card>
50+
</div>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
md-card {
2+
margin: 0 16px 16px 0;
3+
width: 350px;
4+
}
5+
6+
.card-container {
7+
display: flex;
8+
flex-flow: column nowrap;
9+
}
10+
11+
.blue {
12+
background-color: #B0BECC;
13+
}
14+
15+
.blue md-card-actions {
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
20+
img {
21+
background-color: gray;
22+
}

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

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

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

Lines changed: 9 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,13 @@
1+
2+
<h1 class="title">Angular Material2 Demos</h1>
3+
<ul>
4+
<li><a [routerLink]="['ButtonDemo']">Button demo</a></li>
5+
<li><a [routerLink]="['CardDemo']">Card demo</a></li>
6+
<li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
7+
</ul>
18
<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
29
{{root.dir.toUpperCase()}}
310
</button>
4-
511
<div #root="$implicit" dir="ltr">
6-
<p>
7-
material2 Works!
8-
<button md-button>HELLO</button>
9-
<button md-raised-button class="md-primary">HELLO</button>
10-
<button md-fab class="md-accent">HI</button>
11-
</p>
12-
13-
<div class="card-container">
14-
15-
<md-card>
16-
<md-card-title-group>
17-
<md-card-title>Card with title</md-card-title>
18-
<md-card-subtitle>Subtitle</md-card-subtitle>
19-
<img md-card-md-image>
20-
</md-card-title-group>
21-
</md-card>
22-
23-
<md-card>
24-
<md-card-subtitle>Subtitle</md-card-subtitle>
25-
<md-card-title>Card with title</md-card-title>
26-
<md-card-content>
27-
<p>This is supporting text.</p>
28-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
29-
</md-card-content>
30-
<md-card-actions>
31-
<button md-button>LIKE</button>
32-
<button md-button>SHARE</button>
33-
</md-card-actions>
34-
</md-card>
35-
36-
<md-card>
37-
<img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
38-
<md-card-title>Content Title</md-card-title>
39-
<md-card-content>
40-
<p>Here is some content</p>
41-
</md-card-content>
42-
</md-card>
43-
44-
<md-card>
45-
<md-card-header>
46-
<img md-card-avatar>
47-
<md-card-title>Header title</md-card-title>
48-
<md-card-subtitle>Header subtitle</md-card-subtitle>
49-
</md-card-header>
50-
<img md-card-image src="https://material.angularjs.org/latest/img/washedout.png">
51-
<md-card-content>
52-
<p>Here is some content</p>
53-
</md-card-content>
54-
</md-card>
55-
56-
<md-card class="blue md-card-flat">
57-
<md-card-title>Easily customizable</md-card-title>
58-
<md-card-actions>
59-
<button md-button>First</button>
60-
<button md-button>Second</button>
61-
</md-card-actions>
62-
</md-card>
63-
</div>
64-
65-
<md-sidenav-layout>
66-
<md-sidenav #start (open)="myinput.focus()" mode="side">
67-
Start Side Drawer
68-
<br>
69-
<button md-button (click)="start.close()">Close</button>
70-
<br>
71-
<button md-button (click)="end.open()">Open End Side</button>
72-
<br>
73-
<button md-button
74-
(click)="start.mode = (start.mode == 'push' ? 'over' : (start.mode == 'over' ? 'side' : 'push'))">Toggle Mode</button>
75-
<div>Mode: {{start.mode}}</div>
76-
<br>
77-
<input #myinput>
78-
</md-sidenav>
79-
80-
<md-sidenav #end align="end">
81-
End Side Drawer
82-
<br>
83-
<button md-button (click)="end.close()">Close</button>
84-
</md-sidenav>
85-
86-
<div class="content">
87-
<h1>My Content</h1>
88-
89-
<div>
90-
<header>Sidenav</header>
91-
<button md-button (click)="start.toggle()">Toggle Start Side Drawer</button>
92-
<button md-button (click)="end.toggle()">Toggle End Side Drawer</button>
93-
</div>
94-
95-
<button md-button>HELLO</button>
96-
<button md-raised-button class="md-primary">HELLO</button>
97-
<button md-fab class="md-accent">HI</button>
98-
</div>
99-
</md-sidenav-layout>
100-
101-
<h2>Content after Sidenav</h2>
102-
</div>
103-
12+
<router-outlet></router-outlet>
13+
</div>

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

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
1-
md-card {
2-
margin: 0 16px 16px 0;
3-
width: 350px;
4-
}
5-
6-
.card-container {
7-
display: flex;
8-
flex-flow: column nowrap;
9-
}
10-
11-
.blue {
12-
background-color: #B0BECC;
13-
}
14-
15-
.blue md-card-actions {
16-
display: flex;
17-
flex-direction: column;
18-
}
19-
20-
img {
21-
background-color: gray;
22-
}
23-
24-
md-sidenav-layout {
25-
border: 3px solid black;
26-
27-
md-sidenav {
28-
padding: 10px;
29-
}
30-
}
311

322
div.content {
333
padding: 10px;
344
}
35-

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
11
import {Component} from 'angular2/core';
2-
import {MdButton} from '../components/button/button';
3-
import {MD_CARD_DIRECTIVES} from '../components/card/card';
4-
import {MD_SIDENAV_DIRECTIVES} from '../components/sidenav/sidenav';
2+
import {CardDemo} from './card/card-demo';
3+
import {ButtonDemo} from './button/button-demo';
4+
import {SidenavDemo} from './sidenav/sidenav-demo';
5+
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
56
import {Dir} from '../directives/dir/dir';
7+
import {MdButton} from '../components/button/button';
68

9+
@Component({
10+
selector: 'home',
11+
template: ''
12+
})
13+
export class Home {}
714

815
@Component({
916
selector: 'demo-app',
1017
providers: [],
1118
templateUrl: 'demo-app/demo-app.html',
1219
styleUrls: ['demo-app/demo-app.css'],
13-
directives: [MdButton, MD_CARD_DIRECTIVES, Dir, MdButton, MD_SIDENAV_DIRECTIVES],
20+
directives: [ROUTER_DIRECTIVES, Dir, MdButton],
1421
pipes: []
1522
})
23+
@RouteConfig([
24+
{path: '/', name: 'Home', component: Home, useAsDefault: true},
25+
{path: '/button', name: 'ButtonDemo', component: ButtonDemo},
26+
{path: '/card', name: 'CardDemo', component: CardDemo},
27+
{path: '/sidenav', name: 'SidenavDemo', component: SidenavDemo}
28+
])
1629
export class DemoApp { }

0 commit comments

Comments
 (0)