Adds a help icon and pushes a few pixels around. (#135)

infinitered · Aug 18, 2016 · 5593389 · 5593389
1 parent 7807fe8
commit 5593389
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 22 deletions.
diff --git a/packages/reactotron-app/App/Dialogs/HelpDialog.js b/packages/reactotron-app/App/Dialogs/HelpDialog.js
@@ -6,7 +6,7 @@ import AppStyles from '../Theme/AppStyles'
 import Colors from '../Theme/Colors'
 
 const ESCAPE_KEYSTROKE = 'Esc'
-const ESCAPE_HINT = 'Close Help'
+const ESCAPE_HINT = 'Close'
 const DIALOG_TITLE = 'Reactotron Quick-Help'
 const INSTRUCTIONS = (
   <span> Shortcut list</span>
@@ -27,8 +27,7 @@ const Styles = {
     ...AppStyles.Layout.hbox,
     alignSelf: 'center',
     paddingTop: 10,
-    paddingBottom: 20,
-    fontSize: 13
+    paddingBottom: 20
   },
   hotkey: {
     padding: '0 10px'
@@ -48,7 +47,8 @@ const Styles = {
     padding: '0.5em 2em 3em'
   },
   helpShortcut: {
-    flexDirection: 'row'
+    ...AppStyles.Layout.hbox,
+    margin: '2px 0'
   },
   title: {
     margin: 0,
@@ -67,14 +67,18 @@ const Styles = {
   helpLabel: {
     // borderBottom: `1px solid ${Colors.line}`,
     color: Colors.bold,
-    fontSize: 13,
     textTransform: 'uppercase',
-    paddingRight: 10
+    width: 100
   },
   helpDetail: {
-    fontSize: 13,
-    color: Colors.foregroundLight,
-    backgroundColor: 'inherit'
+    flex: 1
+  },
+  group: {
+    marginTop: 10,
+    marginBottom: 2,
+    paddingBottom: 2,
+    color: Colors.highlight,
+    borderBottom: `1px solid ${Colors.line}`
   }
 }
 
@@ -94,7 +98,7 @@ class StateDispatchDialog extends Component {
 
     return (
       <ModalPortal>
-        <ModalBackground onClose={ui.closeStateDispatchDialog}>
+        <ModalBackground onClose={ui.closeHelpDialog}>
           <ModalDialog style={Styles.dialog}>
             <div style={Styles.container}>
               <div style={Styles.header}>
@@ -104,21 +108,27 @@ class StateDispatchDialog extends Component {
                 </p>
               </div>
               <div style={Styles.body}>
+                <div style={Styles.group}>Working With State</div>
+                <div style={Styles.helpShortcut}>
+                  <div style={Styles.helpLabel}>Cmd + F</div>
+                  <div style={Styles.helpDetail}>find keys or values</div>
+                </div>
                 <div style={Styles.helpShortcut}>
-                  <label style={Styles.helpLabel}>Cmd + F</label>
-                  <label style={Styles.helpDetail}>find Redux keys or values (use tab to toggle)</label>
+                  <div style={Styles.helpLabel}>Cmd + N</div>
+                  <div style={Styles.helpDetail}>new subscription</div>
                 </div>
                 <div style={Styles.helpShortcut}>
-                  <label style={Styles.helpLabel}>Cmd + N</label>
-                  <label style={Styles.helpDetail}>subscribe to a Redux path</label>
+                  <div style={Styles.helpLabel}>Cmd + D</div>
+                  <div style={Styles.helpDetail}>dispatch an action</div>
                 </div>
+                <div style={Styles.group}>Miscellaneous</div>
                 <div style={Styles.helpShortcut}>
-                  <label style={Styles.helpLabel}>Cmd + D</label>
-                  <label style={Styles.helpDetail}>dispatch a Redux action</label>
+                  <div style={Styles.helpLabel}>Cmd + K</div>
+                  <div style={Styles.helpDetail}>klear!</div>
                 </div>
                 <div style={Styles.helpShortcut}>
-                  <label style={Styles.helpLabel}>Cmd + K</label>
-                  <label style={Styles.helpDetail}>klear!</label>
+                  <div style={Styles.helpLabel}>Cmd + /</div>
+                  <div style={Styles.helpDetail}>toggle help</div>
                 </div>
               </div>
               <div style={Styles.keystrokes}>

diff --git a/packages/reactotron-app/App/Foundation/Header.js b/packages/reactotron-app/App/Foundation/Header.js
@@ -1,26 +1,48 @@
 import React, { Component } from 'react'
 import Colors from '../Theme/Colors'
+import AppStyles from '../Theme/AppStyles'
+import HelpIcon from 'react-icons/lib/md/help'
+import ReactTooltip from 'react-tooltip'
+import { inject, observer } from 'mobx-react'
 
 const Styles = {
   container: {
     WebkitAppRegion: 'drag'
   },
   content: {
+    padding: '10px 10px',
     backgroundColor: Colors.chrome,
-    height: 60,
     borderBottom: `1px solid ${Colors.chromeLine}`,
     color: Colors.foregroundDark,
     boxShadow: `0px 0px 30px ${Colors.glow}`
+  },
+  toolbar: {
+    ...AppStyles.Layout.hbox,
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  tooltip: {
+    backgroundColor: Colors.backgroundLight,
+    padding: 10
   }
 }
 
+@inject('session')
+@observer
 class Header extends Component {
 
   render () {
+    const { ui } = this.props.session
     return (
       <div style={Styles.container}>
         <div style={Styles.content}>
+          <div style={Styles.toolbar}>
+            <HelpIcon size={30} data-tip onClick={ui.openHelpDialog} />
+          </div>
         </div>
+        <ReactTooltip place='left' className='tooltipTheme'>
+          <p>Need Some Help?</p>
+        </ReactTooltip>
       </div>
     )
   }

diff --git a/packages/reactotron-app/App/Foundation/VisualRoot.js b/packages/reactotron-app/App/Foundation/VisualRoot.js
@@ -34,7 +34,6 @@ export default class VisualRoot extends Component {
         <StateDispatchDialog />
         <HelpDialog />
         <StateWatchDialog />
-        <ReactTooltip />
       </div>
     )
   }

diff --git a/packages/reactotron-app/App/Stores/UiStore.js b/packages/reactotron-app/App/Stores/UiStore.js
@@ -45,8 +45,8 @@ class UI {
     Mousetrap.bind('command+k', this.reset)
     Mousetrap.bind('command+f', this.openStateFindDialog)
     Mousetrap.bind('command+d', this.openStateDispatchDialog)
-    Mousetrap.bind('command+/', this.openHelpDialog)
-    Mousetrap.bind('command+?', this.openHelpDialog)
+    Mousetrap.bind('command+/', this.toggleHelpDialog)
+    Mousetrap.bind('command+?', this.toggleHelpDialog)
     Mousetrap.bind('tab', this.toggleKeysValues)
     Mousetrap.bind('escape', this.popState)
     Mousetrap.bind('enter', this.submitCurrentForm)
@@ -122,6 +122,10 @@ class UI {
     this.showStateDispatchDialog = true
   }
 
+  @action toggleHelpDialog = () => {
+    this.showHelpDialog = !this.showHelpDialog
+  }
+
   @action openHelpDialog = () => {
     this.showHelpDialog = true
   }

diff --git a/packages/reactotron-app/App/app.global.css b/packages/reactotron-app/App/app.global.css
@@ -48,3 +48,7 @@ a.closeButton--jss-0-1 { display: none; }
   0%   { -webkit-transform: translateY(0px); }
   100% { -webkit-transform: translateY(100%); }
 }
+
+.tooltipTheme {
+  background-color: 'green'
+}