fix(drawer): Fixes an issue where drawer backdrop was overlaying the …

…drawer body.

Fixes #91 and a regression that was introduced by #605.

apps/components-e2e/src/components/drawer/drawer.e2e.ts

@@ -13,20 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Selector, ClientFunction } from 'testcafe';
-
+import { ClientFunction, Selector } from 'testcafe';
+import {
+  isCloseTo,
+  resetWindowSizeToDefault,
+  waitForAngular,
+} from '../../utils';
 import {
   closeButton,
   createRange,
   overlay,
   rangeSelection,
   selection,
 } from '../chart/selection-area/selection-area.po';
-import {
-  isCloseTo,
-  waitForAngular,
-  resetWindowSizeToDefault,
-} from '../../utils';
 
 const openCount = Selector('#open-count');
 const closeCount = Selector('#close-count');
@@ -39,6 +38,8 @@ const overlayContainer = Selector('.dt-overlay-container');
 const heatfieldToggle = Selector('.dt-chart-heatfield-marker');
 const heatfieldOverlay = Selector('.dt-chart-heatfield-overlay');
 const rangeOverlay = Selector('.dt-chart-selection-area-overlay');
+const backDrop = Selector('.dt-drawer-backdrop');
+const zIndexTest = Selector('#content-trigger');
 
 const scrollDistance = 50;
 const scrollDown = ClientFunction(distance => {
@@ -156,3 +157,25 @@ test('should move selection area overlay with the chart on scroll', async (testC
     .expect(overlay.exists)
     .notOk();
 });
+
+test('should check if a hover is possible in the drawer over mode', async (testController: TestController) => {
+  await testController
+    .click(open)
+    .resizeWindow(800, 800)
+    .wait(250)
+    .expect(backDrop.visible)
+    .ok()
+    .hover(overlayTrigger, { speed: 0.3 })
+    .expect(overlayContainer.exists)
+    .ok();
+});
+
+test('should check if a hover is possible in the drawer over mode', async (testController: TestController) => {
+  await testController
+    .click(open)
+    .resizeWindow(800, 800)
+    .wait(250)
+    .hover(zIndexTest, { speed: 0.3 })
+    .expect(overlayContainer.exists)
+    .notOk();
+});

apps/components-e2e/src/components/drawer/drawer.html

@@ -8,7 +8,7 @@
       (closed)="close()"
       style="width: 80%; height: 3000px;"
     >
-      <dt-chart id="chart" [series]="series$ | async" [options]="options">
+      <dt-chart id="chart" [series]="series$ | async" [options]="options">
         <dt-chart-tooltip>
           <ng-template let-tooltip>
             <div style="min-width: 100px;">
@@ -63,8 +63,11 @@
     </dt-drawer>
     <span id="open-count">{{openCount}}</span>
     <span id="close-count">{{closeCount}}</span>
+    <button id="content-trigger" [dtOverlay]="overlay">
+      Hover me
+    </button>
   </dt-drawer-container>
   <br />
-  <button (click)="drawer.open()" id="open" #openButton></button>
-  <button (click)="drawer.close()" id="close" #closeButton></button>
+  <button (click)="drawer.open()" id="open" #openButton>open</button>
+  <button (click)="drawer.close()" id="close" #closeButton>close</button>
 </section>

apps/components-e2e/src/components/drawer/drawer.scss

@@ -0,0 +1,7 @@
+#content-trigger {
+  position: absolute;
+  top: 0;
+  right: 0;
+  // this is the highest possible z-index (integer max range)
+  z-index: 2147483647;
+}

apps/components-e2e/src/components/drawer/drawer.ts

@@ -23,11 +23,12 @@ import {
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { DataService } from '../../services/data.service';
-import { options } from '../chart/chart-options';
+import { options as chartOptions } from '../chart/chart-options';
 
 @Component({
   selector: 'dt-e2e-drawer',
   templateUrl: 'drawer.html',
+  styleUrls: ['drawer.scss'],
 })
 export class DtE2EDrawer {
   openCount = 0;
@@ -36,7 +37,7 @@ export class DtE2EDrawer {
   validRange = false;
   lastTimeframe: [number, number];
 
-  options = options;
+  options = chartOptions;
   // Added type here due to missing support for type inference on windows with typescript 3.4.5
   // error TS2742: The inferred type of 'series$' cannot be named without a reference to '...@types/highcharts'.
   // This is likely not portable. A type annotation is necessary.
@@ -48,17 +49,12 @@ export class DtE2EDrawer {
     )
     .pipe(map(result => result.data));
 
-  @ViewChild('container', { static: true }) container: DtDrawerContainer;
-  @ViewChild('drawer', { static: true }) drawer: DtDrawer;
-  @ViewChild('toggleButton', { static: true }) drawerButton: ElementRef<
-    HTMLButtonElement
-  >;
-  @ViewChild('openButton', { static: true }) openButton: ElementRef<
-    HTMLButtonElement
-  >;
-  @ViewChild('closeButton', { static: true }) closeButton: ElementRef<
-    HTMLButtonElement
-  >;
+  @ViewChild('container', { static: true })
+  container: DtDrawerContainer;
+  @ViewChild('drawer', { static: true })
+  drawer: DtDrawer;
+  @ViewChild('toggleButton', { static: true })
+  drawerButton: ElementRef<HTMLButtonElement>;
 
   @ViewChild(DtChartRange) dtChartRange: DtChartRange;
 
@@ -79,9 +75,9 @@ export class DtE2EDrawer {
     this.lastTimeframe = [0, 0];
   }
 
-  onTimeframeChanges(timeframe: [number, number] | number): void {
-    if (Array.isArray(timeframe)) {
-      this.lastTimeframe = timeframe;
+  onTimeframeChanges(timeFrame: [number, number] | number): void {
+    if (Array.isArray(timeFrame)) {
+      this.lastTimeframe = timeFrame;
     }
   }
 }

components/drawer/src/drawer-container.scss

@@ -2,6 +2,14 @@
 
 $dt-backdrop-opacity: 0.4;
 
+/**
+ * z-index Hierarchy:
+ *
+ * .dt-drawer-content:       1
+ * .dt-drawer-backdrop:      2
+ * dt-drawer:                3
+ */
+
 :host {
   position: relative;
   display: flex;
@@ -17,7 +25,7 @@ $dt-backdrop-opacity: 0.4;
   opacity: 0;
   // Translate3d is faster than translateX because it uses hardware acceleration
   transform: translate3d(-100%, 0, 0);
-  z-index: 3;
+  z-index: 2;
 
   :host.dt-drawer-is-open > & {
     opacity: $dt-backdrop-opacity;
@@ -27,6 +35,8 @@ $dt-backdrop-opacity: 0.4;
 }
 
 .dt-drawer-content {
+  position: relative;
+  z-index: 1;
   flex-grow: 1;
   flex-shrink: 1;
   display: block;

components/drawer/src/drawer.scss

@@ -9,7 +9,8 @@
   transform: translate3d(-100%, 0, 0);
   outline: none;
   will-change: transform;
-  z-index: 2;
+  // drawer backdrop has a z-index of 2
+  z-index: 3;
 
   &.dt-drawer-end {
     right: 0;