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

Commit 9dcc56b

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

Some content is hidden

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

63 files changed

+3760
-193
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

+8-5
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"
@@ -38,12 +40,13 @@
3840
"highlight.js": "^9.9.0",
3941
"jasmine-core": "2.4.1",
4042
"jasmine-spec-reporter": "2.5.0",
41-
"karma": "1.2.0",
43+
"karma": "1.6.0",
4244
"karma-browserstack-launcher": "^1.2.0",
4345
"karma-chrome-launcher": "^2.0.0",
4446
"karma-jasmine": "^1.1.0",
4547
"karma-remap-istanbul": "^0.2.1",
4648
"karma-sauce-launcher": "^1.1.0",
49+
"ng-inline-svg": "^3.0.0",
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

+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

+13-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,19 @@ export class MaterialDocsApp {
1517
isDarkTheme = false;
1618
showShadow = false;
1719

18-
constructor(router: Router) {
20+
constructor(
21+
router: Router,
22+
) {
1923
router.events.subscribe((data: NavigationStart) => {
2024
this.showShadow = data.url.startsWith('/components');
2125
});
26+
27+
// _themeStorage
28+
// .onThemeUpdate
29+
// .subscribe((theme) => this._setIsDarkTheme(theme));
2230
}
31+
32+
// public _setIsDarkTheme(theme) {
33+
// this.isDarkTheme = theme ? theme.isDark : this.isDarkTheme;
34+
// }
2335
}

‎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

+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

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

+8-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ <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>
17+
<!-- <div inlineSVG="../assets/img/homepage/sprintzerotoapp.svg" alt="Sprint from Zero to App"></div> -->
1718
</div>
1819
<div class="docs-homepage-promo-desc">
1920
<h2>Sprint from Zero to App</h2>
@@ -23,7 +24,8 @@ <h2>Sprint from Zero to App</h2>
2324
</div>
2425
<div class="docs-homepage-row docs-homepage-reverse-row">
2526
<div class="docs-homepage-promo-img">
26-
<img src="../assets/img/homepage/fastandconsistent.svg" alt="Fast and Consistent" />
27+
<docs-svg-viewer svgHref="../assets/img/homepage/fastandconsistent.svg"></docs-svg-viewer>
28+
<!-- <div inlineSVG="../assets/img/homepage/fastandconsistent.svg" alt="Fast and Consistent"></div> -->
2729
</div>
2830
<div class="docs-homepage-promo-desc">
2931
<h2>Fast and Consistent</h2>
@@ -33,7 +35,8 @@ <h2>Fast and Consistent</h2>
3335
</div>
3436
<div class="docs-homepage-row">
3537
<div class="docs-homepage-promo-img">
36-
<img src="../assets/img/homepage/versatile.svg" alt="Versatile" />
38+
<docs-svg-viewer svgHref="../assets/img/homepage/versatile.svg"></docs-svg-viewer>
39+
<!-- <div inlineSVG="../assets/img/homepage/versatile.svg" alt="Versatile"></div> -->
3740
</div>
3841
<div class="docs-homepage-promo-desc">
3942
<h2>Versatile</h2>
@@ -43,7 +46,8 @@ <h2>Versatile</h2>
4346
</div>
4447
<div class="docs-homepage-row docs-homepage-reverse-row">
4548
<div class="docs-homepage-promo-img">
46-
<img src="../assets/img/homepage/optimized.svg" alt="Optimized for Angular" />
49+
<docs-svg-viewer svgHref="../assets/img/homepage/optimized.svg"></docs-svg-viewer>
50+
<!-- <div inlineSVG="../assets/img/homepage/optimized.svg" alt="Optimized for Angular"></div> -->
4751
</div>
4852
<div class="docs-homepage-promo-desc">
4953
<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 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)