From da066fe6947916ee330f382745423831c126cff9 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 22 Aug 2015 23:57:37 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E5=AE=9F=E8=A3=85=20-=20Hotkey?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/main/Components/AboutModal.jsx        |  10 +-
 browser/main/Components/AddMemberModal.jsx    |  14 ++-
 browser/main/Components/CodeDeleteModal.jsx   |  17 ++-
 browser/main/Components/CodeEditModal.jsx     |   8 +-
 browser/main/Components/CodeForm.jsx          |  13 ++-
 browser/main/Components/ContactModal.jsx      |  22 +++-
 browser/main/Components/EditProfileModal.jsx  |  13 ++-
 browser/main/Components/HomeNavigator.jsx     |  10 +-
 browser/main/Components/LaunchModal.jsx       |  43 ++++++--
 browser/main/Components/LogoutModal.jsx       |  13 +++
 browser/main/Components/NoteDeleteModal.jsx   |  14 ++-
 browser/main/Components/NoteEditModal.jsx     |   8 +-
 browser/main/Components/NoteForm.jsx          |  15 ++-
 .../main/Components/PlanetArticleDetail.jsx   |   2 +
 browser/main/Components/PlanetArticleList.jsx |   3 -
 browser/main/Components/PlanetCreateModal.jsx |  14 ++-
 browser/main/Components/PlanetHeader.jsx      |  16 ++-
 browser/main/Components/PlanetNavigator.jsx   |   8 +-
 .../main/Components/PlanetSettingModal.jsx    |  10 +-
 browser/main/Components/TeamCreateModal.jsx   |  18 ++-
 browser/main/Components/TeamSettingsModal.jsx |  13 ++-
 browser/main/Containers/HomeContainer.jsx     |  12 +-
 browser/main/Containers/PlanetContainer.jsx   |  39 ++++++-
 browser/main/Mixins/KeyCaster.js              | 104 ++++++++++++++++++
 24 files changed, 378 insertions(+), 61 deletions(-)
 create mode 100644 browser/main/Mixins/KeyCaster.js

diff --git a/browser/main/Components/AboutModal.jsx b/browser/main/Components/AboutModal.jsx
index 53ffc253..d95254d5 100644
--- a/browser/main/Components/AboutModal.jsx
+++ b/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'>
diff --git a/browser/main/Components/AddMemberModal.jsx b/browser/main/Components/AddMemberModal.jsx
index e96f2b47..7b682156 100644
--- a/browser/main/Components/AddMemberModal.jsx
+++ b/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, {
diff --git a/browser/main/Components/CodeDeleteModal.jsx b/browser/main/Components/CodeDeleteModal.jsx
index dd9503bf..b7dbc147 100644
--- a/browser/main/Components/CodeDeleteModal.jsx
+++ b/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
diff --git a/browser/main/Components/CodeEditModal.jsx b/browser/main/Components/CodeEditModal.jsx
index 8877cafa..7b070db6 100644
--- a/browser/main/Components/CodeEditModal.jsx
+++ b/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>
     )
   }
diff --git a/browser/main/Components/CodeForm.jsx b/browser/main/Components/CodeForm.jsx
index e80dc6af..47f1a75b 100644
--- a/browser/main/Components/CodeForm.jsx
+++ b/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
diff --git a/browser/main/Components/ContactModal.jsx b/browser/main/Components/ContactModal.jsx
index 5fc7cc84..e2818f06 100644
--- a/browser/main/Components/ContactModal.jsx
+++ b/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'/>
diff --git a/browser/main/Components/EditProfileModal.jsx b/browser/main/Components/EditProfileModal.jsx
index cf9e8c86..c128ab9a 100644
--- a/browser/main/Components/EditProfileModal.jsx
+++ b/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})
diff --git a/browser/main/Components/HomeNavigator.jsx b/browser/main/Components/HomeNavigator.jsx
index c39e31f4..18e72b3a 100644
--- a/browser/main/Components/HomeNavigator.jsx
+++ b/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,7 +132,7 @@ 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'>
diff --git a/browser/main/Components/LaunchModal.jsx b/browser/main/Components/LaunchModal.jsx
index 649404db..f7bc3bb4 100644
--- a/browser/main/Components/LaunchModal.jsx
+++ b/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}
diff --git a/browser/main/Components/LogoutModal.jsx b/browser/main/Components/LogoutModal.jsx
index 9a6e542d..0ce9ca87 100644
--- a/browser/main/Components/LogoutModal.jsx
+++ b/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')
diff --git a/browser/main/Components/NoteDeleteModal.jsx b/browser/main/Components/NoteDeleteModal.jsx
index 841b5291..4d6702c7 100644
--- a/browser/main/Components/NoteDeleteModal.jsx
+++ b/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
diff --git a/browser/main/Components/NoteEditModal.jsx b/browser/main/Components/NoteEditModal.jsx
index 458b57ea..cfea0469 100644
--- a/browser/main/Components/NoteEditModal.jsx
+++ b/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>
     )
   }
diff --git a/browser/main/Components/NoteForm.jsx b/browser/main/Components/NoteForm.jsx
index 0f805dbb..a3246492 100644
--- a/browser/main/Components/NoteForm.jsx
+++ b/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
diff --git a/browser/main/Components/PlanetArticleDetail.jsx b/browser/main/Components/PlanetArticleDetail.jsx
index a01c64c7..793d6019 100644
--- a/browser/main/Components/PlanetArticleDetail.jsx
+++ b/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})
diff --git a/browser/main/Components/PlanetArticleList.jsx b/browser/main/Components/PlanetArticleList.jsx
index ddde09fa..0e5288f9 100644
--- a/browser/main/Components/PlanetArticleList.jsx
+++ b/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')
@@ -51,8 +50,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}>
diff --git a/browser/main/Components/PlanetCreateModal.jsx b/browser/main/Components/PlanetCreateModal.jsx
index 974a06a7..2d396705 100644
--- a/browser/main/Components/PlanetCreateModal.jsx
+++ b/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') {
-      this.props.close()
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+      case 'submitPlanetCreateModal':
+        this.handleSubmit()
+        break
     }
   },
   handleSubmit: function () {
diff --git a/browser/main/Components/PlanetHeader.jsx b/browser/main/Components/PlanetHeader.jsx
index 279f3629..a524bbd1 100644
--- a/browser/main/Components/PlanetHeader.jsx
+++ b/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})
diff --git a/browser/main/Components/PlanetNavigator.jsx b/browser/main/Components/PlanetNavigator.jsx
index 0df7b4f6..abd123f6 100644
--- a/browser/main/Components/PlanetNavigator.jsx
+++ b/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
diff --git a/browser/main/Components/PlanetSettingModal.jsx b/browser/main/Components/PlanetSettingModal.jsx
index eb9f525e..10432b2f 100644
--- a/browser/main/Components/PlanetSettingModal.jsx
+++ b/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'})
   },
diff --git a/browser/main/Components/TeamCreateModal.jsx b/browser/main/Components/TeamCreateModal.jsx
index d258cf2c..163cdfe1 100644
--- a/browser/main/Components/TeamCreateModal.jsx
+++ b/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'/>
diff --git a/browser/main/Components/TeamSettingsModal.jsx b/browser/main/Components/TeamSettingsModal.jsx
index 8b11a5f1..ad90c12e 100644
--- a/browser/main/Components/TeamSettingsModal.jsx
+++ b/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) {
diff --git a/browser/main/Containers/HomeContainer.jsx b/browser/main/Containers/HomeContainer.jsx
index e61204f1..45e801ee 100644
--- a/browser/main/Containers/HomeContainer.jsx
+++ b/browser/main/Containers/HomeContainer.jsx
@@ -7,21 +7,29 @@ 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'))
       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>
     )
diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx
index 64bb29d0..f52bd873 100644
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/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
 
@@ -237,9 +260,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 +340,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 +374,7 @@ module.exports = React.createClass({
     return (
       <div className='PlanetContainer'>
         <PlanetHeader
+          ref='header'
           search={this.state.search}
           fetchPlanet={this.fetchPlanet}
           onSearchChange={this.handleSearchChange}
diff --git a/browser/main/Mixins/KeyCaster.js b/browser/main/Mixins/KeyCaster.js
new file mode 100644
index 00000000..4a6d3ceb
--- /dev/null
+++ b/browser/main/Mixins/KeyCaster.js
@@ -0,0 +1,104 @@
+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) {
+    console.log(e.keyCode)
+    console.log(state)
+
+    /*
+      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)
+    }
+  }
+}

From 04060ce2529036c8619f5cc9549057623e12eade Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 23 Aug 2015 00:52:03 +0900
Subject: [PATCH 2/4] =?UTF-8?q?#14=20=E6=94=B9=E5=96=84=E9=81=A9=E7=94=A8?=
 =?UTF-8?q?=20=08-=20=E3=82=A2=E3=83=97=E3=83=AA=E3=81=8C=E7=AB=8B?=
 =?UTF-8?q?=E3=81=A1=E4=B8=8A=E3=81=8C=E3=81=A3=E3=81=9F=E3=82=89=E6=9C=80?=
 =?UTF-8?q?=E5=88=9D=E3=81=AFmy=20planet=E3=81=8C=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=81=84=20-=20Note=E3=81=8C=E3=82=B9=E3=82=AF?=
 =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=A7=E3=81=8D=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=20-=20Note=E8=A1=8C=E9=96=93=E3=81=8C=E3=81=AA=E3=81=8F?=
 =?UTF-8?q?=E3=81=A6=E8=AA=AD=E3=81=BF=E3=81=A5=E3=82=89=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/main/Components/CodeEditor.jsx        |  3 +-
 browser/main/Components/CodeViewer.jsx        |  5 +--
 .../main/Components/PlanetArticleDetail.jsx   |  4 +--
 browser/main/Containers/HomeContainer.jsx     |  4 +++
 browser/main/Mixins/KeyCaster.js              |  4 ---
 .../main/containers/PlanetContainer.styl      | 15 +++++----
 browser/styles/mixins/marked.styl             | 32 +++++++++++--------
 7 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/browser/main/Components/CodeEditor.jsx b/browser/main/Components/CodeEditor.jsx
index 6cf3a4a7..4402ecd2 100644
--- a/browser/main/Components/CodeEditor.jsx
+++ b/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>
     )
   }
 })
diff --git a/browser/main/Components/CodeViewer.jsx b/browser/main/Components/CodeViewer.jsx
index bd20fe2f..6818490b 100644
--- a/browser/main/Components/CodeViewer.jsx
+++ b/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>
     )
   }
 })
diff --git a/browser/main/Components/PlanetArticleDetail.jsx b/browser/main/Components/PlanetArticleDetail.jsx
index 793d6019..d483c0f2 100644
--- a/browser/main/Components/PlanetArticleDetail.jsx
+++ b/browser/main/Components/PlanetArticleDetail.jsx
@@ -81,9 +81,7 @@ module.exports = React.createClass({
             </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>
       )
diff --git a/browser/main/Containers/HomeContainer.jsx b/browser/main/Containers/HomeContainer.jsx
index 45e801ee..32e5fad0 100644
--- a/browser/main/Containers/HomeContainer.jsx
+++ b/browser/main/Containers/HomeContainer.jsx
@@ -16,6 +16,10 @@ module.exports = React.createClass({
   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})
     }
   },
diff --git a/browser/main/Mixins/KeyCaster.js b/browser/main/Mixins/KeyCaster.js
index 4a6d3ceb..e9996d69 100644
--- a/browser/main/Mixins/KeyCaster.js
+++ b/browser/main/Mixins/KeyCaster.js
@@ -20,13 +20,9 @@ var KeyStore = Reflux.createStore({
     if (typeof cb === 'function') cb()
   },
   onKeyDown: function (e) {
-    console.log(e.keyCode)
-    console.log(state)
-
     /*
       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')
diff --git a/browser/styles/main/containers/PlanetContainer.styl b/browser/styles/main/containers/PlanetContainer.styl
index 6b498aac..9bf89ba7 100644
--- a/browser/styles/main/containers/PlanetContainer.styl
+++ b/browser/styles/main/containers/PlanetContainer.styl
@@ -287,19 +287,20 @@ articleListWidth= 275px
     absolute left right bottom
     top 105px
     .content
+      position absolute
+      top 5px
+      bottom 5px
+      left 2px
+      right 2px
       box-sizing border-box
       padding 5px
       border-top solid 1px borderColor
-      overflow-x hidden
-      overflow-y auto
   &.noteDetail
     .detailBody .content
+      overflow-x hidden
+      overflow-y auto
       marked()
   &.codeDetail
     .detailBody .content
       .ace_editor
-        position absolute
-        top 5px
-        bottom 5px
-        left 2px
-        right 2px
+        absolute left right top bottom
diff --git a/browser/styles/mixins/marked.styl b/browser/styles/mixins/marked.styl
index 891dc258..fe8723ae 100644
--- a/browser/styles/mixins/marked.styl
+++ b/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

From 9712be909d1864459e582826a911b7b3341c1e2c Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 23 Aug 2015 03:05:30 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=E5=AE=9F=E8=A3=85=20-=20tooltip=20(Refresh?=
 =?UTF-8?q?,=20Planet=20setting,=20Planet=20refresh,=20Edit=20article,=20D?=
 =?UTF-8?q?elete=20article,=20Contact)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/main/Components/HomeNavigator.jsx     |  2 +-
 .../main/Components/PlanetArticleDetail.jsx   | 20 ++++-
 browser/main/Components/PlanetHeader.jsx      | 11 ++-
 browser/main/Containers/MainContainer.jsx     |  5 +-
 .../main/containers/PlanetContainer.styl      | 77 ++++++++++++-------
 .../styles/main/containers/UserContainer.styl | 19 +----
 browser/styles/main/index.styl                |  8 ++
 browser/styles/mixins/tooltip.styl            | 13 ++++
 8 files changed, 105 insertions(+), 50 deletions(-)
 create mode 100644 browser/styles/mixins/tooltip.styl

diff --git a/browser/main/Components/HomeNavigator.jsx b/browser/main/Components/HomeNavigator.jsx
index 18e72b3a..c4ba5ca5 100644
--- a/browser/main/Components/HomeNavigator.jsx
+++ b/browser/main/Components/HomeNavigator.jsx
@@ -137,7 +137,7 @@ module.exports = React.createClass({
         </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>
     )
diff --git a/browser/main/Components/PlanetArticleDetail.jsx b/browser/main/Components/PlanetArticleDetail.jsx
index d483c0f2..d147f8e2 100644
--- a/browser/main/Components/PlanetArticleDetail.jsx
+++ b/browser/main/Components/PlanetArticleDetail.jsx
@@ -76,8 +76,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 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'>
@@ -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 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'>
diff --git a/browser/main/Components/PlanetHeader.jsx b/browser/main/Components/PlanetHeader.jsx
index a524bbd1..101b2a3b 100644
--- a/browser/main/Components/PlanetHeader.jsx
+++ b/browser/main/Components/PlanetHeader.jsx
@@ -56,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'>
@@ -69,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>
diff --git a/browser/main/Containers/MainContainer.jsx b/browser/main/Containers/MainContainer.jsx
index 45743e7a..1db5af61 100644
--- a/browser/main/Containers/MainContainer.jsx
+++ b/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>
     )
diff --git a/browser/styles/main/containers/PlanetContainer.styl b/browser/styles/main/containers/PlanetContainer.styl
index 9bf89ba7..663afd8a 100644
--- a/browser/styles/main/containers/PlanetContainer.styl
+++ b/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
-      transition 0.1s
-      opacity 0.9
-      &:hover, &.hover
+      img
+        transition 0.1s
+        opacity 0.9
+      &:hover img, &:hover .tooltip
         opacity 1
+      .tooltip
+        tooltip()
+        margin-top -5px
+        margin-left -67px
+
 
 .PlanetNavigator
   absolute bottom left
@@ -283,6 +291,23 @@ 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
diff --git a/browser/styles/main/containers/UserContainer.styl b/browser/styles/main/containers/UserContainer.styl
index 14dcb7ea..b19832f7 100644
--- a/browser/styles/main/containers/UserContainer.styl
+++ b/browser/styles/main/containers/UserContainer.styl
@@ -159,22 +159,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
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index a5cb7a2a..6ce582db 100644
--- a/browser/styles/main/index.styl
+++ b/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
diff --git a/browser/styles/mixins/tooltip.styl b/browser/styles/mixins/tooltip.styl
new file mode 100644
index 00000000..13baf992
--- /dev/null
+++ b/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

From 4319711dc657fe46b5e99a069e201c125748862c Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 23 Aug 2015 03:42:00 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=E5=AE=9F=E8=A3=85=20-=20PlanetArticleList?=
 =?UTF-8?q?=E3=81=B8=E3=81=AEAuto=20scroll=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/main/Components/PlanetArticleDetail.jsx     |  4 ++--
 browser/main/Components/PlanetArticleList.jsx       |  8 +++++---
 browser/main/Containers/PlanetContainer.jsx         | 12 ++++++++++++
 browser/main/Containers/UserContainer.jsx           |  1 -
 browser/styles/main/containers/PlanetContainer.styl |  1 +
 browser/styles/main/containers/UserContainer.styl   |  1 +
 browser/styles/shared/modal.styl                    |  1 +
 package.json                                        |  2 +-
 8 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/browser/main/Components/PlanetArticleDetail.jsx b/browser/main/Components/PlanetArticleDetail.jsx
index d147f8e2..23ff9761 100644
--- a/browser/main/Components/PlanetArticleDetail.jsx
+++ b/browser/main/Components/PlanetArticleDetail.jsx
@@ -76,7 +76,7 @@ module.exports = React.createClass({
             </div>
 
             <span className='itemControl'>
-              <button onClick={this.openEditModal} className='editButton'>
+              <button id='articleEditButton' onClick={this.openEditModal} className='editButton'>
                 <i className='fa fa-edit fa-fw'></i>
                 <div className='tooltip'>Edit</div>
               </button>
@@ -107,7 +107,7 @@ module.exports = React.createClass({
           </div>
 
           <span className='itemControl'>
-            <button onClick={this.openEditModal} className='editButton'>
+            <button id='articleEditButton' onClick={this.openEditModal} className='editButton'>
               <i className='fa fa-edit fa-fw'></i>
               <div className='tooltip'>Edit</div>
             </button>
diff --git a/browser/main/Components/PlanetArticleList.jsx b/browser/main/Components/PlanetArticleList.jsx
index 0e5288f9..b0772475 100644
--- a/browser/main/Components/PlanetArticleList.jsx
+++ b/browser/main/Components/PlanetArticleList.jsx
@@ -15,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,
@@ -27,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,
@@ -91,7 +93,7 @@ module.exports = React.createClass({
 
     return (
       <div className='PlanetArticleList'>
-        <ul>
+        <ul ref='articles'>
           {articles}
         </ul>
       </div>
diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx
index f52bd873..b22c2eaa 100644
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -230,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)
diff --git a/browser/main/Containers/UserContainer.jsx b/browser/main/Containers/UserContainer.jsx
index 8d19af92..a8145f02 100644
--- a/browser/main/Containers/UserContainer.jsx
+++ b/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}}>
diff --git a/browser/styles/main/containers/PlanetContainer.styl b/browser/styles/main/containers/PlanetContainer.styl
index 663afd8a..0e227308 100644
--- a/browser/styles/main/containers/PlanetContainer.styl
+++ b/browser/styles/main/containers/PlanetContainer.styl
@@ -186,6 +186,7 @@ articleListWidth= 275px
     overflow-y auto
     li
       .articleItem
+        noSelect()
         border solid 2px transparent
         position relative
         height 94px
diff --git a/browser/styles/main/containers/UserContainer.styl b/browser/styles/main/containers/UserContainer.styl
index b19832f7..ef6a0851 100644
--- a/browser/styles/main/containers/UserContainer.styl
+++ b/browser/styles/main/containers/UserContainer.styl
@@ -1,5 +1,6 @@
 .HomeContainer
   .HomeNavigator
+    noSelect()
     background-color planetNavBgColor
     absolute left top bottom
     width 55px
diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl
index 2054f57e..056779fd 100644
--- a/browser/styles/shared/modal.styl
+++ b/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
diff --git a/package.json b/package.json
index 78fd6a7a..01fbd22d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Boost App",
   "main": "main.js",
   "scripts": {