Add Zen mode for distraction free drawing (#1450)

2020-04-25 18:43:02 +05:30
parent 71e7f130bc
commit 1866074c07
16 changed files with 222 additions and 39 deletions
--- a/src/components/LockIcon.tsx
+++ b/src/components/LockIcon.tsx
@ -11,6 +11,7 @@ type LockIconProps = {
  checked: boolean;
  onChange?(): void;
  size?: LockIconSize;
+  zenModeEnabled?: boolean;
 };

 const DEFAULT_SIZE: LockIconSize = "m";
@ -44,7 +45,9 @@ export function LockIcon(props: LockIconProps) {

  return (
    <label
-      className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn}`}
+      className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn} zen-mode-visibility ${
+        props.zenModeEnabled && "hidden"
+      }`}
      title={`${props.title} — Q`}
    >
      <input