fix(fxShow, fxHide): support fxHide+fxShow usages on same element (#190)

* chore(gitignore): ignore yarn changes * fix(fxHide, fxShow): allow fxHide+fxShow usages on same element * also export the **BaseFxDirectiveAdapter** class
angular · Feb 21, 2017 · eee20b2 · eee20b2
1 parent 0797c85
commit eee20b2
Show file tree

Hide file tree

Showing 14 changed files with 219 additions and 627 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,6 +18,8 @@ build/Release
 
 # Users Environment Variables
 .lock-wscript
+yarn.lock
+yarn-error.log
 
 # OS generated files #
 .DS_Store

diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@angular/compiler-cli": "^2.3.1",
     "@angular/forms": "^2.3.1",
     "@angular/http": "^2.3.1",
-    "@angular/material": "2.0.0-beta.0",
+    "@angular/material": "^2.0.0-beta.2",
     "@angular/platform-server": "^2.3.1",
     "@angular/router": "~3.1.1",
     "@angular/tsc-wrapped": "~0.4.0",

diff --git a/src/demo-app/app/demo-app/demo-app.css b/src/demo-app/app/demo-app/demo-app.css
@@ -42,15 +42,15 @@ div.coloredContainerX > div, div.colorNested > div > div {
   text-align: center;
 }
 
-div.coloredContainerX > div:nth-child(1), div.colorNested > div > div:nth-child(1) {
+div.coloredContainerX > div:nth-child(1), div.colorNested > div > div:nth-child(1), div.box1 {
   background-color: #009688;
 }
 
-div.coloredContainerX > div:nth-child(2), div.colorNested > div > div:nth-child(2) {
+div.coloredContainerX > div:nth-child(2), div.colorNested > div > div:nth-child(2), div.box2 {
   background-color: #3949ab;
 }
 
-div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3), div.colorNested > div > div:nth-child(3) {
+div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3), div.colorNested > div > div:nth-child(3), div.box3 {
   background-color: #9c27b0;
 }
 
@@ -224,3 +224,5 @@ md-card-content pre {
 .fxClass-lg2 {
   text-shadow: #5c5c5c;
 }
+
+.fixed { height:275px; }
diff --git a/src/demo-app/app/github-issues/DemosGithubIssues.ts b/src/demo-app/app/github-issues/DemosGithubIssues.ts
@@ -1,32 +1,37 @@
 import {Component} from '@angular/core';
 
 @Component({
-    selector: 'demos-github-issues',
-    template: `
+  selector: 'demos-github-issues',
+  template: `
         <demo-issue-5345></demo-issue-5345>
         <demo-issue-9897></demo-issue-9897>
+        <demo-issue-181></demo-issue-181>
     `
 })
-export class DemosGithubIssues { }
+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 {DemoIssue5345}     from "./issue.5345.demo";
+import {DemoIssue9897}     from "./issue.9897.demo";
+import {DemoIssue181}        from './issue.181.demo';
 
 @NgModule({
-  declarations : [
+  declarations: [
     DemosGithubIssues,      // used by the Router with the root app component
     DemoIssue5345,
-    DemoIssue9897
+    DemoIssue9897,
+    DemoIssue181
   ],
-  imports : [
+  imports: [
     CommonModule,
     MaterialModule,
     FlexLayoutModule
   ]
 })
-export class DemosGithubIssuesModule{ }
+export class DemosGithubIssuesModule {
+}
diff --git a/src/demo-app/app/github-issues/issue.181.demo.ts b/src/demo-app/app/github-issues/issue.181.demo.ts
@@ -0,0 +1,58 @@
+import {Component, 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";
+
+@Component({
+  selector: 'demo-issue-181',
+  styleUrls: [
+    '../demo-app/material2.css'
+  ],
+  template: `
+    <md-card class="card-demo" > 
+      <md-card-title><a href="https://github.com/angular/flex-layout/issues/181" target="_blank">Issue #181</a></md-card-title>
+      <md-card-subtitle>Wrong layout when fxHide + fxShow usages do not cooperate properly:</md-card-subtitle>
+      <md-card-content>                                                                                     
+        <div class="containerX">
+          <div class="coloredContainerX box fixed"
+               [fxLayout]="direction" 
+               (click)="pivot()">
+              <div fxHide fxShow.gt-xs class="box1"> Type 1, row a, fxHide fxShow.gt-xs </div>
+            	<div fxHide fxShow.gt-xs class="box2"> Type 1, row b, fxHide fxShow.gt-xs </div>
+            	<div fxHide fxShow.gt-xs class="box3"> Type 1, row c, fxHide fxShow.gt-xs </div>
+            	
+            	<div fxShow fxHide.md class="box1"> Type 2, row a, fxShow fxHide.md</div>
+            	<div fxShow fxHide.md class="box2"> Type 2, row b, fxShow fxHide.md</div>
+            	<div fxShow fxHide.md class="box3"> Type 2, row c, fxShow fxHide.md</div>
+          </div>       
+        </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>
+      </md-card-footer>      
+    </md-card>
+  `
+})
+export class DemoIssue181 implements OnDestroy {
+  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;
+}
diff --git a/src/lib/flexbox/_module.ts b/src/lib/flexbox/_module.ts
@@ -14,8 +14,7 @@ import {MediaQueriesModule} from '../media-query/_module';
 
 import {FlexDirective} from './api/flex';
 import {LayoutDirective} from './api/layout';
-import {HideDirective} from './api/hide';
-import {ShowDirective} from './api/show';
+import {ShowHideDirective} from './api/show-hide';
 import {FlexAlignDirective} from './api/flex-align';
 import {FlexFillDirective} from './api/flex-fill';
 import {FlexOffsetDirective} from './api/flex-offset';
@@ -44,8 +43,7 @@ const ALL_DIRECTIVES = [
   FlexOffsetDirective,
   FlexFillDirective,
   FlexAlignDirective,
-  ShowDirective,
-  HideDirective,
+  ShowHideDirective,
   ClassDirective,
   StyleDirective,
 ];

diff --git a/src/lib/flexbox/api/base-adapter.ts b/src/lib/flexbox/api/base-adapter.ts
@@ -17,6 +17,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
   get mqActivation(): ResponsiveActivation {
     return this._mqActivation;
   }
+
   /**
    * @see BaseFxDirective._queryInput
    */
@@ -28,7 +29,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
    *  Save the property value.
    */
   cacheInput(key?: string, source?: any, cacheRaw = false) {
-    if ( cacheRaw ) {
+    if (cacheRaw) {
       this._cacheInputRaw(key, source);
     } else if (Array.isArray(source)) {
       this._cacheInputArray(key, source);

diff --git a/src/lib/flexbox/api/base.ts b/src/lib/flexbox/api/base.ts
@@ -20,7 +20,7 @@ import {MediaQuerySubscriber} from '../../media-query/media-change';
  * Definition of a css style. Either a property name (e.g. "flex-basis") or an object
  * map of property name and value (e.g. {display: 'none', flex-order: 5}).
  */
-export type StyleDefinition = string|{ [property: string]: string|number };
+export type StyleDefinition = string|{[property: string]: string|number};
 
 /** Abstract base class for the Layout API styling directives. */
 export abstract class BaseFxDirective implements OnDestroy {

diff --git a/src/lib/flexbox/api/hide.spec.ts b/src/lib/flexbox/api/hide.spec.ts
@@ -21,7 +21,7 @@ import {customMatchers, expect, NgMatchers} from '../../utils/testing/custom-mat
 import {
   makeCreateTestComponent, expectNativeEl, queryFor
 } from '../../utils/testing/helpers';
-import {HideDirective} from './hide';
+import {ShowHideDirective} from './show-hide';
 import {MediaQueriesModule} from '../../media-query/_module';
 
 describe('hide directive', () => {
@@ -52,7 +52,7 @@ describe('hide directive', () => {
     // Configure testbed to prepare services
     TestBed.configureTestingModule({
       imports: [CommonModule, MediaQueriesModule],
-      declarations: [TestHideComponent, HideDirective],
+      declarations: [TestHideComponent, ShowHideDirective],
       providers: [
         BreakPointRegistry, BreakPointsProvider,
         {provide: MatchMedia, useClass: MockMatchMedia}