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

Commit f5478ed

Browse files
riavalonjelbourn
riavalon
authored and
jelbourn
committed
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

+2
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

+5-1
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

+7-4
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

+1-1
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

+7-1
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

+3-1
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

+3-3
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

+6-14
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;

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

+6-6
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

+1-1
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);

‎src/app/pages/component-viewer/_component-viewer-theme.scss

+1-1
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-theme($theme) {
44
$primary: map-get($theme, primary);

‎src/app/pages/guide-list/_guide-list-theme.scss

+1-1
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 guide-list-theme($theme) {
44
$primary: map-get($theme, primary);

‎src/app/pages/guide-viewer/guide-viewer.scss

+1-1
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
/* For desktop, the content should be aligned with the page title. */
44
$guide-content-margin-side: 70px;

‎src/app/pages/homepage/_homepage-theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
app-homepage {
99
.docs-header-background {
10-
background: url('assets/img/homepage/material_splash.svg') repeat-x center center, mat-color($primary);
10+
background: url('/assets/img/homepage/material_splash.svg') repeat-x center center, mat-color($primary);
1111
}
1212

1313
.docs-header-headline {

‎src/app/pages/homepage/homepage.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h2> Material Design components for Angular apps</h2>
1313
<div class="docs-homepage-promo">
1414
<div class="docs-homepage-row">
1515
<div class="docs-homepage-promo-img">
16-
<img src="../assets/img/homepage/sprintzerotoapp.svg" alt="Sprint from Zero to App" />
16+
<docs-svg-viewer svgHref="../assets/img/homepage/sprintzerotoapp.svg"></docs-svg-viewer>
1717
</div>
1818
<div class="docs-homepage-promo-desc">
1919
<h2>Sprint from Zero to App</h2>
@@ -23,7 +23,7 @@ <h2>Sprint from Zero to App</h2>
2323
</div>
2424
<div class="docs-homepage-row docs-homepage-reverse-row">
2525
<div class="docs-homepage-promo-img">
26-
<img src="../assets/img/homepage/fastandconsistent.svg" alt="Fast and Consistent" />
26+
<docs-svg-viewer svgHref="../assets/img/homepage/fastandconsistent.svg"></docs-svg-viewer>
2727
</div>
2828
<div class="docs-homepage-promo-desc">
2929
<h2>Fast and Consistent</h2>
@@ -33,7 +33,7 @@ <h2>Fast and Consistent</h2>
3333
</div>
3434
<div class="docs-homepage-row">
3535
<div class="docs-homepage-promo-img">
36-
<img src="../assets/img/homepage/versatile.svg" alt="Versatile" />
36+
<docs-svg-viewer svgHref="../assets/img/homepage/versatile.svg"></docs-svg-viewer>
3737
</div>
3838
<div class="docs-homepage-promo-desc">
3939
<h2>Versatile</h2>
@@ -43,7 +43,7 @@ <h2>Versatile</h2>
4343
</div>
4444
<div class="docs-homepage-row docs-homepage-reverse-row">
4545
<div class="docs-homepage-promo-img">
46-
<img src="../assets/img/homepage/optimized.svg" alt="Optimized for Angular" />
46+
<docs-svg-viewer svgHref="../assets/img/homepage/optimized.svg"></docs-svg-viewer>
4747
</div>
4848
<div class="docs-homepage-promo-desc">
4949
<h2>Optimized for Angular</h2>

‎src/app/pages/homepage/homepage.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ $margin-promotion-sections: 60px;
5656
margin: $margin-promotion-sections 0;
5757
}
5858

59-
.docs-homepage-row img {
59+
.docs-homepage-row .docs-svg-image{
6060
max-width: 90%;
6161
}
6262

‎src/app/shared/footer/footer.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<div class="docs-footer-list">
33
<div class="footer-logo">
44
<img class="docs-footer-angular-logo"
5-
src="../../../assets/img/homepage/angular-white-transparent.svg"
6-
alt="Angular">
5+
src="../../../assets/img/homepage/angular-white-transparent.svg"
6+
alt="angular">
77
</div>
88

99
<div class="docs-footer-links">

‎src/app/shared/navbar/navbar.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,18 @@
22
<nav class="docs-navbar">
33
<a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
44
<img class="docs-angular-logo"
5-
src="../../../assets/img/homepage/angular-white-transparent.svg"
6-
alt="Angular">
5+
src="../../../assets/img/homepage/angular-white-transparent.svg"
6+
alt="angular">
77
<span>Material</span>
88
</a>
99
<a md-button class="docs-button" routerLink="components">Components</a>
1010
<a md-button class="docs-button" routerLink="guides">Guides</a>
11+
<div class="flex-spacer"></div>
12+
<theme-chooser></theme-chooser>
1113
<a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
1214
<img class="docs-github-logo"
13-
src="../../../assets/img/homepage/github-circle-white-transparent.svg"
14-
alt="GitHub">
15+
src="../../../assets/img/homepage/github-circle-white-transparent.svg"
16+
alt="GitHub">
1517
GitHub
1618
</a>
1719
</nav>

‎src/app/shared/navbar/navbar.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.docs-navbar {
22
display: flex;
33
flex-wrap: wrap;
4+
align-items: center;
45
padding: 8px 16px;
56

67
> .mat-button {
@@ -10,6 +11,10 @@
1011
}
1112
}
1213

14+
.flex-spacer {
15+
flex-grow: 1;
16+
}
17+
1318
.docs-angular-logo {
1419
height: 26px;
1520
margin: 0 4px 3px 0;

‎src/app/shared/shared-module.ts

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import {NgModule} from '@angular/core';
22
import {HttpModule} from '@angular/http';
3-
import {DocViewer} from './doc-viewer/doc-viewer';
4-
import {ExampleViewer} from './example-viewer/example-viewer';
5-
import {DocumentationItems} from './documentation-items/documentation-items';
6-
import {NavBar} from './navbar/navbar';
73
import {MaterialModule} from '@angular/material';
84
import {BrowserModule} from '@angular/platform-browser';
95
import {RouterModule} from '@angular/router';
6+
7+
import {ExampleViewer} from './example-viewer/example-viewer';
8+
import {DocViewer} from './doc-viewer/doc-viewer';
9+
import {DocumentationItems} from './documentation-items/documentation-items';
1010
import {PlunkerButton} from './plunker';
1111
import {GuideItems} from './guide-items/guide-items';
12+
import {ThemeStorage} from './theme-chooser/theme-storage/theme-storage';
13+
import {ThemeChooser} from './theme-chooser/theme-chooser';
14+
import {NavBar} from './navbar/navbar';
15+
import {SvgBuilder} from './svg-viewer/svg-builder';
16+
import {SvgViewer} from './svg-viewer/svg-viewer';
1217

1318

1419
@NgModule({
@@ -18,9 +23,9 @@ import {GuideItems} from './guide-items/guide-items';
1823
BrowserModule,
1924
MaterialModule,
2025
],
21-
declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
22-
exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
23-
providers: [DocumentationItems, GuideItems],
26+
declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
27+
exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
28+
providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder],
2429
entryComponents: [
2530
ExampleViewer,
2631
],

‎src/app/shared/style-manager/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './style-manager';

0 commit comments

Comments
 (0)