hotkey menu

src/css/_index.scss

@@ -18,6 +18,7 @@
 @import "farm_designer_panels";
 @import "farm_designer";
 @import "front_page";
+@import "hotkeys";
 @import "image_flipper";
 @import "inputs";
 @import "labels";

src/css/hotkeys.scss

@@ -0,0 +1,21 @@
+.hotkey-guide {
+  z-index: 99;
+  top: 24vh;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  width: 32rem;
+  position: relative;
+  outline: none;
+  h3 {
+    text-align: center;
+    display: block;
+    margin-bottom: 3rem;
+  }
+  i {
+    position: absolute;
+    font-size: 2rem;
+    top: 1rem;
+    left: 1rem;
+  }
+}

src/hotkeys.tsx

@@ -1,27 +1,77 @@
 import * as React from "react";
 import * as _ from "lodash";
+import { t } from "i18next";
 import {
   Hotkey,
   Hotkeys,
   HotkeysTarget,
-  IHotkeyProps
+  IHotkeyProps,
+  Overlay,
+  Classes
 } from "@blueprintjs/core";
 
 import { links } from "./nav/links";
 import { sync } from "./devices/actions";
 import { lastUrlChunk } from "./util";
 import { history, push } from "./history";
+import { Row, Col } from "./ui/index";
 
 interface Props {
   dispatch: Function;
 }
 
+interface State {
+  guideOpen: boolean;
+}
+
+let hotkeyGuideClasses = [
+  "hotkey-guide",
+  "pt-card",
+  Classes.ELEVATION_4
+].join(" ");
+
 @HotkeysTarget
-export class HotKeys extends React.Component<Props, {}> {
+export class HotKeys extends React.Component<Props, Partial<State>> {
+
+  state: State = { guideOpen: false };
+
   render() {
-    return <span />;
+    return (
+      <div>
+        <Overlay
+          isOpen={this.state.guideOpen}
+          onClose={this.toggle("guideOpen")}
+        >
+          <div className={hotkeyGuideClasses}>
+            <h3>{t("Hotkeys")}</h3>
+            <i
+              className="fa fa-times"
+              onClick={this.toggle("guideOpen")}
+            />
+            {
+              this.hotkeys(this.props.dispatch, "")
+                .map(hotkey => {
+                  return (
+                    <Row key={hotkey.combo}>
+                      <Col xs={5}>
+                        <label>{hotkey.label}</label>
+                      </Col>
+                      <Col xs={7}>
+                        <code>{hotkey.combo}</code>
+                      </Col>
+                    </Row>
+                  );
+                })
+            }
+          </div>
+        </Overlay>
+      </div>
+    );
   }
 
+  toggle = (property: keyof State) => () =>
+    this.setState({ [property]: !this.state[property] });
+
   hotkeys(dispatch: Function, slug: string) {
     let idx = _.findIndex(links, { slug });
     let right = "/app/" + (links[idx + 1] || links[0]).slug;
@@ -52,6 +102,11 @@ export class HotKeys extends React.Component<Props, {}> {
         label: "Add Farm Event",
         onKeyDown: () => push("/app/designer/farm_events/add")
       },
+      {
+        combo: "ctrl + shift + /",
+        label: "Toggle Guide",
+        onKeyDown: () => this.toggle("guideOpen")()
+      },
     ];
     return hotkeyMap;
   }