From a3b9f8d2665585c354885c4ed79797d8f7688130 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 14 Feb 2017 19:09:26 +0100 Subject: [PATCH 1/4] update: add button to toggle theme in demo-app * Adds a button to the demo-app toolbar that allows developers to quickly change between dark and light Material themes. This is very useful when building new components or just when confirming that all components work with dark themes. --- src/demo-app/button/button-demo.scss | 1 - src/demo-app/demo-app/demo-app.html | 77 +++++++++++++++------------- src/demo-app/demo-app/demo-app.scss | 22 +++++++- src/demo-app/demo-app/demo-app.ts | 4 ++ src/demo-app/radio/radio-demo.scss | 1 - src/demo-app/tabs/tabs-demo.scss | 6 --- 6 files changed, 66 insertions(+), 45 deletions(-) diff --git a/src/demo-app/button/button-demo.scss b/src/demo-app/button/button-demo.scss index 9cb6349e0ef8..d577ca66b0e5 100644 --- a/src/demo-app/button/button-demo.scss +++ b/src/demo-app/button/button-demo.scss @@ -8,7 +8,6 @@ section { display: flex; align-items: center; - background-color: #f7f7f7; margin: 8px; } diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html index fe1fab9478cc..05059fbead36 100644 --- a/src/demo-app/demo-app/demo-app.html +++ b/src/demo-app/demo-app/demo-app.html @@ -1,41 +1,46 @@ - - - - - {{navItem.name}} - + +
+ + + + + {{navItem.name}} + -
+
- - Baseline - - - - -
- - -
-

Angular Material Demos

- + +
+ + - -
- +
+

Angular Material Demos

+ + + + +
+ -
- +
+ +
-
- + +
diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss index d1b8650029dd..d1e3726f1a81 100644 --- a/src/demo-app/demo-app/demo-app.scss +++ b/src/demo-app/demo-app/demo-app.scss @@ -1,3 +1,19 @@ +// The default indigo-pink theme will load through the index file. This makes the SCSS build faster +// since Sass doesn't need to build a "prebuilt" theme again. +@import '../../lib/core/theming/all-theme'; + +.demo-dark-theme { + // Include core material styles. + @include mat-core(); + + $primary: mat-palette($mat-indigo); + $accent: mat-palette($mat-pink); + $dark-theme: mat-dark-theme($primary, $accent); + + // Include component styles with the given theme. + @include angular-material-theme($dark-theme); +} + body { font-family: Roboto, 'Helvetica Neue', sans-serif; @@ -31,7 +47,6 @@ body { .demo-toolbar { display: flex; - justify-content: space-between; width: 100%; } } @@ -41,6 +56,11 @@ body { } } +// Fills remaining flex space. +.demo-flex-fill { + flex: 1 1 auto; +} + // stretch to screen size in fullscreen mode .demo-content { width: 100%; diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index cdbdcd904484..d4d8b376e2e6 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -19,6 +19,10 @@ export class Home {} encapsulation: ViewEncapsulation.None, }) export class DemoApp { + + /** Whether the demo-app should use a dark theme or not. */ + isDarkTheme: boolean = false; + navItems = [ {name: 'Autocomplete', route: 'autocomplete'}, {name: 'Button', route: 'button'}, diff --git a/src/demo-app/radio/radio-demo.scss b/src/demo-app/radio/radio-demo.scss index 9a37d4da430a..ee738628af6a 100644 --- a/src/demo-app/radio/radio-demo.scss +++ b/src/demo-app/radio/radio-demo.scss @@ -4,7 +4,6 @@ } .demo-section { - background-color: #f7f7f7; margin: 8px; padding: 16px; diff --git a/src/demo-app/tabs/tabs-demo.scss b/src/demo-app/tabs/tabs-demo.scss index d10e259e7e5e..f1ade3b04fcd 100644 --- a/src/demo-app/tabs/tabs-demo.scss +++ b/src/demo-app/tabs/tabs-demo.scss @@ -1,9 +1,6 @@ .demo-nav-bar { border: 1px solid #e0e0e0; margin-bottom: 40px; - .mat-tab-nav-bar { - background: #f9f9f9; - } sunny-routed-content, rainy-routed-content, foggy-routed-content { @@ -15,9 +12,6 @@ .demo-tab-group { border: 1px solid #e0e0e0; margin-bottom: 40px; - .mat-tab-header { - background: #f9f9f9; - } .mat-tab-body-content { padding: 12px; } From f981ce76b6fcc739264c62516e1ab9e59d1d8f88 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 14 Feb 2017 20:20:16 +0100 Subject: [PATCH 2/4] Improve list-demo in dark-theme --- src/demo-app/list/list-demo.html | 2 +- src/demo-app/list/list-demo.scss | 27 +++++++++++++++++++-------- src/demo-app/list/list-demo.ts | 3 ++- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html index 5cb977fb51e9..312cce6f7d53 100644 --- a/src/demo-app/list/list-demo.html +++ b/src/demo-app/list/list-demo.html @@ -3,7 +3,7 @@

md-list demo

-
+

Normal lists

diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss index bcf8a770c381..87c2edde598d 100644 --- a/src/demo-app/list/list-demo.scss +++ b/src/demo-app/list/list-demo.scss @@ -1,5 +1,4 @@ - -.demo { +.list-demo { display: flex; flex-flow: row wrap; @@ -9,20 +8,32 @@ margin: 20px 20px 0 0; } + h2 { margin-top: 20px; } +} + +/* Theme for the list-item demo elements. */ +@mixin demo-list-item-theme($dark: false) { + $base-color: if($dark, white, black); - .mat-icon { - color: rgba(0, 0, 0, 0.12); + .list-demo .mat-icon { + color: rgba($base-color, 0.12); } - .mat-list-icon { + .list-demo .mat-list-icon { color: white; - background: rgba(0, 0, 0, 0.3); + background: rgba($base-color, 0.3); + } + + .list-demo .demo-secondary-text { + color: rgba($base-color, 0.54); } } -.demo-secondary-text { - color: rgba(0, 0, 0, 0.54); +@include demo-list-item-theme(false); + +.demo-dark-theme { + @include demo-list-item-theme(true) } diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts index 73ed3ceee7b6..be402e9c5ec6 100644 --- a/src/demo-app/list/list-demo.ts +++ b/src/demo-app/list/list-demo.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, ViewEncapsulation} from '@angular/core'; @Component({ @@ -6,6 +6,7 @@ import {Component} from '@angular/core'; selector: 'list-demo', templateUrl: 'list-demo.html', styleUrls: ['list-demo.css'], + encapsulation: ViewEncapsulation.None }) export class ListDemo { items: string[] = [ From acfa1beb340a9f7c53e51439d7f50672180507a2 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 14 Feb 2017 20:46:05 +0100 Subject: [PATCH 3/4] Fix stylelint --- src/demo-app/list/list-demo.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss index 87c2edde598d..950dc9869007 100644 --- a/src/demo-app/list/list-demo.scss +++ b/src/demo-app/list/list-demo.scss @@ -35,5 +35,5 @@ @include demo-list-item-theme(false); .demo-dark-theme { - @include demo-list-item-theme(true) + @include demo-list-item-theme(true); } From c285d15760e5e825ffcce859c96364f3d24c2371 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sat, 18 Feb 2017 13:01:02 +0100 Subject: [PATCH 4/4] Address comments --- src/demo-app/demo-app/demo-app-theme.scss | 16 ++++++++++++++++ src/demo-app/demo-app/demo-app.scss | 16 ---------------- src/demo-app/demo-app/demo-app.ts | 2 +- src/demo-app/index.html | 1 - tools/gulp/constants.ts | 4 ++++ tools/gulp/task_helpers.ts | 7 +++++-- tools/gulp/tasks/aot.ts | 2 +- tools/gulp/tasks/development.ts | 2 +- 8 files changed, 28 insertions(+), 22 deletions(-) create mode 100644 src/demo-app/demo-app/demo-app-theme.scss diff --git a/src/demo-app/demo-app/demo-app-theme.scss b/src/demo-app/demo-app/demo-app-theme.scss new file mode 100644 index 000000000000..335c4fc30f8f --- /dev/null +++ b/src/demo-app/demo-app/demo-app-theme.scss @@ -0,0 +1,16 @@ +@import '@angular/material/core/theming/all-theme'; + +// Include core material styles. +@include mat-core(); + +$primary: mat-palette($mat-indigo); +$accent: mat-palette($mat-pink); + +$light-theme: mat-light-theme($primary, $accent); +$dark-theme: mat-dark-theme($primary, $accent); + +@include angular-material-theme($light-theme); + +.demo-dark-theme { + @include angular-material-theme($dark-theme); +} diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss index d1e3726f1a81..df853dd1a4f7 100644 --- a/src/demo-app/demo-app/demo-app.scss +++ b/src/demo-app/demo-app/demo-app.scss @@ -1,19 +1,3 @@ -// The default indigo-pink theme will load through the index file. This makes the SCSS build faster -// since Sass doesn't need to build a "prebuilt" theme again. -@import '../../lib/core/theming/all-theme'; - -.demo-dark-theme { - // Include core material styles. - @include mat-core(); - - $primary: mat-palette($mat-indigo); - $accent: mat-palette($mat-pink); - $dark-theme: mat-dark-theme($primary, $accent); - - // Include component styles with the given theme. - @include angular-material-theme($dark-theme); -} - body { font-family: Roboto, 'Helvetica Neue', sans-serif; diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index d4d8b376e2e6..fefd419db8dc 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -15,7 +15,7 @@ export class Home {} selector: 'demo-app', providers: [], templateUrl: 'demo-app.html', - styleUrls: ['demo-app.css'], + styleUrls: ['demo-app.css', 'demo-app-theme.css'], encapsulation: ViewEncapsulation.None, }) export class DemoApp { diff --git a/src/demo-app/index.html b/src/demo-app/index.html index 3099472c8633..574095f01c79 100644 --- a/src/demo-app/index.html +++ b/src/demo-app/index.html @@ -8,7 +8,6 @@ - diff --git a/tools/gulp/constants.ts b/tools/gulp/constants.ts index b2811415da31..925a17e9a033 100644 --- a/tools/gulp/constants.ts +++ b/tools/gulp/constants.ts @@ -17,6 +17,10 @@ export const SASS_AUTOPREFIXER_OPTIONS = { cascade: false, }; +export const SASS_PREPROCESSOR_OPTIONS = { + includePaths: [DIST_ROOT] +}; + export const HTML_MINIFIER_OPTIONS = { collapseWhitespace: true, removeComments: true, diff --git a/tools/gulp/task_helpers.ts b/tools/gulp/task_helpers.ts index ffeffc59af19..7df1dac3f93e 100644 --- a/tools/gulp/task_helpers.ts +++ b/tools/gulp/task_helpers.ts @@ -3,7 +3,10 @@ import * as fs from 'fs'; import * as gulp from 'gulp'; import * as path from 'path'; -import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS} from './constants'; +import { + NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS, + SASS_PREPROCESSOR_OPTIONS +} from './constants'; /** Those imports lack typings. */ @@ -44,7 +47,7 @@ export function sassBuildTask(dest: string, root: string) { return () => { return gulp.src(_globify(root, '**/*.scss')) .pipe(gulpSourcemaps.init()) - .pipe(gulpSass().on('error', gulpSass.logError)) + .pipe(gulpSass(SASS_PREPROCESSOR_OPTIONS).on('error', gulpSass.logError)) .pipe(gulpAutoprefixer(SASS_AUTOPREFIXER_OPTIONS)) .pipe(gulpSourcemaps.write('.')) .pipe(gulp.dest(dest)); diff --git a/tools/gulp/tasks/aot.ts b/tools/gulp/tasks/aot.ts index 073535532435..334524eac4b8 100644 --- a/tools/gulp/tasks/aot.ts +++ b/tools/gulp/tasks/aot.ts @@ -12,7 +12,7 @@ task('aot:copy', [':build:devapp:scss', ':build:devapp:assets']); */ task('aot:prepare', sequenceTask( 'clean', - ['aot:copy', 'build:components:release', ':build:components:ngc']) + ['build:components:release', 'aot:copy', ':build:components:ngc']) ); /** Builds the demo-app with the Angular compiler to verify that all components work. */ diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts index 846d4eecd257..2da68e739b4a 100644 --- a/tools/gulp/tasks/development.ts +++ b/tools/gulp/tasks/development.ts @@ -20,7 +20,7 @@ task(':watch:devapp', () => { task(':build:devapp:vendor', vendorTask()); task(':build:devapp:ts', tsBuildTask(appDir)); -task(':build:devapp:scss', sassBuildTask(outDir, appDir)); +task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir)); task(':build:devapp:assets', copyTask(appDir, outDir)); task('build:devapp', buildAppTask('devapp'));