Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-09-02 20:21:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: improve focus mode transition

Browse Source
This commit is contained in:
thecodrr
2020-04-04 15:20:21 +05:00
parent 471be3c05f
commit ed90588101
3 changed files with 82 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
apps/web/src/components/editor/header.js
View File

@@ -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;

6
apps/web/src/components/editor/index.js
View File

@@ -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"
>

67
apps/web/src/components/editor/titlebox.js
View File

@@ -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);
}}
/>
);
}
}