ModeSelect

browser/main/HomePage/ArticleDetail.js

@@ -6,21 +6,13 @@ import ModeIcon from 'boost/components/ModeIcon'
 import MarkdownPreview from 'boost/components/MarkdownPreview'
 import CodeEditor from 'boost/components/CodeEditor'
 import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, switchFolder, clearSearch, updateArticle, destroyArticle, NEW } from 'boost/actions'
-import aceModes from 'boost/ace-modes'
-import Select from 'react-select'
 import linkState from 'boost/linkState'
 import FolderMark from 'boost/components/FolderMark'
 import TagLink from 'boost/components/TagLink'
 import TagSelect from 'boost/components/TagSelect'
+import ModeSelect from 'boost/components/ModeSelect'
 import activityRecord from 'boost/activityRecord'
 
-var modeOptions = aceModes.map(function (mode) {
-  return {
-    label: mode,
-    value: mode
-  }
-})
-
 function makeInstantArticle (article) {
   return Object.assign({}, article)
 }
@@ -219,7 +211,16 @@ export default class ArticleDetail extends React.Component {
   handleModeChange (value) {
     let article = this.state.article
     article.mode = value
-    this.setState({article: article})
+    this.setState({
+      article: article,
+      previewMode: false
+    })
+  }
+
+  handleModeSelectBlur () {
+    if (this.refs.code != null) {
+      this.refs.code.editor.focus()
+    }
   }
 
   handleContentChange (e, value) {
@@ -232,6 +233,14 @@ export default class ArticleDetail extends React.Component {
     this.setState({previewMode: !this.state.previewMode})
   }
 
+  handleTitleKeyDown (e) {
+    console.log(e.keyCode)
+    if (e.keyCode === 9) {
+      e.preventDefault()
+      this.refs.mode.handleIdleSelectClick()
+    }
+  }
+
   renderEdit () {
     let { folders } = this.props
 
@@ -272,22 +281,21 @@ export default class ArticleDetail extends React.Component {
           <div className='detailPanel'>
             <div className='header'>
               <div className='title'>
-                <input placeholder='Title' ref='title' valueLink={this.linkState('article.title')}/>
+                <input onKeyDown={e => this.handleTitleKeyDown(e)} placeholder='Title' ref='title' valueLink={this.linkState('article.title')}/>
               </div>
-              <Select
+              <ModeSelect
                 ref='mode'
-                onChange={value => this.handleModeChange(value)}
-                clearable={false}
-                options={modeOptions}
-                placeholder='select mode...'
+                onChange={e => this.handleModeChange(e)}
                 value={this.state.article.mode}
                 className='mode'
+                onBlur={() => this.handleModeSelectBlur()}
               />
             </div>
 
             {this.state.previewMode
               ? <MarkdownPreview content={this.state.article.content}/>
               : (<CodeEditor
+                  ref='code'
                   onChange={(e, value) => this.handleContentChange(e, value)}
                   readOnly={false}
                   mode={this.state.article.mode}

browser/styles/main/HomeContainer/components/ArticleDetail.styl

@@ -160,11 +160,62 @@ iptFocusBorderColor = #369DCD
             display block
             height 33px
             margin-top 12px
-            width 120px
+            width 150px
             margin-right 15px
+            border-radius 5px
+            border solid 1px borderColor
+            transition 0.1s
+            &.idle
+              background-color darken(white, 5%)
+              cursor pointer
+              &:hover
+                background-color white
+              .ModeIcon
+                float left
+                width 25px
+                line-height 33px
+                text-align center
+              .modeLabel
+                line-height 30px
+            &.edit
+              background-color white
+              input
+                width 150px
+                line-height 30px
+                padding 0 10px
+                border none
+                outline none
+                background-color transparent
+                font-size 14px
+              .modeOptions
+                position fixed
+                width 150px
+                z-index 10
+                margin-top 5px
+                border 1px solid borderColor
+                border-radius 5px
+                background-color white
+                max-height 250px
+                overflow-y auto
+                .option
+                  height 33px
+                  line-height 33px
+                  cursor pointer
+                  &.active, &:hover.active
+                    background-color brandColor
+                    color white
+                  .ModeIcon
+                    width 30px
+                    text-align center
+                    display inline-block
+                  &:hover
+                    background-color darken(white, 10%)
+
+
+
           .title
             absolute left top bottom
-            right 120px
+            right 150px
             padding 0 15px
             input
               width 100%