From e4c154f43e7aad2babe65c0d945f9e2a9958e7b6 Mon Sep 17 00:00:00 2001
From: Mohit kumar Bajoria <mohitbajo36@gmail.com>
Date: Tue, 7 Apr 2020 16:12:10 +0530
Subject: [PATCH] Button for shortcuts (#1253)

---
 src/actions/actionMenu.tsx  | 18 ++++++++++++++++++
 src/actions/index.ts        |  1 +
 src/actions/types.ts        |  3 ++-
 src/components/HelpIcon.tsx | 31 +++++++++++++++++++++++++++++++
 src/components/LayerUI.tsx  |  1 +
 src/locales/en.json         |  3 ++-
 src/styles.scss             | 17 +++++++++++++++--
 7 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 src/components/HelpIcon.tsx

diff --git a/src/actions/actionMenu.tsx b/src/actions/actionMenu.tsx
index 844e951f..0458778c 100644
--- a/src/actions/actionMenu.tsx
+++ b/src/actions/actionMenu.tsx
@@ -6,6 +6,7 @@ import { showSelectedShapeActions } from "../element";
 import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
+import { HelpIcon } from "../components/HelpIcon";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -63,3 +64,20 @@ export const actionFullScreen = register({
   },
   keyTest: (event) => event.keyCode === KEYS.F_KEY_CODE,
 });
+
+export const actionShortcuts = register({
+  name: "toggleShortcuts",
+  perform: (_elements, appState) => {
+    return {
+      appState: {
+        ...appState,
+        showShortcutsDialog: true,
+      },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ updateData }) => (
+    <HelpIcon title={t("buttons.showShortcuts")} onClick={updateData} />
+  ),
+  keyTest: (event) => event.key === KEYS.QUESTION_MARK,
+});
diff --git a/src/actions/index.ts b/src/actions/index.ts
index 7680cbdf..6e27bdd6 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -40,4 +40,5 @@ export {
   actionToggleCanvasMenu,
   actionToggleEditMenu,
   actionFullScreen,
+  actionShortcuts,
 } from "./actionMenu";
diff --git a/src/actions/types.ts b/src/actions/types.ts
index 786477bd..91d8a051 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -49,7 +49,8 @@ export type ActionName =
   | "zoomOut"
   | "resetZoom"
   | "changeFontFamily"
-  | "toggleFullScreen";
+  | "toggleFullScreen"
+  | "toggleShortcuts";
 
 export interface Action {
   name: ActionName;
diff --git a/src/components/HelpIcon.tsx b/src/components/HelpIcon.tsx
new file mode 100644
index 00000000..5e700834
--- /dev/null
+++ b/src/components/HelpIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { getShortcutKey } from "../utils";
+
+type HelpIconProps = {
+  title?: string;
+  name?: string;
+  id?: string;
+  onClick?(): void;
+};
+
+const ICON = (
+  <svg
+    width="30"
+    height="22"
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" />
+  </svg>
+);
+
+export function HelpIcon(props: HelpIconProps) {
+  return (
+    <label
+      title={`${props.title} ${getShortcutKey("?")}`}
+      className="help-icon"
+    >
+      <div onClick={props.onClick}>{ICON}</div>
+    </label>
+  );
+}
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index fdca0215..41e689f0 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -202,6 +202,7 @@ export const LayerUI = React.memo(
             languages={languages}
             floating
           />
+          {actionManager.renderAction("toggleShortcuts")}
           {appState.scrolledOutside && (
             <button
               className="scroll-back-to-content"
diff --git a/src/locales/en.json b/src/locales/en.json
index 81edb79e..ab11b74d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -71,7 +71,8 @@
     "redo": "Redo",
     "roomDialog": "Start live collaboration",
     "createNewRoom": "Create new room",
-    "toggleFullScreen": "Toggle full screen"
+    "toggleFullScreen": "Toggle full screen",
+    "showShortcuts": "Show shortcuts"
   },
   "alerts": {
     "clearReset": "This will clear the whole canvas. Are you sure?",
diff --git a/src/styles.scss b/src/styles.scss
index f16b9cb8..052801d7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -372,10 +372,10 @@ button,
 .dropdown-select__language.dropdown-select--floating {
   bottom: 10px;
   :root[dir="ltr"] & {
-    right: 10px;
+    right: 44px;
   }
   :root[dir="rtl"] & {
-    left: 10px;
+    left: 44px;
   }
 }
 
@@ -410,6 +410,19 @@ button,
   padding: 10px 20px;
 }
 
+.help-icon {
+  position: fixed;
+  cursor: pointer;
+  fill: #868e96;
+  bottom: 14px;
+  :root[dir="ltr"] & {
+    right: 14px;
+  }
+  :root[dir="rtl"] & {
+    left: 14px;
+  }
+}
+
 @media #{$media-query} {
   aside {
     display: none;