🐛 harmonize full-screen modal & controls drawer

- their dismiss-on-click behaviors now work together
owid · Sep 4, 2023 · 4ebec80 · 4ebec80
1 parent 090409b
commit 4ebec80
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 13 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.scss b/packages/@ourworldindata/grapher/src/controls/Controls.scss
@@ -1,6 +1,3 @@
-$zindex-ControlsDrawer: 105; // needs to be higher than .site-tools
-$zindex-ControlsBackdrop: 104;
-
 $light-stroke: #e7e7e7;
 $dark-stroke: #2d2d2d;
 
@@ -63,7 +60,7 @@ nav.controlsRow .controls {
             background: white;
             border-radius: 4px;
             box-shadow: 0px 4px 23px 4px #0000000f;
-            z-index: $zindex-ControlsDrawer;
+            z-index: $zindex-controls-drawer;
             overflow-y: scroll;
         }
 
@@ -74,7 +71,7 @@ nav.controlsRow .controls {
             top: 0;
             width: 100%;
             height: 100%;
-            z-index: $zindex-ControlsBackdrop;
+            z-index: $zindex-controls-backdrop;
         }
     }
 }
@@ -88,10 +85,10 @@ nav.controlsRow .controls {
             top: 0;
             width: 300px;
             height: 100vh;
-            z-index: $zindex-ControlsDrawer;
+            z-index: $zindex-controls-drawer;
             overflow-y: scroll;
             background: white;
-            padding-top: 80px;
+            padding-top: $indent;
 
             .config-header {
                 position: static;
@@ -104,7 +101,7 @@ nav.controlsRow .controls {
             right: 0;
             bottom: 0;
             background: rgba(0, 0, 0, 0.2);
-            z-index: $zindex-ControlsBackdrop;
+            z-index: $zindex-controls-backdrop;
         }
     }
 

diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.tsx b/packages/@ourworldindata/grapher/src/controls/Controls.tsx
@@ -236,10 +236,11 @@ export class SettingsMenu extends React.Component<{
         // TODO: add a showCompareEndPointsOnlyTogggle to complement compareEndPointsOnly
     }
 
-    @action.bound toggleVisibility(): void {
+    @action.bound toggleVisibility(e: React.MouseEvent): void {
         this.visible = !this.visible
         if (this.visible) this.shouldRender = true
         this.drawer?.classList.toggle("active", this.visible)
+        e.stopPropagation()
     }
 
     @action.bound onAnimationEnd(): void {

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -46,7 +46,9 @@ $zindex-global-entity-select: 11;
 $zindex-Tooltip: 20;
 $zindex-modal: 30;
 
-$zindex-full-screen: 2000;
+$zindex-full-screen: 120;
+$zindex-controls-backdrop: 130;
+$zindex-controls-drawer: 140;
 
 // needed for .global-entity-control-container
 @mixin xxlg-down {

diff --git a/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx b/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
@@ -11,7 +11,7 @@ export class FullScreen extends React.Component<{
 }> {
     content: React.RefObject<HTMLDivElement> = React.createRef()
 
-    @action.bound onDocumentClick(e: MouseEvent): void {
+    @action.bound onDocumentClick(e: React.MouseEvent): void {
         // check if the click was outside of the modal
         if (
             this.content?.current &&
@@ -27,12 +27,10 @@ export class FullScreen extends React.Component<{
     }
 
     componentDidMount(): void {
-        document.addEventListener("click", this.onDocumentClick)
         document.addEventListener("keydown", this.onDocumentKeyDown)
     }
 
     componentWillUnmount(): void {
-        document.removeEventListener("click", this.onDocumentClick)
         document.removeEventListener("keydown", this.onDocumentKeyDown)
     }
 
@@ -43,6 +41,7 @@ export class FullScreen extends React.Component<{
                     className="FullScreenOverlay"
                     role="dialog"
                     aria-modal="true"
+                    onClick={this.onDocumentClick}
                     style={{
                         backgroundColor: this.props.overlayColor ?? "#fff",
                     }}