From 54e25ac0131c2839e1b21e36410c3fee2acda38c Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Fri, 2 Dec 2016 11:03:19 -0800 Subject: [PATCH] feat(overlay): support min width and min height --- .../core/overlay/overlay-directives.spec.ts | 22 ++++++++++++++++++- src/lib/core/overlay/overlay-directives.ts | 14 ++++++++++++ src/lib/core/overlay/overlay-ref.ts | 8 +++++++ src/lib/core/overlay/overlay-state.ts | 6 +++++ src/lib/core/overlay/overlay.spec.ts | 18 +++++++++++++++ 5 files changed, 67 insertions(+), 1 deletion(-) diff --git a/src/lib/core/overlay/overlay-directives.spec.ts b/src/lib/core/overlay/overlay-directives.spec.ts index c04a0a9d5b13..87ed8bd9efa0 100644 --- a/src/lib/core/overlay/overlay-directives.spec.ts +++ b/src/lib/core/overlay/overlay-directives.spec.ts @@ -85,6 +85,24 @@ describe('Overlay directives', () => { expect(pane.style.height).toEqual('100vh'); }); + it('should set the min width', () => { + fixture.componentInstance.minWidth = 250; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + const pane = overlayContainerElement.children[0] as HTMLElement; + expect(pane.style.minWidth).toEqual('250px'); + }); + + it('should set the min height', () => { + fixture.componentInstance.minHeight = '500px'; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + const pane = overlayContainerElement.children[0] as HTMLElement; + expect(pane.style.minHeight).toEqual('500px'); + }); + it('should create the backdrop if designated', () => { fixture.componentInstance.hasBackdrop = true; fixture.componentInstance.isOpen = true; @@ -219,7 +237,7 @@ describe('Overlay directives', () => { [hasBackdrop]="hasBackdrop" backdropClass="md-test-class" (backdropClick)="backdropClicked=true" [offsetX]="offsetX" [offsetY]="offsetY" (positionChange)="positionChangeHandler($event)" (attach)="attachHandler()" - (detach)="detachHandler()"> + (detach)="detachHandler()" [minWidth]="minWidth" [minHeight]="minHeight">

Menu content

`, }) @@ -227,6 +245,8 @@ class ConnectedOverlayDirectiveTest { isOpen = false; width: number | string; height: number | string; + minWidth: number | string; + minHeight: number | string; offsetX: number = 0; offsetY: number = 0; hasBackdrop: boolean; diff --git a/src/lib/core/overlay/overlay-directives.ts b/src/lib/core/overlay/overlay-directives.ts index c3e19683a08f..10e18d06652c 100644 --- a/src/lib/core/overlay/overlay-directives.ts +++ b/src/lib/core/overlay/overlay-directives.ts @@ -106,6 +106,12 @@ export class ConnectedOverlayDirective implements OnDestroy { /** The height of the overlay panel. */ @Input() height: number | string; + /** The min width of the overlay panel. */ + @Input() minWidth: number | string; + + /** The min height of the overlay panel. */ + @Input() minHeight: number | string; + /** The custom class to be set on the backdrop element. */ @Input() backdropClass: string; @@ -180,6 +186,14 @@ export class ConnectedOverlayDirective implements OnDestroy { overlayConfig.height = this.height; } + if (this.minWidth || this.minWidth === 0) { + overlayConfig.minWidth = this.minWidth; + } + + if (this.minHeight || this.minHeight === 0) { + overlayConfig.minHeight = this.minHeight; + } + overlayConfig.hasBackdrop = this.hasBackdrop; if (this.backdropClass) { diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts index 0fb3b758b372..99b2d3af9bde 100644 --- a/src/lib/core/overlay/overlay-ref.ts +++ b/src/lib/core/overlay/overlay-ref.ts @@ -81,6 +81,14 @@ export class OverlayRef implements PortalHost { if (this._state.height || this._state.height === 0) { this._pane.style.height = formatCssUnit(this._state.height); } + + if (this._state.minWidth || this._state.minWidth === 0) { + this._pane.style.minWidth = formatCssUnit(this._state.minWidth); + } + + if (this._state.minHeight || this._state.minHeight === 0) { + this._pane.style.minHeight = formatCssUnit(this._state.minHeight); + } } /** Attaches a backdrop for this overlay. */ diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index 61b07fb05a16..f70b1fae378e 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -22,6 +22,12 @@ export class OverlayState { /** The height of the overlay panel. If a number is provided, pixel units are assumed. **/ height: number | string; + /** The min-width of the overlay panel. If a number is provided, pixel units are assumed. **/ + minWidth: number | string; + + /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. **/ + minHeight: number | string; + /** The direction of the text in the overlay panel. */ direction: LayoutDirection = 'ltr'; diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index 05c0dc39d2b6..78274f2f8453 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -147,6 +147,24 @@ describe('Overlay', () => { expect(pane.style.height).toEqual('100vh'); }); + it('should apply the min width set in the config', () => { + state.minWidth = 200; + + overlay.create(state).attach(componentPortal); + const pane = overlayContainerElement.children[0] as HTMLElement; + expect(pane.style.minWidth).toEqual('200px'); + }); + + + it('should apply the min height set in the config', () => { + state.minHeight = 500; + + overlay.create(state).attach(componentPortal); + const pane = overlayContainerElement.children[0] as HTMLElement; + expect(pane.style.minHeight).toEqual('500px'); + }); + + it('should support zero widths and heights', () => { state.width = 0; state.height = 0;