skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(overlay): proper backdrop stacking with multiple overlays (#2276)

Browse Source 
* fix(overlay): proper backdrop stacking with multiple overlays

Currently backdrops get inserted after their corresponding overlays in the DOM. This can lead to situations where another overlay that is technically lower in the stacking order could go above a backdrop (e.g. opening a `select` inside a `dialog`). These changes switch to doing the stacking by having the overlay and backdrop have the same `z-index` and determining the stacking order by the order of the elements in the DOM.

Fixes #2272.

* Fix wrong selectors after merge with master.
This commit is contained in:
Kristiyan Kostadinov
2016-12-21 00:27:47 +02:00
committed by Jeremy Elbourn
parent 75cd73ba2e
commit b16031a3a9
5 changed files with 50 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/core/overlay/overlay-ref.ts
+4 -4
View File
@@ -101,13 +101,13 @@ export class OverlayRef implements PortalHost {
this._backdropElement.classList.add('cdk-overlay-backdrop');
this._backdropElement.classList.add(this._state.backdropClass);
this._pane.parentElement.appendChild(this._backdropElement);
// Insert the backdrop before the pane in the DOM order,
// in order to handle stacked overlays properly.
this._pane.parentElement.insertBefore(this._backdropElement, this._pane);
// Forward backdrop clicks such that the consumer of the overlay can perform whatever
// action desired when such a click occurs (usually closing the overlay).
this._backdropElement.addEventListener('click', () => {
this._backdropClick.next(null);
});
this._backdropElement.addEventListener('click', () => this._backdropClick.next(null));
// Add class to fade-in the backdrop after one frame.
requestAnimationFrame(() => {
src/lib/core/overlay/overlay.spec.ts
+16
View File
@@ -235,6 +235,22 @@ describe('Overlay', () => {
expect(backdrop.style.pointerEvents).toBe('none');
});
it('should insert the backdrop before the overlay pane in the DOM order', () => {
let overlayRef = overlay.create(config);
overlayRef.attach(componentPortal);
viewContainerFixture.detectChanges();
let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop');
let pane = overlayContainerElement.querySelector('.cdk-overlay-pane');
let children = Array.prototype.slice.call(overlayContainerElement.children);
expect(children.indexOf(backdrop)).toBeGreaterThan(-1);
expect(children.indexOf(pane)).toBeGreaterThan(-1);
expect(children.indexOf(backdrop))
.toBeLessThan(children.indexOf(pane), 'Expected backdrop to be before the pane in the DOM');
});
});
});
src/lib/core/style/_variables.scss
+1 -2
View File
@@ -24,12 +24,11 @@ $z-index-drawer: 100 !default;
// stacking context for all overlays.
$cdk-z-index-overlay-container: 1000;
$cdk-z-index-overlay: 1000;
$cdk-z-index-overlay-backdrop: 1;
$cdk-z-index-overlay-backdrop: 1000;
// Background color for all of the backdrops
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);
// Global constants
$pi: 3.14159265;
src/lib/menu/menu.spec.ts
+2 -2
View File
@@ -101,7 +101,7 @@ describe('MdMenu', () => {
fixture.componentInstance.trigger.openMenu();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0];
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
expect(overlayPane.getAttribute('dir')).toEqual('rtl');
});
@@ -248,7 +248,7 @@ describe('MdMenu', () => {
});
function getOverlayPane(): HTMLElement {
let pane = overlayContainerElement.children[0] as HTMLElement;
let pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
pane.style.position = 'absolute';
return pane;
}
src/lib/select/select.spec.ts
+27 -15
View File
@@ -104,7 +104,7 @@ describe('MdSelect', () => {
fixture.whenStable().then(() => {
trigger.click();
fixture.detectChanges();
const pane = overlayContainerElement.children[0] as HTMLElement;
const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(pane.style.minWidth).toBe('200px');
});
}));
@@ -561,7 +561,7 @@ describe('MdSelect', () => {
* @param index The index of the option.
*/
function checkTriggerAlignedWithOption(index: number): void {
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
@@ -599,7 +599,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
// The panel should be scrolled to 0 because centering the option is not possible.
@@ -616,7 +617,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
// The panel should be scrolled to 0 because centering the option is not possible.
@@ -633,7 +635,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
// The selected option should be scrolled to the center of the panel.
@@ -654,7 +657,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
// The selected option should be scrolled to the max scroll position.
@@ -687,7 +691,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
// Scroll should adjust by the difference between the top space available (85px + 8px
@@ -711,7 +716,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
const scrollContainer = overlayPane.querySelector('.md-select-panel');
// Scroll should adjust by the difference between the bottom space available
@@ -736,7 +742,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
@@ -768,7 +775,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
@@ -857,7 +865,8 @@ describe('MdSelect', () => {
fixture.detectChanges();
// CSS styles aren't in the tests, so position must be absolute to reflect top/left
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
overlayPane.style.position = 'absolute';
const triggerBottom = trigger.getBoundingClientRect().bottom;
@@ -884,7 +893,8 @@ describe('MdSelect', () => {
fixture.detectChanges();
// CSS styles aren't in the tests, so position must be absolute to reflect top/left
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
overlayPane.style.position = 'absolute';
const triggerTop = trigger.getBoundingClientRect().top;
@@ -906,7 +916,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
@@ -929,7 +940,8 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const overlayPane = overlayContainerElement.children[0] as HTMLElement;
const overlayPane =
overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// We need to set the position to absolute, because the top/left positioning won't work
// since the component CSS isn't included in the tests.
@@ -1170,7 +1182,7 @@ describe('MdSelect', () => {
trigger.click();
fixture.detectChanges();
const pane = overlayContainerElement.children[0] as HTMLElement;
const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(pane.style.minWidth).toEqual('300px');
expect(fixture.componentInstance.select.panelOpen).toBe(true);