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

Commit d586c1e

Browse files
mmalerbariavalon
mmalerba
authored and
riavalon
committed
feat(navbar): Add themepicker component with lazy loaded themes
1 parent 1bccf71 commit d586c1e

Some content is hidden

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

60 files changed

+3555
-188
lines changed

‎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

+6-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": {
@@ -44,6 +45,7 @@
4445
"karma-jasmine": "^1.1.0",
4546
"karma-remap-istanbul": "^0.2.1",
4647
"karma-sauce-launcher": "^1.1.0",
48+
"ng-inline-svg": "^3.0.0",
4749
"protractor": "^5.1.1",
4850
"ts-node": "^2.0.0",
4951
"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

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
12
import {BrowserModule} from '@angular/platform-browser';
23
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
34
import {NgModule} from '@angular/core';
45
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
56
import {FormsModule} from '@angular/forms';
67
import {HttpModule} from '@angular/http';
78
import {MaterialModule} from '@angular/material';
9+
import {InlineSVGModule} from 'ng-inline-svg';
810
import {MaterialDocsApp} from './material-docs-app';
911
import {Homepage} from './pages/homepage/homepage';
1012
import {routing} from './routes';
@@ -19,6 +21,7 @@ import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
1921
import {Footer} from './shared/footer/footer';
2022
import {ComponentPageTitle} from './pages/page-title/page-title';
2123
import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
24+
import {StyleManager} from './shared/style-manager/style-manager';
2225

2326

2427
@NgModule({
@@ -32,7 +35,14 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
3235
GuideList,
3336
GuideViewer,
3437
Homepage,
35-
Footer
38+
Footer,
39+
],
40+
schemas: [
41+
CUSTOM_ELEMENTS_SCHEMA,
42+
],
43+
exports: [
44+
MaterialDocsApp,
45+
Homepage,
3646
],
3747
imports: [
3848
BrowserModule,
@@ -43,10 +53,12 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
4353
HttpModule,
4454
MaterialModule.forRoot(),
4555
routing,
56+
InlineSVGModule,
4657
],
4758
providers: [
4859
Location,
4960
ComponentPageTitle,
61+
StyleManager,
5062
{provide: LocationStrategy, useClass: PathLocationStrategy},
5163
],
5264
bootstrap: [MaterialDocsApp],

‎src/app/material-docs-app.ts

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {Component, ViewEncapsulation} from '@angular/core';
22
import {Router, NavigationStart} from '@angular/router';
33

4+
import {ThemeStorage} from './shared/theme-chooser/theme-storage/theme-storage';
5+
46

57
@Component({
68
selector: 'material-docs-app',
@@ -15,9 +17,20 @@ export class MaterialDocsApp {
1517
isDarkTheme = false;
1618
showShadow = false;
1719

18-
constructor(router: Router) {
20+
constructor(
21+
router: Router,
22+
_themeStorage: ThemeStorage
23+
) {
1924
router.events.subscribe((data: NavigationStart) => {
2025
this.showShadow = data.url.startsWith('/components');
2126
});
27+
28+
_themeStorage
29+
.onThemeUpdate
30+
.subscribe((theme) => this._setIsDarkTheme(theme));
31+
}
32+
33+
public _setIsDarkTheme(theme) {
34+
this.isDarkTheme = theme ? theme.isDark : this.isDarkTheme;
2235
}
2336
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<md-card-title>{{category.name}}</md-card-title>
77
<p class="docs-component-category-list-card-summary">{{category.summary}}</p>
88
<div class="docs-component-category-list-card-image"
9-
[style.backgroundImage]="'url(\'../../../assets/img/component-categories/' + category.id +'.svg\')'">
9+
[inlineSVG]="'../../../assets/img/component-categories/' + category.id + '.svg'">
1010
</div>
1111
</md-card>
1212
</div>

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

+5-8
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

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

68
@media (max-width: $small-breakpoint-width) {
7-
display: flex;
8-
flex-wrap: wrap;
99
justify-content: center;
1010
}
1111
}
@@ -22,12 +22,9 @@
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;
25+
:host /deep/ .docs-component-category-list-card-image svg {
26+
width: 100% !important;
27+
height: 100% !important;
3128
}
3229

3330
.docs-component-category-list-card-summary {

‎src/app/pages/component-category-list/component-category-list.spec.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
22
import {MaterialModule} from '@angular/material';
3+
import {InlineSVGModule} from 'ng-inline-svg';
34
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
45

56
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
@@ -12,7 +13,7 @@ describe('ComponentCategoryList', () => {
1213

1314
beforeEach(async(() => {
1415
TestBed.configureTestingModule({
15-
imports: [MaterialModule],
16+
imports: [MaterialModule, InlineSVGModule],
1617
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1718
declarations: [ComponentCategoryList],
1819
providers: [

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
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]">
3+
class="docs-component-list-item"
4+
[routerLink]="['/components/component/', component.id]">
55
<div class="docs-component-list-item-icon"
6-
[attr.aria-label]="component.name"
7-
[style.backgroundImage]="'url(\'../../../assets/img/components/' + component.id + '.svg\')'">
6+
[attr.aria-label]="component.name"
7+
[inlineSVG]="'../../../assets/img/components/' + component.id + '.svg'">
88
</div>
99
{{component.name}}
1010
</a>

‎src/app/pages/component-list/component-list.spec.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
22
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
33
import {MaterialModule} from '@angular/material';
4+
import {InlineSVGModule} from 'ng-inline-svg';
45
import {ActivatedRoute, Router} from '@angular/router';
56
import {RouterTestingModule} from '@angular/router/testing';
67
import {Observable} from 'rxjs/Observable';
@@ -22,7 +23,7 @@ describe('ComponentList', () => {
2223

2324
beforeEach(async(() => {
2425
TestBed.configureTestingModule({
25-
imports: [MaterialModule, RouterTestingModule],
26+
imports: [MaterialModule, RouterTestingModule, InlineSVGModule],
2627
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2728
declarations: [ComponentList],
2829
providers: [

‎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+
<div inlineSVG="../assets/img/homepage/sprintzerotoapp.svg" alt="Sprint from Zero to App"></div>
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+
<div inlineSVG="../assets/img/homepage/fastandconsistent.svg" alt="Fast and Consistent"></div>
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+
<div inlineSVG="../assets/img/homepage/versatile.svg" alt="Versatile"></div>
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+
<div inlineSVG="../assets/img/homepage/optimized.svg" alt="Optimized for Angular"></div>
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-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<footer class="docs-footer">
22
<div class="docs-footer-list">
33
<div class="footer-logo">
4-
<img class="docs-footer-angular-logo"
5-
src="../../../assets/img/homepage/angular-white-transparent.svg"
6-
alt="Angular">
4+
<div class="docs-footer-angular-logo" inlineSVG="../../../assets/img/homepage/angular-white-transparent.svg">
5+
</div>
76
</div>
87

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

‎src/app/shared/footer/footer.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
padding: 8px;
1212
}
1313

14-
.docs-footer-angular-logo {
14+
.docs-footer-angular-logo /deep/ svg {
1515
height: 50px;
1616
}
1717

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

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
<!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
22
<nav class="docs-navbar">
33
<a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
4-
<img class="docs-angular-logo"
5-
src="../../../assets/img/homepage/angular-white-transparent.svg"
6-
alt="Angular">
4+
<span class="docs-angular-logo" inlineSVG="../../../assets/img/homepage/angular-white-transparent.svg"></span>
75
<span>Material</span>
86
</a>
97
<a md-button class="docs-button" routerLink="components">Components</a>
108
<a md-button class="docs-button" routerLink="guides">Guides</a>
9+
<div class="flex-spacer"></div>
10+
<theme-chooser></theme-chooser>
1111
<a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
12-
<img class="docs-github-logo"
13-
src="../../../assets/img/homepage/github-circle-white-transparent.svg"
14-
alt="GitHub">
12+
<span class="docs-github-logo" inlineSVG="../../../assets/img/homepage/github-circle-white-transparent.svg"></span>
1513
GitHub
1614
</a>
1715
</nav>

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

+7-2
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,14 +11,18 @@
1011
}
1112
}
1213

13-
.docs-angular-logo {
14+
.docs-angular-logo /deep/ svg {
1415
height: 26px;
1516
margin: 0 4px 3px 0;
1617
vertical-align: middle;
1718
}
1819

19-
.docs-github-logo {
20+
.docs-github-logo /deep/ svg {
2021
height: 21px;
2122
margin: 0 7px 2px 0;
2223
vertical-align: middle;
2324
}
25+
26+
.flex-spacer {
27+
flex-grow: 1;
28+
}

0 commit comments

Comments
 (0)