Merge branch 'dev'

* dev:
  実装 - PlanetArticleListへのAuto scroll追加
  実装 - tooltip (Refresh, Planet setting, Planet refresh, Edit article, Delete article, Contact)
  #14 改善適用 - アプリが立ち上がったら最初はmy planetが表示されるようにしたい - Noteがスクロールできない - Note行間がなくて読みづらい
  実装 - Hotkey

browser/main/Components/AboutModal.jsx

@@ -4,12 +4,20 @@ var version = remote.getGlobal('version')
 var React = require('react/addons')
 
 var ExternalLink = require('../Mixins/ExternalLink')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 module.exports = React.createClass({
-  mixins: [ExternalLink],
+  mixins: [ExternalLink, KeyCaster('aboutModal')],
   propTypes: {
     close: React.PropTypes.func
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+    }
+  },
   render: function () {
     return (
       <div className='AboutModal modal'>

browser/main/Components/AddMemberModal.jsx

@@ -5,6 +5,8 @@ var LinkedState = require('../Mixins/LinkedState')
 
 var Hq = require('../Services/Hq')
 
+var KeyCaster = require('../Mixins/KeyCaster')
+
 var UserStore = require('../Stores/UserStore')
 
 var getOptions = function (input, callback) {
@@ -26,7 +28,7 @@ var getOptions = function (input, callback) {
 }
 
 module.exports = React.createClass({
-  mixins: [LinkedState],
+  mixins: [LinkedState, KeyCaster('addMemberModal')],
   propTypes: {
     team: React.PropTypes.object,
     close: React.PropTypes.func
@@ -37,6 +39,16 @@ module.exports = React.createClass({
       role: 'member'
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+      case 'submitAddMemberModal':
+        this.handleSubmit()
+        break
+    }
+  },
   handleSubmit: function () {
     Hq
       .addMember(this.props.team.name, {

browser/main/Components/CodeDeleteModal.jsx

@@ -2,19 +2,26 @@ var React = require('react')
 
 var Hq = require('../Services/Hq')
 
+var KeyCaster = require('../Mixins/KeyCaster')
+
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
+  mixins: [KeyCaster('codeDeleteModal')],
   propTypes: {
     planet: React.PropTypes.object,
     code: React.PropTypes.object,
     close: React.PropTypes.func
   },
-  componentDidMount: function () {
-    React.findDOMNode(this).focus()
-  },
-  stopPropagation: function (e) {
-    e.stopPropagation()
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'submitCodeDeleteModal':
+        this.submit()
+        break
+      case 'closeModal':
+        this.props.close()
+        break
+    }
   },
   submit: function () {
     var planet = this.props.planet

browser/main/Components/CodeEditModal.jsx

@@ -7,13 +7,19 @@ module.exports = React.createClass({
     code: React.PropTypes.object,
     planet: React.PropTypes.object
   },
+  componentDidMount: function () {
+    // TODO: Hacked!! should fix later
+    setTimeout(function () {
+      React.findDOMNode(this.refs.form.refs.description).focus()
+    }.bind(this), 1)
+  },
   render: function () {
     return (
       <div className='CodeEditModal modal'>
         <div className='modal-header'>
           <h1>Edit Code</h1>
         </div>
-        <CodeForm code={this.props.code} planet={this.props.planet} close={this.props.close}/>
+        <CodeForm ref='form' code={this.props.code} planet={this.props.planet} close={this.props.close}/>
       </div>
     )
   }

browser/main/Components/CodeEditor.jsx

@@ -6,6 +6,7 @@ module.exports = React.createClass({
   propTypes: {
     code: React.PropTypes.string,
     mode: React.PropTypes.string,
+    className: React.PropTypes.string,
     onChange: React.PropTypes.func
   },
   componentDidMount: function () {
@@ -52,7 +53,7 @@ module.exports = React.createClass({
   },
   render: function () {
     return (
-      <div ref='target'></div>
+      <div ref='target' className={this.props.className}></div>
     )
   }
 })

browser/main/Components/CodeForm.jsx

@@ -5,6 +5,7 @@ var Select = require('react-select')
 var Hq = require('../Services/Hq')
 
 var LinkedState = require('../Mixins/LinkedState')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var PlanetStore = require('../Stores/PlanetStore')
 
@@ -29,7 +30,7 @@ var getOptions = function (input, callback) {
 }
 
 module.exports = React.createClass({
-  mixins: [LinkedState],
+  mixins: [LinkedState, KeyCaster('codeForm')],
   propTypes: {
     planet: React.PropTypes.object,
     close: React.PropTypes.func,
@@ -55,6 +56,16 @@ module.exports = React.createClass({
       code: code
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'submitCodeForm':
+        this.submit()
+        break
+      case 'closeModal':
+        this.props.close()
+        break
+    }
+  },
   handleModeChange: function (selected) {
     var code = this.state.code
     code.mode = selected

browser/main/Components/CodeViewer.jsx

@@ -5,7 +5,8 @@ var ace = window.ace
 module.exports = React.createClass({
   propTypes: {
     code: React.PropTypes.string,
-    mode: React.PropTypes.string
+    mode: React.PropTypes.string,
+    className: React.PropTypes.string
   },
   componentDidMount: function () {
     var el = React.findDOMNode(this.refs.target)
@@ -46,7 +47,7 @@ module.exports = React.createClass({
   },
   render: function () {
     return (
-      <div ref='target'></div>
+      <div ref='target' className={this.props.className}></div>
     )
   }
 })

browser/main/Components/ContactModal.jsx

@@ -1,11 +1,12 @@
 var React = require('react')
 
 var LinkedState = require('../Mixins/LinkedState')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var Hq = require('../Services/Hq')
 
 module.exports = React.createClass({
-  mixins: [LinkedState],
+  mixins: [LinkedState, KeyCaster('contactModal')],
   propTypes: {
     close: React.PropTypes.func
   },
@@ -18,6 +19,23 @@ module.exports = React.createClass({
       }
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+      case 'submitContactModal':
+        if (this.state.isSent) {
+          this.props.close()
+          return
+        }
+        this.sendEmail()
+        break
+    }
+  },
+  componentDidMount: function () {
+    React.findDOMNode(this.refs.title).focus()
+  },
   sendEmail: function () {
     Hq.sendEmail(this.state.mail)
       .then(function (res) {
@@ -36,7 +54,7 @@ module.exports = React.createClass({
           <div className='contactForm'>
             <div className='modal-body'>
               <div className='formField'>
-                <input valueLink={this.linkState('mail.title')} placeholder='Title'/>
+                <input ref='title' valueLink={this.linkState('mail.title')} placeholder='Title'/>
               </div>
               <div className='formField'>
                 <textarea valueLink={this.linkState('mail.content')} placeholder='Content'/>

browser/main/Components/EditProfileModal.jsx

@@ -5,17 +5,19 @@ var React = require('react/addons')
 var Hq = require('../Services/Hq')
 
 var LinkedState = require('../Mixins/LinkedState')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var UserStore = require('../Stores/UserStore')
 
 module.exports = React.createClass({
-  mixins: [LinkedState],
+  mixins: [LinkedState, KeyCaster('editProfileModal')],
   propTypes: {
     user: React.PropTypes.shape({
       name: React.PropTypes.string,
       profileName: React.PropTypes.string,
       email: React.PropTypes.string
-    })
+    }),
+    close: React.PropTypes.func
   },
   getInitialState: function () {
     var user = this.props.user
@@ -34,6 +36,13 @@ module.exports = React.createClass({
       passwordSubmitStatus: null
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+    }
+  },
   selectTab: function (tabName) {
     return function () {
       this.setState({currentTab: tabName})

browser/main/Components/HomeNavigator.jsx

@@ -96,6 +96,10 @@ module.exports = React.createClass({
   handleLogoutClick: function () {
     this.openModal(LogoutModal, {transitionTo: this.transitionTo})
   },
+  switchPlanetByIndex: function (index) {
+    var planetProps = this.refs.planets.props.children[index - 1].props
+    this.transitionTo('planet', {userName: planetProps.userName, planetName: planetProps.planetName})
+  },
   render: function () {
     var params = this.getParams()
 
@@ -110,12 +114,12 @@ module.exports = React.createClass({
       return team.Planets == null ? planets : planets.concat(team.Planets)
     }, []))).map(function (planet, index) {
       return (
-        <li key={planet.id} className={params.userName === planet.userName && params.planetName === planet.name ? 'active' : ''}>
+        <li userName={planet.userName} planetName={planet.name} key={planet.id} className={params.userName === planet.userName && params.planetName === planet.name ? 'active' : ''}>
           <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>
             {planet.name[0]}
             <div className='planetTooltip'>{planet.userName}/{planet.name}</div>
           </Link>
-          <div className='shortCut'>⌘{index + 1}</div>
+          {index < 9 ? (<div className='shortCut'>⌘{index + 1}</div>) : null}
         </li>
       )
     })
@@ -128,12 +132,12 @@ module.exports = React.createClass({
           <ProfileImage size='55' email={this.state.currentUser.email}/>
         </button>
         {popup}
-        <ul className='planetList'>
+        <ul ref='planets' className='planetList'>
           {planets}
         </ul>
         <button onClick={this.openPlanetCreateModal} className='newPlanet'>
           <i className='fa fa-plus'/>
-          <div className='newPlanetTooltip'>Create new planet</div>
+          <div className='tooltip'>Create new planet</div>
         </button>
       </div>
     )

browser/main/Components/LaunchModal.jsx

@@ -15,34 +15,52 @@ module.exports = React.createClass({
     }
   },
   componentDidMount: function () {
-
+    var codeButton = React.findDOMNode(this.refs.codeButton)
+    codeButton.addEventListener('keydown', this.handleKeyDown)
+    React.findDOMNode(this.refs.noteButton).addEventListener('keydown', this.handleKeyDown)
+    codeButton.focus()
   },
-  stopPropagation: function (e) {
-    e.stopPropagation()
-  },
-  selectCodeTab: function () {
-    this.setState({currentTab: 'code'})
-  },
-  selectNoteTab: function () {
-    this.setState({currentTab: 'note'})
+  componentWillUnmount: function () {
+    React.findDOMNode(this.refs.codeButton).removeEventListener('keydown', this.handleKeyDown)
+    React.findDOMNode(this.refs.noteButton).removeEventListener('keydown', this.handleKeyDown)
   },
   handleKeyDown: function (e) {
     if (e.keyCode === 37 && e.metaKey) {
       this.selectCodeTab()
+      e.stopPropagation()
+      return
     }
     if (e.keyCode === 39 && e.metaKey) {
       this.selectNoteTab()
+      e.stopPropagation()
+      return
     }
+    if (e.keyCode === 9) {
+      if (this.state.currentTab === 'code') React.findDOMNode(this.refs.form.refs.description).focus()
+      else React.findDOMNode(this.refs.form.refs.title).focus()
+
+      e.preventDefault()
+    }
+  },
+  selectCodeTab: function () {
+    this.setState({currentTab: 'code'}, function () {
+      React.findDOMNode(this.refs.codeButton).focus()
+    })
+  },
+  selectNoteTab: function () {
+    this.setState({currentTab: 'note'}, function () {
+      React.findDOMNode(this.refs.noteButton).focus()
+    })
   },
   render: function () {
     var modalBody
     if (this.state.currentTab === 'code') {
       modalBody = (
-        <CodeForm planet={this.props.planet} transitionTo={this.props.transitionTo} close={this.props.close}/>
+        <CodeForm ref='form' planet={this.props.planet} transitionTo={this.props.transitionTo} close={this.props.close}/>
       )
     } else {
       modalBody = (
-        <NoteForm planet={this.props.planet} transitionTo={this.props.transitionTo} close={this.props.close}/>
+        <NoteForm ref='form' planet={this.props.planet} transitionTo={this.props.transitionTo} close={this.props.close}/>
       )
     }
 
@@ -50,7 +68,8 @@ module.exports = React.createClass({
       <div className='LaunchModal modal'>
         <div className='modal-header'>
           <div className='modal-tab'>
-            <button className={this.state.currentTab === 'code' ? 'btn-primary active' : 'btn-default'} onClick={this.selectCodeTab}>Code</button><button className={this.state.currentTab === 'note' ? 'btn-primary active' : 'btn-default'} onClick={this.selectNoteTab}>Note</button>
+            <button ref='codeButton' className={this.state.currentTab === 'code' ? 'btn-primary active' : 'btn-default'} onClick={this.selectCodeTab}>Code</button>
+            <button ref='noteButton' className={this.state.currentTab === 'note' ? 'btn-primary active' : 'btn-default'} onClick={this.selectNoteTab}>Note</button>
           </div>
         </div>
         {modalBody}

browser/main/Components/LogoutModal.jsx

@@ -2,11 +2,24 @@
 
 var React = require('react')
 
+var KeyCaster = require('../Mixins/KeyCaster')
+
 module.exports = React.createClass({
+  mixins: [KeyCaster('logoutModal')],
   propTypes: {
     transitionTo: React.PropTypes.func,
     close: React.PropTypes.func
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+      case 'submitLogoutModal':
+        this.logout()
+        break
+    }
+  },
   logout: function () {
     localStorage.removeItem('currentUser')
     localStorage.removeItem('token')

browser/main/Components/NoteDeleteModal.jsx

@@ -2,16 +2,26 @@ var React = require('react')
 
 var Hq = require('../Services/Hq')
 
+var KeyCaster = require('../Mixins/KeyCaster')
+
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
+  mixins: [KeyCaster('noteDeleteModal')],
   propTypes: {
     planet: React.PropTypes.object,
     note: React.PropTypes.object,
     close: React.PropTypes.func
   },
-  componentDidMount: function () {
-    React.findDOMNode(this).focus()
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'submitNoteDeleteModal':
+        this.submit()
+        break
+      case 'closeModal':
+        this.props.close()
+        break
+    }
   },
   submit: function () {
     var planet = this.props.planet

browser/main/Components/NoteEditModal.jsx

@@ -8,13 +8,19 @@ module.exports = React.createClass({
     note: React.PropTypes.object,
     planet: React.PropTypes.object
   },
+  componentDidMount: function () {
+    // TODO: Hacked!! should fix later
+    setTimeout(function () {
+      React.findDOMNode(this.refs.form.refs.title).focus()
+    }.bind(this), 1)
+  },
   render: function () {
     return (
       <div className='NoteEditModal modal'>
         <div className='modal-header'>
           <h1>Edit Note</h1>
         </div>
-        <NoteForm note={this.props.note} planet={this.props.planet} close={this.props.close}/>
+        <NoteForm ref='form' note={this.props.note} planet={this.props.planet} close={this.props.close}/>
       </div>
     )
   }

browser/main/Components/NoteForm.jsx

@@ -1,11 +1,11 @@
 var React = require('react/addons')
-var ReactRouter = require('react-router')
 var Select = require('react-select')
 
 var Hq = require('../Services/Hq')
 
 var LinkedState = require('../Mixins/LinkedState')
 var Markdown = require('../Mixins/Markdown')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var PlanetStore = require('../Stores/PlanetStore')
 
@@ -34,7 +34,7 @@ var EDIT_MODE = 0
 var PREVIEW_MODE = 1
 
 module.exports = React.createClass({
-  mixins: [LinkedState, Markdown],
+  mixins: [LinkedState, Markdown, KeyCaster('noteForm')],
   propTypes: {
     planet: React.PropTypes.object,
     close: React.PropTypes.func,
@@ -58,8 +58,15 @@ module.exports = React.createClass({
       mode: EDIT_MODE
     }
   },
-  componentDidMount: function () {
-    React.findDOMNode(this.refs.title).focus()
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'submitNoteForm':
+        this.submit()
+        break
+      case 'closeModal':
+        this.props.close()
+        break
+    }
   },
   handleTagsChange: function (selected, all) {
     var note = this.state.note

browser/main/Components/PlanetArticleDetail.jsx

@@ -25,6 +25,7 @@ module.exports = React.createClass({
     }
   },
   openEditModal: function () {
+    if (this.props.article == null) return
     switch (this.props.article.type) {
       case 'code' :
         this.openModal(CodeEditModal, {code: this.props.article, planet: this.props.planet})
@@ -34,6 +35,7 @@ module.exports = React.createClass({
     }
   },
   openDeleteModal: function () {
+    if (this.props.article == null) return
     switch (this.props.article.type) {
       case 'code' :
         this.openModal(CodeDeleteModal, {code: this.props.article, planet: this.props.planet})
@@ -74,14 +76,18 @@ module.exports = React.createClass({
             </div>
 
             <span className='itemControl'>
-              <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
-              <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+              <button id='articleEditButton' onClick={this.openEditModal} className='editButton'>
+                <i className='fa fa-edit fa-fw'></i>
+                <div className='tooltip'>Edit</div>
+              </button>
+              <button onClick={this.openDeleteModal} className='deleteButton'>
+                <i className='fa fa-trash fa-fw'></i>
+                <div className='tooltip'>Delete</div>
+              </button>
             </span>
           </div>
           <div className='detailBody'>
-            <div className='content'>
-              <CodeViewer code={article.content} mode={article.mode}/>
-            </div>
+            <CodeViewer className='content' code={article.content} mode={article.mode}/>
           </div>
         </div>
       )
@@ -101,8 +107,14 @@ module.exports = React.createClass({
           </div>
 
           <span className='itemControl'>
-            <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
-            <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+            <button id='articleEditButton' onClick={this.openEditModal} className='editButton'>
+              <i className='fa fa-edit fa-fw'></i>
+              <div className='tooltip'>Edit</div>
+            </button>
+            <button onClick={this.openDeleteModal} className='deleteButton'>
+              <i className='fa fa-trash fa-fw'></i>
+              <div className='tooltip'>Delete</div>
+            </button>
           </span>
         </div>
         <div className='detailBody'>

browser/main/Components/PlanetArticleList.jsx

@@ -1,6 +1,5 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
-var Link = ReactRouter.Link
 var moment = require('moment')
 
 var ForceUpdate = require('../Mixins/ForceUpdate')
@@ -16,9 +15,10 @@ module.exports = React.createClass({
   },
   handleArticleClikck: function (article) {
     if (article.type === 'code') {
-      return function () {
+      return function (e) {
         var params = this.getParams()
 
+        document.getElementById('articleEditButton').focus()
         this.transitionTo('codes', {
           userName: params.userName,
           planetName: params.planetName,
@@ -28,9 +28,10 @@ module.exports = React.createClass({
     }
 
     if (article.type === 'note') {
-      return function () {
+      return function (e) {
         var params = this.getParams()
 
+        document.getElementById('articleEditButton').focus()
         this.transitionTo('notes', {
           userName: params.userName,
           planetName: params.planetName,
@@ -51,8 +52,6 @@ module.exports = React.createClass({
       var params = this.getParams()
       var isActive = article.type === 'code' ? this.isActive('codes') && parseInt(params.localId, 10) === article.localId : this.isActive('notes') && parseInt(params.localId, 10) === article.localId
 
-      var handleClick
-
       if (article.type === 'code') {
         return (
           <li onClick={this.handleArticleClikck(article)} key={'code-' + article.id}>
@@ -94,7 +93,7 @@ module.exports = React.createClass({
 
     return (
       <div className='PlanetArticleList'>
-        <ul>
+        <ul ref='articles'>
           {articles}
         </ul>
       </div>

browser/main/Components/PlanetCreateModal.jsx

@@ -5,11 +5,12 @@ var React = require('react/addons')
 var Hq = require('../Services/Hq')
 
 var LinkedState = require('../Mixins/LinkedState')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
-  mixins: [LinkedState],
+  mixins: [LinkedState, KeyCaster('planetCreateModal')],
   propTypes: {
     ownerName: React.PropTypes.string,
     transitionTo: React.PropTypes.func,
@@ -30,9 +31,14 @@ module.exports = React.createClass({
   componentDidMount: function () {
     React.findDOMNode(this.refs.name).focus()
   },
-  onListen: function (res) {
-    if (res.status === 'planetCreated') {
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
         this.props.close()
+        break
+      case 'submitPlanetCreateModal':
+        this.handleSubmit()
+        break
     }
   },
   handleSubmit: function () {

browser/main/Components/PlanetHeader.jsx

@@ -21,7 +21,21 @@ module.exports = React.createClass({
     }
   },
   componentDidMount: function () {
-    React.findDOMNode(this.refs.search).focus()
+    var search = React.findDOMNode(this.refs.search)
+    search.addEventListener('keydown', this.handleSearchKeyDown)
+  },
+  componentWillUnmount: function () {
+    var search = React.findDOMNode(this.refs.search)
+    search.removeEventListener('keydown', this.handleSearchKeyDown)
+  },
+  handleSearchKeyDown: function (e) {
+    if (e.keyCode === 38 || e.keyCode === 40) {
+      var search = React.findDOMNode(this.refs.search)
+      search.blur()
+    }
+    if (e.keyCode !== 27 && (e.keyCode !== 13 || !e.metaKey)) {
+      e.stopPropagation()
+    }
   },
   openPlanetSettingModal: function () {
     this.openModal(PlanetSettingModal, {planet: this.props.currentPlanet})
@@ -42,12 +56,13 @@ module.exports = React.createClass({
           {this.props.currentPlanet.public ? null : (
             <div className='private'>
               <i className='fa fa-lock'/>
-              <div className='privateTooltip'>Private planet</div>
+              <div className='tooltip'>Private planet</div>
             </div>
           )}
 
-        <button onClick={this.openPlanetSettingModal} className='menuBtn'>
+          <button onClick={this.openPlanetSettingModal} className='planetSettingButton'>
             <i className='fa fa-chevron-down'></i>
+            <div className='tooltip'>Planet setting</div>
           </button>
         </div>
         <div className='headerControl'>
@@ -55,9 +70,13 @@ module.exports = React.createClass({
             <i className='fa fa-search'/>
             <input onChange={this.props.onSearchChange} value={this.props.search} ref='search' type='text' className='inline-input circleInput' placeholder='Search...'/>
           </div>
-          <button onClick={this.refresh} className='refreshButton'><i className='fa fa-refresh'/></button>
+          <button onClick={this.refresh} className='refreshButton'>
+            <i className='fa fa-refresh'/>
+            <div className='tooltip'>Refresh planet</div>
+          </button>
           <a onClick={this.openExternal} href='http://b00st.io' className='logo'>
             <img width='44' height='44' src='resources/favicon-230x230.png'/>
+            <div className='tooltip'>Boost official page</div>
           </a>
         </div>
       </div>

browser/main/Components/PlanetNavigator.jsx

@@ -3,9 +3,10 @@ var ReactRouter = require('react-router')
 var Navigation = ReactRouter.Navigation
 
 var Modal = require('../Mixins/Modal')
+
 var LaunchModal = require('../Components/LaunchModal')
 
-var PlanetNavigator = React.createClass({
+module.exports = React.createClass({
   mixins: [Modal, Navigation],
   propTypes: {
     planet: React.PropTypes.shape({
@@ -20,9 +21,6 @@ var PlanetNavigator = React.createClass({
       isLaunchModalOpen: false
     }
   },
-  submitLaunchModal: function (ret) {
-    this.setState({isLaunchModalOpen: false})
-  },
   openLaunchModal: function () {
     this.openModal(LaunchModal, {planet: this.props.planet, transitionTo: this.transitionTo})
   },
@@ -54,5 +52,3 @@ var PlanetNavigator = React.createClass({
     )
   }
 })
-
-module.exports = PlanetNavigator

browser/main/Components/PlanetSettingModal.jsx

@@ -3,11 +3,12 @@ var React = require('react/addons')
 var Hq = require('../Services/Hq')
 
 var LinkedState = require('../Mixins/LinkedState')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
-  mixins: [LinkedState],
+  mixins: [LinkedState, KeyCaster('planetSettingModal')],
   propTypes: {
     close: React.PropTypes.func,
     planet: React.PropTypes.shape({
@@ -35,6 +36,13 @@ module.exports = React.createClass({
       deleteConfirmation: ''
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+    }
+  },
   activePlanetProfile: function () {
     this.setState({currentTab: 'profile'})
   },

browser/main/Components/TeamCreateModal.jsx

@@ -5,11 +5,12 @@ var React = require('react/addons')
 var Hq = require('../Services/Hq')
 
 var LinkedState = require('../Mixins/LinkedState')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var UserStore = require('../Stores/UserStore')
 
 module.exports = React.createClass({
-  mixins: [LinkedState],
+  mixins: [LinkedState, KeyCaster('teamCreateModal')],
   propTypes: {
     user: React.PropTypes.shape({
       name: React.PropTypes.string
@@ -24,6 +25,19 @@ module.exports = React.createClass({
       }
     }
   },
+  componentDidMount: function () {
+    React.findDOMNode(this.refs.teamName).focus()
+  },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+      case 'submitTeamCreateModal':
+        this.handleSubmit()
+        break
+    }
+  },
   handleSubmit: function () {
     Hq.createTeam(this.props.user.name, this.state.team)
       .then(function (res) {
@@ -46,7 +60,7 @@ module.exports = React.createClass({
   render: function () {
     return (
       <div className='TeamCreateModal modal'>
-        <input valueLink={this.linkState('team.name')} className='nameInput stripInput' placeholder='Create new team'/>
+        <input ref='teamName' valueLink={this.linkState('team.name')} className='nameInput stripInput' placeholder='Create new team'/>
 
         <button onClick={this.handleSubmit} className='submitButton'>
           <i className='fa fa-check'/>

browser/main/Components/TeamSettingsModal.jsx

@@ -8,6 +8,7 @@ var Hq = require('../Services/Hq')
 
 var LinkedState = require('../Mixins/LinkedState')
 var Helper = require('../Mixins/Helper')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var UserStore = require('../Stores/UserStore')
 
@@ -30,7 +31,7 @@ var getOptions = function (input, callback) {
 }
 
 module.exports = React.createClass({
-  mixins: [LinkedState, Reflux.listenTo(UserStore, 'onUserChange'), Helper],
+  mixins: [LinkedState, Reflux.listenTo(UserStore, 'onUserChange'), Helper, KeyCaster('teamSettingsModal')],
   propTypes: {
     team: React.PropTypes.shape({
       id: React.PropTypes.number,
@@ -38,7 +39,8 @@ module.exports = React.createClass({
       profileName: React.PropTypes.string,
       email: React.PropTypes.string,
       Members: React.PropTypes.array
-    })
+    }),
+    close: React.PropTypes.func
   },
   getInitialState: function () {
     var team = this.props.team
@@ -55,6 +57,13 @@ module.exports = React.createClass({
       updatingMember: false
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+    }
+  },
   onUserChange: function (res) {
     var member
     switch (res.status) {

browser/main/Containers/HomeContainer.jsx

@@ -7,21 +7,33 @@ var State = ReactRouter.State
 var Navigation = ReactRouter.Navigation
 
 var AuthFilter = require('../Mixins/AuthFilter')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var HomeNavigator = require('../Components/HomeNavigator')
 
 module.exports = React.createClass({
-  mixins: [AuthFilter.OnlyUser, State, Navigation],
+  mixins: [AuthFilter.OnlyUser, State, Navigation, KeyCaster('homeContainer')],
   componentDidMount: function () {
     if (this.isActive('homeEmpty')) {
       var user = JSON.parse(localStorage.getItem('currentUser'))
+      if (user.Planets != null && user.Planets.length > 0) {
+        this.transitionTo('planet', {userName: user.name, planetName: user.Planets[0].name})
+        return
+      }
       this.transitionTo('userHome', {userName: user.name})
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'switchPlanet':
+        this.refs.navigator.switchPlanetByIndex(e.data)
+        break
+    }
+  },
   render: function () {
     return (
       <div className='HomeContainer'>
-        <HomeNavigator/>
+        <HomeNavigator ref='navigator'/>
         <RouteHandler/>
       </div>
     )

browser/main/Containers/MainContainer.jsx

@@ -96,7 +96,10 @@ module.exports = React.createClass({
         {this.state.updateAvailable ? (
         <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
         ) : null}
-        <button onClick={this.openContactModal} className='contactButton'><i className='fa fa-paper-plane-o'/></button>
+        <button onClick={this.openContactModal} className='contactButton'>
+          <i className='fa fa-paper-plane-o'/>
+          <div className='tooltip'>Contact us</div>
+        </button>
         <RouteHandler/>
       </div>
     )

browser/main/Containers/PlanetContainer.jsx

@@ -14,12 +14,13 @@ var Hq = require('../Services/Hq')
 var Modal = require('../Mixins/Modal')
 var ArticleFilter = require('../Mixins/ArticleFilter')
 var Helper = require('../Mixins/Helper')
+var KeyCaster = require('../Mixins/KeyCaster')
 
 var UserStore = require('../Stores/UserStore')
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
-  mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter, Helper],
+  mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter, Helper, KeyCaster('planetContainer')],
   propTypes: {
     params: React.PropTypes.object,
     planetName: React.PropTypes.string
@@ -62,6 +63,28 @@ module.exports = React.createClass({
       })
     }
   },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'openLaunchModal':
+        this.refs.navigator.openLaunchModal()
+        break
+      case 'selectNextArticle':
+        this.selectNextArticle()
+        break
+      case 'selectPriorArticle':
+        this.selectPriorArticle()
+        break
+      case 'toggleFocusSearchInput':
+        this.toggleFocusSearchInput()
+        break
+      case 'openEditModal':
+        this.refs.detail.openEditModal()
+        break
+      case 'openDeleteModal':
+        this.refs.detail.openDeleteModal()
+        break
+    }
+  },
   onPlanetChange: function (res) {
     if (this.state.planet == null) return
 
@@ -207,6 +230,18 @@ module.exports = React.createClass({
       return
     }
 
+    var listElement = this.refs.list.refs.articles.getDOMNode()
+    var articleElement = listElement.querySelectorAll('li')[index]
+
+    var overflowBelow = listElement.clientHeight + listElement.scrollTop < articleElement.offsetTop + articleElement.clientHeight
+    if (overflowBelow) {
+      listElement.scrollTop = articleElement.offsetTop + articleElement.clientHeight - listElement.clientHeight
+    }
+    var overflowAbove = listElement.scrollTop > articleElement.offsetTop
+    if (overflowAbove) {
+      listElement.scrollTop = articleElement.offsetTop
+    }
+
     if (article.type === 'code') {
       params.localId = article.localId
       this.transitionTo('codes', params)
@@ -237,9 +272,17 @@ module.exports = React.createClass({
     if (index > 0) {
       this.selectArticleByListIndex(index - 1)
     } else {
-      React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input').focus()
+      React.findDOMNode(this.refs.header.refs.search).focus()
     }
   },
+  toggleFocusSearchInput: function () {
+    var search = React.findDOMNode(this.refs.header.refs.search)
+    if (document.activeElement === search) {
+      React.findDOMNode(this.refs.header.refs.search).blur()
+      return
+    }
+    React.findDOMNode(this.refs.header.refs.search).focus()
+  },
   handleSearchChange: function (e) {
     this.setState({search: e.target.value}, function () {
       this.selectArticleByListIndex(0)
@@ -309,9 +352,6 @@ module.exports = React.createClass({
       this.setState({search: '#' + tag})
     }.bind(this)
   },
-  focus: function () {
-    React.findDOMNode(this).focus()
-  },
   render: function () {
     if (this.state.planet == null) return (<div/>)
 
@@ -346,6 +386,7 @@ module.exports = React.createClass({
     return (
       <div className='PlanetContainer'>
         <PlanetHeader
+          ref='header'
           search={this.state.search}
           fetchPlanet={this.fetchPlanet}
           onSearchChange={this.handleSearchChange}

browser/main/Containers/UserContainer.jsx

@@ -190,7 +190,6 @@ module.exports = React.createClass({
         return this.renderUserHome(currentUser)
       }
     } else if (this.isActive('planet') && user != null && user.userType === 'team') {
-      console.log(user.Members)
       var members = user.Members.map(function (member) {
         return (
           <li key={'user-' + member.id}><Link to='userHome' params={{userName: member.name}}>

browser/main/Mixins/KeyCaster.js

@@ -0,0 +1,100 @@
+var Reflux = require('reflux')
+
+var state = {
+
+}
+
+var keyDown = Reflux.createAction()
+
+var KeyStore = Reflux.createStore({
+  init: function () {
+    this.listenTo(keyDown, this.onKeyDown)
+    document.addEventListener('keydown', function (e) {
+      keyDown(e)
+    })
+  },
+  setState: function (newState, cb) {
+    for (var key in newState) {
+      state[key] = newState[key]
+    }
+    if (typeof cb === 'function') cb()
+  },
+  onKeyDown: function (e) {
+    /*
+      Modals
+    */
+    if (state.codeForm || state.noteForm || state.noteDeleteModal || state.codeDeleteModal || state.addMemberModal || state.aboutModal || state.editProfileModal || state.contactModal || state.teamCreateModal || state.planetCreateModal || state.planetSettingModal || state.teamSettingsModal || state.logoutModal) {
+      // ESC
+      if (e.keyCode === 27) this.cast('closeModal')
+
+      // Cmd + Enter
+      if (e.keyCode === 13 && e.metaKey) {
+        if (state.codeForm) this.cast('submitCodeForm')
+        if (state.noteForm) this.cast('submitNoteForm')
+        if (state.codeDeleteModal) this.cast('submitCodeDeleteModal')
+        if (state.noteDeleteModal) this.cast('submitNoteDeleteModal')
+        if (state.addMemberModal) this.cast('submitAddMemberModal')
+        if (state.contactModal) this.cast('submitContactModal')
+        if (state.teamCreateModal) this.cast('submitTeamCreateModal')
+        if (state.planetCreateModal) this.cast('submitPlanetCreateModal')
+        if (state.logoutModal) this.cast('submitLogoutModal')
+      }
+
+      return
+    }
+
+    /*
+      PlanetContainer
+    */
+    if (state.planetContainer) {
+      // Cmd + Enter, A
+      if ((e.keyCode === 13 && e.metaKey) || e.keyCode === 65) this.cast('openLaunchModal')
+
+      // Esc
+      if (e.keyCode === 27) this.cast('toggleFocusSearchInput')
+
+      // Up
+      if (e.keyCode === 38) this.cast('selectPriorArticle')
+
+      // Down
+      if (e.keyCode === 40) this.cast('selectNextArticle')
+
+      // E
+      if (e.keyCode === 69) this.cast('openEditModal')
+
+      // D
+      if (e.keyCode === 68) this.cast('openDeleteModal')
+    }
+
+    /*
+      HomeContainer
+    */
+    if (state.homeContainer) {
+      if (e.keyCode > 48 && e.keyCode < 58 && e.metaKey) {
+        this.cast('switchPlanet', e.keyCode - 48)
+      }
+    }
+  },
+  cast: function (status, data) {
+    this.trigger({
+      status: status,
+      data: data
+    })
+  }
+})
+
+module.exports = function (stateKey) {
+  return {
+    mixins: [Reflux.listenTo(KeyStore, 'onKeyCast')],
+    componentDidMount: function () {
+      var newState = {}
+      newState[stateKey] = true
+      KeyStore.setState(newState)
+    },
+    componentWillUnmount: function () {
+      var newState = {}
+      newState[stateKey] = false
+      KeyStore.setState(newState)
+    }
+  }
+}

browser/styles/main/containers/PlanetContainer.styl

@@ -64,40 +64,35 @@ articleListWidth= 275px
       color inactiveColor
       &:hover
         color textColor
-      .privateTooltip
-        position fixed
-        z-index popupZIndex
-        background-color transparentify(invBackgroundColor, 80%)
-        color invTextColor
-        padding 10px
-        font-size 0.9em
-        line-height 0.9em
-        border-radius 5px
-        white-space nowrap
-        opacity 0
-        transition 0.1s
-        pointer-events none
+      .tooltip
+        tooltip()
         margin-left -30px
-      &:hover .privateTooltip
+      &:hover .tooltip
         opacity 1
 
 
-    .menuBtn
+    .planetSettingButton
       position absolute
-      top 12px
+      top 15px
       right 5px
-      font-size 1em
+      font-size 0.8em
       btnDefault()
       box-sizing border-box
       circle()
-      width 33px
-      height 33px
+      width 26px
+      height 26px
       text-align center
       cursor pointer
       transition 0.1s
-      transform scale(0.8)
       &:focus, &.focus
         outline none
+      .tooltip
+        tooltip()
+        margin-top 11px
+        margin-left -36px
+      &:hover .tooltip
+        opacity 1
+
   .headerControl
     noSelect()
     absolute top bottom right
@@ -118,10 +113,11 @@ articleListWidth= 275px
     .refreshButton
       display block
       position absolute
-      top 12px
+      top 15px
       right 55px
-      width 28px
-      height 28px
+      width 26px
+      height 26px
+      font-size 0.8em
       btnDefault()
       circle()
       text-align center
@@ -129,16 +125,28 @@ articleListWidth= 275px
       transition 0.1s
       &:focus, &.focus
         outline none
+      .tooltip
+        tooltip()
+        margin-top 11px
+        margin-left -39px
+      &:hover .tooltip
+        opacity 1
     .logo
       display block
       position absolute
       top 4px
       right 10px
       cursor pointer
+      img
         transition 0.1s
         opacity 0.9
-      &:hover, &.hover
+      &:hover img, &:hover .tooltip
         opacity 1
+      .tooltip
+        tooltip()
+        margin-top -5px
+        margin-left -67px
+
 
 .PlanetNavigator
   absolute bottom left
@@ -178,6 +186,7 @@ articleListWidth= 275px
     overflow-y auto
     li
       .articleItem
+        noSelect()
         border solid 2px transparent
         position relative
         height 94px
@@ -283,23 +292,41 @@ articleListWidth= 275px
       z-index 1
       top 2px
       right 2px
+      .deleteButton, .editButton
+        btnDefault()
+        text-align center
+        width 33px
+        height 33px
+        border-radius 16.5px
+        font-size 15px
+        margin 0 3px
+        .tooltip
+          tooltip()
+          margin-top 10px
+        &:hover .tooltip
+          opacity 1
+      .editButton .tooltip
+        margin-left -12px
+      .deleteButton .tooltip
+        margin-left -26px
   .detailBody
     absolute left right bottom
     top 105px
     .content
-      box-sizing border-box
-      padding 5px
-      border-top solid 1px borderColor
-      overflow-x hidden
-      overflow-y auto
-  &.noteDetail
-    .detailBody .content
-      marked()
-  &.codeDetail
-    .detailBody .content
-      .ace_editor
       position absolute
       top 5px
       bottom 5px
       left 2px
       right 2px
+      box-sizing border-box
+      padding 5px
+      border-top solid 1px borderColor
+  &.noteDetail
+    .detailBody .content
+      overflow-x hidden
+      overflow-y auto
+      marked()
+  &.codeDetail
+    .detailBody .content
+      .ace_editor
+        absolute left right top bottom

browser/styles/main/containers/UserContainer.styl

@@ -1,5 +1,6 @@
 .HomeContainer
   .HomeNavigator
+    noSelect()
     background-color planetNavBgColor
     absolute left top bottom
     width 55px
@@ -159,22 +160,11 @@
         border-color darken(brandBorderColor, 10%)
         background-color brandColor
         color white
-      .newPlanetTooltip
-        position fixed
-        z-index 500
-        background-color transparentify(invBackgroundColor, 80%)
-        color invTextColor
-        padding 10px
-        line-height 1em
-        border-radius 5px
-        margin-top -23px
+      .tooltip
+        tooltip()
+        margin-top -22px
         margin-left 33px
-        white-space nowrap
-        font-size 1.1em
-        opacity 0
-        transition 0.1s
-        pointer-events none
-      &:hover .newPlanetTooltip
+      &:hover .tooltip
         opacity 1
   .UserContainer
     absolute top bottom right

browser/styles/main/index.styl

@@ -16,6 +16,8 @@ body
   color textColor
   font-size fontSize
   font-weight 400
+button
+  font-family "Lato"
 
 div, span, a, button, input, textarea
   box-sizing border-box
@@ -118,3 +120,9 @@ textarea.block-input
     padding 10px 15px
     border-radius 5px
     background-color backgroundColor
+    .tooltip
+      tooltip()
+      margin-top -22px
+      margin-left -97px
+    &:hover .tooltip
+      opacity 1

browser/styles/mixins/marked.styl

@@ -22,10 +22,11 @@ marked()
     font-size 0.67em
     margin 2.33em auto
   h1, h2, h3, h4, h5, h6
-    font-weight font-weight 400
-    line-height 1.2em
+    font-weight 400
+    line-height 1.4em
   p
-    line-height 1.2em
+    line-height 1.4em
+    margin-bottom 15px
   img
     max-width 100%
   strong
@@ -36,14 +37,14 @@ marked()
     text-decoration line-through
   blockquote
     border-left solid 4px brandBorderColor
-    margin 1em 0
+    margin 15px 0 15px
     padding 0 25px
   ul
     list-style-type disc
     padding-left 35px
     li
       display list-item
-      margin 0.5em 0
+      margin 15px 0
     &>li>ul
       list-style-type circle
       &>li>ul
@@ -53,33 +54,36 @@ marked()
     padding-left 35px
     li
       display list-item
-      margin 0.5em 0
+      margin 15px 0
   code
     font-family monospace
     padding 2px 4px
     border solid 1px borderColor
     border-radius 4px
     font-size 0.9em
+    color black
+    text-decoration none
   pre
     padding 5px
     border solid 1px borderColor
     border-radius 5px
-    margin-bottom 0.5em
     overflow-x auto
+    margin-bottom 15px
     &>code
       padding 0
       border none
       border-radius 0
+      color black
   table
     width 100%
-    margin 15px 0
+    margin 15px 0 25px
     thead
       tr
         background-color tableHeadBgColor
       th
-        border-style: solid;
-        padding: 5px;
-        border-width: 1px 0 2px 1px;
+        border-style solid
+        padding 15px 5px
+        border-width 1px 0 2px 1px
         border-color borderColor
         &:last-child
           border-right solid 1px borderColor
@@ -89,9 +93,9 @@ marked()
       tr:nth-child(2n)
         background-color tableEvenBgColor
       td
-        border-style: solid;
-        padding: 5px;
-        border-width: 0 0 1px 1px;
+        border-style solid
+        padding 15px 5px
+        border-width 0 0 1px 1px
         border-color borderColor
         &:last-child
           border-right solid 1px borderColor

browser/styles/mixins/tooltip.styl

@@ -0,0 +1,13 @@
+tooltip()
+  position fixed
+  z-index popupZIndex
+  background-color transparentify(invBackgroundColor, 80%)
+  color invTextColor
+  padding 10px
+  font-size 12px
+  line-height 12px
+  border-radius 5px
+  white-space nowrap
+  opacity 0
+  transition 0.1s
+  pointer-events none

browser/styles/shared/modal.styl

@@ -341,6 +341,7 @@
           padding 0 15px
           border-radius 5px
           margin-left 5px
+          font-size 1em
         button.sendButton
           btnPrimary()
     .confirmation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Boost App",
   "main": "main.js",
   "scripts": {