Lipis
6 years ago
committed by
GitHub
11 changed files with 317 additions and 5 deletions
@ -0,0 +1,228 @@
@@ -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