Show shortcuts dialog when pressing `?` (#1224)
Lipis
5 years ago
committed by
GitHub
parent
0eb2f7092b
commit
9a0889c698
@ -0,0 +1,228 @@
|
||||
import React from "react";
|
||||
import { t } from "../i18n";
|
||||
import { isDarwin } from "../keys";
|
||||
import { Dialog } from "./Dialog";
|
||||
import { getShortcutKey } from "../utils";
|
||||
|
||||
const ShortcutIsland = (props: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) => (
|
||||
<div
|
||||
style={{
|
||||
width: "49%",
|
||||
border: "1px solid #ced4da",
|
||||
marginBottom: "16px",
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
margin: "0",
|
||||
padding: "4px",
|
||||
backgroundColor: "#e9ecef",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{props.title}
|
||||
</h3>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Shortcut = (props: { title: string; shortcuts: string[] }) => (
|
||||
<div
|
||||
style={{
|
||||
borderTop: "1px solid #ced4da",
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
margin: "0",
|
||||
padding: "4px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
flexBasis: 0,
|
||||
flexGrow: 2,
|
||||
lineHeight: 1.4,
|
||||
}}
|
||||
>
|
||||
{props.title}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexBasis: 0,
|
||||
flexGrow: 1,
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{props.shortcuts.map((shortcut) => (
|
||||
<ShortcutKey>{shortcut}</ShortcutKey>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ShortcutKey = (props: { children: React.ReactNode }) => (
|
||||
<span
|
||||
style={{
|
||||
border: "1px solid #ced4da",
|
||||
padding: "2px 8px",
|
||||
margin: "0 8px",
|
||||
backgroundColor: "#e9ecef",
|
||||
borderRadius: "2px",
|
||||
fontSize: "0.8em",
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
const Footer = () => (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
borderTop: "1px solid #ced4da",
|
||||
marginTop: 8,
|
||||
paddingTop: 16,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href="https://blog.excalidraw.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t("shortcutsDialog.blog")}
|
||||
</a>
|
||||
<a
|
||||
href="https://howto.excalidraw.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t("shortcutsDialog.howto")}
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/excalidraw/excalidraw/issues"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t("shortcutsDialog.github")}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
|
||||
const handleClose = React.useCallback(() => {
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
maxWidth={800}
|
||||
onCloseRequest={handleClose}
|
||||
title={t("shortcutsDialog.title")}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<ShortcutIsland title={t("shortcutsDialog.shapes")}>
|
||||
<Shortcut title={t("toolBar.selection")} shortcuts={["S", "1"]} />
|
||||
<Shortcut title={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
|
||||
<Shortcut title={t("toolBar.diamond")} shortcuts={["D", "3"]} />
|
||||
<Shortcut title={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
|
||||
<Shortcut title={t("toolBar.arrow")} shortcuts={["A", "5"]} />
|
||||
<Shortcut title={t("toolBar.line")} shortcuts={["L", "6"]} />
|
||||
<Shortcut title={t("toolBar.text")} shortcuts={["T", "7"]} />
|
||||
<Shortcut title={t("toolBar.lock")} shortcuts={["Q"]} />
|
||||
</ShortcutIsland>
|
||||
<ShortcutIsland title={t("shortcutsDialog.editor")}>
|
||||
<Shortcut
|
||||
title={t("labels.copy")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+C", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.paste")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+V", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.copyAsPng")}
|
||||
shortcuts={[getShortcutKey("Shift+Alt+C", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.copyStyles")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.pasteStyles")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.delete")}
|
||||
shortcuts={[getShortcutKey("Del", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.sendToBack")}
|
||||
shortcuts={[
|
||||
isDarwin
|
||||
? getShortcutKey("CtrlOrCmd+Alt+[", "")
|
||||
: getShortcutKey("CtrlOrCmd+Shift+[", ""),
|
||||
]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.bringToFront")}
|
||||
shortcuts={[
|
||||
isDarwin
|
||||
? getShortcutKey("CtrlOrCmd+Alt+]", "")
|
||||
: getShortcutKey("CtrlOrCmd+Shift+]", ""),
|
||||
]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.sendBackward")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+[", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.bringForward")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+]", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.duplicateSelection")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+D", "")]}
|
||||
/>
|
||||
</ShortcutIsland>
|
||||
<ShortcutIsland title={t("shortcutsDialog.view")}>
|
||||
<Shortcut
|
||||
title={t("buttons.zoomIn")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd++", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("buttons.zoomOut")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+-", "")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("buttons.resetZoom")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]}
|
||||
/>
|
||||
</ShortcutIsland>
|
||||
</div>
|
||||
<Footer />
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue