mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Fixes in Shortcuts dialog and minor refactor (#1297)
This commit is contained in:
Lipis
GitHub
parent
e4c154f43e
commit
0c3d34261e
11 changed files with 96 additions and 82 deletions
|
|
@ -6,7 +6,7 @@ import { hasBackground, hasStroke, hasText, getTargetElement } from "../scene";
|
|||
import { t } from "../i18n";
|
||||
import { SHAPES } from "../shapes";
|
||||
import { ToolButton } from "./ToolButton";
|
||||
import { capitalizeString, getShortcutKey, setCursorForShape } from "../utils";
|
||||
import { capitalizeString, setCursorForShape } from "../utils";
|
||||
import Stack from "./Stack";
|
||||
import useIsMobile from "../is-mobile";
|
||||
|
||||
|
|
@ -94,9 +94,9 @@ export function ShapesSwitcher({
|
|||
<>
|
||||
{SHAPES.map(({ value, icon }, index) => {
|
||||
const label = t(`toolBar.${value}`);
|
||||
const shortcut = getShortcutKey(
|
||||
`${capitalizeString(value)[0]}, ${index + 1}`,
|
||||
);
|
||||
const shortcut = `${capitalizeString(value)[0]} ${t(
|
||||
"shortcutsDialog.or",
|
||||
)} ${index + 1}`;
|
||||
return (
|
||||
<ToolButton
|
||||
key={value}
|
||||
|
|
@ -104,10 +104,11 @@ export function ShapesSwitcher({
|
|||
icon={icon}
|
||||
checked={elementType === value}
|
||||
name="editor-current-shape"
|
||||
title={`${capitalizeString(label)} ${shortcut}`}
|
||||
title={`${capitalizeString(label)} — ${shortcut}`}
|
||||
keyBindingLabel={`${index + 1}`}
|
||||
aria-label={capitalizeString(label)}
|
||||
aria-keyshortcuts={`${label[0]} ${index + 1}`}
|
||||
data-testid={value}
|
||||
onChange={() => {
|
||||
setAppState({
|
||||
elementType: value,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from "react";
|
||||
import { getShortcutKey } from "../utils";
|
||||
|
||||
type HelpIconProps = {
|
||||
title?: string;
|
||||
|
|
@ -21,10 +20,7 @@ const ICON = (
|
|||
|
||||
export function HelpIcon(props: HelpIconProps) {
|
||||
return (
|
||||
<label
|
||||
title={`${props.title} ${getShortcutKey("?")}`}
|
||||
className="help-icon"
|
||||
>
|
||||
<label title={`${props.title} — ?`} className="help-icon">
|
||||
<div onClick={props.onClick}>{ICON}</div>
|
||||
</label>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import "./ToolIcon.scss";
|
||||
|
||||
import React from "react";
|
||||
import { getShortcutKey } from "../utils";
|
||||
|
||||
type LockIconSize = "s" | "m";
|
||||
|
||||
|
|
@ -46,7 +45,7 @@ export function LockIcon(props: LockIconProps) {
|
|||
return (
|
||||
<label
|
||||
className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn}`}
|
||||
title={`${props.title} ${getShortcutKey("Q")}`}
|
||||
title={`${props.title} — Q`}
|
||||
>
|
||||
<input
|
||||
className="ToolIcon_type_checkbox"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Dialog } from "./Dialog";
|
|||
import { getShortcutKey } from "../utils";
|
||||
|
||||
const ShortcutIsland = (props: {
|
||||
title: string;
|
||||
caption: string;
|
||||
children: React.ReactNode;
|
||||
}) => (
|
||||
<div
|
||||
|
|
@ -24,13 +24,17 @@ const ShortcutIsland = (props: {
|
|||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{props.title}
|
||||
{props.caption}
|
||||
</h3>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Shortcut = (props: { title: string; shortcuts: string[] }) => (
|
||||
const Shortcut = (props: {
|
||||
label: string;
|
||||
shortcuts: string[];
|
||||
isOr: boolean;
|
||||
}) => (
|
||||
<div
|
||||
style={{
|
||||
borderTop: "1px solid #ced4da",
|
||||
|
|
@ -53,7 +57,7 @@ const Shortcut = (props: { title: string; shortcuts: string[] }) => (
|
|||
lineHeight: 1.4,
|
||||
}}
|
||||
>
|
||||
{props.title}
|
||||
{props.label}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -63,14 +67,23 @@ const Shortcut = (props: { title: string; shortcuts: string[] }) => (
|
|||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{props.shortcuts.map((shortcut) => (
|
||||
<ShortcutKey>{shortcut}</ShortcutKey>
|
||||
{props.shortcuts.map((shortcut, index) => (
|
||||
<>
|
||||
<ShortcutKey>{shortcut}</ShortcutKey>
|
||||
{props.isOr &&
|
||||
index !== props.shortcuts.length - 1 &&
|
||||
t("shortcutsDialog.or")}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Shortcut.defaultProps = {
|
||||
isOr: true,
|
||||
};
|
||||
|
||||
const ShortcutKey = (props: { children: React.ReactNode }) => (
|
||||
<span
|
||||
style={{
|
||||
|
|
@ -90,7 +103,7 @@ const Footer = () => (
|
|||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
justifyContent: "space-evenly",
|
||||
borderTop: "1px solid #ced4da",
|
||||
marginTop: 8,
|
||||
paddingTop: 16,
|
||||
|
|
@ -142,96 +155,98 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
|
|||
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"]} />
|
||||
<ShortcutIsland caption={t("shortcutsDialog.shapes")}>
|
||||
<Shortcut label={t("toolBar.selection")} shortcuts={["S", "1"]} />
|
||||
<Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
|
||||
<Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
|
||||
<Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
|
||||
<Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
|
||||
<Shortcut label={t("toolBar.line")} shortcuts={["L", "6"]} />
|
||||
<Shortcut label={t("toolBar.text")} shortcuts={["T", "7"]} />
|
||||
<Shortcut
|
||||
title={t("shortcutsDialog.curvedArrow")}
|
||||
label={t("shortcutsDialog.curvedArrow")}
|
||||
shortcuts={["A", "click", "click", "click"]}
|
||||
isOr={false}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("shortcutsDialog.curvedLine")}
|
||||
label={t("shortcutsDialog.curvedLine")}
|
||||
shortcuts={["L", "click", "click", "click"]}
|
||||
isOr={false}
|
||||
/>
|
||||
<Shortcut title={t("toolBar.lock")} shortcuts={["Q"]} />
|
||||
<Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
|
||||
</ShortcutIsland>
|
||||
<ShortcutIsland title={t("shortcutsDialog.editor")}>
|
||||
<ShortcutIsland caption={t("shortcutsDialog.editor")}>
|
||||
<Shortcut
|
||||
title={t("labels.selectAll")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+A", "")]}
|
||||
label={t("labels.selectAll")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.copy")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+C", "")]}
|
||||
label={t("labels.copy")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.paste")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+V", "")]}
|
||||
label={t("labels.paste")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.copyAsPng")}
|
||||
shortcuts={[getShortcutKey("Shift+Alt+C", "")]}
|
||||
label={t("labels.copyAsPng")}
|
||||
shortcuts={[getShortcutKey("Shift+Alt+C")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.copyStyles")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C", "")]}
|
||||
label={t("labels.copyStyles")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+C")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.pasteStyles")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V", "")]}
|
||||
label={t("labels.pasteStyles")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.delete")}
|
||||
shortcuts={[getShortcutKey("Del", "")]}
|
||||
label={t("labels.delete")}
|
||||
shortcuts={[getShortcutKey("Del")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.sendToBack")}
|
||||
label={t("labels.sendToBack")}
|
||||
shortcuts={[
|
||||
isDarwin
|
||||
? getShortcutKey("CtrlOrCmd+Alt+[", "")
|
||||
: getShortcutKey("CtrlOrCmd+Shift+[", ""),
|
||||
? getShortcutKey("CtrlOrCmd+Alt+[")
|
||||
: getShortcutKey("CtrlOrCmd+Shift+["),
|
||||
]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.bringToFront")}
|
||||
label={t("labels.bringToFront")}
|
||||
shortcuts={[
|
||||
isDarwin
|
||||
? getShortcutKey("CtrlOrCmd+Alt+]", "")
|
||||
: getShortcutKey("CtrlOrCmd+Shift+]", ""),
|
||||
? getShortcutKey("CtrlOrCmd+Alt+]")
|
||||
: getShortcutKey("CtrlOrCmd+Shift+]"),
|
||||
]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.sendBackward")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+[", "")]}
|
||||
label={t("labels.sendBackward")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.bringForward")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+]", "")]}
|
||||
label={t("labels.bringForward")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("labels.duplicateSelection")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+D", "")]}
|
||||
label={t("labels.duplicateSelection")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+D")]}
|
||||
/>
|
||||
</ShortcutIsland>
|
||||
<ShortcutIsland title={t("shortcutsDialog.view")}>
|
||||
<ShortcutIsland caption={t("shortcutsDialog.view")}>
|
||||
<Shortcut
|
||||
title={t("buttons.zoomIn")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd++", "")]}
|
||||
label={t("buttons.zoomIn")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd++")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("buttons.zoomOut")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+-", "")]}
|
||||
label={t("buttons.zoomOut")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
|
||||
/>
|
||||
<Shortcut
|
||||
title={t("buttons.resetZoom")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+0", "")]}
|
||||
label={t("buttons.resetZoom")}
|
||||
shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
|
||||
/>
|
||||
<Shortcut title={t("buttons.toggleFullScreen")} shortcuts={["F"]} />
|
||||
<Shortcut label={t("buttons.toggleFullScreen")} shortcuts={["F"]} />
|
||||
</ShortcutIsland>
|
||||
</div>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ type ToolButtonBaseProps = {
|
|||
icon?: React.ReactNode;
|
||||
"aria-label": string;
|
||||
"aria-keyshortcuts"?: string;
|
||||
"data-testid"?: string;
|
||||
label?: string;
|
||||
title?: string;
|
||||
name?: string;
|
||||
|
|
@ -78,6 +79,7 @@ export const ToolButton = React.forwardRef(function (
|
|||
name={props.name}
|
||||
aria-label={props["aria-label"]}
|
||||
aria-keyshortcuts={props["aria-keyshortcuts"]}
|
||||
data-testid={props["data-testid"]}
|
||||
id={props.id}
|
||||
onChange={props.onChange}
|
||||
checked={props.checked}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue