From 5b57787dc775c45f1dd3531e2b99fb23628f631b Mon Sep 17 00:00:00 2001 From: Ales Rechtorik Date: Mon, 24 Oct 2016 21:49:49 +0200 Subject: [PATCH 1/2] feat(overlay): add ability to set custom class on panes --- src/lib/core/overlay/_overlay.scss | 1 - src/lib/core/overlay/overlay-state.ts | 3 +++ src/lib/core/overlay/overlay.spec.ts | 23 +++++++++++++++++++++++ src/lib/core/overlay/overlay.ts | 17 +++++++++++++---- src/lib/dialog/dialog-config.ts | 3 +++ src/lib/dialog/dialog.ts | 4 ++++ src/lib/menu/menu-directive.ts | 6 ++++++ src/lib/menu/menu-trigger.ts | 8 +++++++- 8 files changed, 59 insertions(+), 6 deletions(-) diff --git a/src/lib/core/overlay/_overlay.scss b/src/lib/core/overlay/_overlay.scss index dafd279b0da9..5b6e34c361c0 100644 --- a/src/lib/core/overlay/_overlay.scss +++ b/src/lib/core/overlay/_overlay.scss @@ -20,7 +20,6 @@ left: 0; height: 100%; width: 100%; - z-index: $md-z-index-overlay-container; } // A single overlay pane. diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index 95d9dcef3fbb..932f08403883 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -14,6 +14,9 @@ export class OverlayState { backdropClass: string = 'md-overlay-dark-backdrop'; + /** Optional custom class to be added to dialog's overlay pane. */ + overlayClass: string | string[]; + // TODO(jelbourn): configuration still to add // - overlay size // - focus trap diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index 804ced72010c..dfb2dd8cd72c 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -142,6 +142,29 @@ describe('Overlay', () => { expect(backdrop.classList).toContain('md-overlay-transparent-backdrop'); }); + it('should apply a custom overlay pane class', () => { + config.overlayClass = 'some-custom-class'; + + let overlayRef = overlay.create(config); + overlayRef.attach(componentPortal); + viewContainerFixture.detectChanges(); + + let backdrop = overlayContainerElement.querySelector('.md-overlay-pane'); + expect(backdrop.classList).toContain('some-custom-class'); + }); + + it('should apply a custom overlay pane classes', () => { + config.overlayClass = ['first-custom-class', 'second-custom-class']; + + let overlayRef = overlay.create(config); + overlayRef.attach(componentPortal); + viewContainerFixture.detectChanges(); + + let backdrop = overlayContainerElement.querySelector('.md-overlay-pane'); + expect(backdrop.classList).toContain('first-custom-class'); + expect(backdrop.classList).toContain('second-custom-class'); + }); + }); }); diff --git a/src/lib/core/overlay/overlay.ts b/src/lib/core/overlay/overlay.ts index 236a5c258c88..fe3209a2182c 100644 --- a/src/lib/core/overlay/overlay.ts +++ b/src/lib/core/overlay/overlay.ts @@ -37,7 +37,7 @@ export class Overlay { * @returns A reference to the created overlay. */ create(state: OverlayState = defaultState): OverlayRef { - return this._createOverlayRef(this._createPaneElement(), state); + return this._createOverlayRef(this._createPaneElement(state), state); } /** @@ -52,11 +52,20 @@ export class Overlay { * Creates the DOM element for an overlay and appends it to the overlay container. * @returns Promise resolving to the created element. */ - private _createPaneElement(): HTMLElement { - var pane = document.createElement('div'); - pane.id = `md-overlay-${nextUniqueId++}`; + private _createPaneElement(state: OverlayState): HTMLElement { + let pane = document.createElement('div'); + const id = nextUniqueId++; + pane.id = `md-overlay-${id}`; pane.classList.add('md-overlay-pane'); + let overlayClass = state.overlayClass; + if (overlayClass) { + if (typeof overlayClass === 'string') { + overlayClass = [overlayClass]; + } + pane.classList.add(...overlayClass); + } + this._overlayContainer.getContainerElement().appendChild(pane); return pane; diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index fa6d74fb6e26..67f016d151e4 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -14,6 +14,9 @@ export class MdDialogConfig { /** The ARIA role of the dialog element. */ role: DialogRole = 'dialog'; + /** Optional custom class to be added to dialog's overlay pane. */ + overlayClass: string | string[]; + // TODO(jelbourn): add configuration for size, clickOutsideToClose, lifecycle hooks, // ARIA labelling. } diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 05384daecc78..8750f3eff36f 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -120,6 +120,10 @@ export class MdDialog { .centerHorizontally() .centerVertically(); + if (dialogConfig.overlayClass) { + state.overlayClass = dialogConfig.overlayClass; + } + return state; } } diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 2a3eeaa36b7c..9916ef5daeb0 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -58,6 +58,12 @@ export class MdMenu { }, {}); } + /** + * Takes either a string or array of strins and applies them to the + * parent overlay pane, giving consumer control over z-indexes + */ + @Input('overlayClass') overlayClass: string | Array; + @Output() close = new EventEmitter; /** diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 474259790bfe..a3f4d112a6bb 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -169,10 +169,16 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { * @returns OverlayState */ private _getOverlayConfig(): OverlayState { - const overlayState = new OverlayState(); + let overlayState = new OverlayState(); overlayState.positionStrategy = this._getPosition(); overlayState.hasBackdrop = true; overlayState.backdropClass = 'md-overlay-transparent-backdrop'; + + // check if custom `overlayClass` is set on menu and pass it to overlay config + if (this.menu.overlayClass) { + overlayState.overlayClass = this.menu.overlayClass; + } + return overlayState; } From d2b673d5deb5e92f6bb75c84c726a6d29a0f7253 Mon Sep 17 00:00:00 2001 From: Ales Rechtorik Date: Mon, 24 Oct 2016 21:57:15 +0200 Subject: [PATCH 2/2] rename test variable --- src/lib/core/overlay/overlay.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index dfb2dd8cd72c..480be965ffd5 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -149,8 +149,8 @@ describe('Overlay', () => { overlayRef.attach(componentPortal); viewContainerFixture.detectChanges(); - let backdrop = overlayContainerElement.querySelector('.md-overlay-pane'); - expect(backdrop.classList).toContain('some-custom-class'); + let pane = overlayContainerElement.querySelector('.md-overlay-pane'); + expect(pane.classList).toContain('some-custom-class'); }); it('should apply a custom overlay pane classes', () => { @@ -160,9 +160,9 @@ describe('Overlay', () => { overlayRef.attach(componentPortal); viewContainerFixture.detectChanges(); - let backdrop = overlayContainerElement.querySelector('.md-overlay-pane'); - expect(backdrop.classList).toContain('first-custom-class'); - expect(backdrop.classList).toContain('second-custom-class'); + let pane = overlayContainerElement.querySelector('.md-overlay-pane'); + expect(pane.classList).toContain('first-custom-class'); + expect(pane.classList).toContain('second-custom-class'); }); });