From ed90588101fcac08ab9c44bfefc119f0839d71fa Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Sat, 4 Apr 2020 15:20:21 +0500
Subject: [PATCH] ui: improve focus mode transition

---
 apps/web/src/components/editor/header.js   | 97 +++++++++++++---------
 apps/web/src/components/editor/index.js    |  6 +-
 apps/web/src/components/editor/titlebox.js | 67 +++++----------
 3 files changed, 82 insertions(+), 88 deletions(-)

diff --git a/apps/web/src/components/editor/header.js b/apps/web/src/components/editor/header.js
index 7fa193f1e..c74cd8ac2 100644
--- a/apps/web/src/components/editor/header.js
+++ b/apps/web/src/components/editor/header.js
@@ -1,6 +1,8 @@
 import React from "react";
 import "./editor.css";
-import { Text } from "rebass";
+import { Flex, Text } from "rebass";
+import * as Icon from "../icons";
+import { useStore as useAppStore } from "../../stores/app-store";
 import TitleBox from "./title-box";
 import { useStore, SESSION_STATES } from "../../stores/editor-store";
 import { timeConverter } from "../../utils/time";
@@ -22,48 +24,65 @@ function Header() {
   const isSaving = useStore((store) => store.session.isSaving);
   const sessionState = useStore((store) => store.session.state);
   const setSession = useStore((store) => store.setSession);
+  const isFocusMode = useAppStore((store) => store.isFocusMode);
+  const toggleFocusMode = useAppStore((store) => store.toggleFocusMode);
 
   return (
-    <>
-      <TitleBox
-        shouldFocus={sessionState === SESSION_STATES.new}
-        title={title}
-        setTitle={(title) =>
-          setSession((state) => {
-            state.session.title = title;
-          })
-        }
-        sx={{
-          paddingTop: 2,
-          paddingBottom: 0,
-        }}
-      />
-      <Text
-        fontSize={"subBody"}
-        mx={2}
-        color="fontTertiary"
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          marginTop: dateEdited || text.length || id.length ? 0 : 2,
-          marginBottom: dateEdited || text.length || id.length ? 2 : 0,
+    <Flex>
+      <Flex flex="1 1 auto" flexDirection="column">
+        <TitleBox
+          shouldFocus={sessionState === SESSION_STATES.new}
+          title={title}
+          setTitle={(title) =>
+            setSession((state) => {
+              state.session.title = title;
+            })
+          }
+          sx={{
+            paddingTop: 2,
+            paddingBottom: 0,
+          }}
+        />
+        <Text
+          fontSize={"subBody"}
+          mx={2}
+          color="fontTertiary"
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            marginTop: dateEdited || text.length || id.length ? 0 : 2,
+            marginBottom: dateEdited || text.length || id.length ? 2 : 0,
+          }}
+        >
+          {dateEdited > 0 ? (
+            <>
+              {timeConverter(dateEdited)}
+              <TextSeperator />
+            </>
+          ) : null}
+          {text.length > 0 ? (
+            <>
+              {countWords(text) + " words"}
+              <TextSeperator />
+            </>
+          ) : null}
+          {id && id.length > 0 ? <>{isSaving ? "Saving" : "Saved"}</> : null}
+        </Text>
+      </Flex>
+      <Flex
+        alignItems="center"
+        pr={3}
+        onClick={() => {
+          toggleFocusMode();
         }}
       >
-        {dateEdited > 0 ? (
-          <>
-            {timeConverter(dateEdited)}
-            <TextSeperator />
-          </>
-        ) : null}
-        {text.length > 0 ? (
-          <>
-            {countWords(text) + " words"}
-            <TextSeperator />
-          </>
-        ) : null}
-        {id && id.length > 0 ? <>{isSaving ? "Saving" : "Saved"}</> : null}
-      </Text>
-    </>
+        {isFocusMode ? (
+          <Icon.NormalMode size={30} />
+        ) : (
+          <Icon.FocusMode size={30} />
+        )}
+      </Flex>
+    </Flex>
   );
 }
 export default Header;
diff --git a/apps/web/src/components/editor/index.js b/apps/web/src/components/editor/index.js
index be672c7cc..3d0725fac 100644
--- a/apps/web/src/components/editor/index.js
+++ b/apps/web/src/components/editor/index.js
@@ -30,14 +30,14 @@ function Editor() {
   return (
     <Animated.Flex
       width={["0%", "0%", "100%"]}
-      initial={{ marginRight: 0 }}
+      initial={{ width: "100%" }}
       animate={{
-        marginRight: isFocusMode ? "25%" : 0,
+        width: isFocusMode ? "55%" : "100%",
       }}
       transition={{ duration: 0.3, ease: "easeIn" }}
       sx={{
-        marginLeft: isFocusMode ? "25%" : 0,
         position: "relative",
+        alignSelf: isFocusMode ? "center" : "stretch",
       }}
       flex="1 1 auto"
     >
diff --git a/apps/web/src/components/editor/titlebox.js b/apps/web/src/components/editor/titlebox.js
index 92dafa139..5ca3a88d0 100644
--- a/apps/web/src/components/editor/titlebox.js
+++ b/apps/web/src/components/editor/titlebox.js
@@ -1,20 +1,11 @@
 import React from "react";
 import "./editor.css";
 import { Input } from "@rebass/forms";
-import { Flex } from "rebass";
-import * as Icon from "../icons";
-import { store as appStore } from "../../stores/app-store";
 
 class TitleBox extends React.Component {
-  state = { isFocusMode: false };
-
   inputRef;
-  shouldComponentUpdate(nextProps, nextState) {
-    return (
-      nextProps.title !== this.props.title ||
-      nextProps.shouldFocus ||
-      nextState.isFocusMode !== this.state.isFocusMode
-    );
+  shouldComponentUpdate(nextProps) {
+    return nextProps.title !== this.props.title || nextProps.shouldFocus;
   }
 
   componentDidUpdate() {
@@ -26,41 +17,25 @@ class TitleBox extends React.Component {
   render() {
     const { title, setTitle, sx } = this.props;
     return (
-      <Flex>
-        <Input
-          ref={ref => (this.inputRef = ref)}
-          maxLength={120}
-          placeholder="Untitled"
-          fontFamily="heading"
-          fontWeight="heading"
-          fontSize="heading"
-          display={["none", "flex", "flex"]}
-          px={2}
-          sx={{
-            borderWidth: 0,
-            ":focus": { outline: "none" },
-            ...sx
-          }}
-          value={title}
-          onChange={e => {
-            setTitle(e.target.value);
-          }}
-        />
-        <Flex
-          alignItems="center"
-          pr={3}
-          onClick={() => {
-            appStore.toggleFocusMode();
-            this.setState({ isFocusMode: !this.state.isFocusMode });
-          }}
-        >
-          {this.state.isFocusMode ? (
-            <Icon.NormalMode size={30} />
-          ) : (
-            <Icon.FocusMode size={30} />
-          )}
-        </Flex>
-      </Flex>
+      <Input
+        ref={(ref) => (this.inputRef = ref)}
+        maxLength={120}
+        placeholder="Untitled"
+        fontFamily="heading"
+        fontWeight="heading"
+        fontSize="heading"
+        display={["none", "flex", "flex"]}
+        px={2}
+        sx={{
+          borderWidth: 0,
+          ":focus": { outline: "none" },
+          ...sx,
+        }}
+        value={title}
+        onChange={(e) => {
+          setTitle(e.target.value);
+        }}
+      />
     );
   }
 }