sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more shortcuts and minor refactor (#1347)

Browse Source
This commit is contained in:
Lipis 2020-04-09 22:58:29 +03:00 committed by GitHub
parent 737e4aefc8
commit 70e7dd6e3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 162 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
src/components/ShortcutsDialog.tsx
View File

@ -4,16 +4,37 @@ import { isDarwin } from "../keys";
import { Dialog } from "./Dialog"; import { Dialog } from "./Dialog";
import { getShortcutKey } from "../utils"; import { getShortcutKey } from "../utils";
const Columns = (props: { children: React.ReactNode }) => (
<div
style={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-between",
}}
>
{props.children}
</div>
);
const Column = (props: { children: React.ReactNode }) => (
<div
style={{
width: "49%",
}}
>
{props.children}
</div>
);
const ShortcutIsland = (props: { const ShortcutIsland = (props: {
caption: string; caption: string;
children: React.ReactNode; children: React.ReactNode;
}) => ( }) => (
<div <div
style={{ style={{
width: "49%",
border: "1px solid #ced4da", border: "1px solid #ced4da",
marginBottom: "16px", marginBottom: "16px",
height: "-webkit-fill-available",
}} }}
> >
<h3 <h3
@ -147,118 +168,140 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
onCloseRequest={handleClose} onCloseRequest={handleClose}
title={t("shortcutsDialog.title")} title={t("shortcutsDialog.title")}
> >
<div <Columns>
style={{ <Column>
display: "flex", <ShortcutIsland caption={t("shortcutsDialog.shapes")}>
flexDirection: "row", <Shortcut label={t("toolBar.selection")} shortcuts={["S", "1"]} />
flexWrap: "wrap", <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
justifyContent: "space-between", <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
}} <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
> <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
<ShortcutIsland caption={t("shortcutsDialog.shapes")}> <Shortcut label={t("toolBar.line")} shortcuts={["L", "6"]} />
<Shortcut label={t("toolBar.selection")} shortcuts={["S", "1"]} /> <Shortcut label={t("toolBar.text")} shortcuts={["T", "7"]} />
<Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} /> <Shortcut
<Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} /> label={t("shortcutsDialog.textNewLine")}
<Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} /> shortcuts={[
<Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} /> getShortcutKey("Enter"),
<Shortcut label={t("toolBar.line")} shortcuts={["L", "6"]} /> getShortcutKey("Shift+Enter"),
<Shortcut label={t("toolBar.text")} shortcuts={["T", "7"]} /> ]}
<Shortcut />
label={t("shortcutsDialog.curvedArrow")} <Shortcut
shortcuts={[ label={t("shortcutsDialog.textFinish")}
"A", shortcuts={[
t("shortcutsDialog.click"), getShortcutKey("Esc"),
t("shortcutsDialog.click"), getShortcutKey("CtrlOrCmd+Enter"),
t("shortcutsDialog.click"), ]}
]} />
isOr={false} <Shortcut
/> label={t("shortcutsDialog.curvedArrow")}
<Shortcut shortcuts={[
label={t("shortcutsDialog.curvedLine")} "A",
shortcuts={[ t("shortcutsDialog.click"),
"L", t("shortcutsDialog.click"),
t("shortcutsDialog.click"), t("shortcutsDialog.click"),
t("shortcutsDialog.click"), ]}
t("shortcutsDialog.click"), isOr={false}
]} />
isOr={false} <Shortcut
/> label={t("shortcutsDialog.curvedLine")}
<Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} /> shortcuts={[
</ShortcutIsland> "L",
<ShortcutIsland caption={t("shortcutsDialog.editor")}> t("shortcutsDialog.click"),
<Shortcut t("shortcutsDialog.click"),
label={t("labels.selectAll")} t("shortcutsDialog.click"),
shortcuts={[getShortcutKey("CtrlOrCmd+A")]} ]}
/> isOr={false}
<Shortcut />
label={t("labels.copy")} <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
shortcuts={[getShortcutKey("CtrlOrCmd+C")]} </ShortcutIsland>
/> <ShortcutIsland caption={t("shortcutsDialog.view")}>
<Shortcut <Shortcut
label={t("labels.paste")} label={t("buttons.zoomIn")}
shortcuts={[getShortcutKey("CtrlOrCmd+V")]} shortcuts={[getShortcutKey("CtrlOrCmd++")]}
/> />
<Shortcut <Shortcut
label={t("labels.copyAsPng")} label={t("buttons.zoomOut")}
shortcuts={[getShortcutKey("Shift+Alt+C")]} shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
/> />
<Shortcut <Shortcut
label={t("labels.copyStyles")} label={t("buttons.resetZoom")}
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C")]} shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
/> />
<Shortcut <Shortcut
label={t("labels.pasteStyles")} label={t("buttons.toggleFullScreen")}
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V")]} shortcuts={["F"]}
/> />
<Shortcut </ShortcutIsland>
label={t("labels.delete")} </Column>
shortcuts={[getShortcutKey("Del")]} <Column>
/> <ShortcutIsland caption={t("shortcutsDialog.editor")}>
<Shortcut <Shortcut
label={t("labels.sendToBack")} label={t("labels.selectAll")}
shortcuts={[ shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
isDarwin />
? getShortcutKey("CtrlOrCmd+Alt+[") <Shortcut
: getShortcutKey("CtrlOrCmd+Shift+["), label={t("labels.copy")}
]} shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
/> />
<Shortcut <Shortcut
label={t("labels.bringToFront")} label={t("labels.paste")}
shortcuts={[ shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
isDarwin />
? getShortcutKey("CtrlOrCmd+Alt+]") <Shortcut
: getShortcutKey("CtrlOrCmd+Shift+]"), label={t("labels.copyAsPng")}
]} shortcuts={[getShortcutKey("Shift+Alt+C")]}
/> />
<Shortcut <Shortcut
label={t("labels.sendBackward")} label={t("labels.copyStyles")}
shortcuts={[getShortcutKey("CtrlOrCmd+[")]} shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C")]}
/> />
<Shortcut <Shortcut
label={t("labels.bringForward")} label={t("labels.pasteStyles")}
shortcuts={[getShortcutKey("CtrlOrCmd+]")]} shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V")]}
/> />
<Shortcut <Shortcut
label={t("labels.duplicateSelection")} label={t("labels.delete")}
shortcuts={[getShortcutKey("CtrlOrCmd+D")]} shortcuts={[getShortcutKey("Del")]}
/> />
</ShortcutIsland> <Shortcut
<ShortcutIsland caption={t("shortcutsDialog.view")}> label={t("labels.sendToBack")}
<Shortcut shortcuts={[
label={t("buttons.zoomIn")} isDarwin
shortcuts={[getShortcutKey("CtrlOrCmd++")]} ? getShortcutKey("CtrlOrCmd+Alt+[")
/> : getShortcutKey("CtrlOrCmd+Shift+["),
<Shortcut ]}
label={t("buttons.zoomOut")} />
shortcuts={[getShortcutKey("CtrlOrCmd+-")]} <Shortcut
/> label={t("labels.bringToFront")}
<Shortcut shortcuts={[
label={t("buttons.resetZoom")} isDarwin
shortcuts={[getShortcutKey("CtrlOrCmd+0")]} ? getShortcutKey("CtrlOrCmd+Alt+]")
/> : getShortcutKey("CtrlOrCmd+Shift+]"),
<Shortcut label={t("buttons.toggleFullScreen")} shortcuts={["F"]} /> ]}
</ShortcutIsland> />
</div> <Shortcut
label={t("labels.sendBackward")}
shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
/>
<Shortcut
label={t("labels.bringForward")}
shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
/>
<Shortcut
label={t("labels.duplicateSelection")}
shortcuts={[getShortcutKey("CtrlOrCmd+D")]}
/>
<Shortcut
label={t("buttons.undo")}
shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
/>
<Shortcut
label={t("buttons.redo")}
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Z")]}
/>
</ShortcutIsland>
</Column>
</Columns>
<Footer /> <Footer />
</Dialog> </Dialog>
</> </>

4
src/locales/en.json
View File

@ -146,6 +146,8 @@
"view": "View", "view": "View",
"blog": "Read our blog", "blog": "Read our blog",
"howto": "Follow our guides", "howto": "Follow our guides",
"github": "Found an issue? Submit" "github": "Found an issue? Submit",
"textNewLine": "Add new line (text)",
"textFinish": "Finish editing (text)"
} }
} }

3
src/utils.ts
View File

@ -162,7 +162,8 @@ export const getShortcutKey = (shortcut: string): string => {
.replace("Alt+", "⌥") .replace("Alt+", "⌥")
.replace("Ctrl+", "⌃") .replace("Ctrl+", "⌃")
.replace("Shift+", "⇧") .replace("Shift+", "⇧")
.replace("Del", "⌫")}`; .replace("Del", "⌫")
.replace("Enter", "Return")}`;
} }
return `${shortcut.replace("CtrlOrCmd", "Ctrl")}`; return `${shortcut.replace("CtrlOrCmd", "Ctrl")}`;
}; };