Revert "update: add button to toggle theme in demo-app" (#3271)

angular · Feb 23, 2017 · ca56ebb · ca56ebb
1 parent a4da08b
commit ca56ebb
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 100 deletions.
diff --git a/src/demo-app/button/button-demo.scss b/src/demo-app/button/button-demo.scss
@@ -8,6 +8,7 @@
   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
diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
@@ -1,46 +1,41 @@
-<!-- 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>
+<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>
+      <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()}}
         </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>
-  </md-sidenav-container>
-</div>
+  </div>
+</md-sidenav-container>
diff --git a/src/demo-app/demo-app/demo-app.scss b/src/demo-app/demo-app/demo-app.scss
@@ -31,6 +31,7 @@ body {
 
     .demo-toolbar {
       display: flex;
+      justify-content: space-between;
       width: 100%;
     }
   }
@@ -40,11 +41,6 @@ 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
@@ -15,14 +15,10 @@ export class Home {}
   selector: 'demo-app',
   providers: [],
   templateUrl: 'demo-app.html',
-  styleUrls: ['demo-app.css', 'demo-app-theme.css'],
+  styleUrls: ['demo-app.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
@@ -8,6 +8,7 @@
 
   <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
@@ -3,7 +3,7 @@ <h1>md-list demo</h1>
 
 <button md-raised-button (click)="thirdLine=!thirdLine" class="demo-button">Show third line</button>
 
-<div class="list-demo">
+<div class="demo">
   <div>
     <h2>Normal lists</h2>
 

diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss
@@ -1,4 +1,5 @@
-.list-demo {
+
+.demo {
   display: flex;
   flex-flow: row wrap;
 
@@ -8,32 +9,20 @@
     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);
 
-  .list-demo .mat-icon {
-    color: rgba($base-color, 0.12);
+  .mat-icon {
+    color: rgba(0, 0, 0, 0.12);
   }
 
-  .list-demo .mat-list-icon {
+  .mat-list-icon {
     color: white;
-    background: rgba($base-color, 0.3);
-  }
-
-  .list-demo .demo-secondary-text {
-    color: rgba($base-color, 0.54);
+    background: rgba(0, 0, 0, 0.3);
   }
 }
 
-@include demo-list-item-theme(false);
-
-.demo-dark-theme {
-  @include demo-list-item-theme(true);
+.demo-secondary-text {
+  color: rgba(0, 0, 0, 0.54);
 }
diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
@@ -1,12 +1,11 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 
 
 @Component({
   moduleId: module.id,
   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
@@ -4,6 +4,7 @@
 }
 
 .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
@@ -1,6 +1,9 @@
 .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 {
@@ -12,6 +15,9 @@
 .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
@@ -17,10 +17,6 @@ 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
@@ -2,10 +2,7 @@ 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,
-  SASS_PREPROCESSOR_OPTIONS
-} from './constants';
+import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS} from './constants';
 
 
 /** Those imports lack typings. */
@@ -47,7 +44,7 @@ export function sassBuildTask(dest: string, root: string) {
   return () => {
     return gulp.src(_globify(root, '**/*.scss'))
       .pipe(gulpSourcemaps.init())
-      .pipe(gulpSass(SASS_PREPROCESSOR_OPTIONS).on('error', gulpSass.logError))
+      .pipe(gulpSass().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
@@ -12,7 +12,7 @@ task('aot:copy', [':build:devapp:scss', ':build:devapp:assets']);
  */
 task('aot:prepare', sequenceTask(
   'clean',
-  ['build:components:release', 'aot:copy', ':build:components:ngc'])
+  ['aot:copy', 'build:components:release', ':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
@@ -20,7 +20,7 @@ task(':watch:devapp', () => {
 
 task(':build:devapp:vendor', vendorTask());
 task(':build:devapp:ts', tsBuildTask(appDir));
-task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
+task(':build:devapp:scss', sassBuildTask(outDir, appDir));
 task(':build:devapp:assets', copyTask(appDir, outDir));
 task('build:devapp', buildAppTask('devapp'));