From 05fed023abb93f89314a1a2fce4f45003f4813bb Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 22 Nov 2016 10:23:33 -0800 Subject: [PATCH] feat(navbar): Add themepicker component with lazy loaded themes --- .gitignore | 2 + angular-cli.json | 6 +- package.json | 11 ++- src/_app-theme.scss | 2 +- src/app/app-module.ts | 8 +- src/app/material-docs-app.ts | 4 +- .../component-category-list.html | 6 +- .../component-category-list.scss | 20 ++-- .../pages/component-list/component-list.html | 12 +-- .../_component-sidenav-theme.scss | 2 +- .../_component-viewer-theme.scss | 2 +- .../pages/guide-list/_guide-list-theme.scss | 2 +- src/app/pages/guide-viewer/guide-viewer.scss | 2 +- src/app/pages/homepage/_homepage-theme.scss | 2 +- src/app/pages/homepage/homepage.html | 8 +- src/app/pages/homepage/homepage.scss | 2 +- src/app/shared/footer/footer.html | 4 +- src/app/shared/navbar/navbar.html | 10 +- src/app/shared/navbar/navbar.scss | 5 + src/app/shared/shared-module.ts | 19 ++-- src/app/shared/style-manager/index.ts | 1 + .../style-manager/style-manager.spec.ts | 52 +++++++++++ src/app/shared/style-manager/style-manager.ts | 46 ++++++++++ src/app/shared/svg-viewer/svg-builder.spec.ts | 85 +++++++++++++++++ src/app/shared/svg-viewer/svg-builder.ts | 91 +++++++++++++++++++ src/app/shared/svg-viewer/svg-viewer.ts | 72 +++++++++++++++ src/app/shared/theme-chooser/index.ts | 1 + .../shared/theme-chooser/theme-chooser.html | 17 ++++ .../shared/theme-chooser/theme-chooser.scss | 58 ++++++++++++ .../theme-chooser/theme-chooser.spec.ts | 29 ++++++ src/app/shared/theme-chooser/theme-chooser.ts | 65 +++++++++++++ .../theme-storage/theme-storage.spec.ts | 52 +++++++++++ .../theme-storage/theme-storage.ts | 30 ++++++ .../custom-themes/deeppurple-amber.scss | 9 ++ src/assets/custom-themes/indigo-pink.scss | 9 ++ src/assets/custom-themes/pink-bluegrey.scss | 9 ++ src/assets/custom-themes/purple-green.scss | 9 ++ src/assets/img/component-categories/forms.svg | 2 +- .../img/component-categories/modals.svg | 2 +- src/assets/img/components/autocomplete.svg | 2 +- src/assets/img/components/button-toggle.svg | 2 +- src/assets/img/components/checkbox.svg | 2 +- .../img/components/progress-spinner.svg | 2 +- src/assets/img/components/radio.svg | 2 +- src/assets/img/components/select.svg | 2 +- src/assets/img/components/slider.svg | 2 +- src/assets/img/homepage/fastandconsistent.svg | 2 +- src/assets/img/homepage/material_splash.svg | 86 +----------------- src/assets/img/homepage/optimized.svg | 2 +- src/assets/img/homepage/sprintzerotoapp.svg | 2 +- src/assets/img/homepage/versatile.svg | 2 +- src/main.scss | 36 +------- src/styles/_api-theme.scss | 2 +- src/styles/_general.scss | 57 ++++++++++++ src/styles/_markdown-theme.scss | 2 +- src/styles/_tables-theme.scss | 2 +- tools/build-themes.sh | 19 ++++ 57 files changed, 804 insertions(+), 190 deletions(-) create mode 100644 src/app/shared/style-manager/index.ts create mode 100644 src/app/shared/style-manager/style-manager.spec.ts create mode 100644 src/app/shared/style-manager/style-manager.ts create mode 100644 src/app/shared/svg-viewer/svg-builder.spec.ts create mode 100644 src/app/shared/svg-viewer/svg-builder.ts create mode 100644 src/app/shared/svg-viewer/svg-viewer.ts create mode 100644 src/app/shared/theme-chooser/index.ts create mode 100644 src/app/shared/theme-chooser/theme-chooser.html create mode 100644 src/app/shared/theme-chooser/theme-chooser.scss create mode 100644 src/app/shared/theme-chooser/theme-chooser.spec.ts create mode 100644 src/app/shared/theme-chooser/theme-chooser.ts create mode 100644 src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts create mode 100644 src/app/shared/theme-chooser/theme-storage/theme-storage.ts create mode 100644 src/assets/custom-themes/deeppurple-amber.scss create mode 100644 src/assets/custom-themes/indigo-pink.scss create mode 100644 src/assets/custom-themes/pink-bluegrey.scss create mode 100644 src/assets/custom-themes/purple-green.scss create mode 100644 src/styles/_general.scss create mode 100755 tools/build-themes.sh diff --git a/.gitignore b/.gitignore index 302d77575..0f5104f43 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,8 @@ /src/assets/documents /src/assets/examples /src/assets/plunker/examples +/src/assets/*.css +/src/assets/*.html # dependencies /node_modules diff --git a/angular-cli.json b/angular-cli.json index ca142e3a8..e4f229734 100644 --- a/angular-cli.json +++ b/angular-cli.json @@ -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} ], "scripts": [], "environmentSource": "environments/environment.ts", diff --git a/package.json b/package.json index e0401cbcc..cef12aa9b 100644 --- a/package.json +++ b/package.json @@ -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": { @@ -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" @@ -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", diff --git a/src/_app-theme.scss b/src/_app-theme.scss index 46c56bef6..4b5800e80 100644 --- a/src/_app-theme.scss +++ b/src/_app-theme.scss @@ -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'; diff --git a/src/app/app-module.ts b/src/app/app-module.ts index ca16677dc..97cc2e327 100644 --- a/src/app/app-module.ts +++ b/src/app/app-module.ts @@ -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({ @@ -33,7 +34,11 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page- GuideList, GuideViewer, Homepage, - Footer + Footer, + ], + exports: [ + MaterialDocsApp, + Homepage, ], imports: [ BrowserModule, @@ -49,6 +54,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page- providers: [ Location, ComponentPageTitle, + StyleManager, {provide: LocationStrategy, useClass: PathLocationStrategy}, ], bootstrap: [MaterialDocsApp], diff --git a/src/app/material-docs-app.ts b/src/app/material-docs-app.ts index b109e1acb..dd9fd9b01 100644 --- a/src/app/material-docs-app.ts +++ b/src/app/material-docs-app.ts @@ -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'); }); diff --git a/src/app/pages/component-category-list/component-category-list.html b/src/app/pages/component-category-list/component-category-list.html index bc9dc72fb..e0c0a24fa 100644 --- a/src/app/pages/component-category-list/component-category-list.html +++ b/src/app/pages/component-category-list/component-category-list.html @@ -5,8 +5,8 @@ [routerLink]="['/components/category/', category.id]"> {{category.name}}

{{category.summary}}

-
-
+ + diff --git a/src/app/pages/component-category-list/component-category-list.scss b/src/app/pages/component-category-list/component-category-list.scss index 7b78df401..9439c3ae3 100644 --- a/src/app/pages/component-category-list/component-category-list.scss +++ b/src/app/pages/component-category-list/component-category-list.scss @@ -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; diff --git a/src/app/pages/component-list/component-list.html b/src/app/pages/component-list/component-list.html index 67aff7b9c..4db71b583 100644 --- a/src/app/pages/component-list/component-list.html +++ b/src/app/pages/component-list/component-list.html @@ -1,11 +1,11 @@
-
-
+ class="docs-component-list-item" + [routerLink]="['/components/component/', component.id]"> + + {{component.name}}
diff --git a/src/app/pages/component-sidenav/_component-sidenav-theme.scss b/src/app/pages/component-sidenav/_component-sidenav-theme.scss index edb5eed9e..fe4e01adb 100644 --- a/src/app/pages/component-sidenav/_component-sidenav-theme.scss +++ b/src/app/pages/component-sidenav/_component-sidenav-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/theming'; +@import '../../../../node_modules/@angular/material/theming'; @mixin component-viewer-sidenav-theme($theme) { $primary: map-get($theme, primary); diff --git a/src/app/pages/component-viewer/_component-viewer-theme.scss b/src/app/pages/component-viewer/_component-viewer-theme.scss index abadd9642..1d196fa55 100644 --- a/src/app/pages/component-viewer/_component-viewer-theme.scss +++ b/src/app/pages/component-viewer/_component-viewer-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/theming'; +@import '../../../../node_modules/@angular/material/theming'; @mixin component-viewer-theme($theme) { $primary: map-get($theme, primary); diff --git a/src/app/pages/guide-list/_guide-list-theme.scss b/src/app/pages/guide-list/_guide-list-theme.scss index dbe5eb8fc..59b61e929 100644 --- a/src/app/pages/guide-list/_guide-list-theme.scss +++ b/src/app/pages/guide-list/_guide-list-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/theming'; +@import '../../../../node_modules/@angular/material/theming'; @mixin guide-list-theme($theme) { $primary: map-get($theme, primary); diff --git a/src/app/pages/guide-viewer/guide-viewer.scss b/src/app/pages/guide-viewer/guide-viewer.scss index 8774d5bed..12c4ddad8 100644 --- a/src/app/pages/guide-viewer/guide-viewer.scss +++ b/src/app/pages/guide-viewer/guide-viewer.scss @@ -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; diff --git a/src/app/pages/homepage/_homepage-theme.scss b/src/app/pages/homepage/_homepage-theme.scss index 97af2c983..71ce38e02 100644 --- a/src/app/pages/homepage/_homepage-theme.scss +++ b/src/app/pages/homepage/_homepage-theme.scss @@ -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 { diff --git a/src/app/pages/homepage/homepage.html b/src/app/pages/homepage/homepage.html index f0fd50788..02ba6a657 100644 --- a/src/app/pages/homepage/homepage.html +++ b/src/app/pages/homepage/homepage.html @@ -13,7 +13,7 @@

Material Design components for Angular apps

- Sprint from Zero to App +

Sprint from Zero to App

@@ -23,7 +23,7 @@

Sprint from Zero to App

- Fast and Consistent +

Fast and Consistent

@@ -33,7 +33,7 @@

Fast and Consistent

- Versatile +

Versatile

@@ -43,7 +43,7 @@

Versatile

- Optimized for Angular +

Optimized for Angular

diff --git a/src/app/pages/homepage/homepage.scss b/src/app/pages/homepage/homepage.scss index f9fb6678d..b354fbaee 100644 --- a/src/app/pages/homepage/homepage.scss +++ b/src/app/pages/homepage/homepage.scss @@ -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%; } diff --git a/src/app/shared/footer/footer.html b/src/app/shared/footer/footer.html index a7885ff5a..2d18f8517 100644 --- a/src/app/shared/footer/footer.html +++ b/src/app/shared/footer/footer.html @@ -2,8 +2,8 @@
diff --git a/src/app/shared/navbar/navbar.html b/src/app/shared/navbar/navbar.html index 5582045af..c8458a7e3 100644 --- a/src/app/shared/navbar/navbar.html +++ b/src/app/shared/navbar/navbar.html @@ -2,16 +2,18 @@ diff --git a/src/app/shared/navbar/navbar.scss b/src/app/shared/navbar/navbar.scss index a6db42611..167719a84 100644 --- a/src/app/shared/navbar/navbar.scss +++ b/src/app/shared/navbar/navbar.scss @@ -1,6 +1,7 @@ .docs-navbar { display: flex; flex-wrap: wrap; + align-items: center; padding: 8px 16px; > .mat-button { @@ -10,6 +11,10 @@ } } +.flex-spacer { + flex-grow: 1; +} + .docs-angular-logo { height: 26px; margin: 0 4px 3px 0; diff --git a/src/app/shared/shared-module.ts b/src/app/shared/shared-module.ts index 77eeec4fc..7298839ca 100644 --- a/src/app/shared/shared-module.ts +++ b/src/app/shared/shared-module.ts @@ -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({ @@ -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, ], diff --git a/src/app/shared/style-manager/index.ts b/src/app/shared/style-manager/index.ts new file mode 100644 index 000000000..5b13b7116 --- /dev/null +++ b/src/app/shared/style-manager/index.ts @@ -0,0 +1 @@ +export * from './style-manager'; diff --git a/src/app/shared/style-manager/style-manager.spec.ts b/src/app/shared/style-manager/style-manager.spec.ts new file mode 100644 index 000000000..df2cc14b1 --- /dev/null +++ b/src/app/shared/style-manager/style-manager.spec.ts @@ -0,0 +1,52 @@ +import {TestBed, inject} from '@angular/core/testing'; +import {StyleManager} from './style-manager'; + + +describe('StyleManager', () => { + let styleManager: StyleManager; + + beforeEach(() => TestBed.configureTestingModule({ + providers: [StyleManager] + })); + + beforeEach(inject([StyleManager], (sm: StyleManager) => { + styleManager = sm; + })); + + afterEach(() => { + let links = document.head.querySelectorAll('link'); + for (let link of Array.prototype.slice.call(links)) { + if (link.className.includes('style-manager-')) { + document.head.removeChild(link); + } + } + }); + + it('should add stylesheet to head', () => { + styleManager.setStyle('test', 'test.css'); + let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement; + expect(styleEl).not.toBeNull(); + expect(styleEl.href.endsWith('test.css')).toBe(true); + }); + + it('should change existing stylesheet', () => { + styleManager.setStyle('test', 'test.css'); + let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement; + expect(styleEl).not.toBeNull(); + expect(styleEl.href.endsWith('test.css')).toBe(true); + + styleManager.setStyle('test', 'new.css'); + expect(styleEl.href.endsWith('new.css')).toBe(true); + }); + + it('should remove existing stylesheet', () => { + styleManager.setStyle('test', 'test.css'); + let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement; + expect(styleEl).not.toBeNull(); + expect(styleEl.href.endsWith('test.css')).toBe(true); + + styleManager.removeStyle('test'); + styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement; + expect(styleEl).toBeNull(); + }); +}); diff --git a/src/app/shared/style-manager/style-manager.ts b/src/app/shared/style-manager/style-manager.ts new file mode 100644 index 000000000..a74637f3e --- /dev/null +++ b/src/app/shared/style-manager/style-manager.ts @@ -0,0 +1,46 @@ +import {Injectable} from '@angular/core'; + + +/** + * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be + * removed or changed later. + */ +@Injectable() +export class StyleManager { + /** + * Set the stylesheet with the specified key. + */ + setStyle(key: string, href: string) { + getLinkElementForKey(key).setAttribute('href', href); + } + + /** + * Remove the stylesheet with the specified key. + */ + removeStyle(key: string) { + const existingLinkElement = getExistingLinkElementByKey(key); + if (existingLinkElement) { + document.head.removeChild(existingLinkElement); + } + } +} + +function getLinkElementForKey(key: string) { + return getExistingLinkElementByKey(key) || createLinkElementWithKey(key); +} + +function getExistingLinkElementByKey(key: string) { + return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`); +} + +function createLinkElementWithKey(key: string) { + const linkEl = document.createElement('link'); + linkEl.setAttribute('rel', 'stylesheet'); + linkEl.classList.add(getClassNameForKey(key)); + document.head.appendChild(linkEl); + return linkEl; +} + +function getClassNameForKey(key: string) { + return `style-manager-${key}`; +} diff --git a/src/app/shared/svg-viewer/svg-builder.spec.ts b/src/app/shared/svg-viewer/svg-builder.spec.ts new file mode 100644 index 000000000..cf3a09aa3 --- /dev/null +++ b/src/app/shared/svg-viewer/svg-builder.spec.ts @@ -0,0 +1,85 @@ +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {async, inject, TestBed} from '@angular/core/testing'; +import {HttpModule} from '@angular/http'; +import {MaterialModule} from '@angular/material'; + +import {DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage'; +import {SvgBuilder} from './svg-builder'; + + +describe('SVG Builder', () => { + const defaultData = SvgBuilder.DEFAULT_THEME; + const black = '#000000'; + const white = '#ffffff'; + const primary = '#FFA669'; + const accent = '#F0F8FF'; + let testTheme: DocsSiteTheme; + let template; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MaterialModule, HttpModule], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + providers: [SvgBuilder], + }); + })); + + beforeEach(() => { + testTheme = { + isDark: false, + href: 'coolland.py', + primary: '#FFA669', + accent, + }; + + template = ''; + Object.keys(defaultData).forEach(key => { + if (defaultData[key]) { + template += `someRandomData fill="${defaultData[key]}"`; + } + }); + }); + + it('replaceColor should return a string with all instances of a hex code replaced', + inject([SvgBuilder], (service: SvgBuilder) => { + const oneHexCode = ``; + const twoHexCodes = ``; + const checkStringMissingIn = (template, search) => !~template.indexOf(search); + const result1 = service._replaceColor(oneHexCode, black, white); + const result2 = service._replaceColor(twoHexCodes, black, white); + [result1, result2].forEach(result => { + expect(checkStringMissingIn(result, black)).toBeTruthy(); + expect(checkStringMissingIn(result, white)).toBeFalsy(); + }); + })); + + it('should build a ThemeColors object based off a primary and secondary hex code', + inject([SvgBuilder], (service: SvgBuilder) => { + const result = service.createThemeColors(testTheme); + const expectedKeys = Object.keys(defaultData); + Object.keys(result).forEach(key => { + expect(result[key]).toBeTruthy(); + expect(expectedKeys.find(ek => ek === key)).toBeTruthy(); + }); + })); + + it('replaceColorCodes will replace all instances of a previous theme\'s colors, with new ones', + inject([SvgBuilder], (service: SvgBuilder) => { + const colors = service.createThemeColors(testTheme); + const newTemplate = service.replaceColorCodes(template, colors, defaultData); + Object.keys(colors).forEach(key => { + expect(~newTemplate.indexOf(colors[key])).toBeTruthy(); + if (defaultData[key]) { + expect(~newTemplate.indexOf(defaultData[key])).toBeFalsy(); + } + }); + })); + + it('should return a new template and theme colors when calling buildSvg', + inject([SvgBuilder], (service: SvgBuilder) => { + const result = service.buildSvg(testTheme, template, defaultData); + expect(result.colors).toEqual(service.createThemeColors(testTheme)); + expect(result.newTemplate).toEqual(service.replaceColorCodes( + template, result.colors, defaultData)); + })); +}); diff --git a/src/app/shared/svg-viewer/svg-builder.ts b/src/app/shared/svg-viewer/svg-builder.ts new file mode 100644 index 000000000..8246f8356 --- /dev/null +++ b/src/app/shared/svg-viewer/svg-builder.ts @@ -0,0 +1,91 @@ +import {Injectable} from '@angular/core'; +import {Http} from '@angular/http'; + +import {DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage'; + +import * as Color from 'color'; + + +// Accent isn't currently used in SVGs.. uncomment to use it again in colour schemes +export interface ThemeColors { + gradientPrimaryDark: string; + gradientPrimary: string; + washedOutPrimary: string; + offWhitePrimary: string; + lighterPrimary: string; + lightPrimary: string; + deepPrimary: string; + primary: string; + darkerPrimary: string; + // accent: string; +}; + + +@Injectable() +export class SvgBuilder { + static DEFAULT_THEME: ThemeColors = { + gradientPrimary: '#0CBFD6', + gradientPrimaryDark: '#05BED5', + washedOutPrimary: '#E1F7FA', + offWhitePrimary: '#B9EDF3', + lighterPrimary: '#CCF2F6', + lightPrimary: '#00BCD4', + primary: '#89E0EB', + deepPrimary: '#00BDD5', + darkerPrimary: '#5CD8E7', + // accent: '#274C51', + }; + + constructor(private http: Http) { + } + + public buildSvg(theme: DocsSiteTheme, template: string, previousThemeColors) { + const colors = theme ? this.createThemeColors(theme) : SvgBuilder.DEFAULT_THEME; + const newTemplate = this.replaceColorCodes(template, colors, previousThemeColors); + return {newTemplate, colors}; + } + + public createThemeColors(theme: DocsSiteTheme): ThemeColors { + const {primary} = theme; + return { + primary, + gradientPrimaryDark: Color(primary).lighten(0.3).hex(), + gradientPrimary: Color(primary).lighten(0.4).hex(), + washedOutPrimary: Color(primary).lighten(0.85).hex(), + offWhitePrimary: Color(primary).lighten(0.8).hex(), + lighterPrimary: Color(primary).lighten(0.6).hex(), + lightPrimary: Color(primary).lighten(0.2).hex(), + deepPrimary: Color(primary).darken(0.3).hex(), + darkerPrimary: Color(primary).darken(0.4).hex(), + }; + } + + // Used by svg-viewer class + public getSvgAsString(path: string): Promise { + const svgAbsPath = this._getAbsPath(path); + return this.http.get(svgAbsPath).toPromise() + .then((data: any) => data._body); + } + + private _getAbsPath(path: string): string { + // SVG assets all come from the /assets/ path + const svgBasePath = 'assets/'; + return path.slice((path.indexOf(svgBasePath)-1)); + } + + public replaceColorCodes(template: string, colors: ThemeColors, previousThemeColors: ThemeColors): string { + let finalTemplate = template; + Object.keys(colors).forEach(key => { + const prevColor = previousThemeColors[key]; + const newColor = colors[key]; + if (prevColor && newColor) { + finalTemplate = this._replaceColor(finalTemplate, prevColor, newColor); + } + }); + return finalTemplate; + } + + public _replaceColor(template: string, color: string, replacement: string): string { + return template.replace(new RegExp(color, 'gi'), replacement); + } +} diff --git a/src/app/shared/svg-viewer/svg-viewer.ts b/src/app/shared/svg-viewer/svg-viewer.ts new file mode 100644 index 000000000..cff1c305f --- /dev/null +++ b/src/app/shared/svg-viewer/svg-viewer.ts @@ -0,0 +1,72 @@ +import {ElementRef, Component, Input} from '@angular/core'; +import {Http} from '@angular/http'; +import {Observable} from 'rxjs/Observable'; +import {Subscription} from 'rxjs/Subscription'; + +import {ThemeColors, SvgBuilder} from './svg-builder'; +import {ThemeStorage, DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage'; + + +@Component({ + selector: 'docs-svg-viewer', + template: '
', +}) + +export class SvgViewer { + @Input() public svgHref: string; + + private _subscription: Subscription; + private currTheme: DocsSiteTheme; + private _previousThemeColors: ThemeColors = SvgBuilder.DEFAULT_THEME; + + constructor( + public themeStorage: ThemeStorage, + public svgBuilder: SvgBuilder, + public el: ElementRef, + public http: Http + ) { + this.currTheme = this.themeStorage.getStoredTheme(); + this._subscription = this.themeStorage.onThemeUpdate + .subscribe(theme => this.swapTheme(theme)); + } + + public ngAfterViewInit() { + if (this.currTheme) { + setTimeout(() => this.swapTheme(this.currTheme)); + } else { + setTimeout(() => this.svgBuilder.getSvgAsString(this.svgHref) + .then(svgString => this.injectSvg(svgString))); + } + } + + public swapTheme(theme) { + if (this._getSvgFromDom()) { + this._convertToTheme(theme, this._getSvgFromDom()); + } else { + this.svgBuilder.getSvgAsString(this.svgHref) + .then(svgString => this._convertToTheme(theme, svgString)); + } + } + + private _convertToTheme(theme, template) { + const {newTemplate, colors} = this.svgBuilder.buildSvg( + theme, template, this._previousThemeColors); + this.injectSvg(newTemplate); + this._previousThemeColors = colors; + } + + public ngOnDestroy() { + if (this._subscription) { + this._subscription.unsubscribe(); + } + } + + public injectSvg(template) { + this.el.nativeElement.innerHTML = template; + } + + private _getSvgFromDom() { + const svg = this.el.nativeElement.querySelector('svg'); + return svg ? this.el.nativeElement.innerHTML : null; + } +} diff --git a/src/app/shared/theme-chooser/index.ts b/src/app/shared/theme-chooser/index.ts new file mode 100644 index 000000000..7e7db51a4 --- /dev/null +++ b/src/app/shared/theme-chooser/index.ts @@ -0,0 +1 @@ +export * from './theme-chooser'; diff --git a/src/app/shared/theme-chooser/theme-chooser.html b/src/app/shared/theme-chooser/theme-chooser.html new file mode 100644 index 000000000..a36e27a94 --- /dev/null +++ b/src/app/shared/theme-chooser/theme-chooser.html @@ -0,0 +1,17 @@ + + + + + + +
+
+ check_circle +
+
+
+ + + diff --git a/src/app/shared/theme-chooser/theme-chooser.scss b/src/app/shared/theme-chooser/theme-chooser.scss new file mode 100644 index 000000000..b20c9ae60 --- /dev/null +++ b/src/app/shared/theme-chooser/theme-chooser.scss @@ -0,0 +1,58 @@ +$theme-chooser-menu-padding: 8px; +$theme-chooser-grid-cell-size: 48px; +$theme-chooser-grid-cells-per-row: 2; +$theme-chooser-swatch-size: 36px; +$theme-chooser-accent-stripe-size: 6px; + + +.docs-theme-chooser-menu { + .md-menu-content { + padding: $theme-chooser-menu-padding; + } + + [md-menu-item] { + flex: 0 0 auto; + padding: 0; + overflow: hidden; + } + + .docs-theme-chooser-swatch { + position: relative; + width: $theme-chooser-swatch-size; + height: $theme-chooser-swatch-size; + margin: ($theme-chooser-grid-cell-size - $theme-chooser-swatch-size) / 2; + border-radius: 50%; + overflow: hidden; + + .docs-theme-chosen-icon { + color: white; + position: absolute; + left: 50%; top: 50%; + transform: translate(-50%, -50%); + } + + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + border: 1px solid rgba(0,0,0,.2); + border-radius: 50%; + } + } + + .docs-theme-chooser-primary { + width: 100%; + height: 100%; + } + + .docs-theme-chooser-accent { + position: absolute; + bottom: $theme-chooser-accent-stripe-size; + width: 100%; + height: $theme-chooser-accent-stripe-size; + } +} diff --git a/src/app/shared/theme-chooser/theme-chooser.spec.ts b/src/app/shared/theme-chooser/theme-chooser.spec.ts new file mode 100644 index 000000000..7d4000ba4 --- /dev/null +++ b/src/app/shared/theme-chooser/theme-chooser.spec.ts @@ -0,0 +1,29 @@ +import {MaterialModule} from '@angular/material'; +import {async, TestBed} from '@angular/core/testing'; + +import {ThemeStorage} from './theme-storage/theme-storage'; +import {ThemeChooser} from './theme-chooser'; +import {StyleManager} from '../style-manager'; + + +describe('ThemeChooser', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MaterialModule], + declarations: [ThemeChooser], + providers: [StyleManager, ThemeStorage] + }); + + TestBed.compileComponents(); + })); + + it('should install theme based on href', () => { + const fixture = TestBed.createComponent(ThemeChooser); + const component = fixture.componentInstance; + const href = 'pink-bluegrey.css'; + spyOn(component.styleManager, 'setStyle'); + component.installTheme(href); + expect(component.styleManager.setStyle).toHaveBeenCalled(); + expect(component.styleManager.setStyle).toHaveBeenCalledWith('theme', `assets/${href}`); + }); +}); diff --git a/src/app/shared/theme-chooser/theme-chooser.ts b/src/app/shared/theme-chooser/theme-chooser.ts new file mode 100644 index 000000000..9b83674fe --- /dev/null +++ b/src/app/shared/theme-chooser/theme-chooser.ts @@ -0,0 +1,65 @@ +import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core'; +import {StyleManager} from '../style-manager/style-manager'; +import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage'; + + +@Component({ + selector: 'theme-chooser', + templateUrl: 'theme-chooser.html', + styleUrls: ['theme-chooser.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + host: { 'aria-hidden': 'true' }, +}) +export class ThemeChooser { + currentTheme; + + themes = [ + { + primary: '#673AB7', + accent: '#FFC107', + href: 'deeppurple-amber.css', + isDark: false, + }, + { + primary: '#3F51B5', + accent: '#E91E63', + href: 'indigo-pink.css', + isDark: false, + }, + { + primary: '#E91E63', + accent: '#607D8B', + href: 'pink-bluegrey.css', + isDark: true, + }, + { + primary: '#9C27B0', + accent: '#4CAF50', + href: 'purple-green.css', + isDark: true, + }, + ]; + + constructor( + public styleManager : StyleManager, + private _themeStorage: ThemeStorage + ) { + const currentTheme = this._themeStorage.getStoredTheme(); + if (currentTheme) { + this.installTheme(currentTheme.href); + } + } + + installTheme(href: string) { + this.currentTheme = this._getCurrentThemeFromHref(href); + this.styleManager.setStyle('theme', `assets/${href}`); + if (this.currentTheme) { + this._themeStorage.storeTheme(this.currentTheme); + } + } + + private _getCurrentThemeFromHref(href: string): DocsSiteTheme { + return this.themes.find(theme => theme.href === href); + } +} diff --git a/src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts b/src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts new file mode 100644 index 000000000..67e0c9d24 --- /dev/null +++ b/src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts @@ -0,0 +1,52 @@ +import {ThemeStorage} from './theme-storage'; + + +const testStorageKey = ThemeStorage.storageKey; +const testTheme = { + primary: '#000000', + accent: '#ffffff', + href: 'test/path/to/theme' +}; +const createTestData = () => { + window.localStorage[testStorageKey] = JSON.stringify(testTheme); +}; +const clearTestData = () => { + window.localStorage.clear(); +}; + +describe('ThemeStorage Service', () => { + const service = new ThemeStorage(); + const getCurrTheme = () => JSON.parse(window.localStorage.getItem(testStorageKey)); + const secondTestTheme = { + primary: '#666666', + accent: '#333333', + href: 'some/cool/path' + }; + + beforeEach(createTestData); + afterEach(clearTestData); + + it('should set the current theme', () => { + expect(getCurrTheme()).toEqual(testTheme); + service.storeTheme(secondTestTheme); + expect(getCurrTheme()).toEqual(secondTestTheme); + }); + + it('should get the current theme', () => { + const theme = service.getStoredTheme(); + expect(theme).toEqual(testTheme); + }); + + it('should clear the stored theme data', () => { + expect(getCurrTheme()).not.toBeNull(); + service.clearStorage(); + expect(getCurrTheme()).toBeNull(); + }); + + it('should emit an event when setTheme is called', () => { + spyOn(service.onThemeUpdate, 'emit'); + service.storeTheme(secondTestTheme); + expect(service.onThemeUpdate.emit).toHaveBeenCalled(); + expect(service.onThemeUpdate.emit).toHaveBeenCalledWith(secondTestTheme); + }); +}); diff --git a/src/app/shared/theme-chooser/theme-storage/theme-storage.ts b/src/app/shared/theme-chooser/theme-storage/theme-storage.ts new file mode 100644 index 000000000..94b241aa2 --- /dev/null +++ b/src/app/shared/theme-chooser/theme-storage/theme-storage.ts @@ -0,0 +1,30 @@ +import {Injectable, EventEmitter} from '@angular/core'; + +export interface DocsSiteTheme { + href: string; + accent: string; + primary: string; + isDark?: boolean; +}; + + +@Injectable() +export class ThemeStorage { + static storageKey = 'docs-theme-storage-current'; + + public onThemeUpdate: EventEmitter = new EventEmitter(); + + public storeTheme(theme: DocsSiteTheme) { + window.localStorage[ThemeStorage.storageKey] = JSON.stringify(theme); + this.onThemeUpdate.emit(theme); + } + + public getStoredTheme(): DocsSiteTheme { + const theme = JSON.parse(window.localStorage[ThemeStorage.storageKey] || null); + return theme + } + + public clearStorage() { + window.localStorage.removeItem(ThemeStorage.storageKey); + } +} diff --git a/src/assets/custom-themes/deeppurple-amber.scss b/src/assets/custom-themes/deeppurple-amber.scss new file mode 100644 index 000000000..160f8a9c5 --- /dev/null +++ b/src/assets/custom-themes/deeppurple-amber.scss @@ -0,0 +1,9 @@ +@import '../../app-theme'; + +// Define the light theme. +$primary: mat-palette($mat-deep-purple); +$accent: mat-palette($mat-amber, A200, A100, A400); + +$theme: mat-light-theme($primary, $accent); +@include angular-material-theme($theme); +@include material-docs-app-theme($theme); diff --git a/src/assets/custom-themes/indigo-pink.scss b/src/assets/custom-themes/indigo-pink.scss new file mode 100644 index 000000000..53d7c63c5 --- /dev/null +++ b/src/assets/custom-themes/indigo-pink.scss @@ -0,0 +1,9 @@ +@import '../../app-theme'; + +// Define the light theme. +$primary: mat-palette($mat-indigo); +$accent: mat-palette($mat-pink, A200, A100, A400); + +$theme: mat-light-theme($primary, $accent); +@include angular-material-theme($theme); +@include material-docs-app-theme($theme); diff --git a/src/assets/custom-themes/pink-bluegrey.scss b/src/assets/custom-themes/pink-bluegrey.scss new file mode 100644 index 000000000..b387673f1 --- /dev/null +++ b/src/assets/custom-themes/pink-bluegrey.scss @@ -0,0 +1,9 @@ +@import '../../app-theme'; + +// Define the dark theme. +$primary: mat-palette($mat-pink); +$accent: mat-palette($mat-blue-grey, A200, A100, A400); + +$theme: mat-dark-theme($primary, $accent); +@include angular-material-theme($theme); +@include material-docs-app-theme($theme); diff --git a/src/assets/custom-themes/purple-green.scss b/src/assets/custom-themes/purple-green.scss new file mode 100644 index 000000000..2dcb19f28 --- /dev/null +++ b/src/assets/custom-themes/purple-green.scss @@ -0,0 +1,9 @@ +@import '../../app-theme'; + +// Define the dark theme. +$primary: mat-palette($mat-purple); +$accent: mat-palette($mat-green, A200, A100, A400); + +$theme: mat-dark-theme($primary, $accent); +@include angular-material-theme($theme); +@include material-docs-app-theme($theme); diff --git a/src/assets/img/component-categories/forms.svg b/src/assets/img/component-categories/forms.svg index 4f420b423..990998182 100644 --- a/src/assets/img/component-categories/forms.svg +++ b/src/assets/img/component-categories/forms.svg @@ -1 +1 @@ -form-components \ No newline at end of file + form-components \ No newline at end of file diff --git a/src/assets/img/component-categories/modals.svg b/src/assets/img/component-categories/modals.svg index 3f65a94bc..b4ca11500 100644 --- a/src/assets/img/component-categories/modals.svg +++ b/src/assets/img/component-categories/modals.svg @@ -1 +1 @@ -modals-category \ No newline at end of file + modals-category \ No newline at end of file diff --git a/src/assets/img/components/autocomplete.svg b/src/assets/img/components/autocomplete.svg index 0dd5b2dc2..8d08a8ef6 100644 --- a/src/assets/img/components/autocomplete.svg +++ b/src/assets/img/components/autocomplete.svg @@ -1 +1 @@ -autocomplete \ No newline at end of file + autocomplete \ No newline at end of file diff --git a/src/assets/img/components/button-toggle.svg b/src/assets/img/components/button-toggle.svg index 12d6e9f17..a459e2e98 100644 --- a/src/assets/img/components/button-toggle.svg +++ b/src/assets/img/components/button-toggle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/components/checkbox.svg b/src/assets/img/components/checkbox.svg index f0828c539..045bca2a9 100644 --- a/src/assets/img/components/checkbox.svg +++ b/src/assets/img/components/checkbox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/components/progress-spinner.svg b/src/assets/img/components/progress-spinner.svg index 4f92349b9..270cc4883 100644 --- a/src/assets/img/components/progress-spinner.svg +++ b/src/assets/img/components/progress-spinner.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/components/radio.svg b/src/assets/img/components/radio.svg index 094939892..2a1055e16 100644 --- a/src/assets/img/components/radio.svg +++ b/src/assets/img/components/radio.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/components/select.svg b/src/assets/img/components/select.svg index fbfbd7b42..7692d241e 100644 --- a/src/assets/img/components/select.svg +++ b/src/assets/img/components/select.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/components/slider.svg b/src/assets/img/components/slider.svg index 51482b3f4..8d6190543 100644 --- a/src/assets/img/components/slider.svg +++ b/src/assets/img/components/slider.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/homepage/fastandconsistent.svg b/src/assets/img/homepage/fastandconsistent.svg index 96d9c19eb..becf326c3 100644 --- a/src/assets/img/homepage/fastandconsistent.svg +++ b/src/assets/img/homepage/fastandconsistent.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/homepage/material_splash.svg b/src/assets/img/homepage/material_splash.svg index dbb1ac4eb..41f4aeda0 100644 --- a/src/assets/img/homepage/material_splash.svg +++ b/src/assets/img/homepage/material_splash.svg @@ -1,85 +1 @@ - - - Material Splash - Homepage Hero Background - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - + - - - - - - + - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Material Splash Homepage Hero Background + + + + diff --git a/src/assets/img/homepage/optimized.svg b/src/assets/img/homepage/optimized.svg index 54bc90b4e..83adf6e39 100644 --- a/src/assets/img/homepage/optimized.svg +++ b/src/assets/img/homepage/optimized.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/homepage/sprintzerotoapp.svg b/src/assets/img/homepage/sprintzerotoapp.svg index 35715ccec..4f69ccabe 100644 --- a/src/assets/img/homepage/sprintzerotoapp.svg +++ b/src/assets/img/homepage/sprintzerotoapp.svg @@ -1 +1 @@ -+ \ No newline at end of file + + \ No newline at end of file diff --git a/src/assets/img/homepage/versatile.svg b/src/assets/img/homepage/versatile.svg index bdaed0d70..f95c1562e 100644 --- a/src/assets/img/homepage/versatile.svg +++ b/src/assets/img/homepage/versatile.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/main.scss b/src/main.scss index 997c8b60c..1c90e5b3d 100644 --- a/src/main.scss +++ b/src/main.scss @@ -3,6 +3,7 @@ @import './styles/api'; @import './styles/markdown'; @import './styles/tables'; +@import './styles/general'; // Include material core styles. @@ -16,38 +17,3 @@ $accent: mat-palette($mat-amber, A200, A100, A400); $theme: mat-light-theme($primary, $accent); @include angular-material-theme($theme); @include material-docs-app-theme($theme); - -body { - font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; - margin: 0; -} - -.docs-button[md-button], .docs-button[md-raised-button] { - text-transform: uppercase; -} - -h1, h2 { - font-weight: 400; -} - -pre { - // Pre elements won't wrap text by default and can exceed the boundaries of their parent element. - // This adds extra scroll space when visiting the docs mobile. Pre-wrapping the code examples - // will ensure that the code never exceeds the page width. - white-space: pre-wrap; -} - -.docs-primary-header { - padding-left: 20px; - - h1 { - font-size: 30px; - font-weight: 300; - margin: 0; - padding: 50px; - } -} - -code { - font-size: 90%; -} diff --git a/src/styles/_api-theme.scss b/src/styles/_api-theme.scss index eda4b4665..59cb40875 100644 --- a/src/styles/_api-theme.scss +++ b/src/styles/_api-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/theming'; +@import '../../node_modules/@angular/material/theming'; // Mixin to apply theme colors for generated API docs. @mixin docs-site-api-theme($theme) { diff --git a/src/styles/_general.scss b/src/styles/_general.scss new file mode 100644 index 000000000..b15f1e478 --- /dev/null +++ b/src/styles/_general.scss @@ -0,0 +1,57 @@ +body { + font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; + margin: 0; +} + +.docs-button[md-button], .docs-button[md-raised-button] { + text-transform: uppercase; +} + +h1, h2 { + font-weight: 400; +} + +pre { + // Pre elements won't wrap text by default and can exceed the boundaries of their parent element. + // This adds extra scroll space when visiting the docs mobile. Pre-wrapping the code examples + // will ensure that the code never exceeds the page width. + white-space: pre-wrap; +} + +.docs-primary-header { + padding-left: 20px; + + h1 { + font-size: 30px; + font-weight: 300; + margin: 0; + padding: 50px; + } +} + +code { + font-size: 90%; +} + +// These styles are for controlling SVGs without using the /deep/ selector + +.docs-component-category-list-card-image svg { + width: 100%; +} + +.docs-footer-angular-logo svg { + height: 50px; +} + +.docs-angular-logo svg { + height: 26px; + margin: 0 4px 3px 0; + vertical-align: middle; +} + +.docs-github-logo svg { + height: 21px; + margin: 0 7px 2px 0; + vertical-align: middle; +} + diff --git a/src/styles/_markdown-theme.scss b/src/styles/_markdown-theme.scss index 9ad46e8cb..0e12b18b9 100644 --- a/src/styles/_markdown-theme.scss +++ b/src/styles/_markdown-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/theming'; +@import '../../node_modules/@angular/material/theming'; // Mixin to apply theme colors for docs generated from markdown files in the material2 repo. @mixin docs-site-markdown-theme($theme) { diff --git a/src/styles/_tables-theme.scss b/src/styles/_tables-theme.scss index 92beea549..85be809c4 100644 --- a/src/styles/_tables-theme.scss +++ b/src/styles/_tables-theme.scss @@ -1,4 +1,4 @@ -@import '~@angular/material/theming'; +@import '../../node_modules/@angular/material/theming'; // Mixin to apply theme colors for both generated API docs and markdown docs (guides/overviews). @mixin docs-site-tables-theme($theme) { diff --git a/tools/build-themes.sh b/tools/build-themes.sh new file mode 100755 index 000000000..1952d792c --- /dev/null +++ b/tools/build-themes.sh @@ -0,0 +1,19 @@ +#!/bin/bash + +DEST_PATH=src/assets +INPUT_PATH=$DEST_PATH/custom-themes/ + + +echo Building custom theme scss files. + +# Get the files +FILES=$(find src/assets/custom-themes -name "*.scss") + +for FILE in $FILES +do + FILENAME=${FILE#$INPUT_PATH} + BASENAME=${FILENAME%.scss} + $(npm bin)/node-sass $FILE > $DEST_PATH/$BASENAME.css +done + +echo Finished building CSS.