ModeSelect

Author: Rokt33r

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%

lib/components/CodeEditor.js

@@ -1,5 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import modes from 'boost/vars/modes'
+import _ from 'lodash'
 var ace = window.ace
 
 module.exports = React.createClass({
@@ -32,11 +34,12 @@ module.exports = React.createClass({
     editor.setReadOnly(!!this.props.readOnly)
 
     var session = editor.getSession()
-    if (this.props.mode != null && this.props.mode.length > 0) {
-      session.setMode('ace/mode/' + this.props.mode)
-    } else {
-      session.setMode('ace/mode/text')
-    }
+    let mode = _.findWhere(modes, {name: this.props.mode})
+    let syntaxMode = mode != null
+      ? mode.mode
+      : 'text'
+    session.setMode('ace/mode/' + syntaxMode)
+
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
     session.setUseWrapMode(true)
@@ -57,11 +60,11 @@ module.exports = React.createClass({
     }
     if (prevProps.mode !== this.props.mode) {
       var session = this.state.editor.getSession()
-      if (this.props.mode != null && this.props.mode.length > 0) {
-        session.setMode('ace/mode/' + this.props.mode)
-      } else {
-        session.setMode('ace/mode/text')
-      }
+      let mode = _.findWhere(modes, {name: this.props.mode})
+      let syntaxMode = mode != null
+        ? mode.mode
+        : 'text'
+      session.setMode('ace/mode/' + syntaxMode)
     }
   },
   render: function () {

lib/components/ModeIcon.js

@@ -32,8 +32,10 @@ export default class ModeIcon extends React.Component {
         return 'devicon-sass-original'
 
       // Compile
-      case 'c_cpp':
+      case 'c':
         return 'devicon-c-plain'
+      case 'cpp':
+        return 'devicon-cplusplus-plain'
       case 'csharp':
         return 'devicon-csharp-plain'
       case 'objc':
@@ -60,17 +62,16 @@ export default class ModeIcon extends React.Component {
         return 'fa fa-fw fa-terminal'
 
       case 'text':
-      case 'plain_text':
       case 'markdown':
         return 'fa fa-fw fa-file-text-o'
     }
     return 'fa fa-fw fa-code'
   }
 
   render () {
-    var className = this.getClassName()
+    let className = `ModeIcon ${this.getClassName()} ${this.props.className}`
     return (
-      <i className={this.props.className + ' ' + className}/>
+      <i className={className}/>
     )
   }
 }