Skip to content
This repository was archived by the owner on Jan 4, 2026. It is now read-only.

feat(navbar): Add themepicker component with lazy loaded themes#136

Merged
jelbourn merged 1 commit into from
Jun 15, 2017
Merged

feat(navbar): Add themepicker component with lazy loaded themes #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,8 @@
/src/assets/documents
/src/assets/examples
/src/assets/plunker/examples
/src/assets/*.css
/src/assets/*.html

# dependencies
/node_modules
Expand Down
6 changes: 5 additions & 1 deletion angular-cli.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,11 @@
"mobile": false,
"styles": [
"main.scss",
"highlightjs/solarized-light.css"
"highlightjs/solarized-light.css",
{"input": "assets/pink-bluegrey.css", "lazy": true},
{"input": "assets/deeppurple-amber.css", "lazy": true},
{"input": "assets/indigo-pink.css", "lazy": true},
{"input": "assets/purple-green.css", "lazy": true}

@jelbournjelbournApr 8, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can these be referenced directly from node_modules rather than copying them to assets?

],
"scripts": [],
"environmentSource": "environments/environment.ts",
Expand Down
11 changes: 7 additions & 4 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,15 +4,16 @@
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"start": "npm run build-themes && ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"prod-build": "ng build --aot --prod && npm run prerender && cp -r tmp/prerendered/* dist/",
"build-themes": "./tools/build-themes.sh",
"prod-build": "npm run build-themes && ng build --aot --prod && npm run prerender && cp -r tmp/prerendered/* dist/",
"postinstall": "webdriver-manager update && tools/fetch-assets.sh",
"publish-prod": "ng build --aot --prod && firebase use material-angular-io && firebase deploy",
"publish-dev": "ng build --aot --prod && firebase use material2-docs-dev && firebase deploy"
"publish-prod": "npm run build-themes && ng build --aot --prod && firebase use material-angular-io && firebase deploy",
"publish-dev": "npm run build-themes && ng build --aot --prod && firebase use material2-docs-dev && firebase deploy"
},
"private": true,
"dependencies": {
Expand All@@ -26,6 +27,7 @@
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"color": "^1.0.3",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
Expand All@@ -44,6 +46,7 @@
"karma-jasmine": "^1.1.0",
"karma-remap-istanbul": "^0.2.1",
"karma-sauce-launcher": "^1.1.0",
"node-sass": "^4.5.3",
"protractor": "^5.1.1",
"ts-node": "^2.0.0",
"tslint": "^4.4.2",
Expand Down
2 changes: 1 addition & 1 deletion src/_app-theme.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@import '../node_modules/@angular/material/theming';
@import './app/pages/homepage/homepage-theme';
@import './app/pages/component-sidenav/component-sidenav-theme';
@import './app/pages/component-viewer/component-viewer-theme';
Expand Down
8 changes: 7 additions & 1 deletion src/app/app-module.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
import {Footer} from './shared/footer/footer';
import {ComponentPageTitle} from './pages/page-title/page-title';
import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
import {StyleManager} from './shared/style-manager/style-manager';


@NgModule({
Expand All@@ -33,7 +34,11 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
GuideList,
GuideViewer,
Homepage,
Footer
Footer,
],
exports: [
MaterialDocsApp,
Homepage,
],
imports: [
BrowserModule,
Expand All@@ -49,6 +54,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
providers: [
Location,
ComponentPageTitle,
StyleManager,
{provide: LocationStrategy, useClass: PathLocationStrategy},
],
bootstrap: [MaterialDocsApp],
Expand Down
4 changes: 3 additions & 1 deletion src/app/material-docs-app.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,9 @@ export class MaterialDocsApp {
isDarkTheme = false;
showShadow = false;

constructor(router: Router) {
constructor(
router: Router,
) {
router.events.subscribe((data: NavigationStart) => {
this.showShadow = data.url.startsWith('/components');
});
Expand Down
6 changes: 3 additions & 3 deletions src/app/pages/component-category-list/component-category-list.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,8 @@
[routerLink]="['/components/category/', category.id]">
<md-card-title>{{category.name}}</md-card-title>
<p class="docs-component-category-list-card-summary">{{category.summary}}</p>
<div class="docs-component-category-list-card-image"
[style.backgroundImage]="'url(\'../../../assets/img/component-categories/' + category.id +'.svg\')'">
</div>
<docs-svg-viewer class="docs-component-category-list-card-image"
[svgHref]="'../../../assets/img/component-categories/' + category.id +'.svg'">
</docs-svg-viewer>
</md-card>
</div>
20 changes: 6 additions & 14 deletions src/app/pages/component-category-list/component-category-list.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,35 @@
@import '../../../styles/constants';

.docs-component-category-list {
display: flex;
flex-wrap: wrap;
padding: 20px;

@media (max-width: $small-breakpoint-width) {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}

.docs-component-category-list-card {
cursor: pointer;
display: inline-block;
width: 260px;
margin: 20px;
vertical-align: top;
cursor: pointer;
width: 260px;

.mat-card-title {
font-size: 20px;
}
}

.docs-component-category-list-card-image {
width: 100%;
height: 160px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

.docs-component-category-list-card-summary {
height: 2.4em;
}

.docs-component-category-list-header {
padding-left: 20px;
display: flex;
align-items: center;
display: flex;
padding-left: 20px;

h1 {
font-size: 30px;
Expand Down
12 changes: 6 additions & 6 deletions src/app/pages/component-list/component-list.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
<div class="docs-component-list-category">
<a *ngFor="let component of category.items"
class="docs-component-list-item"
[routerLink]="['/components/component/', component.id]">
<div class="docs-component-list-item-icon"
[attr.aria-label]="component.name"
[style.backgroundImage]="'url(\'../../../assets/img/components/' + component.id + '.svg\')'">
</div>
class="docs-component-list-item"
[routerLink]="['/components/component/', component.id]">
<docs-svg-viewer class="docs-component-list-item-icon"
[attr.aria-label]="component.name"
[svgHref]="'../../../assets/img/components/' + component.id + '.svg'">
</docs-svg-viewer>
{{component.name}}
</a>
</div>
2 changes: 1 addition & 1 deletion src/app/pages/component-sidenav/_component-sidenav-theme.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@import '../../../../node_modules/@angular/material/theming';

@jelbournjelbournMay 31, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should be able to change all of these imports back; there was a short-lived bug in webpack's scss loader that made the ~ syntax not work that should be fixed with a fresh npm install

@riavalonriavalonJun 1, 2017

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't quite appear to work still. After removing node_modules, running npm cache clean and doing a fresh install, I'm still seeing errors trying to resolve the ~angular/material/theming paths.

@riavalonriavalonJun 12, 2017

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jelbourn As an update on this issue, compiling the individual scss files for each theme doesn't have access to webpack, but instead uses node-sass, so the ~ operator will not work here unfortunately.


@mixin component-viewer-sidenav-theme($theme) {
$primary: map-get($theme, primary);
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/component-viewer/_component-viewer-theme.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@import '../../../../node_modules/@angular/material/theming';

@mixin component-viewer-theme($theme) {
$primary: map-get($theme, primary);
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/guide-list/_guide-list-theme.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import '~@angular/material/theming';
@import '../../../../node_modules/@angular/material/theming';

@mixin guide-list-theme($theme) {
$primary: map-get($theme, primary);
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/guide-viewer/guide-viewer.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import "~@angular/material/theming";
@import "../../../../node_modules/@angular/material/theming";

/* For desktop, the content should be aligned with the page title. */
$guide-content-margin-side: 70px;
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/homepage/_homepage-theme.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@

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

.docs-header-headline {
Expand Down
8 changes: 4 additions & 4 deletions src/app/pages/homepage/homepage.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ <h2> Material Design components for Angular apps</h2>
<div class="docs-homepage-promo">
<div class="docs-homepage-row">
<div class="docs-homepage-promo-img">
<img src="../assets/img/homepage/sprintzerotoapp.svg" alt="Sprint from Zero to App" />
<docs-svg-viewer svgHref="../assets/img/homepage/sprintzerotoapp.svg"></docs-svg-viewer>
</div>
<div class="docs-homepage-promo-desc">
<h2>Sprint from Zero to App</h2>
Expand All@@ -23,7 +23,7 @@ <h2>Sprint from Zero to App</h2>
</div>
<div class="docs-homepage-row docs-homepage-reverse-row">
<div class="docs-homepage-promo-img">
<img src="../assets/img/homepage/fastandconsistent.svg" alt="Fast and Consistent" />
<docs-svg-viewer svgHref="../assets/img/homepage/fastandconsistent.svg"></docs-svg-viewer>
</div>
<div class="docs-homepage-promo-desc">
<h2>Fast and Consistent</h2>
Expand All@@ -33,7 +33,7 @@ <h2>Fast and Consistent</h2>
</div>
<div class="docs-homepage-row">
<div class="docs-homepage-promo-img">
<img src="../assets/img/homepage/versatile.svg" alt="Versatile" />
<docs-svg-viewer svgHref="../assets/img/homepage/versatile.svg"></docs-svg-viewer>
</div>
<div class="docs-homepage-promo-desc">
<h2>Versatile</h2>
Expand All@@ -43,7 +43,7 @@ <h2>Versatile</h2>
</div>
<div class="docs-homepage-row docs-homepage-reverse-row">
<div class="docs-homepage-promo-img">
<img src="../assets/img/homepage/optimized.svg" alt="Optimized for Angular" />
<docs-svg-viewer svgHref="../assets/img/homepage/optimized.svg"></docs-svg-viewer>
</div>
<div class="docs-homepage-promo-desc">
<h2>Optimized for Angular</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/homepage/homepage.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -56,7 +56,7 @@ $margin-promotion-sections: 60px;
margin: $margin-promotion-sections 0;
}

.docs-homepage-row img {
.docs-homepage-row .docs-svg-image{
max-width: 90%;
}

Expand Down
4 changes: 2 additions & 2 deletions src/app/shared/footer/footer.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,8 +2,8 @@
<div class="docs-footer-list">
<div class="footer-logo">
<img class="docs-footer-angular-logo"
src="../../../assets/img/homepage/angular-white-transparent.svg"
alt="Angular">
src="../../../assets/img/homepage/angular-white-transparent.svg"
alt="angular">
</div>

<div class="docs-footer-links">
Expand Down
10 changes: 6 additions & 4 deletions src/app/shared/navbar/navbar.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,16 +2,18 @@
<nav class="docs-navbar">
<a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
<img class="docs-angular-logo"
src="../../../assets/img/homepage/angular-white-transparent.svg"
alt="Angular">
src="../../../assets/img/homepage/angular-white-transparent.svg"
alt="angular">
<span>Material</span>
</a>
<a md-button class="docs-button" routerLink="components">Components</a>
<a md-button class="docs-button" routerLink="guides">Guides</a>
<div class="flex-spacer"></div>
<theme-chooser></theme-chooser>
<a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
<img class="docs-github-logo"
src="../../../assets/img/homepage/github-circle-white-transparent.svg"
alt="GitHub">
src="../../../assets/img/homepage/github-circle-white-transparent.svg"
alt="GitHub">
GitHub
</a>
</nav>
5 changes: 5 additions & 0 deletions src/app/shared/navbar/navbar.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
.docs-navbar {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 8px 16px;

> .mat-button {
Expand All@@ -10,6 +11,10 @@
}
}

.flex-spacer {
flex-grow: 1;
}

.docs-angular-logo {
height: 26px;
margin: 0 4px 3px 0;
Expand Down
19 changes: 12 additions & 7 deletions src/app/shared/shared-module.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
import {NgModule} from '@angular/core';
import {HttpModule} from '@angular/http';
import {DocViewer} from './doc-viewer/doc-viewer';
import {ExampleViewer} from './example-viewer/example-viewer';
import {DocumentationItems} from './documentation-items/documentation-items';
import {NavBar} from './navbar/navbar';
import {MaterialModule} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';

import {ExampleViewer} from './example-viewer/example-viewer';
import {DocViewer} from './doc-viewer/doc-viewer';
import {DocumentationItems} from './documentation-items/documentation-items';
import {PlunkerButton} from './plunker';
import {GuideItems} from './guide-items/guide-items';
import {ThemeStorage} from './theme-chooser/theme-storage/theme-storage';
import {ThemeChooser} from './theme-chooser/theme-chooser';
import {NavBar} from './navbar/navbar';
import {SvgBuilder} from './svg-viewer/svg-builder';
import {SvgViewer} from './svg-viewer/svg-viewer';


@NgModule({
Expand All@@ -18,9 +23,9 @@ import {GuideItems} from './guide-items/guide-items';
BrowserModule,
MaterialModule,
],
declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
providers: [DocumentationItems, GuideItems],
declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder],
entryComponents: [
ExampleViewer,
],
Expand Down
1 change: 1 addition & 0 deletions src/app/shared/style-manager/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
export * from './style-manager';
Loading