From 0b54668b4da909c4704135327b2d877446a7a295 Mon Sep 17 00:00:00 2001 From: Kara Date: Wed, 19 Oct 2016 15:36:44 -0700 Subject: [PATCH] feat(overlay): add custom classes for backdrop (#1532) --- src/demo-app/overlay/overlay-demo.html | 2 ++ src/demo-app/overlay/overlay-demo.ts | 15 +++++++++++++ src/lib/core/overlay/overlay-ref.ts | 3 +++ src/lib/core/overlay/overlay-state.ts | 2 ++ src/lib/core/overlay/overlay.scss | 11 +++++++-- src/lib/core/overlay/overlay.spec.ts | 31 +++++++++++++++++++++++--- 6 files changed, 59 insertions(+), 5 deletions(-) diff --git a/src/demo-app/overlay/overlay-demo.html b/src/demo-app/overlay/overlay-demo.html index d43c333296a0..1575e8dbe222 100644 --- a/src/demo-app/overlay/overlay-demo.html +++ b/src/demo-app/overlay/overlay-demo.html @@ -25,3 +25,5 @@ + + \ No newline at end of file diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts index f3164777657c..d19173fee58c 100644 --- a/src/demo-app/overlay/overlay-demo.ts +++ b/src/demo-app/overlay/overlay-demo.ts @@ -74,6 +74,21 @@ export class OverlayDemo { let overlayRef = this.overlay.create(config); overlayRef.attach(new ComponentPortal(SpagettiPanel, this.viewContainerRef)); } + + openPanelWithBackdrop() { + let config = new OverlayState(); + + config.positionStrategy = this.overlay.position() + .global() + .centerHorizontally(); + config.hasBackdrop = true; + config.backdropClass = 'md-overlay-transparent-backdrop'; + + let overlayRef = this.overlay.create(config); + overlayRef.attach(this.templatePortals.first); + overlayRef.backdropClick().subscribe(() => overlayRef.detach()); + } + } /** Simple component to load into an overlay */ diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts index 5d3b11717f7a..aba1cac1e112 100644 --- a/src/lib/core/overlay/overlay-ref.ts +++ b/src/lib/core/overlay/overlay-ref.ts @@ -62,6 +62,8 @@ export class OverlayRef implements PortalHost { private _attachBackdrop() { this._backdropElement = document.createElement('div'); this._backdropElement.classList.add('md-overlay-backdrop'); + this._backdropElement.classList.add(this._state.backdropClass); + this._pane.parentElement.appendChild(this._backdropElement); // Forward backdrop clicks such that the consumer of the overlay can perform whatever @@ -82,6 +84,7 @@ export class OverlayRef implements PortalHost { if (backdropToDetach) { backdropToDetach.classList.remove('md-overlay-backdrop-showing'); + backdropToDetach.classList.remove(this._state.backdropClass); backdropToDetach.addEventListener('transitionend', () => { backdropToDetach.parentNode.removeChild(backdropToDetach); diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts index 8f9d39de72d0..95d9dcef3fbb 100644 --- a/src/lib/core/overlay/overlay-state.ts +++ b/src/lib/core/overlay/overlay-state.ts @@ -12,6 +12,8 @@ export class OverlayState { /** Whether the overlay has a backdrop. */ hasBackdrop: boolean = false; + backdropClass: string = 'md-overlay-dark-backdrop'; + // 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..dafd279b0da9 100644 --- a/src/lib/core/overlay/overlay.scss +++ b/src/lib/core/overlay/overlay.scss @@ -4,7 +4,7 @@ @mixin md-overlay() { - $md-backdrop-color: md-color($md-grey, 900); + $md-dark-backdrop-color: md-color($md-grey, 900); // TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit. @@ -45,11 +45,18 @@ // TODO(jelbourn): figure out if there are actually spec'ed colors for both light and dark // themes here. Currently using the values from Angular Material 1. transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function; - background: $md-backdrop-color; opacity: 0; } .md-overlay-backdrop.md-overlay-backdrop-showing { opacity: 0.48; } + + .md-overlay-dark-backdrop { + background: $md-dark-backdrop-color; + } + + .md-overlay-transparent-backdrop { + background: none; + } } diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts index 7029286f6826..804ced72010c 100644 --- a/src/lib/core/overlay/overlay.spec.ts +++ b/src/lib/core/overlay/overlay.spec.ts @@ -99,17 +99,21 @@ describe('Overlay', () => { }); describe('backdrop', () => { - it('should create and destroy an overlay backdrop', () => { - let config = new OverlayState(); + let config: OverlayState; + + beforeEach(() => { + config = new OverlayState(); config.hasBackdrop = true; + }); + it('should create and destroy an overlay backdrop', () => { let overlayRef = overlay.create(config); overlayRef.attach(componentPortal); viewContainerFixture.detectChanges(); let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop'); expect(backdrop).toBeTruthy(); - expect(backdrop.classList).not.toContain('.md-overlay-backdrop-showing'); + expect(backdrop.classList).not.toContain('md-overlay-backdrop-showing'); let backdropClickHandler = jasmine.createSpy('backdropClickHander'); overlayRef.backdropClick().subscribe(backdropClickHandler); @@ -117,6 +121,27 @@ describe('Overlay', () => { backdrop.click(); expect(backdropClickHandler).toHaveBeenCalled(); }); + + it('should apply the default overlay backdrop class', () => { + let overlayRef = overlay.create(config); + overlayRef.attach(componentPortal); + viewContainerFixture.detectChanges(); + + let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop'); + expect(backdrop.classList).toContain('md-overlay-dark-backdrop'); + }); + + it('should apply a custom overlay backdrop class', () => { + config.backdropClass = 'md-overlay-transparent-backdrop'; + + let overlayRef = overlay.create(config); + overlayRef.attach(componentPortal); + viewContainerFixture.detectChanges(); + + let backdrop = overlayContainerElement.querySelector('.md-overlay-backdrop'); + expect(backdrop.classList).toContain('md-overlay-transparent-backdrop'); + }); + }); });