From 5eec0ff3caba4a497bd3579d8291feabddbb8098 Mon Sep 17 00:00:00 2001 From: Josip Bojcic Date: Mon, 22 May 2017 20:47:32 +0200 Subject: [PATCH 1/4] feat(dialog): custom class option Extend dialog config options to allow custom dialog class. Custom class enables media queries. #4718 #4012 --- src/demo-app/dialog/dialog-demo.ts | 1 + src/lib/core/overlay/overlay-ref.ts | 7 +++++++ src/lib/core/overlay/overlay-state.ts | 3 +++ src/lib/dialog/dialog-config.ts | 3 +++ src/lib/dialog/dialog.spec.ts | 13 +++++++++++++ src/lib/dialog/dialog.ts | 1 + 6 files changed, 28 insertions(+) diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index f0e5875d17bb..f1607ceafa29 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -15,6 +15,7 @@ export class DialogDemo { actionsAlignment: string; config: MdDialogConfig = { disableClose: false, + dialogClass: 'custom-dialog-class', hasBackdrop: true, backdropClass: '', width: '', diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts index 00bc206aeaa1..614e0049e161 100644 --- a/src/lib/core/overlay/overlay-ref.ts +++ b/src/lib/core/overlay/overlay-ref.ts @@ -53,6 +53,10 @@ export class OverlayRef implements PortalHost { this._attachBackdrop(); } + if (this._state.dialogClass) { + this._pane.classList.add(this._state.dialogClass); + } + return attachResult; } @@ -69,6 +73,9 @@ export class OverlayRef implements PortalHost { this._togglePointerEvents(false); this._state.scrollStrategy.disable(); this._detachments.next(); + if (this._state.dialogClass) { + this._pane.classList.remove(this._state.dialogClass); + } return this._portalHost.detach(); } diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index 6f397657ae62..c31c62a5ee6d 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -15,6 +15,9 @@ export class OverlayState { /** Strategy to be used when handling scroll events while the overlay is open. */ scrollStrategy: ScrollStrategy = new NoopScrollStrategy(); + /** Custom class to add to the dialog */ + dialogClass: string = ''; + /** Whether the overlay has a backdrop. */ hasBackdrop: boolean = false; diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 60377fc9caae..3b360dc3923d 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -27,6 +27,9 @@ export class MdDialogConfig { /** The ARIA role of the dialog element. */ role?: DialogRole = 'dialog'; + /** Custom class for the dialog, */ + dialogClass?: string = ''; + /** Whether the dialog has a backdrop. */ hasBackdrop?: boolean = true; diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index a880bcb1344b..98fd1945919a 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -455,6 +455,19 @@ describe('MdDialog', () => { }); }); + describe('dialogClass option', () => { + it('should have custom dialog class', () => { + dialog.open(PizzaMsg, { + dialogClass: 'custom-dialog-class', + viewContainerRef: testViewContainerRef + }); + + viewContainerFixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.custom-dialog-class')).toBeTruthy(); + }); + }); + describe('backdropClass option', () => { it('should have default backdrop class', () => { dialog.open(PizzaMsg, { diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index a4c275bdf6e3..a82ea8f9e7d4 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -121,6 +121,7 @@ export class MdDialog { */ private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState { let overlayState = new OverlayState(); + overlayState.dialogClass = dialogConfig.dialogClass; overlayState.hasBackdrop = dialogConfig.hasBackdrop; overlayState.scrollStrategy = new BlockScrollStrategy(this._viewportRuler); if (dialogConfig.backdropClass) { From 9832cad0ef34527f1b5d0da849d7172a8cbc18a0 Mon Sep 17 00:00:00 2001 From: Josip Bojcic Date: Wed, 24 May 2017 10:06:03 +0200 Subject: [PATCH 2/4] refactor(dialog): custom class option. Changed custom class config option name. Remove unnecessary class removal on detach. #4718 #4012 --- src/demo-app/dialog/dialog-demo.ts | 2 +- src/lib/core/overlay/overlay-ref.ts | 7 ++----- src/lib/core/overlay/overlay-state.ts | 2 +- src/lib/dialog/dialog-config.ts | 2 +- src/lib/dialog/dialog.spec.ts | 8 ++++---- src/lib/dialog/dialog.ts | 2 +- 6 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index f1607ceafa29..51eb544ea05f 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -15,7 +15,7 @@ export class DialogDemo { actionsAlignment: string; config: MdDialogConfig = { disableClose: false, - dialogClass: 'custom-dialog-class', + panelClass: 'custom-dialog-class', hasBackdrop: true, backdropClass: '', width: '', diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts index 614e0049e161..6a58b6a2b467 100644 --- a/src/lib/core/overlay/overlay-ref.ts +++ b/src/lib/core/overlay/overlay-ref.ts @@ -53,8 +53,8 @@ export class OverlayRef implements PortalHost { this._attachBackdrop(); } - if (this._state.dialogClass) { - this._pane.classList.add(this._state.dialogClass); + if (this._state.panelClass) { + this._pane.classList.add(this._state.panelClass); } return attachResult; @@ -73,9 +73,6 @@ export class OverlayRef implements PortalHost { this._togglePointerEvents(false); this._state.scrollStrategy.disable(); this._detachments.next(); - if (this._state.dialogClass) { - this._pane.classList.remove(this._state.dialogClass); - } return this._portalHost.detach(); } diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index c31c62a5ee6d..c349a5815132 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -16,7 +16,7 @@ export class OverlayState { scrollStrategy: ScrollStrategy = new NoopScrollStrategy(); /** Custom class to add to the dialog */ - dialogClass: string = ''; + panelClass: string = ''; /** Whether the overlay has a backdrop. */ hasBackdrop: boolean = false; diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index 3b360dc3923d..c965cfb03276 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -28,7 +28,7 @@ export class MdDialogConfig { role?: DialogRole = 'dialog'; /** Custom class for the dialog, */ - dialogClass?: string = ''; + panelClass?: string = ''; /** Whether the dialog has a backdrop. */ hasBackdrop?: boolean = true; diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 98fd1945919a..b6663dfd35a7 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -455,16 +455,16 @@ describe('MdDialog', () => { }); }); - describe('dialogClass option', () => { - it('should have custom dialog class', () => { + describe('panelClass option', () => { + it('should have custom panel class', () => { dialog.open(PizzaMsg, { - dialogClass: 'custom-dialog-class', + panelClass: 'custom-panel-class', viewContainerRef: testViewContainerRef }); viewContainerFixture.detectChanges(); - expect(overlayContainerElement.querySelector('.custom-dialog-class')).toBeTruthy(); + expect(overlayContainerElement.querySelector('.custom-panel-class')).toBeTruthy(); }); }); diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index a82ea8f9e7d4..71bf25ace0c9 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -121,7 +121,7 @@ export class MdDialog { */ private _getOverlayState(dialogConfig: MdDialogConfig): OverlayState { let overlayState = new OverlayState(); - overlayState.dialogClass = dialogConfig.dialogClass; + overlayState.panelClass = dialogConfig.panelClass; overlayState.hasBackdrop = dialogConfig.hasBackdrop; overlayState.scrollStrategy = new BlockScrollStrategy(this._viewportRuler); if (dialogConfig.backdropClass) { From 594461608f4ad8cca7d818700c933604b8f7d078 Mon Sep 17 00:00:00 2001 From: Josip Bojcic Date: Wed, 24 May 2017 10:08:02 +0200 Subject: [PATCH 3/4] test(dialog): custom class option. Added missing unit test to check if overlay pane has custom panel class. #4718 #4012 --- src/lib/core/overlay/overlay.spec.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index 681849b44f3c..533e127d2f54 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -336,6 +336,24 @@ describe('Overlay', () => { }); + describe('panelClass', () => { + let config: OverlayState; + + beforeEach(() => { + config = new OverlayState(); + config.panelClass = 'custom-panel-class'; + }); + + it('should apply a custom overlay pane class', () => { + let overlayRef = overlay.create(config); + overlayRef.attach(componentPortal); + viewContainerFixture.detectChanges(); + + let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + expect(pane.classList).toContain('custom-panel-class'); + }); + }); + describe('scroll strategy', () => { let fakeScrollStrategy: FakeScrollStrategy; let config: OverlayState; From f4567946dbdf619e980df64a80fdc54b0cb9c07a Mon Sep 17 00:00:00 2001 From: Josip Bojcic Date: Wed, 24 May 2017 18:20:48 +0200 Subject: [PATCH 4/4] refactor(dialog): custom class option. Change wrong comment. Remove unnecessary beforeEach from test. #4718 #4012 --- src/demo-app/dialog/dialog-demo.ts | 2 +- src/lib/core/overlay/overlay-state.ts | 2 +- src/lib/core/overlay/overlay.spec.ts | 7 ++----- src/lib/dialog/dialog-config.ts | 2 +- 4 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index 51eb544ea05f..4c2b2282d8df 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -15,7 +15,7 @@ export class DialogDemo { actionsAlignment: string; config: MdDialogConfig = { disableClose: false, - panelClass: 'custom-dialog-class', + panelClass: 'custom-overlay-pane-class', hasBackdrop: true, backdropClass: '', width: '', diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index c349a5815132..8b59c38aa0a6 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -15,7 +15,7 @@ export class OverlayState { /** Strategy to be used when handling scroll events while the overlay is open. */ scrollStrategy: ScrollStrategy = new NoopScrollStrategy(); - /** Custom class to add to the dialog */ + /** Custom class to add to the overlay pane. */ panelClass: string = ''; /** Whether the overlay has a backdrop. */ diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index 533e127d2f54..ccc1424a563a 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -338,11 +338,8 @@ describe('Overlay', () => { describe('panelClass', () => { let config: OverlayState; - - beforeEach(() => { - config = new OverlayState(); - config.panelClass = 'custom-panel-class'; - }); + config = new OverlayState(); + config.panelClass = 'custom-panel-class'; it('should apply a custom overlay pane class', () => { let overlayRef = overlay.create(config); diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index c965cfb03276..0ea4d96acc01 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -27,7 +27,7 @@ export class MdDialogConfig { /** The ARIA role of the dialog element. */ role?: DialogRole = 'dialog'; - /** Custom class for the dialog, */ + /** Custom class for the overlay pane. */ panelClass?: string = ''; /** Whether the dialog has a backdrop. */