feat(dialog): custom class option

Extend dialog config options to allow custom dialog class. Custom class enables media queries. angular#4718 angular#4012
jbojcic1 · May 22, 2017 · 07442eb · 07442eb
1 parent c946631
commit 07442eb
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 0 deletions.
diff --git 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
@@ -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,7 @@ export class OverlayRef implements PortalHost {
     this._togglePointerEvents(false);
     this._state.scrollStrategy.disable();
     this._detachments.next();
+    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
@@ -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
@@ -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.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) {