Adds tabs and help. (#147)

packages/reactotron-app/App/Foundation/Footer.js

@@ -19,8 +19,6 @@ const Styles = {
     paddingRight: 10,
     paddingTop: 5,
     paddingBottom: 5,
-    boxShadow: `0px 0px 30px ${Colors.glow}`,
-    zIndex: 100
   },
   content: {
     ...AppStyles.Layout.hbox,

packages/reactotron-app/App/Foundation/Help.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+import Colors from '../Theme/Colors'
+import AppStyles from '../Theme/AppStyles'
+import HelpHeader from './HelpHeader'
+import HelpKeystrokes from './HelpKeystrokes'
+import HelpFeedback from './HelpFeedback'
+
+const FEEDBACK = 'Let\'s Connect!'
+const KEYSTROKES = 'Keystrokes'
+
+const logoUrl = require('../Theme/Reactotron-128.png')
+
+const Styles = {
+  container: {
+    ...AppStyles.Layout.vbox,
+    margin: 0,
+    flex: 1
+  },
+  content: {
+    padding: 20,
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    ...AppStyles.Layout.vbox
+  },
+  logoPanel: {
+    alignSelf: 'center'
+  },
+  logo: {
+    alignSelf: 'center',
+    height: 128,
+    marginTop: 20,
+    marginBottom: 20
+  },
+  title: {
+    fontSize: 18,
+    marginTop: 10,
+    marginBottom: 10,
+    color: Colors.foregroundLight,
+    paddingBottom: 2,
+    borderBottom: `1px solid ${Colors.highlight}`
+  }
+}
+
+class Help extends Component {
+
+  render () {
+    return (
+      <div style={Styles.container}>
+        <HelpHeader />
+        <div style={Styles.content}>
+          <div style={Styles.logoPanel}>
+            <img src={logoUrl} style={Styles.logo} />
+          </div>
+
+          <div style={Styles.title}>{FEEDBACK}</div>
+          <HelpFeedback />
+
+          <div style={Styles.title}>{KEYSTROKES}</div>
+          <HelpKeystrokes />
+
+
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Help

packages/reactotron-app/App/Foundation/HelpFeedback.js

@@ -0,0 +1,85 @@
+import React, { Component } from 'react'
+import Colors from '../Theme/Colors'
+import AppStyles from '../Theme/AppStyles'
+import { shell } from 'electron'
+
+const Styles = {
+  container: {
+    color: Colors.foreground,
+    marginBottom: 50
+  },
+  content: {
+    ...AppStyles.Layout.hbox,
+    alignItems: 'flex-start'
+  },
+  iconSize: 40,
+  link: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    padding: 10,
+    cursor: 'pointer',
+    backgroundColor: Colors.chrome,
+    margin: 5,
+    borderRadius: 8,
+    width: 100,
+    border: `1px solid ${Colors.chromeLine}`
+  },
+  icon: {
+    marginBottom: 8,
+    color: Colors.foregroundLight
+  },
+  text: {
+  },
+  spacer: {
+    flex: 1
+  }
+}
+
+const RepoIcon = require('react-icons/lib/go/mark-github')
+const FeedbackIcon = require('react-icons/lib/go/comment')
+const ReleaseIcon = require('react-icons/lib/go/squirrel')
+const TwitterIcon = require('react-icons/lib/fa/twitter')
+
+class HelpFeedback extends Component {
+
+  constructor (props) {
+    super(props)
+    this.openRepo = () => shell.openExternal('https://github.com/reactotron/reactotron/tree/next')
+    this.feedback = () => shell.openExternal('https://github.com/reactotron/reactotron/issues/new')
+    this.checkUpdates = () => shell.openExternal('https://github.com/reactotron/reactotron/releases')
+    this.twitter = () => shell.openExternal('https://twitter.com/reactotron')
+  }
+
+  render () {
+    return (
+      <div style={Styles.container}>
+        <div style={Styles.content}>
+          <div style={Styles.link} onClick={this.openRepo}>
+            <RepoIcon size={Styles.iconSize} style={Styles.icon} />
+            <div style={Styles.text}>Repo</div>
+          </div>
+
+          <div style={Styles.link} onClick={this.feedback}>
+            <FeedbackIcon size={Styles.iconSize} style={Styles.icon} />
+            <div style={Styles.text}>Feedback</div>
+          </div>
+
+          <div style={Styles.link} onClick={this.checkUpdates}>
+            <ReleaseIcon size={Styles.iconSize} style={Styles.icon} />
+            <div style={Styles.text}>Updates</div>
+          </div>
+
+          <div style={Styles.link} onClick={this.twitter}>
+            <TwitterIcon size={Styles.iconSize} style={Styles.icon} />
+            <div style={Styles.text}>@reactotron</div>
+          </div>
+
+          <div style={Styles.spacer}></div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default HelpFeedback

packages/reactotron-app/App/Foundation/HelpHeader.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import Colors from '../Theme/Colors'
+import AppStyles from '../Theme/AppStyles'
+import { inject, observer } from 'mobx-react'
+
+const TITLE = 'Using and Abusing Reactotron'
+
+const Styles = {
+  container: {
+    WebkitAppRegion: 'drag',
+    backgroundColor: Colors.backgroundSubtleLight,
+    borderBottom: `1px solid ${Colors.chromeLine}`,
+    color: Colors.foregroundDark,
+    boxShadow: `0px 0px 30px ${Colors.glow}`
+  },
+  content: {
+    height: 60,
+    ...AppStyles.Layout.hbox,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    color: Colors.foregroundLight,
+    textAlign: 'center'
+  }
+}
+
+@inject('session')
+@observer
+class TimelineHeader extends Component {
+
+  render () {
+    return (
+      <div style={Styles.container}>
+        <div style={Styles.content}>
+          <div style={Styles.title}>{TITLE}</div>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+export default TimelineHeader

packages/reactotron-app/App/Foundation/HelpKeystrokes.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react'
+import Colors from '../Theme/Colors'
+import AppStyles from '../Theme/AppStyles'
+import Key from '../Shared/Key'
+
+const Styles = {
+  container: {
+    color: Colors.foreground
+  },
+  helpLabel: {
+    width: 120
+  },
+  key: {
+    color: Colors.foregroundLight,
+    textTransform: 'uppercase',
+    borderRadius: 4,
+    backgroundColor: Colors.foreground,
+    padding: '4px 8px',
+    fontWeight: 'bold',
+    borderBottom: `2px solid ${Colors.highlight}`
+  },
+  helpDetail: {
+    color: Colors.foreground
+  },
+  group: {
+    ...AppStyles.Layout.vbox,
+    marginTop: 0,
+    marginBottom: 30,
+    color: Colors.highlight
+  },
+  category: {
+    color: Colors.highlight
+  },
+  helpShortcut: {
+    ...AppStyles.Layout.hbox,
+    padding: '10px 0px'
+  },
+  both: {
+  }
+}
+
+class HelpKeystrokes extends Component {
+
+  render () {
+    return (
+      <div style={Styles.container}>
+
+        <div style={Styles.both}>
+
+          <div style={Styles.group}>
+            <div style={Styles.category}>Navigation</div>
+            <div style={Styles.helpShortcut}>
+              <div style={Styles.helpLabel}><Key text='⌘' />+<Key text='1' /></div>
+              <div style={Styles.helpDetail}>view timeline</div>
+            </div>
+            <div style={Styles.helpShortcut}>
+              <div style={Styles.helpLabel}><Key text='⌘' />+<Key text='2' /></div>
+              <div style={Styles.helpDetail}>view subscriptions</div>
+            </div>
+            <div style={Styles.helpShortcut}>
+              <div style={Styles.helpLabel}><Key text='⌘' />+<Key text='/' /></div>
+              <div style={Styles.helpDetail}>view help</div>
+            </div>
+          </div>
+
+          <div style={Styles.group}>
+            <div style={Styles.category}>State Goodies</div>
+            <div style={Styles.helpShortcut}>
+              <div style={Styles.helpLabel}><Key text='⌘' />+<Key text='F' /></div>
+              <div style={Styles.helpDetail}>find keys or values</div>
+            </div>
+            <div style={Styles.helpShortcut}>
+              <div style={Styles.helpLabel}><Key text='⌘' />+<Key text='N' /></div>
+              <div style={Styles.helpDetail}>new subscription</div>
+            </div>
+            <div style={Styles.helpShortcut}>
+              <div style={Styles.helpLabel}><Key text='⌘' />+<Key text='D' /></div>
+              <div style={Styles.helpDetail}>dispatch an action</div>
+            </div>
+          </div>
+
+          <div style={Styles.group}>
+            <div style={Styles.category}>Miscellaneous</div>
+            <div style={Styles.helpShortcut}>
+              <div style={Styles.helpLabel}><Key text='⌘' />+<Key text='K' /></div>
+              <div style={Styles.helpDetail}>klear!</div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    )
+  }
+}
+
+export default HelpKeystrokes