From 109c61bb6e2fab71a58c2cd158c20c1699fc2efc Mon Sep 17 00:00:00 2001 From: Ales Rechtorik Date: Wed, 5 Oct 2016 22:37:54 +0200 Subject: [PATCH 1/3] add ability to set custom class on overlay pane, implement in dialog and menu --- src/demo-app/dialog/dialog-demo.scss | 7 +++++++ src/demo-app/dialog/dialog-demo.ts | 5 +++-- src/demo-app/menu/menu-demo.html | 16 ++++++++++++++++ src/lib/core/overlay/overlay-state.ts | 5 ++++- src/lib/core/overlay/overlay.scss | 1 - 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 +++++++- 10 files changed, 64 insertions(+), 8 deletions(-) diff --git a/src/demo-app/dialog/dialog-demo.scss b/src/demo-app/dialog/dialog-demo.scss index 5ac00398d901..7682ce89298b 100644 --- a/src/demo-app/dialog/dialog-demo.scss +++ b/src/demo-app/dialog/dialog-demo.scss @@ -1,3 +1,10 @@ .demo-dialog { color: rebeccapurple; } + +// apply custom z-index +/deep/ .md-overlay-pane { + &.jazz-dialog { + z-index: 9999; + } +} diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index 6fb4e994c7ef..e7f2d0440792 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -1,11 +1,11 @@ -import {Component, ViewContainerRef} from '@angular/core'; +import {Component, ViewContainerRef,ViewEncapsulation} from '@angular/core'; import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular/material'; @Component({ moduleId: module.id, selector: 'dialog-demo', templateUrl: 'dialog-demo.html', - styleUrls: ['dialog-demo.css'], + styleUrls: ['dialog-demo.css'] }) export class DialogDemo { dialogRef: MdDialogRef; @@ -18,6 +18,7 @@ export class DialogDemo { open() { let config = new MdDialogConfig(); config.viewContainerRef = this.viewContainerRef; + config.paneClassName = 'jazz-dialog'; this.dialogRef = this.dialog.open(JazzDialog, config); diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html index a28d9fd12f59..a44d991deaf2 100644 --- a/src/demo-app/menu/menu-demo.html +++ b/src/demo-app/menu/menu-demo.html @@ -60,4 +60,20 @@ +
+

Custom classes on menu' overlay pane

+ + + + + + + + + +
diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index 8f9d39de72d0..55086c6c4d93 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -7,11 +7,14 @@ import {PositionStrategy} from './position/position-strategy'; */ export class OverlayState { /** Strategy with which to position the overlay. */ - positionStrategy: PositionStrategy; + positionStrategy: PositionStrategy /** Whether the overlay has a backdrop. */ hasBackdrop: boolean = false; + /** Optional custom class to be added to the pane. */ + paneClassName: string | Array; + // TODO(jelbourn): configuration still to add // - overlay size // - focus trap diff --git a/src/lib/core/overlay/overlay.scss b/src/lib/core/overlay/overlay.scss index 62be604429c3..4873584a36c8 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.ts b/src/lib/core/overlay/overlay.ts index 236a5c258c88..4aeb23d8662e 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,10 +52,21 @@ 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 { + private _createPaneElement(state: OverlayState): HTMLElement { var pane = document.createElement('div'); - pane.id = `md-overlay-${nextUniqueId++}`; + const id = nextUniqueId++; + pane.id = `md-overlay-${id}`; pane.classList.add('md-overlay-pane'); + pane.classList.add(`md-has-index-${id}`); + + if (state.paneClassName) { + // check if custom class is an array of classes + if (state.paneClassName.constructor === Array) { + pane.classList.add(...>state.paneClassName); + } else { + pane.classList.add(state.paneClassName); + } + } this._overlayContainer.getContainerElement().appendChild(pane); diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index fa6d74fb6e26..bace86d14809 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. */ + paneClassName: string | Array; + // 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 abd69a1329cd..df1566c69bde 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -120,6 +120,10 @@ export class MdDialog { .centerHorizontally() .centerVertically(); + if (dialogConfig.paneClassName) { + state.paneClassName = dialogConfig.paneClassName; + } + return state; } } diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 51c038f83383..8ba5a52c2b69 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -59,6 +59,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('paneClassName') paneClassName: string | Array; + @Output() close = new EventEmitter; /** diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 419d8a827d09..121a26ce11e8 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -147,8 +147,14 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { * @returns OverlayState */ private _getOverlayConfig(): OverlayState { - const overlayState = new OverlayState(); + let overlayState: OverlayState = new OverlayState(); overlayState.positionStrategy = this._getPosition(); + + // check if custom paneClassName is set on menu and pass it to overlay config + if (this.menu.paneClassName) { + overlayState.paneClassName = this.menu.paneClassName; + } + return overlayState; } From 5eafef5beb470e241d4e8467b9b95a72233187fa Mon Sep 17 00:00:00 2001 From: Ales Rechtorik Date: Wed, 5 Oct 2016 22:49:50 +0200 Subject: [PATCH 2/3] fix missing semicolon --- src/lib/core/overlay/overlay-state.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index 55086c6c4d93..500dc4407514 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -7,7 +7,7 @@ import {PositionStrategy} from './position/position-strategy'; */ export class OverlayState { /** Strategy with which to position the overlay. */ - positionStrategy: PositionStrategy + positionStrategy: PositionStrategy; /** Whether the overlay has a backdrop. */ hasBackdrop: boolean = false; From bdddf595a9aea3d71e97d59cce0de4d8f9bbde29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ale=C5=A1?= Date: Thu, 6 Oct 2016 18:49:02 +0200 Subject: [PATCH 3/3] remove unused import --- src/demo-app/dialog/dialog-demo.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index e7f2d0440792..58360c22d7c6 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -1,4 +1,4 @@ -import {Component, ViewContainerRef,ViewEncapsulation} from '@angular/core'; +import {Component, ViewContainerRef} from '@angular/core'; import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular/material'; @Component({