From 82edcc29c77269ca2cf107c55c949b85deecd34c Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Tue, 5 Apr 2022 20:17:49 +0100 Subject: [PATCH] add undo/redo to the menu --- app/designer/features/topbar/menu.tsx | 62 ++++++++++++++++++++++++- app/designer/features/topbar/topbar.tsx | 2 +- app/shared/db/props.server.ts | 1 - app/shared/design-system/index.ts | 1 + app/shared/icons/index.ts | 2 + app/shared/icons/redo.tsx | 23 +++++++++ app/shared/icons/undo.tsx | 23 +++++++++ 7 files changed, 111 insertions(+), 3 deletions(-) create mode 100644 app/shared/icons/redo.tsx create mode 100644 app/shared/icons/undo.tsx diff --git a/app/designer/features/topbar/menu.tsx b/app/designer/features/topbar/menu.tsx index 9fa36a2421..b32edce4a0 100644 --- a/app/designer/features/topbar/menu.tsx +++ b/app/designer/features/topbar/menu.tsx @@ -5,8 +5,10 @@ import { DropdownMenuItem, DropdownMenuTrigger, DropdownMenuArrow, + DropdownMenuSeparator, Flex, IconButton, + Text, } from "~/shared/design-system"; import { HamburgerMenuIcon, @@ -14,6 +16,8 @@ import { EyeOpenIcon, Share1Icon, RocketIcon, + UndoIcon, + RedoIcon, } from "~/shared/icons"; import type { Config } from "~/config"; import { @@ -21,12 +25,37 @@ import { useIsShareDialogOpen, useIsPublishDialogOpen, } from "../../shared/nano-values"; +import { type Publish } from "../canvas-iframe"; + +const isMac = + typeof navigator === "object" ? /mac/i.test(navigator.platform) : false; +const shortcutsMap: Record = { + cmd: "⌘", + ctrl: "⌃", + shift: "⇧", + option: "⌥", + backspace: "⌫", +}; + +const Shortcut = ({ mac, win }: { mac: Array; win: Array }) => { + // @todo check what linux needs + const value = isMac ? mac : win; + const formattedValue = value.map( + (char) => shortcutsMap[char] ?? char.toUpperCase() + ); + return ( + + {formattedValue} + + ); +}; type MenuProps = { config: Config; + publish: Publish; }; -export const Menu = ({ config }: MenuProps) => { +export const Menu = ({ config, publish }: MenuProps) => { const navigate = useNavigate(); const [, setIsPreviewMode] = useIsPreviewMode(); const [, setIsShareOpen] = useIsShareDialogOpen(); @@ -49,6 +78,37 @@ export const Menu = ({ config }: MenuProps) => { Dashboard + + { + publish<"shortcut", string>({ + type: "shortcut", + payload: "undo", + }); + }} + > + + Undo{" "} + + + + { + publish<"shortcut", string>({ + type: "shortcut", + payload: "redo", + }); + }} + > + + Redo{" "} + + + + { setIsPreviewMode(true); diff --git a/app/designer/features/topbar/topbar.tsx b/app/designer/features/topbar/topbar.tsx index 4adff53367..0eb4396f1d 100644 --- a/app/designer/features/topbar/topbar.tsx +++ b/app/designer/features/topbar/topbar.tsx @@ -28,7 +28,7 @@ export const Topbar = ({ config, css, project, publish }: TopbarProps) => { ...css, }} > - + diff --git a/app/shared/db/props.server.ts b/app/shared/db/props.server.ts index cbbe311f59..4530cc141f 100644 --- a/app/shared/db/props.server.ts +++ b/app/shared/db/props.server.ts @@ -1,7 +1,6 @@ import { type Instance, type UserPropsUpdates, - type UserProp, type Project, type InstanceProps, type Tree, diff --git a/app/shared/design-system/index.ts b/app/shared/design-system/index.ts index 5730dcdf98..d2a4c865dc 100644 --- a/app/shared/design-system/index.ts +++ b/app/shared/design-system/index.ts @@ -53,6 +53,7 @@ export { DropdownMenuGroup, DropdownMenuTrigger, DropdownMenuArrow, + DropdownMenuSeparator, } from "./components/dropdown-menu"; export { MenuContent, MenuItem, Menu, MenuAnchor } from "./components/menu"; export { Paragraph } from "./components/paragraph"; diff --git a/app/shared/icons/index.ts b/app/shared/icons/index.ts index 8db09fbfb5..10704ecf07 100644 --- a/app/shared/icons/index.ts +++ b/app/shared/icons/index.ts @@ -2,3 +2,5 @@ export * from "@radix-ui/react-icons"; export { ListNestedIcon } from "./list-nested"; export { BrushIcon } from "./brush"; export { FormIcon } from "./form"; +export { UndoIcon } from "./undo"; +export { RedoIcon } from "./redo"; diff --git a/app/shared/icons/redo.tsx b/app/shared/icons/redo.tsx new file mode 100644 index 0000000000..b03d363cda --- /dev/null +++ b/app/shared/icons/redo.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const RedoIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); + +RedoIcon.displayName = "RedoIcon"; diff --git a/app/shared/icons/undo.tsx b/app/shared/icons/undo.tsx new file mode 100644 index 0000000000..d96c93dfde --- /dev/null +++ b/app/shared/icons/undo.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { IconProps } from "./types"; + +export const UndoIcon = React.forwardRef( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + } +); + +UndoIcon.displayName = "UndoIcon";