From e3da1e0c049295fc0e3d93f57ee0962b73ee47b3 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Wed, 6 Apr 2022 13:33:38 +0100 Subject: [PATCH] shortcut for preview mode --- app/canvas/canvas.tsx | 8 ++- app/canvas/shared/use-shortcuts.ts | 21 ++++---- app/designer/features/topbar/menu.tsx | 64 ++++++++++++------------ app/designer/features/topbar/preview.tsx | 23 ++++++--- app/shared/shortcuts/index.ts | 1 + 5 files changed, 60 insertions(+), 57 deletions(-) diff --git a/app/canvas/canvas.tsx b/app/canvas/canvas.tsx index eb140a14d4..87d14a507f 100644 --- a/app/canvas/canvas.tsx +++ b/app/canvas/canvas.tsx @@ -59,10 +59,7 @@ const useElementsTree = () => { const useIsPreviewMode = () => { const [isPreviewMode, setIsPreviewMode] = useState(false); - useSubscribe<"togglePreviewMode", boolean>( - "togglePreviewMode", - setIsPreviewMode - ); + useSubscribe<"previewMode", boolean>("previewMode", setIsPreviewMode); return isPreviewMode; }; @@ -89,7 +86,6 @@ const DesignMode = ({ treeId }: DesignModeProps) => { useDeleteInstance(); usePublishRootInstance(); useActiveElementTracking(); - useShortcuts(); usePeriodicSync(); const elements = useElementsTree(); return ( @@ -104,6 +100,8 @@ export const Canvas = ({ data }: { data: Data }): JSX.Element | null => { globalStyles(); useAllUserProps(data.props); usePopulateRootInstance(data.tree); + // e.g. toggling preview is still needed in both modes + useShortcuts(); const isPreviewMode = useIsPreviewMode(); if (isPreviewMode) { diff --git a/app/canvas/shared/use-shortcuts.ts b/app/canvas/shared/use-shortcuts.ts index 2c8a09d8b3..b467d5792e 100644 --- a/app/canvas/shared/use-shortcuts.ts +++ b/app/canvas/shared/use-shortcuts.ts @@ -5,6 +5,10 @@ import { publish, useSubscribe } from "./pubsub"; import store from "immerhin"; import { shortcuts } from "~/shared/shortcuts"; +const togglePreviewMode = () => { + publish<"togglePreviewMode">({ type: "togglePreviewMode" }); +}; + export const useShortcuts = () => { const [rootInstance] = useRootInstance(); const [selectedInstance, setSelectedInstance] = useSelectedInstance(); @@ -29,6 +33,7 @@ export const useShortcuts = () => { undo: store.undo.bind(store), redo: store.redo.bind(store), delete: publishDeleteInstance, + preview: togglePreviewMode, } as const; useHotkeys( @@ -51,19 +56,11 @@ export const useShortcuts = () => { [selectedInstance] ); - useHotkeys( - // Undo - shortcuts.undo, - shortcutHandlerMap.undo, - [] - ); + useHotkeys(shortcuts.undo, shortcutHandlerMap.undo, []); - useHotkeys( - // Redo - shortcuts.redo, - shortcutHandlerMap.redo, - [] - ); + useHotkeys(shortcuts.redo, shortcutHandlerMap.redo, []); + + useHotkeys(shortcuts.preview, shortcutHandlerMap.preview, []); // Shortcuts from the parent window useSubscribe<"shortcut", keyof typeof shortcuts>("shortcut", (shortcut) => { diff --git a/app/designer/features/topbar/menu.tsx b/app/designer/features/topbar/menu.tsx index f98a7a957c..666984990b 100644 --- a/app/designer/features/topbar/menu.tsx +++ b/app/designer/features/topbar/menu.tsx @@ -6,7 +6,6 @@ import { DropdownMenuTrigger, DropdownMenuArrow, DropdownMenuSeparator, - Flex, IconButton, Text, } from "~/shared/design-system"; @@ -22,7 +21,6 @@ import { } from "~/shared/icons"; import type { Config } from "~/config"; import { - useIsPreviewMode, useIsShareDialogOpen, useIsPublishDialogOpen, } from "../../shared/nano-values"; @@ -45,12 +43,22 @@ const Shortcut = ({ mac, win }: { mac: Array; win: Array }) => { (char) => shortcutsMap[char] ?? char.toUpperCase() ); return ( - + {formattedValue} ); }; +const menuItemCss = { + display: "flex", + gap: "$3", + justifyContent: "start", + flexGrow: 1, +}; + type MenuProps = { config: Config; publish: Publish; @@ -58,7 +66,6 @@ type MenuProps = { export const Menu = ({ config, publish }: MenuProps) => { const navigate = useNavigate(); - const [, setIsPreviewMode] = useIsPreviewMode(); const [, setIsShareOpen] = useIsShareDialogOpen(); const [, setIsPublishOpen] = useIsPublishDialogOpen(); @@ -71,16 +78,16 @@ export const Menu = ({ config, publish }: MenuProps) => { { navigate(config.dashboardPath); }} > - - Dashboard - + Dashboard { publish<"shortcut", string>({ type: "shortcut", @@ -88,12 +95,11 @@ export const Menu = ({ config, publish }: MenuProps) => { }); }} > - - Undo - - + Undo + { publish<"shortcut", string>({ type: "shortcut", @@ -101,15 +107,11 @@ export const Menu = ({ config, publish }: MenuProps) => { }); }} > - - Redo - - + Redo + { publish<"shortcut", string>({ type: "shortcut", @@ -117,38 +119,36 @@ export const Menu = ({ config, publish }: MenuProps) => { }); }} > - - Delete - - + Delete + { - setIsPreviewMode(true); + publish<"togglePreviewMode">({ + type: "togglePreviewMode", + }); }} > - - Preview - + Preview + { setIsShareOpen(true); }} > - - Share - + Share { setIsPublishOpen(true); }} > - - Publish - + Publish diff --git a/app/designer/features/topbar/preview.tsx b/app/designer/features/topbar/preview.tsx index 5b6533d8cd..0fabc9d5c5 100644 --- a/app/designer/features/topbar/preview.tsx +++ b/app/designer/features/topbar/preview.tsx @@ -1,6 +1,6 @@ import { EyeOpenIcon } from "~/shared/icons"; import { SimpleToggle } from "~/shared/design-system"; -import { type Publish } from "~/designer/features/canvas-iframe"; +import { useSubscribe, type Publish } from "~/designer/features/canvas-iframe"; import { useIsPreviewMode } from "../../shared/nano-values"; type PreviewProps = { @@ -9,15 +9,22 @@ type PreviewProps = { export const Preview = ({ publish }: PreviewProps) => { const [isPreviewMode, setIsPreviewMode] = useIsPreviewMode(); + + const setValue = (value: boolean) => { + setIsPreviewMode(value); + publish<"previewMode", boolean>({ + type: "previewMode", + payload: value, + }); + }; + + useSubscribe<"togglePreviewMode">("togglePreviewMode", () => { + setValue(!isPreviewMode); + }); + return ( { - setIsPreviewMode(value); - publish<"togglePreviewMode", boolean>({ - type: "togglePreviewMode", - payload: value, - }); - }} + onPressedChange={setValue} pressed={isPreviewMode} aria-label="Toggle Preview" > diff --git a/app/shared/shortcuts/index.ts b/app/shared/shortcuts/index.ts index 663e63812f..770a755f67 100644 --- a/app/shared/shortcuts/index.ts +++ b/app/shared/shortcuts/index.ts @@ -1,4 +1,5 @@ export const shortcuts = { undo: "cmd+z, ctrl+z", redo: "cmd+shift+z, ctrl+shift+z", + preview: "cmd+shift+p, ctrl+shift+p", } as const;