From 4fc30cc224a426253709b8e6add96b1036e80f40 Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Sat, 1 Feb 2025 12:57:55 +0500 Subject: [PATCH] web: move focus mode and editor margins to status bar --- apps/web/src/components/editor/action-bar.tsx | 78 +++++++------- apps/web/src/components/editor/footer.tsx | 102 ++++++++++++++++-- 2 files changed, 135 insertions(+), 45 deletions(-) diff --git a/apps/web/src/components/editor/action-bar.tsx b/apps/web/src/components/editor/action-bar.tsx index 8b91914af..72911bcc2 100644 --- a/apps/web/src/components/editor/action-bar.tsx +++ b/apps/web/src/components/editor/action-bar.tsx @@ -140,45 +140,45 @@ export function EditorActionBar() { activeSession.type === "readonly") && showPublishView(activeSession.note, "top") }, - { - title: editorMargins - ? strings.disableEditorMargins() - : strings.enableEditorMargins(), - icon: editorMargins ? EditorNormalWidth : EditorFullWidth, - enabled: true, - hideOnMobile: true, - onClick: () => useEditorStore.getState().toggleEditorMargins() - }, - { - title: isFullscreen - ? strings.exitFullScreen() - : strings.enterFullScreen(), - icon: isFullscreen ? ExitFullscreen : Fullscreen, - enabled: true, - hidden: !isFocusMode, - hideOnMobile: true, - onClick: () => { - if (isFullscreen) { - exitFullscreen(); - } else { - enterFullscreen(document.documentElement); - } - } - }, - { - title: isFocusMode ? strings.normalMode() : strings.focusMode(), - icon: isFocusMode ? FocusMode : NormalMode, - enabled: true, - hideOnMobile: true, - onClick: () => { - useAppStore.getState().toggleFocusMode(); - if (document.fullscreenElement) exitFullscreen(); - const editor = - activeSession && - useEditorManager.getState().getEditor(activeSession.id); - if (editor) editor.editor?.focus(); - } - }, + // { + // title: editorMargins + // ? strings.disableEditorMargins() + // : strings.enableEditorMargins(), + // icon: editorMargins ? EditorNormalWidth : EditorFullWidth, + // enabled: true, + // hideOnMobile: true, + // onClick: () => useEditorStore.getState().toggleEditorMargins() + // }, + // { + // title: isFullscreen + // ? strings.exitFullScreen() + // : strings.enterFullScreen(), + // icon: isFullscreen ? ExitFullscreen : Fullscreen, + // enabled: true, + // hidden: !isFocusMode, + // hideOnMobile: true, + // onClick: () => { + // if (isFullscreen) { + // exitFullscreen(); + // } else { + // enterFullscreen(document.documentElement); + // } + // } + // }, + // { + // title: isFocusMode ? strings.normalMode() : strings.focusMode(), + // icon: isFocusMode ? FocusMode : NormalMode, + // enabled: true, + // hideOnMobile: true, + // onClick: () => { + // useAppStore.getState().toggleFocusMode(); + // if (document.fullscreenElement) exitFullscreen(); + // const editor = + // activeSession && + // useEditorManager.getState().getEditor(activeSession.id); + // if (editor) editor.editor?.focus(); + // } + // }, { title: strings.toc(), icon: TableOfContents, diff --git a/apps/web/src/components/editor/footer.tsx b/apps/web/src/components/editor/footer.tsx index 56cc6c661..9ecfdf65c 100644 --- a/apps/web/src/components/editor/footer.tsx +++ b/apps/web/src/components/editor/footer.tsx @@ -19,12 +19,31 @@ along with this program. If not, see . import { Button, Flex, Text } from "@theme-ui/components"; import { SaveState, useEditorStore } from "../../stores/editor-store"; -import { Loading, Saved, NotSaved } from "../icons"; -import { useEditorConfig, useNoteStatistics } from "./manager"; +import { useStore as useAppStore } from "../../stores/app-store"; +import { + Loading, + Saved, + NotSaved, + FocusMode, + Plus, + Minus, + EditorNormalWidth, + TableOfContents, + ExitFullscreen, + Fullscreen, + EditorFullWidth, + NormalMode +} from "../icons"; +import { + useEditorConfig, + useNoteStatistics, + useEditorManager +} from "./manager"; import { getFormattedDate } from "@notesnook/common"; import { MAX_AUTO_SAVEABLE_WORDS } from "./types"; import { strings } from "@notesnook/intl"; import { EDITOR_ZOOM } from "./common"; +import { useWindowControls } from "../../hooks/use-window-controls"; const SAVE_STATE_ICON_MAP = { "-1": NotSaved, @@ -33,15 +52,59 @@ const SAVE_STATE_ICON_MAP = { }; function EditorFooter() { + const { isFullscreen } = useWindowControls(); const { words } = useNoteStatistics(); const session = useEditorStore((store) => store.getActiveSession()); const { editorConfig, setEditorConfig } = useEditorConfig(); + const editorMargins = useEditorStore((store) => store.editorMargins); + const isFocusMode = useAppStore((store) => store.isFocusMode); + if (!session) return null; const saveState = session.type === "default" ? session.saveState : SaveState.NotSaved; const dateEdited = "note" in session ? session.note.dateEdited : 0; const SaveStateIcon = SAVE_STATE_ICON_MAP[saveState]; + const tools = [ + { + title: editorMargins + ? strings.disableEditorMargins() + : strings.enableEditorMargins(), + icon: editorMargins ? EditorNormalWidth : EditorFullWidth, + enabled: true, + hideOnMobile: true, + onClick: () => useEditorStore.getState().toggleEditorMargins() + }, + { + title: isFullscreen + ? strings.exitFullScreen() + : strings.enterFullScreen(), + icon: isFullscreen ? ExitFullscreen : Fullscreen, + enabled: true, + hidden: !isFocusMode, + hideOnMobile: true, + onClick: () => { + if (isFullscreen) { + exitFullscreen(); + } else { + enterFullscreen(document.documentElement); + } + } + }, + { + title: isFocusMode ? strings.normalMode() : strings.focusMode(), + icon: isFocusMode ? FocusMode : NormalMode, + enabled: true, + hideOnMobile: true, + onClick: () => { + useAppStore.getState().toggleFocusMode(); + if (document.fullscreenElement) exitFullscreen(); + const editor = + session && useEditorManager.getState().getEditor(session.id); + if (editor) editor.editor?.focus(); + } + } + ]; return ( @@ -53,6 +116,24 @@ function EditorFooter() { height: "100%" }} > + {tools.map((tool) => ( + + ))} {editorConfig.zoom}% @@ -82,9 +163,9 @@ function EditorFooter() { }) } disabled={editorConfig.zoom >= EDITOR_ZOOM.MAX} - sx={{ py: 0, height: "100%" }} + sx={{ py: 0, px: 1, height: "100%" }} > - + + {words.total > MAX_AUTO_SAVEABLE_WORDS ? ( @@ -139,3 +220,12 @@ function EditorFooter() { ); } export default EditorFooter; + +function enterFullscreen(elem: HTMLElement) { + elem.requestFullscreen(); +} + +function exitFullscreen() { + if (!document.fullscreenElement) return; + document.exitFullscreen(); +}