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

Commit

Permalink
fix(demo): improve use of ObservableMedia service (#214)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@ThomasBurleson @mmalerba
ThomasBurleson authored and mmalerba committed Mar 14, 2017
1 parent 044632e commit 64b122a
Show file tree
Hide file tree
Showing 14 changed files with 121 additions and 177 deletions.
31 changes: 15 additions & 16 deletions src/demo-app/app/demo-app-module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from "@angular/material";
import { FlexLayoutModule } from "../../lib"; // `gulp build:components` to deploy to node_modules manually
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {SharedModule} from './shared/shared.module';

import { DemoApp } from './demo-app/demo-app';
import { DemoAppRoutingModule } from "./demo-app/demo-app-routes";
import { DemosStackOverflowModule } from "./stack-overflow/DemosStackOverflow";
import { DemosGithubIssuesModule } from './github-issues/DemosGithubIssues';
import { DemosLayoutAPIModule } from './docs-layout/DemosLayoutAPI';
import { DemosResponsiveLayoutsModule } from './docs-layout-responsive/DemosResponsiveLayouts';
import {DemoApp} from './demo-app/demo-app';
import {DemoAppRoutingModule} from "./demo-app/demo-app-routes";
import {DemosStackOverflowModule} from "./stack-overflow/DemosStackOverflow";
import {DemosGithubIssuesModule} from './github-issues/DemosGithubIssues';
import {DemosLayoutAPIModule} from './docs-layout/DemosLayoutAPI';
import {DemosResponsiveLayoutsModule} from './docs-layout-responsive/DemosResponsiveLayouts';

@NgModule({
declarations : [ DemoApp ],
bootstrap : [ DemoApp ],
imports : [
declarations: [DemoApp],
bootstrap: [DemoApp],
imports: [
BrowserModule,
MaterialModule.forRoot(),
FlexLayoutModule,
SharedModule,
DemoAppRoutingModule,

/* Internal Demo App Modules */
Expand All @@ -26,4 +24,5 @@ import { DemosResponsiveLayoutsModule } from './docs-layout-responsive/DemosResp
DemosResponsiveLayoutsModule
]
})
export class DemoAppModule { }
export class DemoAppModule {
}
15 changes: 11 additions & 4 deletions src/demo-app/app/demo-app/demo-app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,29 @@ import {Component, ViewEncapsulation} from '@angular/core';
selector: 'demo-app',
styleUrls : [ 'demo-app.css' ],
template: `
<md-toolbar class="bigger">
<div fxLayout="row" fxLayoutAlign="start center" style="height:40px; min-height:40px;">
<md-toolbar class="bigger" style="padding:0 20px;padding-bottom:30px;">
<md-toolbar-row>
<div fxLayout="row"
fxLayoutAlign="start center"
fxLayoutGap="20px"
style="height:40px; min-height:40px;">
<h2>Layout Demos: </h2>
<button md-raised-button color="primary" [routerLink]="['']"> Static </button>
<button md-raised-button color="primary" [routerLink]="['responsive']"> Responsive </button>
<button md-raised-button color="primary" [routerLink]="['issues']"> Github </button>
<button md-raised-button color="primary" [routerLink]="['stackoverflow']"> StackOverflow </button>
</div>
<div fxFlex="15px"></div>
<div fxLayout="column" style="font-size: 0.85em; padding-top: 15px;">
</md-toolbar-row>
<md-toolbar-row fxFlex fxLayout="column"
fxLayoutAlign="left top"
style="font-size: 0.85em; margin-top: 0px; padding-bottom:20px; white-space:normal">
These Layout demos are curated from the Angular Material v1.x documentation, GitHub Issues, StackOverflow,
and CodePen.
<span class="title" style="font-size: 0.7em; font-weight:normal;">
Hint: Click on any of the samples below to toggle the layout direction(s).
</span>
</div>
</md-toolbar-row>
</md-toolbar>
<div class="demo-content">
Expand Down
12 changes: 4 additions & 8 deletions src/demo-app/app/docs-layout-responsive/DemosResponsiveLayouts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,15 @@ import { Component } from '@angular/core';
export class DemosResponsiveLayout { }

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

import {DemoResponsiveRows} from "./responsiveRowColumns.demo";
import {DemoResponsiveLayoutDirection } from "./responsiveLayoutDirections.demo";
import {DemoResponsiveShowHide} from "./responsiveShowHide.demo";
import {DemoResponsiveFlexDirectives} from "./responsiveFlexDirective.demo";
import {DemoResponsiveFlexOrder} from "./responsiveFlexOrder.demo";
import {DemoResponsiveStyle} from "./responsiveStyle.demo";
import {SharedModule} from '../shared/shared.module';

@NgModule({
declarations : [
Expand All @@ -35,13 +33,11 @@ import {DemoResponsiveStyle} from "./responsiveStyle.demo";
DemoResponsiveFlexDirectives,
DemoResponsiveFlexOrder,
DemoResponsiveShowHide,
DemoResponsiveStyle,
DemoResponsiveStyle
],
imports : [
CommonModule,
FormsModule,
MaterialModule,
FlexLayoutModule
SharedModule,
FormsModule
]

})
Expand Down
28 changes: 3 additions & 25 deletions src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import {Component, OnInit, Inject, OnDestroy} from '@angular/core';
import {Subscription} from "rxjs/Subscription";
import {Component} from '@angular/core';
import 'rxjs/add/operator/filter';

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

@Component({
selector: 'demo-responsive-flex-directive',
Expand All @@ -23,29 +20,10 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
</div>
</md-card-content>
<md-card-footer style="width:95%">
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
<media-query-status></media-query-status>
</md-card-footer>
</md-card>
`
})
export class DemoResponsiveFlexDirectives implements OnInit, OnDestroy {
private _watcher : Subscription;
public activeMediaQuery = "";

constructor(private _media$:ObservableMedia) { }

ngOnInit() {
this._watcher = this.watchMQChanges();
}

ngOnDestroy() {
this._watcher.unsubscribe();
}

watchMQChanges() {
return this._media$.subscribe((change:MediaChange) => {
let value = change ? `'${change.mqAlias}' = ${change.mediaQuery} )` : "";
this.activeMediaQuery = value;
});
}
export class DemoResponsiveFlexDirectives {
}
31 changes: 3 additions & 28 deletions src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {Component, OnInit, Inject, OnDestroy} from '@angular/core';
import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

import {MediaChange} from "../../../lib/media-query/media-change";
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
import {Component} from '@angular/core';

@Component({
selector: 'demo-responsive-flex-order',
Expand Down Expand Up @@ -35,30 +30,10 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
</div>
</md-card-content>
<md-card-footer style="width:95%">
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
<media-query-status></media-query-status>
</md-card-footer>
</md-card>
`
})
export class DemoResponsiveFlexOrder implements OnInit, OnDestroy {
public activeMediaQuery = "";
private _watcher : Subscription;

constructor(private _media$:ObservableMedia) { }

ngOnInit() {
this._watcher = this.watchMQChanges();
}

ngOnDestroy() {
this._watcher.unsubscribe();
}


watchMQChanges() {
return this._media$.subscribe((change:MediaChange) => {
let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
this.activeMediaQuery = value;
});
}
export class DemoResponsiveFlexOrder {
}
3 changes: 3 additions & 0 deletions src/demo-app/app/docs-layout-responsive/responsiveLayoutDirections.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import { Component } from '@angular/core';
</div>
</div>
</md-card-content>
<md-card-footer style="width:95%">
<media-query-status></media-query-status>
</md-card-footer>
</md-card>
`
})
Expand Down
3 changes: 3 additions & 0 deletions src/demo-app/app/docs-layout-responsive/responsiveShowHide.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import { Component } from '@angular/core';
</div>
</div>
</md-card-content>
<md-card-footer style="width:95%">
<media-query-status></media-query-status>
</md-card-footer>
</md-card>
`
})
Expand Down
30 changes: 7 additions & 23 deletions src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
import { Subscription } from "rxjs/Subscription";
import {Component} from '@angular/core';
import 'rxjs/add/operator/filter';

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

@Component({
selector: 'demo-responsive-style',
styleUrls: [
Expand All @@ -28,13 +24,14 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
[class.sm]="{'fxClass-sm': hasStyle}"
[class.md]="{'fxClass-md': hasStyle, 'fxClass-md2': hasStyle}"
[class.lg]="['fxClass-lg', 'fxClass-lg2']">
{{ activeMediaQueryAlias }}
Sample Text #1
<br/>
<md-checkbox
[(ngModel)]="hasStyle"
fxShow="false"
[fxShow.sm]="true"
[fxShow.md]="true">
Activate styles
Use Responsive Styles
</md-checkbox>
</div>
</div>
Expand Down Expand Up @@ -63,7 +60,7 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
[style.sm]="{'font-size.px': 20, color: 'lightblue'}"
[style.md]="{'font-size.px': 30, color: 'orange'}"
[style.lg]="styleLgExp">
{{ activeMediaQueryAlias }}
Sample Text #2
</div>
</div>
</div>
Expand All @@ -82,29 +79,16 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
<md-card-footer style="width:95%">
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
<media-query-status></media-query-status>
</md-card-footer>
</md-card>
`
})
export class DemoResponsiveStyle implements OnDestroy {
private _watcher: Subscription;
public activeMediaQuery = "";
public activeMediaQueryAlias = "";
export class DemoResponsiveStyle {
public hasStyle: boolean = false;
public styleLgExp = {
'font-size': '40px',
color: 'lightgreen'
};

constructor( private _media$:ObservableMedia ) {
this._watcher = this._media$.subscribe((change: MediaChange) => {
this.activeMediaQuery = change ? `'${change.mqAlias}' = ${change.mediaQuery} )` : "";
this.activeMediaQueryAlias = change.mqAlias;
});
}

ngOnDestroy() {
this._watcher.unsubscribe();
}
}
8 changes: 2 additions & 6 deletions src/demo-app/app/github-issues/DemosGithubIssues.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,13 @@ export class DemosGithubIssues {
}

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

import {DemoIssue5345} from "./issue.5345.demo";
import {DemoIssue9897} from "./issue.9897.demo";
import {DemoIssue135} from "./issue.135.demo";
import {DemoIssue181} from './issue.181.demo';
import {DemoIssue197} from './issue.197.demo';
import {SharedModule} from '../shared/shared.module';

@NgModule({
declarations: [
Expand All @@ -34,9 +32,7 @@ import {DemoIssue197} from './issue.197.demo';
DemoIssue197
],
imports: [
CommonModule,
MaterialModule,
FlexLayoutModule
SharedModule
]
})
export class DemosGithubIssuesModule {
Expand Down
32 changes: 3 additions & 29 deletions src/demo-app/app/github-issues/issue.135.demo.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {Component, OnInit, OnDestroy} from '@angular/core';
import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

import {MediaChange} from "../../../lib/media-query/media-change";
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
import {Component} from '@angular/core';

@Component({
selector: 'demo-issue-135',
Expand All @@ -24,30 +19,9 @@ import { ObservableMedia } from "../../../lib/media-query/observable-media-servi
</div>
</md-card-content>
<md-card-footer style="width:95%">
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
<media-query-status></media-query-status>
</md-card-footer>
</md-card>
`
})
export class DemoIssue135 implements OnInit, OnDestroy {
public activeMediaQuery = "";
private _watcher : Subscription;

constructor(private _media$:ObservableMedia) { }

ngOnInit() {
this._watcher = this.watchMQChanges();
}

ngOnDestroy() {
this._watcher.unsubscribe();
}


watchMQChanges() {
return this._media$.subscribe((change:MediaChange) => {
let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
this.activeMediaQuery = value;
});
}
}
export class DemoIssue135 { }
17 changes: 2 additions & 15 deletions src/demo-app/app/github-issues/issue.181.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,16 @@ import {ObservableMedia} from "../../../lib/media-query/observable-media-service
</div>
</md-card-content>
<md-card-footer style="width:95%;padding-left:20px;margin-top:-5px;">
<div class="hint" >Active mediaQuery: <span style="padding-left: 20px; color: rgba(0, 0, 0, 0.54)">{{ activeMediaQuery }}</span></div>
<media-query-status></media-query-status>
</md-card-footer>
</md-card>
`
})
export class DemoIssue181 implements OnDestroy {
export class DemoIssue181 {
public direction = "column";
public activeMediaQuery = "";

constructor(media$: ObservableMedia) {
this._watcher = media$.subscribe((change: MediaChange) => {
let value = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
this.activeMediaQuery = value;
});
}

pivot() {
this.direction = (this.direction === "row") ? "column" : "row";
}

ngOnDestroy() {
this._watcher.unsubscribe();
}

private _watcher: Subscription;
}
Loading

0 comments on commit 64b122a

Please sign in to comment.