Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: move focus mode and editor margins to status bar

Browse Source
This commit is contained in:
Abdullah Atta
2025-02-01 12:57:55 +05:00
parent 9bd7d392af
commit 4fc30cc224
2 changed files with 135 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
apps/web/src/components/editor/action-bar.tsx
View File

@@ -140,45 +140,45 @@ export function EditorActionBar() {
activeSession.type === "readonly") && activeSession.type === "readonly") &&
showPublishView(activeSession.note, "top") showPublishView(activeSession.note, "top")
}, },
{ // {
title: editorMargins // title: editorMargins
? strings.disableEditorMargins() // ? strings.disableEditorMargins()
: strings.enableEditorMargins(), // : strings.enableEditorMargins(),
icon: editorMargins ? EditorNormalWidth : EditorFullWidth, // icon: editorMargins ? EditorNormalWidth : EditorFullWidth,
enabled: true, // enabled: true,
hideOnMobile: true, // hideOnMobile: true,
onClick: () => useEditorStore.getState().toggleEditorMargins() // onClick: () => useEditorStore.getState().toggleEditorMargins()
}, // },
{ // {
title: isFullscreen // title: isFullscreen
? strings.exitFullScreen() // ? strings.exitFullScreen()
: strings.enterFullScreen(), // : strings.enterFullScreen(),
icon: isFullscreen ? ExitFullscreen : Fullscreen, // icon: isFullscreen ? ExitFullscreen : Fullscreen,
enabled: true, // enabled: true,
hidden: !isFocusMode, // hidden: !isFocusMode,
hideOnMobile: true, // hideOnMobile: true,
onClick: () => { // onClick: () => {
if (isFullscreen) { // if (isFullscreen) {
exitFullscreen(); // exitFullscreen();
} else { // } else {
enterFullscreen(document.documentElement); // enterFullscreen(document.documentElement);
} // }
} // }
}, // },
{ // {
title: isFocusMode ? strings.normalMode() : strings.focusMode(), // title: isFocusMode ? strings.normalMode() : strings.focusMode(),
icon: isFocusMode ? FocusMode : NormalMode, // icon: isFocusMode ? FocusMode : NormalMode,
enabled: true, // enabled: true,
hideOnMobile: true, // hideOnMobile: true,
onClick: () => { // onClick: () => {
useAppStore.getState().toggleFocusMode(); // useAppStore.getState().toggleFocusMode();
if (document.fullscreenElement) exitFullscreen(); // if (document.fullscreenElement) exitFullscreen();
const editor = // const editor =
activeSession && // activeSession &&
useEditorManager.getState().getEditor(activeSession.id); // useEditorManager.getState().getEditor(activeSession.id);
if (editor) editor.editor?.focus(); // if (editor) editor.editor?.focus();
} // }
}, // },
{ {
title: strings.toc(), title: strings.toc(),
icon: TableOfContents, icon: TableOfContents,

102
apps/web/src/components/editor/footer.tsx
View File

@@ -19,12 +19,31 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { Button, Flex, Text } from "@theme-ui/components"; import { Button, Flex, Text } from "@theme-ui/components";
import { SaveState, useEditorStore } from "../../stores/editor-store"; import { SaveState, useEditorStore } from "../../stores/editor-store";
import { Loading, Saved, NotSaved } from "../icons"; import { useStore as useAppStore } from "../../stores/app-store";
import { useEditorConfig, useNoteStatistics } from "./manager"; 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 { getFormattedDate } from "@notesnook/common";
import { MAX_AUTO_SAVEABLE_WORDS } from "./types"; import { MAX_AUTO_SAVEABLE_WORDS } from "./types";
import { strings } from "@notesnook/intl"; import { strings } from "@notesnook/intl";
import { EDITOR_ZOOM } from "./common"; import { EDITOR_ZOOM } from "./common";
import { useWindowControls } from "../../hooks/use-window-controls";
const SAVE_STATE_ICON_MAP = { const SAVE_STATE_ICON_MAP = {
"-1": NotSaved, "-1": NotSaved,
@@ -33,15 +52,59 @@ const SAVE_STATE_ICON_MAP = {
}; };
function EditorFooter() { function EditorFooter() {
const { isFullscreen } = useWindowControls();
const { words } = useNoteStatistics(); const { words } = useNoteStatistics();
const session = useEditorStore((store) => store.getActiveSession()); const session = useEditorStore((store) => store.getActiveSession());
const { editorConfig, setEditorConfig } = useEditorConfig(); const { editorConfig, setEditorConfig } = useEditorConfig();
const editorMargins = useEditorStore((store) => store.editorMargins);
const isFocusMode = useAppStore((store) => store.isFocusMode);
if (!session) return null; if (!session) return null;
const saveState = const saveState =
session.type === "default" ? session.saveState : SaveState.NotSaved; session.type === "default" ? session.saveState : SaveState.NotSaved;
const dateEdited = "note" in session ? session.note.dateEdited : 0; const dateEdited = "note" in session ? session.note.dateEdited : 0;
const SaveStateIcon = SAVE_STATE_ICON_MAP[saveState]; 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 ( return (
<Flex sx={{ alignItems: "center", justifyContent: "center", gap: 2 }}> <Flex sx={{ alignItems: "center", justifyContent: "center", gap: 2 }}>
@@ -53,6 +116,24 @@ function EditorFooter() {
height: "100%" height: "100%"
}} }}
> >
{tools.map((tool) => (
<Button
data-test-id={tool.title}
disabled={!tool.enabled}
title={tool.title}
key={tool.title}
onClick={tool.onClick}
sx={{
py: 0,
px: 1,
height: "100%",
display: tool.hidden ? "none" : "block"
}}
variant="icon"
>
<tool.icon size={13} />
</Button>
))}
<Button <Button
variant="icon" variant="icon"
onClick={() => onClick={() =>
@@ -64,9 +145,9 @@ function EditorFooter() {
}) })
} }
disabled={editorConfig.zoom <= EDITOR_ZOOM.MIN} disabled={editorConfig.zoom <= EDITOR_ZOOM.MIN}
sx={{ py: 0, height: "100%" }} sx={{ py: 0, px: 1, height: "100%" }}
> >
<b>-</b> <Minus size={13} />
</Button> </Button>
<Text variant="subBody" sx={{ color: "paragraph" }}> <Text variant="subBody" sx={{ color: "paragraph" }}>
{editorConfig.zoom}% {editorConfig.zoom}%
@@ -82,9 +163,9 @@ function EditorFooter() {
}) })
} }
disabled={editorConfig.zoom >= EDITOR_ZOOM.MAX} disabled={editorConfig.zoom >= EDITOR_ZOOM.MAX}
sx={{ py: 0, height: "100%" }} sx={{ py: 0, px: 1, height: "100%" }}
> >
<b>+</b> <Plus size={13} />
</Button> </Button>
</Flex> </Flex>
{words.total > MAX_AUTO_SAVEABLE_WORDS ? ( {words.total > MAX_AUTO_SAVEABLE_WORDS ? (
@@ -139,3 +220,12 @@ function EditorFooter() {
); );
} }
export default EditorFooter; export default EditorFooter;
function enterFullscreen(elem: HTMLElement) {
elem.requestFullscreen();
}
function exitFullscreen() {
if (!document.fullscreenElement) return;
document.exitFullscreen();
}