Skip to content

Commit ca56ebb

Browse files
mmalerbammalerba
authored
Revert "update: add button to toggle theme in demo-app" (#3271)
1 parent a4da08b commit ca56ebb

15 files changed

+61
-100
lines changed

‎src/demo-app/button/button-demo.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
section {
99
display: flex;
1010
align-items: center;
11+
background-color: #f7f7f7;
1112
margin: 8px;
1213
}
1314

‎src/demo-app/demo-app/demo-app-theme.scss

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/demo-app/demo-app/demo-app.html

Lines changed: 36 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,41 @@
1-
<!-- Theme class needs to be applied above sidenav-container to style content background. -->
2-
<div [class.demo-dark-theme]="isDarkTheme">
3-
<md-sidenav-container class="demo-root" fullscreen>
4-
<md-sidenav #start>
5-
<md-nav-list>
6-
<a *ngFor="let navItem of navItems"
7-
md-list-item
8-
(click)="start.close()"
9-
[routerLink]="[navItem.route]">
10-
{{navItem.name}}
11-
</a>
1+
<md-sidenav-container class="demo-root" fullscreen>
2+
<md-sidenav #start>
3+
<md-nav-list>
4+
<a *ngFor="let navItem of navItems"
5+
md-list-item
6+
(click)="start.close()"
7+
[routerLink]="[navItem.route]">
8+
{{navItem.name}}
9+
</a>
1210

13-
<hr>
11+
<hr>
1412

15-
<a md-list-item
16-
(click)="start.close()"
17-
[routerLink]="['baseline']">
18-
Baseline
19-
</a>
20-
</md-nav-list>
21-
<button md-button (click)="start.close()">CLOSE</button>
22-
</md-sidenav>
23-
<div>
24-
<md-toolbar color="primary">
25-
<button md-icon-button (click)="start.open()">
26-
<md-icon class="md-24" >menu</md-icon>
13+
<a md-list-item
14+
(click)="start.close()"
15+
[routerLink]="['baseline']">
16+
Baseline
17+
</a>
18+
</md-nav-list>
19+
<button md-button (click)="start.close()">CLOSE</button>
20+
</md-sidenav>
21+
<div>
22+
<md-toolbar color="primary">
23+
<button md-icon-button (click)="start.open()">
24+
<md-icon class="md-24" >menu</md-icon>
25+
</button>
26+
<div class="demo-toolbar">
27+
<h1>Angular Material Demos</h1>
28+
<button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
29+
Fullscreen
30+
</button>
31+
<button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
32+
{{root.dir.toUpperCase()}}
2733
</button>
28-
<div class="demo-toolbar">
29-
<h1>Angular Material Demos</h1>
30-
<span class="demo-flex-fill"></span>
31-
<button md-button (click)="isDarkTheme = !isDarkTheme">Toggle Theme</button>
32-
<button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
33-
Fullscreen
34-
</button>
35-
<button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
36-
{{root.dir.toUpperCase()}}
37-
</button>
38-
</div>
39-
</md-toolbar>
40-
41-
<div #root="$implicit" dir="ltr" class="demo-content">
42-
<router-outlet></router-outlet>
4334
</div>
35+
</md-toolbar>
36+
37+
<div #root="$implicit" dir="ltr" class="demo-content">
38+
<router-outlet></router-outlet>
4439
</div>
45-
</md-sidenav-container>
46-
</div>
40+
</div>
41+
</md-sidenav-container>

‎src/demo-app/demo-app/demo-app.scss

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ body {
3131

3232
.demo-toolbar {
3333
display: flex;
34+
justify-content: space-between;
3435
width: 100%;
3536
}
3637
}
@@ -40,11 +41,6 @@ body {
4041
}
4142
}
4243

43-
// Fills remaining flex space.
44-
.demo-flex-fill {
45-
flex: 1 1 auto;
46-
}
47-
4844
// stretch to screen size in fullscreen mode
4945
.demo-content {
5046
width: 100%;

‎src/demo-app/demo-app/demo-app.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,10 @@ export class Home {}
1515
selector: 'demo-app',
1616
providers: [],
1717
templateUrl: 'demo-app.html',
18-
styleUrls: ['demo-app.css', 'demo-app-theme.css'],
18+
styleUrls: ['demo-app.css'],
1919
encapsulation: ViewEncapsulation.None,
2020
})
2121
export class DemoApp {
22-
23-
/** Whether the demo-app should use a dark theme or not. */
24-
isDarkTheme: boolean = false;
25-
2622
navItems = [
2723
{name: 'Autocomplete', route: 'autocomplete'},
2824
{name: 'Button', route: 'button'},

‎src/demo-app/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
<link rel="icon" type="image/x-icon" href="favicon.ico">
1010
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11+
<link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
1112

1213
<!-- FontAwesome for md-icon demo. -->
1314
<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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ <h1>md-list demo</h1>
33

44
<button md-raised-button (click)="thirdLine=!thirdLine" class="demo-button">Show third line</button>
55

6-
<div class="list-demo">
6+
<div class="demo">
77
<div>
88
<h2>Normal lists</h2>
99

‎src/demo-app/list/list-demo.scss

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
.list-demo {
1+
2+
.demo {
23
display: flex;
34
flex-flow: row wrap;
45

@@ -8,32 +9,20 @@
89
margin: 20px 20px 0 0;
910

1011
}
11-
1212
h2 {
1313
margin-top: 20px;
1414
}
15-
}
16-
17-
/* Theme for the list-item demo elements. */
18-
@mixin demo-list-item-theme($dark: false) {
19-
$base-color: if($dark, white, black);
2015

21-
.list-demo .mat-icon {
22-
color: rgba($base-color, 0.12);
16+
.mat-icon {
17+
color: rgba(0, 0, 0, 0.12);
2318
}
2419

25-
.list-demo .mat-list-icon {
20+
.mat-list-icon {
2621
color: white;
27-
background: rgba($base-color, 0.3);
28-
}
29-
30-
.list-demo .demo-secondary-text {
31-
color: rgba($base-color, 0.54);
22+
background: rgba(0, 0, 0, 0.3);
3223
}
3324
}
3425

35-
@include demo-list-item-theme(false);
36-
37-
.demo-dark-theme {
38-
@include demo-list-item-theme(true);
26+
.demo-secondary-text {
27+
color: rgba(0, 0, 0, 0.54);
3928
}

‎src/demo-app/list/list-demo.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import {Component, ViewEncapsulation} from '@angular/core';
1+
import {Component} from '@angular/core';
22

33

44
@Component({
55
moduleId: module.id,
66
selector: 'list-demo',
77
templateUrl: 'list-demo.html',
88
styleUrls: ['list-demo.css'],
9-
encapsulation: ViewEncapsulation.None
109
})
1110
export class ListDemo {
1211
items: string[] = [

‎src/demo-app/radio/radio-demo.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
}
55

66
.demo-section {
7+
background-color: #f7f7f7;
78
margin: 8px;
89
padding: 16px;
910

‎src/demo-app/tabs/tabs-demo.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
.demo-nav-bar {
22
border: 1px solid #e0e0e0;
33
margin-bottom: 40px;
4+
.mat-tab-nav-bar {
5+
background: #f9f9f9;
6+
}
47
sunny-routed-content,
58
rainy-routed-content,
69
foggy-routed-content {
@@ -12,6 +15,9 @@
1215
.demo-tab-group {
1316
border: 1px solid #e0e0e0;
1417
margin-bottom: 40px;
18+
.mat-tab-header {
19+
background: #f9f9f9;
20+
}
1521
.mat-tab-body-content {
1622
padding: 12px;
1723
}

‎tools/gulp/constants.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ export const SASS_AUTOPREFIXER_OPTIONS = {
1717
cascade: false,
1818
};
1919

20-
export const SASS_PREPROCESSOR_OPTIONS = {
21-
includePaths: [DIST_ROOT]
22-
};
23-
2420
export const HTML_MINIFIER_OPTIONS = {
2521
collapseWhitespace: true,
2622
removeComments: true,

‎tools/gulp/task_helpers.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import * as child_process from 'child_process';
22
import * as fs from 'fs';
33
import * as gulp from 'gulp';
44
import * as path from 'path';
5-
import {
6-
NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS,
7-
SASS_PREPROCESSOR_OPTIONS
8-
} from './constants';
5+
import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS} from './constants';
96

107

118
/** Those imports lack typings. */
@@ -47,7 +44,7 @@ export function sassBuildTask(dest: string, root: string) {
4744
return () => {
4845
return gulp.src(_globify(root, '**/*.scss'))
4946
.pipe(gulpSourcemaps.init())
50-
.pipe(gulpSass(SASS_PREPROCESSOR_OPTIONS).on('error', gulpSass.logError))
47+
.pipe(gulpSass().on('error', gulpSass.logError))
5148
.pipe(gulpAutoprefixer(SASS_AUTOPREFIXER_OPTIONS))
5249
.pipe(gulpSourcemaps.write('.'))
5350
.pipe(gulp.dest(dest));

‎tools/gulp/tasks/aot.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ task('aot:copy', [':build:devapp:scss', ':build:devapp:assets']);
1212
*/
1313
task('aot:prepare', sequenceTask(
1414
'clean',
15-
['build:components:release', 'aot:copy', ':build:components:ngc'])
15+
['aot:copy', 'build:components:release', ':build:components:ngc'])
1616
);
1717

1818
/** Builds the demo-app with the Angular compiler to verify that all components work. */

‎tools/gulp/tasks/development.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ task(':watch:devapp', () => {
2020

2121
task(':build:devapp:vendor', vendorTask());
2222
task(':build:devapp:ts', tsBuildTask(appDir));
23-
task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
23+
task(':build:devapp:scss', sassBuildTask(outDir, appDir));
2424
task(':build:devapp:assets', copyTask(appDir, outDir));
2525
task('build:devapp', buildAppTask('devapp'));
2626

0 commit comments

Comments
 (0)