From 51f814635791d19e22f67312a3a75e24305d0381 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Wed, 29 Apr 2020 22:49:36 +0200
Subject: [PATCH] disable pointer events on hidden menus in zen mode (#1511)

---
 src/components/LayerUI.scss |  4 ++++
 src/components/LayerUI.tsx  |  9 ++++++---
 src/components/LockIcon.tsx |  2 +-
 src/components/Stack.tsx    | 21 +++++++++++++++++----
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/LayerUI.scss b/src/components/LayerUI.scss
index 790aaf9b..2f1f0b5c 100644
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -111,3 +111,7 @@
     }
   }
 }
+
+.disable-pointerEvents {
+  pointer-events: none !important;
+}
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 3af1130b..ac9e111d 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -169,7 +169,10 @@ const LayerUI = ({
       <FixedSideContainer side="top">
         <HintViewer appState={appState} elements={elements} />
         <div className="App-menu App-menu_top">
-          <Stack.Col gap={4}>
+          <Stack.Col
+            gap={4}
+            className={zenModeEnabled && "disable-pointerEvents"}
+          >
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
@@ -201,7 +204,7 @@ const LayerUI = ({
         {
           <div
             className={`App-menu App-menu_bottom zen-mode-transition ${
-              zenModeEnabled && "transition-left"
+              zenModeEnabled && "transition-left disable-pointerEvents"
             }`}
           >
             <Stack.Col gap={2}>
@@ -225,7 +228,7 @@ const LayerUI = ({
     <footer role="contentinfo" className="layer-ui__wrapper__footer">
       <div
         className={`zen-mode-transition ${
-          zenModeEnabled && "transition-right"
+          zenModeEnabled && "transition-right disable-pointerEvents"
         }`}
       >
         <LanguageList
diff --git a/src/components/LockIcon.tsx b/src/components/LockIcon.tsx
index 3d657ab0..b73c15c6 100644
--- a/src/components/LockIcon.tsx
+++ b/src/components/LockIcon.tsx
@@ -46,7 +46,7 @@ export function LockIcon(props: LockIconProps) {
   return (
     <label
       className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn} zen-mode-visibility ${
-        props.zenModeEnabled && "hidden"
+        props.zenModeEnabled && "hidden disable-pointerEvents"
       }`}
       title={`${props.title} — Q`}
     >
diff --git a/src/components/Stack.tsx b/src/components/Stack.tsx
index 42a9e21a..17d14bcc 100644
--- a/src/components/Stack.tsx
+++ b/src/components/Stack.tsx
@@ -7,12 +7,19 @@ type StackProps = {
   gap?: number;
   align?: "start" | "center" | "end" | "baseline";
   justifyContent?: "center" | "space-around" | "space-between";
+  className?: string | boolean;
 };
 
-function RowStack({ children, gap, align, justifyContent }: StackProps) {
+function RowStack({
+  children,
+  gap,
+  align,
+  justifyContent,
+  className,
+}: StackProps) {
   return (
     <div
-      className="Stack Stack_horizontal"
+      className={`Stack Stack_horizontal ${className || ""}`}
       style={
         {
           "--gap": gap,
@@ -26,10 +33,16 @@ function RowStack({ children, gap, align, justifyContent }: StackProps) {
   );
 }
 
-function ColStack({ children, gap, align, justifyContent }: StackProps) {
+function ColStack({
+  children,
+  gap,
+  align,
+  justifyContent,
+  className,
+}: StackProps) {
   return (
     <div
-      className="Stack Stack_vertical"
+      className={`Stack Stack_vertical ${className || ""}`}
       style={
         {
           "--gap": gap,