From 0faec7efb69bdebac4041805d4211c3035c98b3a Mon Sep 17 00:00:00 2001
From: Rene <HarryMillerMail@googlemail.com>
Date: Sun, 20 Dec 2020 23:20:03 +0100
Subject: [PATCH] feat: Checkmark to toggle context-menu-items (#2645)

---
 src/actions/shortcuts.ts           |  8 ++++----
 src/components/App.tsx             | 10 ++++++----
 src/components/ContextMenu.scss    |  7 +++++++
 src/components/ContextMenu.tsx     |  9 +++++----
 src/components/ShortcutsDialog.tsx |  2 +-
 src/locales/en.json                |  4 ++--
 src/tests/regressionTests.test.tsx |  4 ++--
 7 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/actions/shortcuts.ts b/src/actions/shortcuts.ts
index 8a68555c8..cab6526b0 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<ShortcutName, string[]> = {
@@ -51,8 +51,8 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   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 f6309f602..c9cc339ba 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -3643,13 +3643,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             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 a874be3a5..f2acaaad3 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 71abcf5a8..390673821 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) => (
             <li data-testid={shortcutName} key={idx} onClick={onCloseRequest}>
               <button
-                className={`context-menu-option ${
-                  shortcutName === "delete" ? "dangerous" : ""
-                }`}
+                className={`context-menu-option 
+                ${shortcutName === "delete" ? "dangerous" : ""}
+                ${checked ? "checkmark" : ""}`}
                 onClick={action}
               >
                 <div>{label}</div>
diff --git a/src/components/ShortcutsDialog.tsx b/src/components/ShortcutsDialog.tsx
index 7e2cfad98..7c878414f 100644
--- a/src/components/ShortcutsDialog.tsx
+++ b/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>
diff --git a/src/locales/en.json b/src/locales/en.json
index 74c9d7b49..36b45e0fc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -76,8 +76,8 @@
     "group": "Group selection",
     "ungroup": "Ungroup selection",
     "collaborators": "Collaborators",
-    "toggleGridMode": "Toggle grid mode",
-    "toggleStats": "Toggle stats for nerds",
+    "gridMode": "Grid mode",
+    "stats": "Stats for nerds",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
     "libraryLoadingMessage": "Loading library...",
diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx
index 5d4e7cd2d..c3a6c3894 100644
--- a/src/tests/regressionTests.test.tsx
+++ b/src/tests/regressionTests.test.tsx
@@ -635,8 +635,8 @@ describe("regression tests", () => {
     const contextMenu = document.querySelector(".context-menu");
     const expectedShortcutNames: ShortcutName[] = [
       "selectAll",
-      "toggleGridMode",
-      "toggleStats",
+      "gridMode",
+      "stats",
     ];
 
     expect(contextMenu).not.toBeNull();