skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add button to toggle theme in demo-app (#3093)

Browse Source 
* 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
This commit is contained in:
Paul Gschwendtner
2017-02-23 00:30:36 +01:00
committed by mmalerba
parent 194714ac83
commit 47cc025e4b
15 changed files with 100 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/button/button-demo.scss
-1
View File
@@ -8,7 +8,6 @@
section {
display: flex;
align-items: center;
background-color: #f7f7f7;
margin: 8px;
}
src/demo-app/demo-app/demo-app-theme.scss
+16
View File
@@ -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);
}
src/demo-app/demo-app/demo-app.html
+41 -36
View File
@@ -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>
src/demo-app/demo-app/demo-app.scss
+5 -1
View File
@@ -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%;
src/demo-app/demo-app/demo-app.ts
+5 -1
View File
@@ -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'},
src/demo-app/index.html
-1
View File
@@ -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">
src/demo-app/list/list-demo.html
+1 -1
View File
@@ -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>
src/demo-app/list/list-demo.scss
+19 -8
View File
@@ -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);
}
src/demo-app/list/list-demo.ts
+2 -1
View File
@@ -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[] = [
src/demo-app/radio/radio-demo.scss
-1
View File
@@ -4,7 +4,6 @@
}
.demo-section {
background-color: #f7f7f7;
margin: 8px;
padding: 16px;
src/demo-app/tabs/tabs-demo.scss
-6
View File
@@ -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;
}
tools/gulp/constants.ts
+4
View File
@@ -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,
tools/gulp/task_helpers.ts
+5 -2
View File
@@ -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));
tools/gulp/tasks/aot.ts
+1 -1
View File
@@ -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. */
tools/gulp/tasks/development.ts
+1 -1
View File
@@ -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'));