Button for shortcuts (#1253)

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,
+});

src/actions/index.ts

@@ -40,4 +40,5 @@ export {
   actionToggleCanvasMenu,
   actionToggleEditMenu,
   actionFullScreen,
+  actionShortcuts,
 } from "./actionMenu";

src/actions/types.ts

@@ -49,7 +49,8 @@ export type ActionName =
   | "zoomOut"
   | "resetZoom"
   | "changeFontFamily"
-  | "toggleFullScreen";
+  | "toggleFullScreen"
+  | "toggleShortcuts";
 
 export interface Action {
   name: ActionName;

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>
+  );
+}

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"

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?",

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;