Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update: add button to toggle theme in demo-app #3093

Merged
merged 5 commits into from
Feb 22, 2017
Merged

update: add button to toggle theme in demo-app #3093

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a3b9f8d
update: add button to toggle theme in demo-app
devversion Feb 14, 2017
f981ce7
Improve list-demo in dark-theme
devversion Feb 14, 2017
acfa1be
Fix stylelint
devversion Feb 14, 2017
c285d15
Address comments
devversion Feb 18, 2017
6035a63
Merge branch 'master' into update/demo-dark-toggle
devversion Feb 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/demo-app/button/button-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
section {
display: flex;
align-items: center;
background-color: #f7f7f7;
margin: 8px;
}

Expand Down
77 changes: 41 additions & 36 deletions src/demo-app/demo-app/demo-app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<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>
<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 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 #root="$implicit" dir="ltr" class="demo-content">
<router-outlet></router-outlet>
</div>
</div>
</div>
</md-sidenav-container>
</md-sidenav-container>
</div>
22 changes: 21 additions & 1 deletion src/demo-app/demo-app/demo-app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
// The default indigo-pink theme will load through the index file. This makes the SCSS build faster
Copy link
Contributor

@kara kara Feb 17, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we actually pull this out into a custom theme file and lose the prebuilt altogether? I see your point with saving build time, but dropping in here makes the theme code harder to find. This is supposed to be an example, so it might confuse people to break it up this way.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fine by me. Just set the focus on performance here. Will change!

// since Sass doesn't need to build a "prebuilt" theme again.
@import '../../lib/core/theming/all-theme';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how to make this work, the demo app cannot reach into the lib directory directly. Would be best to have

@import '../@angular/material/core/theming/all-theme';

but the sass compiler expects this to be present during build but it is only there after build. Any other way to import this file dynamically?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I ran it locally it worked as expected? Sass imports the file at build-time and doesn't compile with the dist/ folder as CWD.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should try to keep our demo app as close as possible to how user apps would be configured. So I agree that we should avoid drilling down into the lib folder. We should be able to use the top level @angular/material import if we tweak the includePaths option in our sass build config to include the dist folder.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright. I will look into it.


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

Expand Down Expand Up @@ -31,7 +47,6 @@ body {

.demo-toolbar {
display: flex;
justify-content: space-between;
width: 100%;
}
}
Expand All @@ -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%;
Expand Down
4 changes: 4 additions & 0 deletions src/demo-app/demo-app/demo-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/list/list-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="demo">
<div class="list-demo">
<div>
<h2>Normal lists</h2>

Expand Down
27 changes: 19 additions & 8 deletions src/demo-app/list/list-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@

.demo {
.list-demo {
display: flex;
flex-flow: row wrap;

Expand All @@ -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);
}
3 changes: 2 additions & 1 deletion src/demo-app/list/list-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import {Component} from '@angular/core';
import {Component, ViewEncapsulation} 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[] = [
Expand Down
1 change: 0 additions & 1 deletion src/demo-app/radio/radio-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
}

.demo-section {
background-color: #f7f7f7;
margin: 8px;
padding: 16px;

Expand Down
6 changes: 0 additions & 6 deletions src/demo-app/tabs/tabs-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
Expand Down