extract SnippetForm component & add focsuing after form loaded & enhance CSS of Article focusing effect in

browser/main/Components/LaunchModal.jsx

@@ -5,92 +5,15 @@ var Catalyst = require('../Mixins/Catalyst')
 
 var Select = require('react-select')
 
-var PlanetActions = require('../Actions/PlanetActions')
 var PlanetStore = require('../Stores/PlanetStore')
 
-// TODO: remove
+var SnippetForm = require('./SnippetForm')
+
 var options = [
   { value: 'one', label: 'One' },
   { value: 'two', label: 'Two' }
 ]
 
-var SnippetForm = React.createClass({
-  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
-  propTypes: {
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    return {
-      snippet: {
-        description: '',
-        mode: 'javascript',
-        content: '',
-        callSign: '',
-        Tags: []
-      }
-    }
-  },
-  handleSnippetTagsChange: function (selected, all) {
-    var snippet = this.state.snippet
-    snippet.Tags = all
-    this.setState({snippet: snippet})
-  },
-  handleSnippetContentChange: function (e, value) {
-    var snippet = this.state.snippet
-    snippet.content = value
-    this.setState({snippet: snippet})
-  },
-  submit: function () {
-    var params = this.getParams()
-    var userName = params.userName
-    var planetName = params.planetName
-    var snippet = Object.assign({}, this.state.snippet)
-    snippet.Tags = snippet.Tags.map(function (tag) {
-      return tag.value
-    })
-    PlanetActions.createSnippet(userName + '/' + planetName, snippet)
-  },
-  render: function () {
-    return (
-      <div className='SnippetForm'>
-        <div className='modal-body'>
-          <div className='form-group'>
-            <textarea className='snippetDescription block-input' valueLink={this.linkState('snippet.description')} placeholder='Description'/>
-          </div>
-          <div className='form-group'>
-            <input className='inline-input' valueLink={this.linkState('snippet.callSign')} type='text' placeholder='Callsign'/>
-            <select className='inline-input' valueLink={this.linkState('snippet.mode')}>
-              <option value='javascript'>Javascript</option>
-              <option value='html'>HTML</option>
-              <option value='css'>CSS</option>
-            </select>
-          </div>
-          <div className='form-group'>
-            <CodeEditor onChange={this.handleSnippetContentChange} code={this.state.snippet.content} mode={this.state.snippet.mode}/>
-          </div>
-          <div className='form-group'>
-            <Select
-              name='Tags'
-              multi={true}
-              allowCreate={true}
-              value={this.state.snippet.Tags}
-              placeholder='Tags...'
-              options={options}
-              onChange={this.handleSnippetTagsChange}
-            />
-          </div>
-        </div>
-        <div className='modal-footer'>
-          <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancle</button>
-            <button onClick={this.submit} className='btn-primary'>Launch</button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
-
 var BlueprintForm = React.createClass({
   mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
   propTypes: {
@@ -105,6 +28,9 @@ var BlueprintForm = React.createClass({
       }
     }
   },
+  componentDidMount: function () {
+    React.findDOMNode(this.refs.title).focus()
+  },
   handleBlueprintTagsChange: function (selected, all) {
     var blueprint = this.state.blueprint
     blueprint.Tags = all
@@ -123,7 +49,7 @@ var BlueprintForm = React.createClass({
       <div className='BlueprintForm'>
         <div className='modal-body'>
           <div className='form-group'>
-            <input className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
+            <input ref='title' className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
           </div>
           <div className='form-group'>
             <CodeEditor onChange={this.handleBlueprintContentChange} code={this.state.blueprint.content} mode={'markdown'}/>

browser/main/Components/SnippetForm.jsx

@@ -0,0 +1,95 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var CodeEditor = require('./CodeEditor')
+var Catalyst = require('../Mixins/Catalyst')
+
+var Select = require('react-select')
+
+var PlanetActions = require('../Actions/PlanetActions')
+
+var options = [
+  { value: 'one', label: 'One' },
+  { value: 'two', label: 'Two' }
+]
+
+var SnippetForm = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      snippet: {
+        description: '',
+        mode: 'javascript',
+        content: '',
+        callSign: '',
+        Tags: []
+      }
+    }
+  },
+  componentDidMount: function () {
+    React.findDOMNode(this.refs.description).focus()
+  },
+  handleSnippetTagsChange: function (selected, all) {
+    var snippet = this.state.snippet
+    snippet.Tags = all
+    this.setState({snippet: snippet})
+  },
+  handleSnippetContentChange: function (e, value) {
+    var snippet = this.state.snippet
+    snippet.content = value
+    this.setState({snippet: snippet})
+  },
+  submit: function () {
+    var params = this.getParams()
+    var userName = params.userName
+    var planetName = params.planetName
+    var snippet = Object.assign({}, this.state.snippet)
+    snippet.Tags = snippet.Tags.map(function (tag) {
+      return tag.value
+    })
+    PlanetActions.createSnippet(userName + '/' + planetName, snippet)
+  },
+  render: function () {
+    return (
+      <div className='SnippetForm'>
+        <div className='modal-body'>
+          <div className='form-group'>
+            <textarea ref='description' className='snippetDescription block-input' valueLink={this.linkState('snippet.description')} placeholder='Description'/>
+          </div>
+          <div className='form-group'>
+            <input className='inline-input' valueLink={this.linkState('snippet.callSign')} type='text' placeholder='Callsign'/>
+            <select className='inline-input' valueLink={this.linkState('snippet.mode')}>
+              <option value='javascript'>Javascript</option>
+              <option value='html'>HTML</option>
+              <option value='css'>CSS</option>
+            </select>
+          </div>
+          <div className='form-group'>
+            <CodeEditor onChange={this.handleSnippetContentChange} code={this.state.snippet.content} mode={this.state.snippet.mode}/>
+          </div>
+          <div className='form-group'>
+            <Select
+              name='Tags'
+              multi={true}
+              allowCreate={true}
+              value={this.state.snippet.Tags}
+              placeholder='Tags...'
+              options={options}
+              onChange={this.handleSnippetTagsChange}
+            />
+          </div>
+        </div>
+        <div className='modal-footer'>
+          <div className='modal-control'>
+            <button onClick={this.props.close} className='btn-default'>Cancle</button>
+            <button onClick={this.submit} className='btn-primary'>Launch</button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})
+
+module.exports = SnippetForm

browser/main/Containers/PlanetContainer.jsx

@@ -134,11 +134,14 @@ var PlanetArticleList = React.createClass({
       }.bind(this)
 
       return (
-        <li onClick={handleClick} className={isActive ? 'active' : ''} key={snippet.id}>
-          <div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
-          <div className='description'>{snippet.description}</div>
-          <div className='updatedAt'>{snippet.updatedAt}</div>
-          <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+        <li onClick={handleClick} key={snippet.id}>
+          <div className={isActive ? 'snippetItem active' : 'snippetItem'}>
+            <div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
+            <div className='description'>{snippet.description}</div>
+            <div className='updatedAt'>{snippet.updatedAt}</div>
+            <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+          </div>
+          <div className='divider'></div>
         </li>
       )
     }.bind(this))

browser/styles/main/containers/PlanetContainer.styl

@@ -128,25 +128,28 @@
     absolute top bottom left right
     overflow-y auto
     li
-      border-bottom solid 1px borderColor
-      padding 10px
-      cursor pointer
-      .callSign
-        margin-bottom 5px
-        font-weight 600
-      .description
-        margin-bottom 5px
-      .updatedAt
-        margin-bottom 5px
-        color lighten(textColor, 25%)
-        font-size 0.8em
-      &:hover, &.hover
-        background-color hoverBackgroundColor
+      .snippetItem
+        border solid 2px transparent
+        padding 10px
+        cursor pointer
+        transition 0.1s
+        .callSign
+          margin-bottom 5px
+          font-weight 600
+        .description
+          margin-bottom 5px
+        .updatedAt
+          margin-bottom 5px
+          color lighten(textColor, 25%)
+          font-size 0.8em
+        &:hover, &.hover
+          background-color hoverBackgroundColor
+          &:active, &.active
+            background-color white
         &:active, &.active
-          background-color white
-      &:active, &.active
-        border solid 2px brandBorderColor
-        padding 9px 9px 8px
+          border-color brandBorderColor
+      .divider
+        border-bottom solid 1px borderColor
 
 .PlanetArticleDetail
   absolute right bottom

main.js

@@ -12,7 +12,6 @@ var mainWindow = null
 //   if (process.platform !== 'darwin') app.quit()
 // })
 
-
 app.on('ready', function () {
   makeNewMainWindow()