cleanup old files

* dev:
  fix bugs - ArticleList text overflow behaviour in Finder, PlanetContainer - No DevTools

browser/finder/index.jsx

@@ -49,6 +49,7 @@ var Finder = React.createClass({
     document.addEventListener('keydown', this.handleKeyDown)
     document.addEventListener('click', this.handleClick)
     window.addEventListener('focus', this.handleFinderFocus)
+    this.handleFinderFocus()
   },
   componentWillUnmount: function () {
     document.removeEventListener('keydown', this.handleKeyDown)

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,20 +39,35 @@ module.exports = React.createClass({
       role: 'member'
     }
   },
-  handleSubmit: function () {
-    Hq
-      .addMember(this.props.team.name, {
-        userName: this.state.userName,
-        role: this.state.role
-      })
-      .then(function (res) {
-        console.log(res.body)
-        UserStore.Actions.addMember(res.body)
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
         this.props.close()
-      }.bind(this))
-      .catch(function (err) {
-        console.error(err)
-      })
+        break
+      case 'submitAddMemberModal':
+        this.handleSubmit()
+        break
+    }
+  },
+  handleSubmit: function () {
+    this.setState({errorMessage: null}, function () {
+      Hq
+        .addMember(this.props.team.name, {
+          userName: this.state.userName,
+          role: this.state.role
+        })
+        .then(function (res) {
+          console.log(res.body)
+          UserStore.Actions.addMember(res.body)
+          this.props.close()
+        }.bind(this))
+        .catch(function (err) {
+          console.error(err)
+          if (err.status === 403) {
+            this.setState({errorMessage: err.response.body.message})
+          }
+        }.bind(this))
+    })
   },
   handleChange: function (value) {
     this.setState({userName: value})
@@ -76,6 +93,8 @@ module.exports = React.createClass({
           role
         </div>
 
+        {this.state.errorMessage != null ? (<p className='errorAlert'>{this.state.errorMessage}</p>) : null}
+
         <button onClick={this.handleSubmit} className='submitButton'><i className='fa fa-check'/></button>
       </div>
     )

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

@@ -71,16 +71,6 @@ module.exports = React.createClass({
   openPlanetCreateModal: function () {
     this.openModal(PlanetCreateModal, {transitionTo: this.transitionTo})
   },
-  handleKeyDown: function (e) {
-    if (this.state.currentUser == null) return
-    if (e.metaKey && e.keyCode > 48 && e.keyCode < 58) {
-      var planet = this.state.currentUser.Planets[e.keyCode - 49]
-      if (planet != null) {
-        this.transitionTo('planet', {userName: planet.userName, planetName: planet.name})
-      }
-      e.preventDefault()
-    }
-  },
   toggleProfilePopup: function () {
     this.openProfilePopup()
   },
@@ -96,6 +86,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 +104,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 +122,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>
     )
@@ -143,7 +137,6 @@ module.exports = React.createClass({
       return (
         <li key={'user-' + team.id}>
           <Link to='userHome' params={{userName: team.name}} className='userName'>{team.profileName} ({team.name})</Link>
-          <div className='userSetting'><i className='fa fa-gear'/></div>
         </li>
       )
     })
@@ -157,7 +150,6 @@ module.exports = React.createClass({
           <ul className='profileGroupList'>
             <li>
               <Link to='userHome' params={{userName: this.state.currentUser.name}} className='userName'>Profile ({this.state.currentUser.name})</Link>
-              <div className='userSetting'><i className='fa fa-gear'/></div>
             </li>
           </ul>
         </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

@@ -1,13 +1,13 @@
 var React = require('react/addons')
 var moment = require('moment')
 
-var CodeViewer = require('../Components/CodeViewer')
-
-var CodeEditModal = require('../Components/CodeEditModal')
-var CodeDeleteModal = require('../Components/CodeDeleteModal')
-var NoteEditModal = require('../Components/NoteEditModal')
-var NoteDeleteModal = require('../Components/NoteDeleteModal')
-var MarkdownPreview = require('../Components/MarkdownPreview')
+var CodeViewer = require('./CodeViewer')
+var CodeEditModal = require('./CodeEditModal')
+var CodeDeleteModal = require('./CodeDeleteModal')
+var NoteEditModal = require('./NoteEditModal')
+var NoteDeleteModal = require('./NoteDeleteModal')
+var MarkdownPreview = require('./MarkdownPreview')
+var ProfileImage = require('./ProfileImage')
 
 var Modal = require('../Mixins/Modal')
 var ForceUpdate = require('../Mixins/ForceUpdate')
@@ -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})
@@ -61,36 +63,61 @@ module.exports = React.createClass({
     if (article.type === 'code') {
       return (
         <div className='PlanetArticleDetail codeDetail'>
-          <div className='viewer-header'>
-            <i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
-            <span className='control-group'>
-              <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>
-            </span>
-          </div>
-          <div className='viewer-body'>
-            <div className='viewer-detail'>
+          <div className='detailHeader'>
+            <div className='itemLeft'>
+              <ProfileImage className='profileImage' size='25' email={article.User.email}/>
+              <i className='fa fa-file-text-o fa-fw'></i>
+            </div>
+
+            <div className='itemRight'>
+              <div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
               <div className='description'>{article.description}</div>
               <div className='tags'><i className='fa fa-tags'/>{tags}</div>
             </div>
-            <div className='content'>
-              <CodeViewer code={article.content} mode={article.mode}/>
-            </div>
+
+            <span className='itemControl'>
+              <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'>
+            <CodeViewer className='content' code={article.content} mode={article.mode}/>
           </div>
         </div>
       )
     }
     return (
       <div className='PlanetArticleDetail noteDetail'>
-        <div className='viewer-header'>
-          <i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
-          <span className='control-group'>
-            <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>
+        <div className='detailHeader'>
+          <div className='itemLeft'>
+            <ProfileImage className='profileImage' size='25' email={article.User.email}/>
+            <i className='fa fa-file-text-o fa-fw'></i>
+          </div>
+
+          <div className='itemRight'>
+            <div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
+            <div className='description'>{article.title}</div>
+            <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+          </div>
+
+          <span className='itemControl'>
+            <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='viewer-body'>
-          <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+        <div className='detailBody'>
           <MarkdownPreview className='content' content={article.content}/>
         </div>
       </div>

browser/main/Components/PlanetArticleList.jsx

@@ -13,6 +13,33 @@ module.exports = React.createClass({
     articles: React.PropTypes.array,
     showOnlyWithTag: React.PropTypes.func
   },
+  handleArticleClikck: function (article) {
+    if (article.type === 'code') {
+      return function (e) {
+        var params = this.getParams()
+
+        document.getElementById('articleEditButton').focus()
+        this.transitionTo('codes', {
+          userName: params.userName,
+          planetName: params.planetName,
+          localId: article.localId
+        })
+      }.bind(this)
+    }
+
+    if (article.type === 'note') {
+      return function (e) {
+        var params = this.getParams()
+
+        document.getElementById('articleEditButton').focus()
+        this.transitionTo('notes', {
+          userName: params.userName,
+          planetName: params.planetName,
+          localId: article.localId
+        })
+      }.bind(this)
+    }
+  },
   render: function () {
     var articles = this.props.articles.map(function (article) {
       var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
@@ -25,28 +52,17 @@ 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') {
-
-        handleClick = function () {
-          this.transitionTo('codes', {
-            userName: params.userName,
-            planetName: params.planetName,
-            localId: article.localId
-          })
-        }.bind(this)
-
         return (
-          <li onClick={handleClick} key={'code-' + article.id}>
+          <li onClick={this.handleArticleClikck(article)} key={'code-' + article.id}>
             <div className={'articleItem' + (isActive ? ' active' : '')}>
               <div className='itemLeft'>
                 <ProfileImage className='profileImage' size='25' email={article.User.email}/>
                 <i className='fa fa-code fa-fw'></i>
               </div>
               <div className='itemRight'>
-                <div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
-                <div className='description'>{article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}</div>
+                <div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
+                <div className='description'>{article.description}</div>
                 <div className='tags'><i className='fa fa-tags'/>{tags}</div>
               </div>
             </div>
@@ -55,16 +71,8 @@ module.exports = React.createClass({
         )
       }
 
-      handleClick = function () {
-        this.transitionTo('notes', {
-          userName: params.userName,
-          planetName: params.planetName,
-          localId: article.localId
-        })
-      }.bind(this)
-
       return (
-        <li onClick={handleClick} key={'note-' + article.id}>
+        <li onClick={this.handleArticleClikck(article)} key={'note-' + article.id}>
           <div className={'articleItem blueprintItem' + (isActive ? ' active' : '')}>
             <div className='itemLeft'>
               <ProfileImage className='profileImage' size='25' email={article.User.email}/>
@@ -72,7 +80,7 @@ module.exports = React.createClass({
             </div>
 
             <div className='itemRight'>
-              <div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
+              <div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
               <div className='description'>{article.title}</div>
               <div className='tags'><i className='fa fa-tags'/>{tags}</div>
             </div>
@@ -85,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,27 +31,37 @@ 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 () {
-    Hq.createPlanet(this.state.ownerName, this.state.planet)
-      .then(function (res) {
-        var planet = res.body
+    this.setState({errorMessage: null}, function () {
+      Hq.createPlanet(this.state.ownerName, this.state.planet)
+        .then(function (res) {
+          var planet = res.body
 
-        PlanetStore.Actions.update(planet)
+          PlanetStore.Actions.update(planet)
 
-        if (this.props.transitionTo != null) {
-          this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
-        }
+          if (this.props.transitionTo != null) {
+            this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+          }
 
-        this.props.close()
-      }.bind(this))
-      .catch(function (err) {
-        console.error(err)
-      })
+          this.props.close()
+        }.bind(this))
+        .catch(function (err) {
+          console.error(err)
+          if (err.status === 403) {
+            this.setState({errorMessage: err.response.body.message})
+          }
+        }.bind(this))
+    })
   },
   render: function () {
     var teamOptions = this.state.user.Teams.map(function (team) {
@@ -75,6 +86,8 @@ module.exports = React.createClass({
           </select>
         </div>
 
+        {this.state.errorMessage != null ? (<p className='errorAlert'>{this.state.errorMessage}</p>) : null}
+
         <button onClick={this.handleSubmit} className='submitButton'>
           <i className='fa fa-check'/>
         </button>

browser/main/Components/PlanetHeader.jsx

@@ -21,7 +21,22 @@ 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()
+      e.preventDefault()
+    }
+    if (e.keyCode !== 27 && (e.keyCode !== 13 || !e.metaKey)) {
+      e.stopPropagation()
+    }
   },
   openPlanetSettingModal: function () {
     this.openModal(PlanetSettingModal, {planet: this.props.currentPlanet})
@@ -42,12 +57,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 +71,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) {
@@ -264,7 +273,7 @@ module.exports = React.createClass({
           </div>
         ) : (
           <div>
-            Maximum numbr of members is 5 on Beta version. Please contact us if you want futher use.
+            Maximum number of members is 5 on Beta version. Please contact us if you want futher use.
           </div>
         )}
       </div>

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}}>
@@ -224,7 +223,9 @@ module.exports = React.createClass({
   renderTeamHome: function (currentUser) {
     var user = this.state.user
 
-    var isOwner = true
+    var isOwner = user.Members == null ? false : user.Members.some(function (member) {
+      return member.id === currentUser.id && member.TeamMember.role === 'owner'
+    })
 
     var userPlanets = user.Planets.map(function (planet) {
       return (
@@ -258,7 +259,7 @@ module.exports = React.createClass({
             <div className='userName'>{user.name}</div>
           </div>
 
-          <button onClick={this.openTeamSettingsModal} className='editProfileButton'>Team settings</button>
+          {isOwner ? (<button onClick={this.openTeamSettingsModal} className='editProfileButton'>Team settings</button>) : null}
         </div>
         <div className='memberList'>
           <div className='memberLabel'>{members.length} {members.length > 1 ? 'Members' : 'Member'}</div>

browser/main/Mixins/Helper.js

@@ -1,4 +1,5 @@
 function deleteItemFromTargetArray (item, targetArray) {
+  if (targetArray == null) targetArray = []
   targetArray.some(function (_item, index) {
     if (_item.id === item.id) {
       targetArray.splice(index, 1)
@@ -11,6 +12,8 @@ function deleteItemFromTargetArray (item, targetArray) {
 }
 
 function updateItemToTargetArray (item, targetArray) {
+  if (targetArray == null) targetArray = []
+
   var isNew = !targetArray.some(function (_item, index) {
     if (_item.id === item.id) {
       targetArray.splice(index, 1, item)

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/main/Services/Hq.js

@@ -35,6 +35,9 @@ module.exports = {
   fetchUser: function (userName) {
     return request
       .get(apiUrl + 'resources/' + userName)
+      .set({
+        Authorization: 'Bearer ' + localStorage.getItem('token')
+      })
   },
   updateUser: function (userName, input) {
     return request
@@ -79,6 +82,9 @@ module.exports = {
   fetchPlanet: function (userName, planetName) {
     return request
       .get(apiUrl + 'resources/' + userName + '/planets/' + planetName)
+      .set({
+        Authorization: 'Bearer ' + localStorage.getItem('token')
+      })
   },
   updatePlanet: function (userName, planetName, input) {
     return request

browser/styles/finder/index.styl

@@ -46,6 +46,9 @@ body
         border solid 2px transparent
         box-sizing border-box
         cursor pointer
+        white-space nowrap
+        overflow-x hidden
+        text-overflow ellipsis
       .divider
         box-sizing border-box
         border-bottom solid 1px borderColor
@@ -65,6 +68,9 @@ body
       border-bottom solid 1px borderColor
       line-height 44px
       font-size 1.3em
+      white-space nowrap
+      text-overflow ellipsis
+      overflow-x hidden
     .content
       .ace_editor, .marked
         position absolute

browser/styles/main/containers/PlanetContainer.styl

@@ -10,7 +10,7 @@ articleListWidth= 275px
       margin 0 2px
       text-decoration underline
       cursor pointer
-      font-size 0.9em
+      font-size 0.95em
       &.noTag
         color inactiveTextColor
         font-size 0.8em
@@ -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
@@ -178,33 +186,51 @@ articleListWidth= 275px
     overflow-y auto
     li
       .articleItem
-        user-select none
+        noSelect()
         border solid 2px transparent
-        padding 10px
+        position relative
+        height 94px
+        width 100%
         cursor pointer
         transition 0.1s
-        clearfix()
         .itemLeft
-          float left
-          width 25px
+          position absolute
+          top 4px
+          bottom 4px
+          width 38px
+          padding 3px 0 3px 3px
           text-align center
           .profileImage
             margin-bottom 5px
+            circle()
           .fa
             line-height 25px
         .itemRight
-          float left
-          width 225px
+          position absolute
+          top 4px
+          bottom 4px
+          right 2px
+          left 40px
           overflow-x hidden
-          padding-left 10px
-          .updatedAt
-            margin-bottom 10px
+          padding 3px 10px 3px 3px
+          .itemInfo
+            margin 5px 0 13px
             color lighten(textColor, 25%)
             font-size 0.7em
+            .userProfileName
+              color brandColor
+              font-size 1.2em
           .description
             line-height 120%
-            margin-bottom 15px
+            margin-bottom 10px
             font-size 1em
+            overflow-x hidden
+            white-space nowrap
+            text-overflow ellipsis
+          .tags
+            position absolute
+            bottom 5px
+            font-size 0.9em
         &:hover, &.hover
           background-color hoverBackgroundColor
           &:active, &.active
@@ -218,57 +244,89 @@ articleListWidth= 275px
   absolute right bottom
   top 55px
   left navigationWidth + articleListWidth
-  &>.viewer-header
-    height 44px
-    line-height 44px
-    padding 0 15px
-    box-sizing border-box
-    font-size 1.2em
-    small
-      font-size 0.8em
-      color lighten(textColor, 25%)
-    .control-group
-      float right
-      button
-        margin 10px 3px
-  .viewer-body
-    absolute bottom right
-    left 1px
-    top 44px
-  &.codeDetail>.viewer-body
-    .viewer-detail
-      border-bottom solid 1px borderColor
-      height 150px
-      box-sizing border-box
-      padding 10px
+  .detailHeader
+    border solid 2px transparent
+    position relative
+    height 105px
+    width 100%
+    transition 0.1s
+    .itemLeft
+      position absolute
+      top 7px
+      bottom 4px
+      width 38px
+      padding 3px 0 3px 3px
+      text-align center
+      .profileImage
+        margin-bottom 5px
+        circle()
+      .fa
+        line-height 25px
+    .itemRight
+      position absolute
+      top 7px
+      bottom 4px
+      right 2px
+      left 40px
+      overflow-x hidden
+      padding 3px 10px 3px 3px
+      .itemInfo
+        margin 5px 0 13px
+        color lighten(textColor, 25%)
+        font-size 0.7em
+        .userProfileName
+          color brandColor
+          font-size 1.2em
       .description
-        height 100px
-        line-height 1.4em
-        overflow-y auto
+        line-height 120%
+        margin-bottom 10px
+        font-size 1em
+        overflow-x auto
+        white-space nowrap
       .tags
         position absolute
-        left 15px
-        right 15px
-        top 120px
-    .content
-      .ace_editor
-        absolute left right
-        top 155px
         bottom 5px
-  &.noteDetail>.viewer-body
-    .tags
-      absolute top
-      left 15px
-      right 15px
-      height 24px
-      line-height 24px
+        font-size 0.9em
+    .itemControl
+      position absolute
+      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
-      absolute left right bottom
-      top 30px
+      position absolute
+      top 5px
+      bottom 5px
+      left 2px
+      right 2px
       box-sizing border-box
       padding 5px
       border-top solid 1px borderColor
-      padding 10px
+  &.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
@@ -63,19 +64,12 @@
             &:hover
               background-color hoverBackgroundColor
             .userName
-              float left
               width 155px
               padding 10px 15px
               text-align left
               display block
               text-decoration none
               cursor pointer
-            .userSetting
-              float right
-              display block
-              padding 10px 0
-              width 45px
-              cursor pointer
             .createNewTeam
               btnStripDefault()
               width 100%
@@ -166,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
@@ -189,7 +172,7 @@
     .memberPopup
       absolute left
       top 235px
-      z-index popupZIndex
+      z-index 1
       padding 0 15px 10px
       width 200px
       .label
@@ -205,13 +188,15 @@
           .memberImage
             float left
             margin-right 7px
+            circle()
           .memberInfo
             float left
             .memberProfileName
               margin-bottom 5px
+              font-size 1.05em
             .memberName
               margin-left 5px
-              font-size 0.8em
+              font-size 0.9em
               color inactiveTextColor
           a:hover .memberProfileName, a:hover .memberName
             text-decoration underline
@@ -259,9 +244,10 @@
             float left
             .teamProfileName
               margin-bottom 5px
+              font-size 1.05em
             .teamName
               margin-left 5px
-              font-size 0.8em
+              font-size 0.9em
               color inactiveTextColor
           a:hover .teamProfileName, a:hover .teamName
             text-decoration underline
@@ -277,16 +263,18 @@
           .memberImage
             float left
             margin-right 7px
+            circle()
           .memberInfo
             float left
             .memberProfileName
               margin-bottom 5px
+              font-size 1.05em
               .memberRole
-                font-size 0.8em
+                font-size 0.9em
                 color inactiveTextColor
             .memberName
               margin-left 5px
-              font-size 0.8em
+              font-size 0.9em
               color inactiveTextColor
           .createTeamButton, .addMemberButton
             btnStripDefault()

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
@@ -105,14 +107,22 @@ textarea.block-input
     z-index 2000
     bottom 5px
     right 53px
-    btnDefault()
+    btnPrimary()
     padding 10px 15px
     border-radius 5px
+    background-color backgroundColor
   .contactButton
     position fixed
     z-index 2000
     bottom 5px
     right 5px
-    btnDefault()
+    btnPrimary()
     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 0.5em 0
     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

@@ -196,7 +196,6 @@
             border-radius 5px
             float left
 
-
   .LaunchModal
     .modal-tab
       text-align center
@@ -314,6 +313,14 @@
       height 55px
       circle()
       btnPrimary()
+    .errorAlert
+      alertError()
+      padding 12px 10px
+      border-radius 5px
+      text-align center
+      display block
+      width 360px
+      margin 0 auto 15px
 
   .ContactModal
     padding 15px
@@ -341,6 +348,7 @@
           padding 0 15px
           border-radius 5px
           margin-left 5px
+          font-size 1em
         button.sendButton
           btnPrimary()
     .confirmation

main.js

@@ -178,6 +178,10 @@ function makeNewMainWindow () {
 
   mainWindow.loadUrl('file://' + __dirname + '/browser/main/index.electron.html')
 
+  mainWindow.webContents.on('new-window', function (e) {
+    e.preventDefault()
+  })
+
   mainWindow.on('closed', function () {
     console.log('main closed')
     mainWindow = null

modules/menu-template.js

@@ -89,13 +89,13 @@ module.exports = [
         click: function () {
           BrowserWindow.getFocusedWindow().reload()
         }
-      },
-      {
-        label: 'Toggle DevTools',
-        accelerator: 'Alt+Command+I',
-        click: function () {
-          BrowserWindow.getFocusedWindow().toggleDevTools()
-        }
+      // },
+      // {
+      //   label: 'Toggle DevTools',
+      //   accelerator: 'Alt+Command+I',
+      //   click: function () {
+      //     BrowserWindow.getFocusedWindow().toggleDevTools()
+      //   }
       }
     ]
   },

package.json

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