Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 64b122a

Browse files
ThomasBurlesonmmalerba
ThomasBurleson
authored and
mmalerba
committed
fix(demo): improve use of ObservableMedia service (#214)
* create **`<media-query-status>`** view component * used SharedModule for shared imports and declarations * simplify demos by using the **MediaQueryStatus** component * improve layout within the md-tool-bar header area
1 parent 044632e commit 64b122a

14 files changed

+121
-177
lines changed

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
import { NgModule } from '@angular/core';
2-
import { BrowserModule } from '@angular/platform-browser';
3-
import { MaterialModule } from "@angular/material";
4-
import { FlexLayoutModule } from "../../lib"; // `gulp build:components` to deploy to node_modules manually
1+
import {NgModule} from '@angular/core';
2+
import {BrowserModule} from '@angular/platform-browser';
3+
import {SharedModule} from './shared/shared.module';
54

6-
import { DemoApp } from './demo-app/demo-app';
7-
import { DemoAppRoutingModule } from "./demo-app/demo-app-routes";
8-
import { DemosStackOverflowModule } from "./stack-overflow/DemosStackOverflow";
9-
import { DemosGithubIssuesModule } from './github-issues/DemosGithubIssues';
10-
import { DemosLayoutAPIModule } from './docs-layout/DemosLayoutAPI';
11-
import { DemosResponsiveLayoutsModule } from './docs-layout-responsive/DemosResponsiveLayouts';
5+
import {DemoApp} from './demo-app/demo-app';
6+
import {DemoAppRoutingModule} from "./demo-app/demo-app-routes";
7+
import {DemosStackOverflowModule} from "./stack-overflow/DemosStackOverflow";
8+
import {DemosGithubIssuesModule} from './github-issues/DemosGithubIssues';
9+
import {DemosLayoutAPIModule} from './docs-layout/DemosLayoutAPI';
10+
import {DemosResponsiveLayoutsModule} from './docs-layout-responsive/DemosResponsiveLayouts';
1211

1312
@NgModule({
14-
declarations : [ DemoApp ],
15-
bootstrap : [ DemoApp ],
16-
imports : [
13+
declarations: [DemoApp],
14+
bootstrap: [DemoApp],
15+
imports: [
1716
BrowserModule,
18-
MaterialModule.forRoot(),
19-
FlexLayoutModule,
17+
SharedModule,
2018
DemoAppRoutingModule,
2119

2220
/* Internal Demo App Modules */
@@ -26,4 +24,5 @@ import { DemosResponsiveLayoutsModule } from './docs-layout-responsive/DemosResp
2624
DemosResponsiveLayoutsModule
2725
]
2826
})
29-
export class DemoAppModule { }
27+
export class DemoAppModule {
28+
}

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,29 @@ import {Component, ViewEncapsulation} from '@angular/core';
44
selector: 'demo-app',
55
styleUrls : [ 'demo-app.css' ],
66
template: `
7-
<md-toolbar class="bigger">
8-
<div fxLayout="row" fxLayoutAlign="start center" style="height:40px; min-height:40px;">
7+
<md-toolbar class="bigger" style="padding:0 20px;padding-bottom:30px;">
8+
<md-toolbar-row>
9+
<div fxLayout="row"
10+
fxLayoutAlign="start center"
11+
fxLayoutGap="20px"
12+
style="height:40px; min-height:40px;">
913
<h2>Layout Demos: </h2>
1014
<button md-raised-button color="primary" [routerLink]="['']"> Static </button>
1115
<button md-raised-button color="primary" [routerLink]="['responsive']"> Responsive </button>
1216
<button md-raised-button color="primary" [routerLink]="['issues']"> Github </button>
1317
<button md-raised-button color="primary" [routerLink]="['stackoverflow']"> StackOverflow </button>
1418
</div>
1519
<div fxFlex="15px"></div>
16-
<div fxLayout="column" style="font-size: 0.85em; padding-top: 15px;">
20+
</md-toolbar-row>
21+
<md-toolbar-row fxFlex fxLayout="column"
22+
fxLayoutAlign="left top"
23+
style="font-size: 0.85em; margin-top: 0px; padding-bottom:20px; white-space:normal">
1724
These Layout demos are curated from the Angular Material v1.x documentation, GitHub Issues, StackOverflow,
1825
and CodePen.
1926
<span class="title" style="font-size: 0.7em; font-weight:normal;">
2027
Hint: Click on any of the samples below to toggle the layout direction(s).
2128
</span>
22-
</div>
29+
</md-toolbar-row>
2330
</md-toolbar>
2431
2532
<div class="demo-content">

‎src/demo-app/app/docs-layout-responsive/DemosResponsiveLayouts.ts

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,15 @@ import { Component } from '@angular/core';
1414
export class DemosResponsiveLayout { }
1515

1616
import {NgModule} from '@angular/core';
17-
import {CommonModule} from "@angular/common";
1817
import {FormsModule} from "@angular/forms";
19-
import {MaterialModule} from "@angular/material";
20-
import {FlexLayoutModule} from "../../../lib"; // `gulp build:components` to deploy to node_modules manually
2118

2219
import {DemoResponsiveRows} from "./responsiveRowColumns.demo";
2320
import {DemoResponsiveLayoutDirection } from "./responsiveLayoutDirections.demo";
2421
import {DemoResponsiveShowHide} from "./responsiveShowHide.demo";
2522
import {DemoResponsiveFlexDirectives} from "./responsiveFlexDirective.demo";
2623
import {DemoResponsiveFlexOrder} from "./responsiveFlexOrder.demo";
2724
import {DemoResponsiveStyle} from "./responsiveStyle.demo";
25+
import {SharedModule} from '../shared/shared.module';
2826

2927
@NgModule({
3028
declarations : [
@@ -35,13 +33,11 @@ import {DemoResponsiveStyle} from "./responsiveStyle.demo";
3533
DemoResponsiveFlexDirectives,
3634
DemoResponsiveFlexOrder,
3735
DemoResponsiveShowHide,
38-
DemoResponsiveStyle,
36+
DemoResponsiveStyle
3937
],
4038
imports : [
41-
CommonModule,
42-
FormsModule,
43-
MaterialModule,
44-
FlexLayoutModule
39+
SharedModule,
40+
FormsModule
4541
]
4642

4743
})

‎src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import {Component, OnInit, Inject, OnDestroy} from '@angular/core';
2-
import {Subscription} from "rxjs/Subscription";
1+
import {Component} from '@angular/core';
32
import 'rxjs/add/operator/filter';
43

5-
import {MediaChange} from "../../../lib/media-query/media-change";
6-
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
74

85
@Component({
96
selector: 'demo-responsive-flex-directive',
@@ -23,29 +20,10 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
2320
</div>
2421
</md-card-content>
2522
<md-card-footer style="width:95%">
26-
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
23+
<media-query-status></media-query-status>
2724
</md-card-footer>
2825
</md-card>
2926
`
3027
})
31-
export class DemoResponsiveFlexDirectives implements OnInit, OnDestroy {
32-
private _watcher : Subscription;
33-
public activeMediaQuery = "";
34-
35-
constructor(private _media$:ObservableMedia) { }
36-
37-
ngOnInit() {
38-
this._watcher = this.watchMQChanges();
39-
}
40-
41-
ngOnDestroy() {
42-
this._watcher.unsubscribe();
43-
}
44-
45-
watchMQChanges() {
46-
return this._media$.subscribe((change:MediaChange) => {
47-
let value = change ? `'${change.mqAlias}' = ${change.mediaQuery} )` : "";
48-
this.activeMediaQuery = value;
49-
});
50-
}
28+
export class DemoResponsiveFlexDirectives {
5129
}

‎src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import {Component, OnInit, Inject, OnDestroy} from '@angular/core';
2-
import {Subscription} from "rxjs/Subscription";
3-
import 'rxjs/add/operator/filter';
4-
5-
import {MediaChange} from "../../../lib/media-query/media-change";
6-
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
1+
import {Component} from '@angular/core';
72

83
@Component({
94
selector: 'demo-responsive-flex-order',
@@ -35,30 +30,10 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
3530
</div>
3631
</md-card-content>
3732
<md-card-footer style="width:95%">
38-
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
33+
<media-query-status></media-query-status>
3934
</md-card-footer>
4035
</md-card>
4136
`
4237
})
43-
export class DemoResponsiveFlexOrder implements OnInit, OnDestroy {
44-
public activeMediaQuery = "";
45-
private _watcher : Subscription;
46-
47-
constructor(private _media$:ObservableMedia) { }
48-
49-
ngOnInit() {
50-
this._watcher = this.watchMQChanges();
51-
}
52-
53-
ngOnDestroy() {
54-
this._watcher.unsubscribe();
55-
}
56-
57-
58-
watchMQChanges() {
59-
return this._media$.subscribe((change:MediaChange) => {
60-
let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
61-
this.activeMediaQuery = value;
62-
});
63-
}
38+
export class DemoResponsiveFlexOrder {
6439
}

‎src/demo-app/app/docs-layout-responsive/responsiveLayoutDirections.demo.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ import { Component } from '@angular/core';
1717
</div>
1818
</div>
1919
</md-card-content>
20+
<md-card-footer style="width:95%">
21+
<media-query-status></media-query-status>
22+
</md-card-footer>
2023
</md-card>
2124
`
2225
})

‎src/demo-app/app/docs-layout-responsive/responsiveShowHide.demo.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import { Component } from '@angular/core';
2020
</div>
2121
</div>
2222
</md-card-content>
23+
<md-card-footer style="width:95%">
24+
<media-query-status></media-query-status>
25+
</md-card-footer>
2326
</md-card>
2427
`
2528
})

‎src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
2-
import { Subscription } from "rxjs/Subscription";
1+
import {Component} from '@angular/core';
32
import 'rxjs/add/operator/filter';
43

5-
import { MediaChange } from "../../../lib/media-query/media-change";
6-
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
7-
84
@Component({
95
selector: 'demo-responsive-style',
106
styleUrls: [
@@ -28,13 +24,14 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
2824
[class.sm]="{'fxClass-sm': hasStyle}"
2925
[class.md]="{'fxClass-md': hasStyle, 'fxClass-md2': hasStyle}"
3026
[class.lg]="['fxClass-lg', 'fxClass-lg2']">
31-
{{ activeMediaQueryAlias }}
27+
Sample Text #1
28+
<br/>
3229
<md-checkbox
3330
[(ngModel)]="hasStyle"
3431
fxShow="false"
3532
[fxShow.sm]="true"
3633
[fxShow.md]="true">
37-
Activate styles
34+
Use Responsive Styles
3835
</md-checkbox>
3936
</div>
4037
</div>
@@ -63,7 +60,7 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
6360
[style.sm]="{'font-size.px': 20, color: 'lightblue'}"
6461
[style.md]="{'font-size.px': 30, color: 'orange'}"
6562
[style.lg]="styleLgExp">
66-
{{ activeMediaQueryAlias }}
63+
Sample Text #2
6764
</div>
6865
</div>
6966
</div>
@@ -82,29 +79,16 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
8279
8380
8481
<md-card-footer style="width:95%">
85-
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
82+
<media-query-status></media-query-status>
8683
</md-card-footer>
8784
</md-card>
8885
`
8986
})
90-
export class DemoResponsiveStyle implements OnDestroy {
91-
private _watcher: Subscription;
92-
public activeMediaQuery = "";
93-
public activeMediaQueryAlias = "";
87+
export class DemoResponsiveStyle {
9488
public hasStyle: boolean = false;
9589
public styleLgExp = {
9690
'font-size': '40px',
9791
color: 'lightgreen'
9892
};
9993

100-
constructor( private _media$:ObservableMedia ) {
101-
this._watcher = this._media$.subscribe((change: MediaChange) => {
102-
this.activeMediaQuery = change ? `'${change.mqAlias}' = ${change.mediaQuery} )` : "";
103-
this.activeMediaQueryAlias = change.mqAlias;
104-
});
105-
}
106-
107-
ngOnDestroy() {
108-
this._watcher.unsubscribe();
109-
}
11094
}

‎src/demo-app/app/github-issues/DemosGithubIssues.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,13 @@ export class DemosGithubIssues {
1414
}
1515

1616
import {NgModule} from '@angular/core';
17-
import {CommonModule} from "@angular/common";
18-
import {MaterialModule} from "@angular/material";
19-
import {FlexLayoutModule} from "../../../lib"; // `gulp build:components` to deploy to node_modules manually
2017

2118
import {DemoIssue5345} from "./issue.5345.demo";
2219
import {DemoIssue9897} from "./issue.9897.demo";
2320
import {DemoIssue135} from "./issue.135.demo";
2421
import {DemoIssue181} from './issue.181.demo';
2522
import {DemoIssue197} from './issue.197.demo';
23+
import {SharedModule} from '../shared/shared.module';
2624

2725
@NgModule({
2826
declarations: [
@@ -34,9 +32,7 @@ import {DemoIssue197} from './issue.197.demo';
3432
DemoIssue197
3533
],
3634
imports: [
37-
CommonModule,
38-
MaterialModule,
39-
FlexLayoutModule
35+
SharedModule
4036
]
4137
})
4238
export class DemosGithubIssuesModule {

‎src/demo-app/app/github-issues/issue.135.demo.ts

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import {Component, OnInit, OnDestroy} from '@angular/core';
2-
import {Subscription} from "rxjs/Subscription";
3-
import 'rxjs/add/operator/filter';
4-
5-
import {MediaChange} from "../../../lib/media-query/media-change";
6-
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
1+
import {Component} from '@angular/core';
72

83
@Component({
94
selector: 'demo-issue-135',
@@ -24,30 +19,9 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
2419
</div>
2520
</md-card-content>
2621
<md-card-footer style="width:95%">
27-
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
22+
<media-query-status></media-query-status>
2823
</md-card-footer>
2924
</md-card>
3025
`
3126
})
32-
export class DemoIssue135 implements OnInit, OnDestroy {
33-
public activeMediaQuery = "";
34-
private _watcher : Subscription;
35-
36-
constructor(private _media$:ObservableMedia) { }
37-
38-
ngOnInit() {
39-
this._watcher = this.watchMQChanges();
40-
}
41-
42-
ngOnDestroy() {
43-
this._watcher.unsubscribe();
44-
}
45-
46-
47-
watchMQChanges() {
48-
return this._media$.subscribe((change:MediaChange) => {
49-
let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
50-
this.activeMediaQuery = value;
51-
});
52-
}
53-
}
27+
export class DemoIssue135 { }

0 commit comments

Comments
 (0)