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
angular · Mar 14, 2017 · 64b122a · 64b122a
1 parent 044632e
commit 64b122a
Show file tree

Hide file tree

Showing 14 changed files with 121 additions and 177 deletions.
diff --git a/src/demo-app/app/demo-app-module.ts b/src/demo-app/app/demo-app-module.ts
@@ -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 */
@@ -26,4 +24,5 @@ import { DemosResponsiveLayoutsModule } from './docs-layout-responsive/DemosResp
     DemosResponsiveLayoutsModule
   ]
 })
-export class DemoAppModule { }
+export class DemoAppModule {
+}
diff --git a/src/demo-app/app/demo-app/demo-app.ts b/src/demo-app/app/demo-app/demo-app.ts
@@ -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">

diff --git a/src/demo-app/app/docs-layout-responsive/DemosResponsiveLayouts.ts b/src/demo-app/app/docs-layout-responsive/DemosResponsiveLayouts.ts
@@ -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 : [
@@ -35,13 +33,11 @@ import {DemoResponsiveStyle} from "./responsiveStyle.demo";
     DemoResponsiveFlexDirectives,
     DemoResponsiveFlexOrder,
     DemoResponsiveShowHide,
-    DemoResponsiveStyle,
+    DemoResponsiveStyle
   ],
   imports : [
-    CommonModule,
-    FormsModule,
-    MaterialModule,
-    FlexLayoutModule
+    SharedModule,
+    FormsModule
   ]
 
 })

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts
@@ -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',
@@ -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 {
 }
diff --git a/src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts
@@ -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',
@@ -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  {
 }
diff --git a/src/demo-app/app/docs-layout-responsive/responsiveLayoutDirections.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveLayoutDirections.demo.ts
@@ -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>
   `
 })

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveShowHide.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveShowHide.demo.ts
@@ -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>
   `
 })

diff --git a/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts
@@ -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: [
@@ -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>
@@ -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>
@@ -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();
-  }
 }
diff --git a/src/demo-app/app/github-issues/DemosGithubIssues.ts b/src/demo-app/app/github-issues/DemosGithubIssues.ts
@@ -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: [
@@ -34,9 +32,7 @@ import {DemoIssue197}     from './issue.197.demo';
     DemoIssue197
   ],
   imports: [
-    CommonModule,
-    MaterialModule,
-    FlexLayoutModule
+    SharedModule
   ]
 })
 export class DemosGithubIssuesModule {

diff --git a/src/demo-app/app/github-issues/issue.135.demo.ts b/src/demo-app/app/github-issues/issue.135.demo.ts
@@ -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',
@@ -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 { }
diff --git a/src/demo-app/app/github-issues/issue.181.demo.ts b/src/demo-app/app/github-issues/issue.181.demo.ts
@@ -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;
 }