feat: Checkmark to toggle context-menu-items (#2645)

src/actions/shortcuts.ts

@@ -19,8 +19,8 @@ export type ShortcutName =
   | "copyAsSvg"
   | "group"
   | "ungroup"
-  | "toggleGridMode"
+  | "gridMode"
-  | "toggleStats"
+  | "stats"
   | "addToLibrary";
 
 const shortcutMap: Record<ShortcutName, string[]> = {
@@ -51,8 +51,8 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   copyAsSvg: [],
   group: [getShortcutKey("CtrlOrCmd+G")],
   ungroup: [getShortcutKey("CtrlOrCmd+Shift+G")],
-  toggleGridMode: [getShortcutKey("CtrlOrCmd+'")],
+  gridMode: [getShortcutKey("CtrlOrCmd+'")],
-  toggleStats: [],
+  stats: [],
   addToLibrary: [],
 };
 

src/components/App.tsx

@@ -3643,13 +3643,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             CANVAS_ONLY_ACTIONS.includes(action.name),
           ),
           {
-            shortcutName: "toggleGridMode",
+            checked: this.state.gridSize !== null,
-            label: t("labels.toggleGridMode"),
+            shortcutName: "gridMode",
+            label: t("labels.gridMode"),
             action: this.toggleGridMode,
           },
           {
-            shortcutName: "toggleStats",
+            checked: this.state.showStats,
-            label: t("labels.toggleStats"),
+            shortcutName: "stats",
+            label: t("labels.stats"),
             action: this.toggleStats,
           },
         ],

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;

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) => (
             <li data-testid={shortcutName} key={idx} onClick={onCloseRequest}>
               <button
-                className={`context-menu-option ${
+                className={`context-menu-option 
-                  shortcutName === "delete" ? "dangerous" : ""
+                ${shortcutName === "delete" ? "dangerous" : ""}
-                }`}
+                ${checked ? "checkmark" : ""}`}
                 onClick={action}
               >
                 <div>{label}</div>

src/components/ShortcutsDialog.tsx

@@ -219,7 +219,7 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
                 shortcuts={[getShortcutKey("Alt+Z")]}
               />
               <Shortcut
-                label={t("labels.toggleGridMode")}
+                label={t("labels.gridMode")}
                 shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
               />
             </ShortcutIsland>

src/locales/en.json

@@ -76,8 +76,8 @@
     "group": "Group selection",
     "ungroup": "Ungroup selection",
     "collaborators": "Collaborators",
-    "toggleGridMode": "Toggle grid mode",
+    "gridMode": "Grid mode",
-    "toggleStats": "Toggle stats for nerds",
+    "stats": "Stats for nerds",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
     "libraryLoadingMessage": "Loading library...",

src/tests/regressionTests.test.tsx

@@ -635,8 +635,8 @@ describe("regression tests", () => {
     const contextMenu = document.querySelector(".context-menu");
     const expectedShortcutNames: ShortcutName[] = [
       "selectAll",
-      "toggleGridMode",
+      "gridMode",
-      "toggleStats",
+      "stats",
     ];
 
     expect(contextMenu).not.toBeNull();