From 47cc025e4bd0fd2061fa704c1c0b54ca7526d336 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 23 Feb 2017 00:30:36 +0100
Subject: [PATCH] chore: add button to toggle theme in demo-app (#3093)

* 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.

* Improve list-demo in dark-theme

* Fix stylelint

* Address comments
---
 src/demo-app/button/button-demo.scss      |  1 -
 src/demo-app/demo-app/demo-app-theme.scss | 16 +++++
 src/demo-app/demo-app/demo-app.html       | 77 ++++++++++++-----------
 src/demo-app/demo-app/demo-app.scss       |  6 +-
 src/demo-app/demo-app/demo-app.ts         |  6 +-
 src/demo-app/index.html                   |  1 -
 src/demo-app/list/list-demo.html          |  2 +-
 src/demo-app/list/list-demo.scss          | 27 +++++---
 src/demo-app/list/list-demo.ts            |  3 +-
 src/demo-app/radio/radio-demo.scss        |  1 -
 src/demo-app/tabs/tabs-demo.scss          |  6 --
 tools/gulp/constants.ts                   |  4 ++
 tools/gulp/task_helpers.ts                |  7 ++-
 tools/gulp/tasks/aot.ts                   |  2 +-
 tools/gulp/tasks/development.ts           |  2 +-
 15 files changed, 100 insertions(+), 61 deletions(-)
 create mode 100644 src/demo-app/demo-app/demo-app-theme.scss

diff --git a/src/demo-app/button/button-demo.scss b/src/demo-app/button/button-demo.scss
index 9cb6349e0ef..d577ca66b0e 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-theme.scss b/src/demo-app/demo-app/demo-app-theme.scss
new file mode 100644
index 00000000000..335c4fc30f8
--- /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.html b/src/demo-app/demo-app/demo-app.html
index fe1fab9478c..05059fbead3 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/src/demo-app/demo-app/demo-app.html
@@ -1,41 +1,46 @@
-<md-sidenav-container class="demo-root" fullscreen>
-  <md-sidenav #start>
-    <md-nav-list>
-      <a *ngFor="let navItem of navItems"
-         md-list-item
-         (click)="start.close()"
-         [routerLink]="[navItem.route]">
-        {{navItem.name}}
-      </a>
+<!-- Theme class needs to be applied above sidenav-container to style content background. -->
+<div [class.demo-dark-theme]="isDarkTheme">
+  <md-sidenav-container class="demo-root" fullscreen>
+    <md-sidenav #start>
+      <md-nav-list>
+        <a *ngFor="let navItem of navItems"
+           md-list-item
+           (click)="start.close()"
+           [routerLink]="[navItem.route]">
+          {{navItem.name}}
+        </a>
 
-      <hr>
+        <hr>
 
-      <a md-list-item
-         (click)="start.close()"
-         [routerLink]="['baseline']">
-        Baseline
-      </a>
-    </md-nav-list>
-    <button md-button (click)="start.close()">CLOSE</button>
-  </md-sidenav>
-  <div>
-    <md-toolbar color="primary">
-      <button md-icon-button (click)="start.open()">
-        <md-icon class="md-24" >menu</md-icon>
-      </button>
-      <div class="demo-toolbar">
-        <h1>Angular Material Demos</h1>
-        <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-          Fullscreen
-        </button>
-        <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
-          {{root.dir.toUpperCase()}}
+        <a md-list-item
+           (click)="start.close()"
+           [routerLink]="['baseline']">
+          Baseline
+        </a>
+      </md-nav-list>
+      <button md-button (click)="start.close()">CLOSE</button>
+    </md-sidenav>
+    <div>
+      <md-toolbar color="primary">
+        <button md-icon-button (click)="start.open()">
+          <md-icon class="md-24" >menu</md-icon>
         </button>
+        <div class="demo-toolbar">
+          <h1>Angular Material Demos</h1>
+          <span class="demo-flex-fill"></span>
+          <button md-button (click)="isDarkTheme = !isDarkTheme">Toggle Theme</button>
+          <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+            Fullscreen
+          </button>
+          <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
+            {{root.dir.toUpperCase()}}
+          </button>
+        </div>
+      </md-toolbar>
+
+      <div #root="$implicit" dir="ltr" class="demo-content">
+        <router-outlet></router-outlet>
       </div>
-    </md-toolbar>
-
-    <div #root="$implicit" dir="ltr" class="demo-content">
-      <router-outlet></router-outlet>
     </div>
-  </div>
-</md-sidenav-container>
+  </md-sidenav-container>
+</div>
diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss
index ee4512261ed..e9aa59c35ba 100644
--- a/src/demo-app/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app/demo-app.scss
@@ -31,7 +31,6 @@ body {
 
     .demo-toolbar {
       display: flex;
-      justify-content: space-between;
       width: 100%;
     }
   }
@@ -41,6 +40,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 746a1805691..fa47fcb43c7 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -15,10 +15,14 @@ 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 {
+
+  /** 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/index.html b/src/demo-app/index.html
index 3099472c863..574095f01c7 100644
--- a/src/demo-app/index.html
+++ b/src/demo-app/index.html
@@ -8,7 +8,6 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index 5cb977fb51e..312cce6f7d5 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -3,7 +3,7 @@
 
 <button md-raised-button (click)="thirdLine=!thirdLine" class="demo-button">Show third line</button>
 
-<div class="demo">
+<div class="list-demo">
   <div>
     <h2>Normal lists</h2>
 
diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss
index bcf8a770c38..950dc986900 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;
   }
+}
 
-  .mat-icon {
-    color: rgba(0, 0, 0, 0.12);
+/* Theme for the list-item demo elements. */
+@mixin demo-list-item-theme($dark: false) {
+  $base-color: if($dark, white, black);
+
+  .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 73ed3ceee7b..be402e9c5ec 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[] = [
diff --git a/src/demo-app/radio/radio-demo.scss b/src/demo-app/radio/radio-demo.scss
index 9a37d4da430..ee738628af6 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 d10e259e7e5..f1ade3b04fc 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;
   }
diff --git a/tools/gulp/constants.ts b/tools/gulp/constants.ts
index b2811415da3..925a17e9a03 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 68f9f8e24b7..d4a46412ed7 100644
--- a/tools/gulp/task_helpers.ts
+++ b/tools/gulp/task_helpers.ts
@@ -2,7 +2,10 @@ import * as child_process from 'child_process';
 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 07353553243..334524eac4b 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 846d4eecd25..2da68e739b4 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'));