From 0235bdb7ef094df908a902db8ca5b1980a8d3e22 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sat, 17 Oct 2020 09:37:39 +1100
Subject: [PATCH] Added keyboard shortcuts hints to map controls

---
 src/components/map/MapControls.js                  | 10 +++++-----
 src/components/map/controls/AlphaBlendToggle.js    |  4 ++--
 src/components/map/controls/DrawingToolSettings.js | 14 +++++++-------
 src/components/map/controls/EdgeSnappingToggle.js  | 10 ++++++++--
 src/components/map/controls/FogPreviewToggle.js    |  8 ++++++--
 src/components/map/controls/FogToolSettings.js     |  8 ++++----
 src/components/map/controls/MeasureToolSettings.js |  6 +++---
 src/components/map/controls/RedoButton.js          |  9 ++++++++-
 src/components/map/controls/UndoButton.js          |  9 ++++++++-
 src/helpers/shared.js                              |  2 ++
 10 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
index fbd5cf2..a912201 100644
--- a/src/components/map/MapControls.js
+++ b/src/components/map/MapControls.js
@@ -41,30 +41,30 @@ function MapContols({
     pan: {
       id: "pan",
       icon: <PanToolIcon />,
-      title: "Pan Tool",
+      title: "Pan Tool (W)",
     },
     fog: {
       id: "fog",
       icon: <FogToolIcon />,
-      title: "Fog Tool",
+      title: "Fog Tool (F)",
       SettingsComponent: FogToolSettings,
     },
     drawing: {
       id: "drawing",
       icon: <BrushToolIcon />,
-      title: "Drawing Tool",
+      title: "Drawing Tool (D)",
       SettingsComponent: DrawingToolSettings,
     },
     measure: {
       id: "measure",
       icon: <MeasureToolIcon />,
-      title: "Measure Tool",
+      title: "Measure Tool (M)",
       SettingsComponent: MeasureToolSettings,
     },
     pointer: {
       id: "pointer",
       icon: <PointerToolIcon />,
-      title: "Pointer Tool",
+      title: "Pointer Tool (Q)",
     },
   };
   const tools = ["pan", "fog", "drawing", "measure", "pointer"];
diff --git a/src/components/map/controls/AlphaBlendToggle.js b/src/components/map/controls/AlphaBlendToggle.js
index ccc2065..ff0f276 100644
--- a/src/components/map/controls/AlphaBlendToggle.js
+++ b/src/components/map/controls/AlphaBlendToggle.js
@@ -7,8 +7,8 @@ import BlendOffIcon from "../../../icons/BlendOffIcon";
 function AlphaBlendToggle({ useBlending, onBlendingChange }) {
   return (
     <IconButton
-      aria-label={useBlending ? "Disable Blending" : "Enable Blending"}
-      title={useBlending ? "Disable Blending" : "Enable Blending"}
+      aria-label={useBlending ? "Disable Blending (O)" : "Enable Blending (O)"}
+      title={useBlending ? "Disable Blending (O)" : "Enable Blending (O)"}
       onClick={() => onBlendingChange(!useBlending)}
     >
       {useBlending ? <BlendOnIcon /> : <BlendOffIcon />}
diff --git a/src/components/map/controls/DrawingToolSettings.js b/src/components/map/controls/DrawingToolSettings.js
index b19bd67..5214971 100644
--- a/src/components/map/controls/DrawingToolSettings.js
+++ b/src/components/map/controls/DrawingToolSettings.js
@@ -78,37 +78,37 @@ function DrawingToolSettings({
   const tools = [
     {
       id: "brush",
-      title: "Brush",
+      title: "Brush (B)",
       isSelected: settings.type === "brush",
       icon: <BrushIcon />,
     },
     {
       id: "paint",
-      title: "Paint",
+      title: "Paint (P)",
       isSelected: settings.type === "paint",
       icon: <BrushPaintIcon />,
     },
     {
       id: "line",
-      title: "Line",
+      title: "Line (L)",
       isSelected: settings.type === "line",
       icon: <BrushLineIcon />,
     },
     {
       id: "rectangle",
-      title: "Rectangle",
+      title: "Rectangle (R)",
       isSelected: settings.type === "rectangle",
       icon: <BrushRectangleIcon />,
     },
     {
       id: "circle",
-      title: "Circle",
+      title: "Circle (C)",
       isSelected: settings.type === "circle",
       icon: <BrushCircleIcon />,
     },
     {
       id: "triangle",
-      title: "Triangle",
+      title: "Triangle (T)",
       isSelected: settings.type === "triangle",
       icon: <BrushTriangleIcon />,
     },
@@ -128,7 +128,7 @@ function DrawingToolSettings({
       />
       <Divider vertical />
       <RadioIconButton
-        title="Erase"
+        title="Erase (E)"
         onClick={() => onSettingChange({ type: "erase" })}
         isSelected={settings.type === "erase"}
         disabled={disabledActions.includes("erase")}
diff --git a/src/components/map/controls/EdgeSnappingToggle.js b/src/components/map/controls/EdgeSnappingToggle.js
index addd219..f04bedf 100644
--- a/src/components/map/controls/EdgeSnappingToggle.js
+++ b/src/components/map/controls/EdgeSnappingToggle.js
@@ -8,9 +8,15 @@ function EdgeSnappingToggle({ useEdgeSnapping, onEdgeSnappingChange }) {
   return (
     <IconButton
       aria-label={
-        useEdgeSnapping ? "Disable Edge Snapping" : "Enable Edge Snapping"
+        useEdgeSnapping
+          ? "Disable Edge Snapping (S)"
+          : "Enable Edge Snapping (S)"
+      }
+      title={
+        useEdgeSnapping
+          ? "Disable Edge Snapping (S)"
+          : "Enable Edge Snapping (S)"
       }
-      title={useEdgeSnapping ? "Disable Edge Snapping" : "Enable Edge Snapping"}
       onClick={() => onEdgeSnappingChange(!useEdgeSnapping)}
     >
       {useEdgeSnapping ? <SnappingOnIcon /> : <SnappingOffIcon />}
diff --git a/src/components/map/controls/FogPreviewToggle.js b/src/components/map/controls/FogPreviewToggle.js
index 1e3f58a..d58e15b 100644
--- a/src/components/map/controls/FogPreviewToggle.js
+++ b/src/components/map/controls/FogPreviewToggle.js
@@ -7,8 +7,12 @@ import PreviewOffIcon from "../../../icons/FogPreviewOffIcon";
 function FogPreviewToggle({ useFogPreview, onFogPreviewChange }) {
   return (
     <IconButton
-      aria-label={useFogPreview ? "Disable Fog Preview" : "Enable Fog Preview"}
-      title={useFogPreview ? "Disable Fog Preview" : "Enable Fog Preview"}
+      aria-label={
+        useFogPreview ? "Disable Fog Preview (F)" : "Enable Fog Preview (F)"
+      }
+      title={
+        useFogPreview ? "Disable Fog Preview (F)" : "Enable Fog Preview (F)"
+      }
       onClick={() => onFogPreviewChange(!useFogPreview)}
     >
       {useFogPreview ? <PreviewOnIcon /> : <PreviewOffIcon />}
diff --git a/src/components/map/controls/FogToolSettings.js b/src/components/map/controls/FogToolSettings.js
index c890a69..3ee8a28 100644
--- a/src/components/map/controls/FogToolSettings.js
+++ b/src/components/map/controls/FogToolSettings.js
@@ -73,13 +73,13 @@ function BrushToolSettings({
   const drawTools = [
     {
       id: "polygon",
-      title: "Fog Polygon",
+      title: "Fog Polygon (P)",
       isSelected: settings.type === "polygon",
       icon: <FogPolygonIcon />,
     },
     {
       id: "brush",
-      title: "Fog Brush",
+      title: "Fog Brush (B)",
       isSelected: settings.type === "brush",
       icon: <FogBrushIcon />,
     },
@@ -109,14 +109,14 @@ function BrushToolSettings({
       />
       <Divider vertical />
       <RadioIconButton
-        title="Toggle Fog"
+        title="Toggle Fog (T)"
         onClick={() => onSettingChange({ type: "toggle" })}
         isSelected={settings.type === "toggle"}
       >
         <FogToggleIcon />
       </RadioIconButton>
       <RadioIconButton
-        title="Remove Fog"
+        title="Remove Fog (R)"
         onClick={() => onSettingChange({ type: "remove" })}
         isSelected={settings.type === "remove"}
       >
diff --git a/src/components/map/controls/MeasureToolSettings.js b/src/components/map/controls/MeasureToolSettings.js
index 40be3ca..cb7a0e5 100644
--- a/src/components/map/controls/MeasureToolSettings.js
+++ b/src/components/map/controls/MeasureToolSettings.js
@@ -27,19 +27,19 @@ function MeasureToolSettings({ settings, onSettingChange }) {
   const tools = [
     {
       id: "chebyshev",
-      title: "Grid Distance",
+      title: "Grid Distance (G)",
       isSelected: settings.type === "chebyshev",
       icon: <MeasureChebyshevIcon />,
     },
     {
       id: "euclidean",
-      title: "Line Distance",
+      title: "Line Distance (L)",
       isSelected: settings.type === "euclidean",
       icon: <MeasureEuclideanIcon />,
     },
     {
       id: "manhattan",
-      title: "City Block Distance",
+      title: "City Block Distance (C)",
       isSelected: settings.type === "manhattan",
       icon: <MeasureManhattanIcon />,
     },
diff --git a/src/components/map/controls/RedoButton.js b/src/components/map/controls/RedoButton.js
index e233143..f784e77 100644
--- a/src/components/map/controls/RedoButton.js
+++ b/src/components/map/controls/RedoButton.js
@@ -3,9 +3,16 @@ import { IconButton } from "theme-ui";
 
 import RedoIcon from "../../../icons/RedoIcon";
 
+import { isMacLike } from "../../../helpers/shared";
+
 function RedoButton({ onClick, disabled }) {
   return (
-    <IconButton onClick={onClick} disabled={disabled}>
+    <IconButton
+      title={`Redo (${isMacLike ? "Cmd" : "Ctrl"} + Shift + Z)`}
+      aria-label={`Redo (${isMacLike ? "Cmd" : "Ctrl"} + Shift + Z)`}
+      onClick={onClick}
+      disabled={disabled}
+    >
       <RedoIcon />
     </IconButton>
   );
diff --git a/src/components/map/controls/UndoButton.js b/src/components/map/controls/UndoButton.js
index 88d0d26..93232d7 100644
--- a/src/components/map/controls/UndoButton.js
+++ b/src/components/map/controls/UndoButton.js
@@ -3,9 +3,16 @@ import { IconButton } from "theme-ui";
 
 import UndoIcon from "../../../icons/UndoIcon";
 
+import { isMacLike } from "../../../helpers/shared";
+
 function UndoButton({ onClick, disabled }) {
   return (
-    <IconButton onClick={onClick} disabled={disabled}>
+    <IconButton
+      title={`Undo (${isMacLike ? "Cmd" : "Ctrl"} + Z)`}
+      aria-label={`Undo (${isMacLike ? "Cmd" : "Ctrl"} + Z)`}
+      onClick={onClick}
+      disabled={disabled}
+    >
       <UndoIcon />
     </IconButton>
   );
diff --git a/src/helpers/shared.js b/src/helpers/shared.js
index 2172c66..7d420fb 100644
--- a/src/helpers/shared.js
+++ b/src/helpers/shared.js
@@ -69,3 +69,5 @@ export function groupBy(array, key) {
     return prev;
   }, {});
 }
+
+export const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);