Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit f5478ed

Browse files
riavalonjelbourn
authored andcommitted
feat(navbar): Add themepicker component with lazy loaded themes (#136)
1 parent 14c0587 commit f5478ed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+804
-190
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
/src/assets/documents
77
/src/assets/examples
88
/src/assets/plunker/examples
9+
/src/assets/*.css
10+
/src/assets/*.html
911

1012
# dependencies
1113
/node_modules

angular-cli.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@
1919
"mobile": false,
2020
"styles": [
2121
"main.scss",
22-
"highlightjs/solarized-light.css"
22+
"highlightjs/solarized-light.css",
23+
{"input": "assets/pink-bluegrey.css", "lazy": true},
24+
{"input": "assets/deeppurple-amber.css", "lazy": true},
25+
{"input": "assets/indigo-pink.css", "lazy": true},
26+
{"input": "assets/purple-green.css", "lazy": true}
2327
],
2428
"scripts": [],
2529
"environmentSource": "environments/environment.ts",

package.json

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44
"license": "MIT",
55
"angular-cli": {},
66
"scripts": {
7-
"start": "ng serve",
7+
"start": "npm run build-themes && ng serve",
88
"lint": "tslint \"src/**/*.ts\"",
99
"test": "ng test",
1010
"pree2e": "webdriver-manager update",
1111
"e2e": "protractor",
12-
"prod-build": "ng build --aot --prod && npm run prerender && cp -r tmp/prerendered/* dist/",
12+
"build-themes": "./tools/build-themes.sh",
13+
"prod-build": "npm run build-themes && ng build --aot --prod && npm run prerender && cp -r tmp/prerendered/* dist/",
1314
"postinstall": "webdriver-manager update && tools/fetch-assets.sh",
14-
"publish-prod": "ng build --aot --prod && firebase use material-angular-io && firebase deploy",
15-
"publish-dev": "ng build --aot --prod && firebase use material2-docs-dev && firebase deploy"
15+
"publish-prod": "npm run build-themes && ng build --aot --prod && firebase use material-angular-io && firebase deploy",
16+
"publish-dev": "npm run build-themes && ng build --aot --prod && firebase use material2-docs-dev && firebase deploy"
1617
},
1718
"private": true,
1819
"dependencies": {
@@ -26,6 +27,7 @@
2627
"@angular/platform-browser": "^4.0.0",
2728
"@angular/platform-browser-dynamic": "^4.0.0",
2829
"@angular/router": "^4.0.0",
30+
"color": "^1.0.3",
2931
"core-js": "^2.4.1",
3032
"rxjs": "^5.1.0",
3133
"zone.js": "^0.8.4"
@@ -44,6 +46,7 @@
4446
"karma-jasmine": "^1.1.0",
4547
"karma-remap-istanbul": "^0.2.1",
4648
"karma-sauce-launcher": "^1.1.0",
49+
"node-sass": "^4.5.3",
4750
"protractor": "^5.1.1",
4851
"ts-node": "^2.0.0",
4952
"tslint": "^4.4.2",

src/_app-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '~@angular/material/theming';
1+
@import '../node_modules/@angular/material/theming';
22
@import './app/pages/homepage/homepage-theme';
33
@import './app/pages/component-sidenav/component-sidenav-theme';
44
@import './app/pages/component-viewer/component-viewer-theme';

src/app/app-module.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
2020
import {Footer} from './shared/footer/footer';
2121
import {ComponentPageTitle} from './pages/page-title/page-title';
2222
import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
23+
import {StyleManager} from './shared/style-manager/style-manager';
2324

2425

2526
@NgModule({
@@ -33,7 +34,11 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
3334
GuideList,
3435
GuideViewer,
3536
Homepage,
36-
Footer
37+
Footer,
38+
],
39+
exports: [
40+
MaterialDocsApp,
41+
Homepage,
3742
],
3843
imports: [
3944
BrowserModule,
@@ -49,6 +54,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
4954
providers: [
5055
Location,
5156
ComponentPageTitle,
57+
StyleManager,
5258
{provide: LocationStrategy, useClass: PathLocationStrategy},
5359
],
5460
bootstrap: [MaterialDocsApp],

src/app/material-docs-app.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ export class MaterialDocsApp {
1515
isDarkTheme = false;
1616
showShadow = false;
1717

18-
constructor(router: Router) {
18+
constructor(
19+
router: Router,
20+
) {
1921
router.events.subscribe((data: NavigationStart) => {
2022
this.showShadow = data.url.startsWith('/components');
2123
});

src/app/pages/component-category-list/component-category-list.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
[routerLink]="['/components/category/', category.id]">
66
<md-card-title>{{category.name}}</md-card-title>
77
<p class="docs-component-category-list-card-summary">{{category.summary}}</p>
8-
<div class="docs-component-category-list-card-image"
9-
[style.backgroundImage]="'url(\'../../../assets/img/component-categories/' + category.id +'.svg\')'">
10-
</div>
8+
<docs-svg-viewer class="docs-component-category-list-card-image"
9+
[svgHref]="'../../../assets/img/component-categories/' + category.id + '.svg'">
10+
</docs-svg-viewer>
1111
</md-card>
1212
</div>

src/app/pages/component-category-list/component-category-list.scss

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,35 @@
11
@import '../../../styles/constants';
22

33
.docs-component-category-list {
4+
display: flex;
5+
flex-wrap: wrap;
46
padding: 20px;
57

68
@media (max-width: $small-breakpoint-width) {
7-
display: flex;
8-
flex-wrap: wrap;
99
justify-content: center;
1010
}
1111
}
1212

1313
.docs-component-category-list-card {
14+
cursor: pointer;
1415
display: inline-block;
15-
width: 260px;
1616
margin: 20px;
1717
vertical-align: top;
18-
cursor: pointer;
18+
width: 260px;
1919

2020
.mat-card-title {
2121
font-size: 20px;
2222
}
2323
}
2424

25-
.docs-component-category-list-card-image {
26-
width: 100%;
27-
height: 160px;
28-
background-size: contain;
29-
background-repeat: no-repeat;
30-
background-position: center;
31-
}
32-
3325
.docs-component-category-list-card-summary {
3426
height: 2.4em;
3527
}
3628

3729
.docs-component-category-list-header {
38-
padding-left: 20px;
39-
display: flex;
4030
align-items: center;
31+
display: flex;
32+
padding-left: 20px;
4133

4234
h1 {
4335
font-size: 30px;
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<div class="docs-component-list-category">
22
<a *ngFor="let component of category.items"
3-
class="docs-component-list-item"
4-
[routerLink]="['/components/component/', component.id]">
5-
<div class="docs-component-list-item-icon"
6-
[attr.aria-label]="component.name"
7-
[style.backgroundImage]="'url(\'../../../assets/img/components/' + component.id + '.svg\')'">
8-
</div>
3+
class="docs-component-list-item"
4+
[routerLink]="['/components/component/', component.id]">
5+
<docs-svg-viewer class="docs-component-list-item-icon"
6+
[attr.aria-label]="component.name"
7+
[svgHref]="'../../../assets/img/components/' + component.id + '.svg'">
8+
</docs-svg-viewer>
99
{{component.name}}
1010
</a>
1111
</div>

src/app/pages/component-sidenav/_component-sidenav-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '~@angular/material/theming';
1+
@import '../../../../node_modules/@angular/material/theming';
22

33
@mixin component-viewer-sidenav-theme($theme) {
44
$primary: map-get($theme, primary);

0 commit comments

Comments
 (0)