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/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@ -49,16 +49,16 @@ export const ToolButton = React.forwardRef(function (
      <button
        className={`ToolIcon_type_button ToolIcon ${sizeCn}${
          props.selected ? " ToolIcon--selected" : ""
-        } ${props.className || ""}`}
+        } ${props.className || ""} ${
+          props.visible
+            ? "ToolIcon_type_button--hide"
+            : "ToolIcon_type_button--show"
+        }`}
        title={props.title}
        aria-label={props["aria-label"]}
        type="button"
        onClick={props.onClick}
        ref={innerRef}
-        style={{
-          visibility:
-            props.visible || props.visible == null ? "visible" : "hidden",
-        }}
      >
        <div className="ToolIcon__icon" aria-hidden="true">
          {props.icon || props.label}