From a2df3ff5cf62bc184540173fabef1d926bfb334e Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Thu, 20 Dec 2018 15:26:29 -0600 Subject: [PATCH 1/5] fix(show-hide): account for fxLayout on same element --- src/lib/extended/show-hide/hide.spec.ts | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/lib/extended/show-hide/hide.spec.ts b/src/lib/extended/show-hide/hide.spec.ts index cd91aaabb..819afb3ec 100644 --- a/src/lib/extended/show-hide/hide.spec.ts +++ b/src/lib/extended/show-hide/hide.spec.ts @@ -10,7 +10,6 @@ import {CommonModule} from '@angular/common'; import {ComponentFixture, TestBed, inject} from '@angular/core/testing'; import { MatchMedia, - CoreModule, MockMatchMedia, MockMatchMediaProvider, MediaObserver, @@ -22,7 +21,7 @@ import {customMatchers, expect, NgMatchers} from '../../utils/testing/custom-mat import { makeCreateTestComponent, expectNativeEl, queryFor } from '../../utils/testing/helpers'; -import {DefaultShowHideDirective} from './show-hide'; +import {FlexLayoutModule} from '../../module'; describe('hide directive', () => { @@ -59,8 +58,8 @@ describe('hide directive', () => { // Configure testbed to prepare services TestBed.configureTestingModule({ - imports: [CommonModule, CoreModule], - declarations: [TestHideComponent, DefaultShowHideDirective], + imports: [CommonModule, FlexLayoutModule], + declarations: [TestHideComponent], providers: [ MockMatchMediaProvider, {provide: SERVER_TOKEN, useValue: true}, @@ -257,6 +256,22 @@ describe('hide directive', () => { expectNativeEl(fixture).toHaveStyle({'display': 'inline-block'}, styler); }); + it('should support fxHide and fxLayout', () => { + createTestComponent(` +
+ This content to be shown ONLY when gt-sm +
+ `); + matchMedia.activate('xs'); + expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler); + + matchMedia.activate('sm'); + expectNativeEl(fixture).not.toHaveStyle({'display': 'none'}, styler); + + matchMedia.activate('xs'); + expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler); + }); + }); From ececea32fdcb7a3f01ea856bcedfc2b468cb5bd2 Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Thu, 20 Dec 2018 16:13:49 -0600 Subject: [PATCH 2/5] fixup! fix(show-hide): account for fxLayout on same element --- src/lib/extended/show-hide/show-hide.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts index b13d87490..edd4ee055 100644 --- a/src/lib/extended/show-hide/show-hide.ts +++ b/src/lib/extended/show-hide/show-hide.ts @@ -67,7 +67,7 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout'); this.marshal.trackValue(this.nativeElement, 'layout') .pipe(takeUntil(this.destroySubject)) - .subscribe(this.updateWithValue.bind(this)); + .subscribe(this.onLayoutChange.bind(this)); const children = Array.from(this.nativeElement.children); for (let i = 0; i < children.length; i++) { @@ -130,6 +130,11 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, 'flex' : this.styler.lookupStyle(this.nativeElement, 'display', true); } + /** Respond to layout changes on host element by reactivating show-hide */ + protected onLayoutChange() { + this.updateWithValue(this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY)); + } + /** Validate the visibility value and then update the host's inline display style */ protected updateWithValue(value: boolean|string = true) { if (value === '') { From 7cedf494eacb9bd39c116617678db579b21dc405 Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Thu, 20 Dec 2018 16:18:54 -0600 Subject: [PATCH 3/5] fixup! fix(show-hide): account for fxLayout on same element --- src/lib/extended/show-hide/show-hide.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts index edd4ee055..211bfc5e5 100644 --- a/src/lib/extended/show-hide/show-hide.ts +++ b/src/lib/extended/show-hide/show-hide.ts @@ -67,7 +67,7 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, this.hasLayout = this.marshal.hasValue(this.nativeElement, 'layout'); this.marshal.trackValue(this.nativeElement, 'layout') .pipe(takeUntil(this.destroySubject)) - .subscribe(this.onLayoutChange.bind(this)); + .subscribe(this.triggerUpdate.bind(this)); const children = Array.from(this.nativeElement.children); for (let i = 0; i < children.length; i++) { @@ -130,11 +130,6 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, 'flex' : this.styler.lookupStyle(this.nativeElement, 'display', true); } - /** Respond to layout changes on host element by reactivating show-hide */ - protected onLayoutChange() { - this.updateWithValue(this.marshal.getValue(this.nativeElement, this.DIRECTIVE_KEY)); - } - /** Validate the visibility value and then update the host's inline display style */ protected updateWithValue(value: boolean|string = true) { if (value === '') { From 5ed05a65721c6f02783b536e20bdee3efaa98fda Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Wed, 26 Dec 2018 23:32:30 -0500 Subject: [PATCH 4/5] fixup! fix(show-hide): account for fxLayout on same element --- src/lib/extended/show-hide/hide.spec.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/lib/extended/show-hide/hide.spec.ts b/src/lib/extended/show-hide/hide.spec.ts index 819afb3ec..4b3ff2fbe 100644 --- a/src/lib/extended/show-hide/hide.spec.ts +++ b/src/lib/extended/show-hide/hide.spec.ts @@ -110,7 +110,12 @@ describe('hide directive', () => { expectNativeEl(fixture, {isHidden: false}).not.toHaveStyle({'display': 'none'}, styler); }); - + it('should use "flex" display style when the element also has an fxLayoutAlign', () => { + createTestComponent(`
`); + expectNativeEl(fixture).not.toHaveStyle({'display': 'none'}, styler); + matchMedia.activate('xs'); + expectNativeEl(fixture).toHaveStyle({'display': 'none'}, styler); + }); }); describe('with responsive features', () => { From 4ab0f7d42db4b8b2347e393409e899f5afeec7f6 Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Wed, 26 Dec 2018 23:34:12 -0500 Subject: [PATCH 5/5] fixup! fix(show-hide): account for fxLayout on same element --- src/lib/extended/show-hide/show-hide.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts index 211bfc5e5..b9c9560f6 100644 --- a/src/lib/extended/show-hide/show-hide.ts +++ b/src/lib/extended/show-hide/show-hide.ts @@ -68,6 +68,9 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, this.marshal.trackValue(this.nativeElement, 'layout') .pipe(takeUntil(this.destroySubject)) .subscribe(this.triggerUpdate.bind(this)); + this.marshal.trackValue(this.nativeElement, 'layout-align') + .pipe(takeUntil(this.destroySubject)) + .subscribe(this.triggerUpdate.bind(this)); const children = Array.from(this.nativeElement.children); for (let i = 0; i < children.length; i++) {