Merge v0.5.11

Conflicts:
	browser/main/index.js
	package.json

browser/main/modal/Preference/AppSettingTab.js

@@ -2,10 +2,12 @@ import React, { PropTypes } from 'react'
 import linkState from 'browser/lib/linkState'
 import { updateUser } from '../../actions'
 import fetchConfig from 'browser/lib/fetchConfig'
+import hljsTheme from 'browser/lib/hljsThemes'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const remote = electron.remote
+const ace = window.ace
 
 const OSX = global.process.platform === 'darwin'
 
@@ -114,11 +116,13 @@ export default class AppSettingTab extends React.Component {
           {userAlert.message}
         </p>
       ) : null
+    let aceThemeList = ace.require("ace/ext/themelist")
+    let hljsThemeList = hljsTheme()
 
     return (
       <div className='AppSettingTab content'>
         <div className='section'>
-          <div className='sectionTitle'>User's info</div>
+          <div className='sectionTitle'>User&apos;s info</div>
           <div className='sectionInput'>
             <label>User name</label>
             <input valueLink={this.linkState('user.name')} type='text'/>
@@ -129,7 +133,7 @@ export default class AppSettingTab extends React.Component {
           </div>
         </div>
         <div className='section'>
-          <div className='sectionTitle'>Text</div>
+          <div className='sectionTitle'>Editor</div>
           <div className='sectionInput'>
             <label>Editor Font Size</label>
             <input valueLink={this.linkState('config.editor-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
@@ -154,6 +158,7 @@ export default class AppSettingTab extends React.Component {
               </select>
             </div>
           </div>
+          <div className='sectionTitle'>Preview</div>
           <div className='sectionInput'>
             <label>Preview Font Size</label>
             <input valueLink={this.linkState('config.preview-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
@@ -178,7 +183,34 @@ export default class AppSettingTab extends React.Component {
             )
             : null
           }
-
+          <div className='sectionTitle'>Theme</div>
+          <div className='sectionSelect'>
+            <label>UI Theme</label>
+            <select valueLink={this.linkState('config.theme-ui')}>
+              <option value='light'>Light</option>
+              <option value='dark'>Dark</option>
+            </select>
+          </div>
+          <div className='sectionSelect'>
+            <label>Code block Theme</label>
+            <select valueLink={this.linkState('config.theme-code')}>
+              {
+                hljsThemeList.map(function(v, i){
+                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                })
+              }
+            </select>
+          </div>
+          <div className='sectionSelect'>
+            <label>Editor Theme</label>
+            <select valueLink={this.linkState('config.theme-syntax')}>
+              {
+                aceThemeList.themes.map(function(v, i){
+                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                })
+              }
+            </select>
+          </div>
           <div className='sectionConfirm'>
             <button onClick={e => this.handleConfigSaveButtonClick(e)}>Save</button>
           </div>

browser/main/modal/Preference/FolderRow.js

@@ -63,7 +63,7 @@ export default class FolderRow extends React.Component {
   }
 
   handleColorButtonClick (index) {
-    return e => {
+    return (e) => {
       this.setState({
         color: index,
         isColorEditing: false
@@ -116,7 +116,7 @@ export default class FolderRow extends React.Component {
             ? 'active'
             : null
           return (
-            <button onClick={e => this.handleColorButtonClick(index)(e)} className={className} key={index}>
+            <button onClick={(e) => this.handleColorButtonClick(index)(e)} className={className} key={index}>
               <FolderMark color={index}/>
             </button>
           )
@@ -125,7 +125,7 @@ export default class FolderRow extends React.Component {
         return (
           <div className='FolderRow edit'>
             <div className='folderColor'>
-              <button onClick={e => this.handleColorSelectClick(e)} className='select'>
+              <button onClick={(e) => this.handleColorSelectClick(e)} className='select'>
                 <FolderMark color={this.state.color}/>
               </button>
               {this.state.isColorEditing
@@ -139,11 +139,11 @@ export default class FolderRow extends React.Component {
               }
             </div>
             <div className='folderName'>
-              <input onKeyDown={e => this.handleNameInputKeyDown(e)} valueLink={this.linkState('name')} type='text'/>
+              <input onKeyDown={(e) => this.handleNameInputKeyDown(e)} valueLink={this.linkState('name')} type='text'/>
             </div>
             <div className='folderControl'>
-              <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>
-              <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+              <button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Save</button>
+              <button onClick={(e) => this.handleCancelButtonClick(e)}>Cancel</button>
             </div>
           </div>
         )
@@ -152,8 +152,8 @@ export default class FolderRow extends React.Component {
           <div className='FolderRow delete'>
             <div className='folderDeleteLabel'>Are you sure to delete <strong>{folder.name}</strong> folder?</div>
             <div className='folderControl'>
-              <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>Sure</button>
-              <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+              <button onClick={(e) => this.handleDeleteConfirmButtonClick(e)} className='primary'>Sure</button>
+              <button onClick={(e) => this.handleCancelButtonClick(e)}>Cancel</button>
             </div>
           </div>
         )
@@ -162,14 +162,14 @@ export default class FolderRow extends React.Component {
         return (
           <div className='FolderRow'>
             <div className='sortBtns'>
-              <button onClick={e => this.handleUpClick(e)}><i className='fa fa-sort-up fa-fw'/></button>
-              <button onClick={e => this.handleDownClick(e)}><i className='fa fa-sort-down fa-fw'/></button>
+              <button onClick={(e) => this.handleUpClick(e)}><i className='fa fa-sort-up fa-fw'/></button>
+              <button onClick={(e) => this.handleDownClick(e)}><i className='fa fa-sort-down fa-fw'/></button>
             </div>
             <div className='folderColor'><FolderMark color={folder.color}/></div>
             <div className='folderName'>{folder.name}</div>
             <div className='folderControl'>
-              <button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
-              <button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>
+              <button onClick={(e) => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
+              <button onClick={(e) => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>
             </div>
           </div>
         )

browser/main/modal/Preference/FolderSettingTab.js

@@ -75,10 +75,10 @@ export default class FolderSettingTab extends React.Component {
             {folderElements}
             <div className='newFolder'>
               <div className='folderName'>
-                <input onKeyDown={e => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
+                <input onKeyDown={(e) => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
               </div>
               <div className='folderControl'>
-                <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Add</button>
+                <button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Add</button>
               </div>
             </div>
             {alertElement}

browser/main/modal/Preferences.js

@@ -8,7 +8,6 @@ import ContactTab from './Preference/ContactTab'
 import { closeModal } from 'browser/lib/modal'
 
 const APP = 'APP'
-const HELP = 'HELP'
 const FOLDER = 'FOLDER'
 const CONTACT = 'CONTACT'
 
@@ -64,8 +63,6 @@ class Preferences extends React.Component {
     let { user, folders, dispatch } = this.props
 
     switch (this.state.currentTab) {
-      case HELP:
-        return (<HelpTab/>)
       case FOLDER:
         return (
           <FolderSettingTab

browser/main/modal/Tutorial.js

@@ -33,10 +33,10 @@ export default class Tutorial extends React.Component {
 
     return (
       <div className='Tutorial modal'>
-        <button onClick={e => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
+        <button onClick={(e) => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
           <i className='fa fa-fw fa-angle-left'/>
         </button>
-        <button onClick={e => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
+        <button onClick={(e) => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
           <i className='fa fa-fw fa-angle-right'/>
         </button>
         {content}
@@ -80,7 +80,7 @@ export default class Tutorial extends React.Component {
             Boost supports code syntax highlighting.<br/>
             There are more than 100 different type of language.
             <div className='code'>
-              <CodeEditor readOnly article={{content:code, mode: 'jsx'}}/>
+              <CodeEditor readOnly article={{content: code, mode: 'jsx'}}/>
             </div>
           </div>
         </div>)
@@ -101,7 +101,7 @@ export default class Tutorial extends React.Component {
         return (<div className='slide slide4'>
           <div className='title'>Are you ready?</div>
           <div className='content'>
-          <button onClick={e => this.startButtonClick(e)}>Start<br/>Boost</button>
+          <button onClick={(e) => this.startButtonClick(e)}>Start<br/>Boost</button>
           </div>
         </div>)
       default: