diff --git a/src/css/_index.scss b/src/css/_index.scss index 0f66837a5..ef2999c2e 100644 --- a/src/css/_index.scss +++ b/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"; diff --git a/src/css/hotkeys.scss b/src/css/hotkeys.scss new file mode 100644 index 000000000..4ca524629 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/hotkeys.tsx b/src/hotkeys.tsx index 26538eb82..6c88d75cd 100644 --- a/src/hotkeys.tsx +++ b/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 { +export class HotKeys extends React.Component> { + + state: State = { guideOpen: false }; + render() { - return ; + return ( +
+ +
+

{t("Hotkeys")}

+ + { + this.hotkeys(this.props.dispatch, "") + .map(hotkey => { + return ( + + + + + + {hotkey.combo} + + + ); + }) + } +
+
+
+ ); } + 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 { label: "Add Farm Event", onKeyDown: () => push("/app/designer/farm_events/add") }, + { + combo: "ctrl + shift + /", + label: "Toggle Guide", + onKeyDown: () => this.toggle("guideOpen")() + }, ]; return hotkeyMap; }