From 43d66d6b439644b69c84938740ef28534debcc6a Mon Sep 17 00:00:00 2001 From: Emilio Martinez-Cordero Date: Tue, 3 Oct 2017 00:12:29 -0700 Subject: [PATCH 1/8] feat(dialog): support minWidth, minHeight, maxWidth and maxHeight * Adds Dialog support for `minWidth`, `minHeight`, `maxWidth` and `maxHeight` via config. Mostly delegates to Overlay. * Moves declared `max-width` on `. mat-dialog-container` stylesheet to be authored via `MatDialogConfig`, providing the same default `80vw` value. Without this change, there would likely be undesired layout results due to different constraints being set on the overlay container vs the nested the dialog container. * Added note on `minHeight` and `maxHeight` regarding the potential need to also set a `height` due to the rules around computed height resolution (https://www.w3.org/TR/CSS2/visudet.html#min-max-widths). Any value set on `height` as a default would probably be assuming too much and may have varying results across browsers. --- src/lib/dialog/dialog-config.ts | 20 ++++++++++++++++++++ src/lib/dialog/dialog.scss | 2 -- src/lib/dialog/dialog.ts | 6 +++++- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index f2dc3e0bd500..4f89264369f4 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -57,6 +57,26 @@ export class MatDialogConfig { /** Height of the dialog. */ height?: string = ''; + /** Min-width of the dialog. */ + minWidth?: string = ''; + + /** + * Min-height of the dialog. + * For this value to be effectively applied, `height` may also need to be defined. + * See https://www.w3.org/TR/CSS2/visudet.html#min-max-widths + */ + minHeight?: string = ''; + + /** Max-width of the dialog. */ + maxWidth?: string = '80vw'; + + /** + * Max-height of the dialog. + * For this value to be effectively applied, `height` may also need to be defined. + * See https://www.w3.org/TR/CSS2/visudet.html#min-max-widths + */ + maxHeight?: string = ''; + /** Position overrides. */ position?: DialogPosition; diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss index 2f04aec0b4cb..4a72cc903a01 100644 --- a/src/lib/dialog/dialog.scss +++ b/src/lib/dialog/dialog.scss @@ -5,7 +5,6 @@ $mat-dialog-padding: 24px !default; $mat-dialog-border-radius: 2px !default; -$mat-dialog-max-width: 80vw !default; $mat-dialog-max-height: 65vh !default; $mat-dialog-button-margin: 8px !default; @@ -17,7 +16,6 @@ $mat-dialog-button-margin: 8px !default; border-radius: $mat-dialog-border-radius; box-sizing: border-box; overflow: auto; - max-width: $mat-dialog-max-width; outline: 0; // The dialog container should completely fill its parent overlay element. diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 38621ce96286..894f32ef59a3 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -190,7 +190,11 @@ export class MatDialog { scrollStrategy: this._scrollStrategy(), panelClass: dialogConfig.panelClass, hasBackdrop: dialogConfig.hasBackdrop, - direction: dialogConfig.direction + direction: dialogConfig.direction, + minWidth: dialogConfig.minWidth, + minHeight: dialogConfig.minHeight, + maxWidth: dialogConfig.maxWidth, + maxHeight: dialogConfig.maxHeight }); if (dialogConfig.backdropClass) { From f4c23b9f3a4be71fec54a2549942b5ad60c9504d Mon Sep 17 00:00:00 2001 From: Emilio Martinez-Cordero Date: Tue, 3 Oct 2017 00:45:57 -0700 Subject: [PATCH 2/8] test(dialog): add tests for minWidth, minHeight, maxWidth and maxHeight --- src/lib/dialog/dialog.spec.ts | 63 +++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 1ce22f92d319..4d4b0fde7242 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -336,6 +336,69 @@ describe('MatDialog', () => { expect(overlayPane.style.height).toBe('100px'); }); + it('should should override the min-width of the overlay pane', () => { + dialog.open(PizzaMsg, { + minWidth: '500px' + }); + + viewContainerFixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.minWidth).toBe('500px'); + }); + + it('should should override the max-width of the overlay pane', fakeAsync(() => { + let dialogRef = dialog.open(PizzaMsg); + + viewContainerFixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.maxWidth).toBe('80vw', + 'Expected dialog to set a default max-width on overlay pane'); + + dialogRef.close(); + + tick(500); + viewContainerFixture.detectChanges(); + flushMicrotasks(); + + dialogRef = dialog.open(PizzaMsg, { + maxWidth: '100px' + }); + + viewContainerFixture.detectChanges(); + + overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.maxWidth).toBe('100px'); + })); + + it('should should override the min-height of the overlay pane', () => { + dialog.open(PizzaMsg, { + minHeight: '300px' + }); + + viewContainerFixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.minHeight).toBe('300px'); + }); + + it('should should override the max-height of the overlay pane', () => { + dialog.open(PizzaMsg, { + maxHeight: '100px' + }); + + viewContainerFixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + + expect(overlayPane.style.maxHeight).toBe('100px'); + }); + it('should should override the top offset of the overlay pane', () => { dialog.open(PizzaMsg, { position: { From 0cc61ae0fe3ae40e7777e322e7d2913ed7a54510 Mon Sep 17 00:00:00 2001 From: Emilio Martinez-Cordero Date: Tue, 3 Oct 2017 00:49:16 -0700 Subject: [PATCH 3/8] demo(dialog): add fields for minWidth, minHeight, maxWidth and maxHeight MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Not adding `minWidth`, `minHeight`, `maxWidth` and `maxHeight` to `config` to avoid overriding the default value of `maxWidth` particularly—the type checker will require it to be a string. Instead, setting `config` to type `MatDialogConfig` is prefered to appease the type checker since those four properties are optional. --- src/demo-app/dialog/dialog-demo.html | 18 ++++++++++++++++++ src/demo-app/dialog/dialog-demo.ts | 4 ++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html index ffceaaae13bf..b54508cf30b0 100644 --- a/src/demo-app/dialog/dialog-demo.html +++ b/src/demo-app/dialog/dialog-demo.html @@ -23,6 +23,24 @@

Dialog dimensions

+

+ + + + + + +

+ +

+ + + + + + +

+

Dialog position

diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index 87c67b151e18..05f29786bda2 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -1,6 +1,6 @@ import {Component, Inject, ViewChild, TemplateRef} from '@angular/core'; import {DOCUMENT} from '@angular/platform-browser'; -import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; +import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; @Component({ @@ -14,7 +14,7 @@ export class DialogDemo { lastAfterClosedResult: string; lastBeforeCloseResult: string; actionsAlignment: string; - config = { + config: Partial = { disableClose: false, panelClass: 'custom-overlay-pane-class', hasBackdrop: true, From 3582d1475be503ed3c1d0a057fa054a4fdbfb18b Mon Sep 17 00:00:00 2001 From: Emilio Martinez-Cordero Date: Tue, 3 Oct 2017 03:02:28 -0700 Subject: [PATCH 4/8] demo(dialog): address AOT issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Appeases the AOT type checker for the template by extending `MatDialogConfig` to disallow `position` from being undefined, given that it’s optional. Guards cannot be set on the template because the values are bound to NgModel. --- src/demo-app/dialog/dialog-demo.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index 05f29786bda2..c7c979202f83 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -1,7 +1,21 @@ import {Component, Inject, ViewChild, TemplateRef} from '@angular/core'; import {DOCUMENT} from '@angular/platform-browser'; -import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; - +import { + DialogPosition, + MatDialog, + MatDialogConfig, + MatDialogRef, + MAT_DIALOG_DATA +} from '@angular/material'; + +/** + * Appeases the AOT type checker for the template by extending `MatDialogConfig` + * to disallow `position` from being undefined, given that it’s optional. + * Guards cannot be set on the template because the values are bound to NgModel. + */ +interface MatDemoDialogConfig extends MatDialogConfig { + position: DialogPosition; +} @Component({ moduleId: module.id, @@ -14,7 +28,7 @@ export class DialogDemo { lastAfterClosedResult: string; lastBeforeCloseResult: string; actionsAlignment: string; - config: Partial = { + config: MatDemoDialogConfig = { disableClose: false, panelClass: 'custom-overlay-pane-class', hasBackdrop: true, From a30dc0bed9b422e507ba01f9119d2b9c6190de5b Mon Sep 17 00:00:00 2001 From: Emilio Martinez-Cordero Date: Tue, 3 Oct 2017 11:32:33 -0700 Subject: [PATCH 5/8] chore(dialog): address feedback regarding over-verbose comments --- src/lib/dialog/dialog-config.ts | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 4f89264369f4..63e6fffcb2c3 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -60,21 +60,13 @@ export class MatDialogConfig { /** Min-width of the dialog. */ minWidth?: string = ''; - /** - * Min-height of the dialog. - * For this value to be effectively applied, `height` may also need to be defined. - * See https://www.w3.org/TR/CSS2/visudet.html#min-max-widths - */ + /** Min-height of the dialog */ minHeight?: string = ''; /** Max-width of the dialog. */ maxWidth?: string = '80vw'; - /** - * Max-height of the dialog. - * For this value to be effectively applied, `height` may also need to be defined. - * See https://www.w3.org/TR/CSS2/visudet.html#min-max-widths - */ + /** Max-height of the dialog */ maxHeight?: string = ''; /** Position overrides. */ From 8e69f7b8ad0621689f2131cf9bb47bc9e8fa701c Mon Sep 17 00:00:00 2001 From: Emilio Martinez-Cordero Date: Tue, 3 Oct 2017 11:33:53 -0700 Subject: [PATCH 6/8] fix(dialog): address feedback to not initialize some dialog config props --- src/lib/dialog/dialog-config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 63e6fffcb2c3..000c7fb3944a 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -58,16 +58,16 @@ export class MatDialogConfig { height?: string = ''; /** Min-width of the dialog. */ - minWidth?: string = ''; + minWidth?: string; /** Min-height of the dialog */ - minHeight?: string = ''; + minHeight?: string; /** Max-width of the dialog. */ maxWidth?: string = '80vw'; /** Max-height of the dialog */ - maxHeight?: string = ''; + maxHeight?: string; /** Position overrides. */ position?: DialogPosition; From 2b1c7334157c16e0195557de2f537f24d3e27f6f Mon Sep 17 00:00:00 2001 From: Emilio Martinez-Cordero Date: Tue, 3 Oct 2017 11:55:42 -0700 Subject: [PATCH 7/8] demo(dialog): set init values for minWidth, minHeight, maxWidth and maxHeight --- src/demo-app/dialog/dialog-demo.ts | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index c7c979202f83..1895b6e31f48 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -1,21 +1,8 @@ import {Component, Inject, ViewChild, TemplateRef} from '@angular/core'; import {DOCUMENT} from '@angular/platform-browser'; -import { - DialogPosition, - MatDialog, - MatDialogConfig, - MatDialogRef, - MAT_DIALOG_DATA -} from '@angular/material'; - -/** - * Appeases the AOT type checker for the template by extending `MatDialogConfig` - * to disallow `position` from being undefined, given that it’s optional. - * Guards cannot be set on the template because the values are bound to NgModel. - */ -interface MatDemoDialogConfig extends MatDialogConfig { - position: DialogPosition; -} +import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; + +const defaultDialogConfig = new MatDialogConfig(); @Component({ moduleId: module.id, @@ -28,13 +15,17 @@ export class DialogDemo { lastAfterClosedResult: string; lastBeforeCloseResult: string; actionsAlignment: string; - config: MatDemoDialogConfig = { + config = { disableClose: false, panelClass: 'custom-overlay-pane-class', hasBackdrop: true, backdropClass: '', width: '', height: '', + minWidth: '', + minHeight: '', + maxWidth: defaultDialogConfig.maxWidth, + maxHeight: '', position: { top: '', bottom: '', From 3b4036146e97827ed687190f08cbadebd1e247d9 Mon Sep 17 00:00:00 2001 From: Emilio Martinez-Cordero Date: Thu, 5 Oct 2017 11:12:39 -0700 Subject: [PATCH 8/8] chore(dialog): allow number|string for min/max widths and heights --- src/lib/dialog/dialog-config.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 000c7fb3944a..3c4c901a0075 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -57,17 +57,17 @@ export class MatDialogConfig { /** Height of the dialog. */ height?: string = ''; - /** Min-width of the dialog. */ - minWidth?: string; + /** Min-width of the dialog. If a number is provided, pixel units are assumed. */ + minWidth?: number | string; - /** Min-height of the dialog */ - minHeight?: string; + /** Min-height of the dialog. If a number is provided, pixel units are assumed. */ + minHeight?: number | string; - /** Max-width of the dialog. */ - maxWidth?: string = '80vw'; + /** Max-width of the dialog. If a number is provided, pixel units are assumed. Defaults to 80vw */ + maxWidth?: number | string = '80vw'; - /** Max-height of the dialog */ - maxHeight?: string; + /** Max-height of the dialog. If a number is provided, pixel units are assumed. */ + maxHeight?: number | string; /** Position overrides. */ position?: DialogPosition;