diff --git a/src/actions/shortcuts.ts b/src/actions/shortcuts.ts index 8a68555c..cab6526b 100644 --- a/src/actions/shortcuts.ts +++ b/src/actions/shortcuts.ts @@ -19,8 +19,8 @@ export type ShortcutName = | "copyAsSvg" | "group" | "ungroup" - | "toggleGridMode" - | "toggleStats" + | "gridMode" + | "stats" | "addToLibrary"; const shortcutMap: Record = { @@ -51,8 +51,8 @@ const shortcutMap: Record = { copyAsSvg: [], group: [getShortcutKey("CtrlOrCmd+G")], ungroup: [getShortcutKey("CtrlOrCmd+Shift+G")], - toggleGridMode: [getShortcutKey("CtrlOrCmd+'")], - toggleStats: [], + gridMode: [getShortcutKey("CtrlOrCmd+'")], + stats: [], addToLibrary: [], }; diff --git a/src/components/App.tsx b/src/components/App.tsx index f6309f60..c9cc339b 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -3643,13 +3643,15 @@ class App extends React.Component { CANVAS_ONLY_ACTIONS.includes(action.name), ), { - shortcutName: "toggleGridMode", - label: t("labels.toggleGridMode"), + checked: this.state.gridSize !== null, + shortcutName: "gridMode", + label: t("labels.gridMode"), action: this.toggleGridMode, }, { - shortcutName: "toggleStats", - label: t("labels.toggleStats"), + checked: this.state.showStats, + shortcutName: "stats", + label: t("labels.stats"), action: this.toggleStats, }, ], diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss index a874be3a..f2acaaad 100644 --- a/src/components/ContextMenu.scss +++ b/src/components/ContextMenu.scss @@ -34,6 +34,13 @@ grid-template-columns: 1fr 0.2fr; align-items: center; + &.checkmark::before { + position: absolute; + left: 6px; + margin-bottom: 1px; + content: "\2713"; + } + &.dangerous { div:nth-child(1) { color: $oc-red-7; diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx index 71abcf5a..39067382 100644 --- a/src/components/ContextMenu.tsx +++ b/src/components/ContextMenu.tsx @@ -10,6 +10,7 @@ import { } from "../actions/shortcuts"; type ContextMenuOption = { + checked?: boolean; shortcutName: ShortcutName; label: string; action(): void; @@ -42,12 +43,12 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => { className="context-menu" onContextMenu={(event) => event.preventDefault()} > - {options.map(({ action, shortcutName, label }, idx) => ( + {options.map(({ action, checked, shortcutName, label }, idx) => (