Merge v0.5.11

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

browser/main/index.js

@@ -7,10 +7,37 @@ require('!!style!css!stylus?sourceMap!../styles/main/index.styl')
 import { openModal } from 'browser/lib/modal'
 import OSSAnnounceModal from './modal/OSSAnnounceModal'
 import activityRecord from 'browser/lib/activityRecord'
+import fetchConfig from '../lib/fetchConfig'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const path = require('path')
 
+const remote = electron.remote
+
+let config = fetchConfig()
+applyConfig(config)
+
+ipc.on('config-apply', function (e, newConfig) {
+  config = newConfig
+  applyConfig(config)
+})
+
+function applyConfig (config) {
+  let body = document.body
+  body.setAttribute('data-theme', config['theme-ui'])
+
+  let hljsCss = document.getElementById('hljs-css')
+  hljsCss.setAttribute('href', '../node_modules/highlight.js/styles/' + config['theme-code'] + '.css')
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  window.addEventListener('keydown', function (e) {
+    if (e.keyCode === 73 && e.metaKey && e.altKey) {
+      remote.getCurrentWindow().toggleDevTools()
+    }
+  })
+}
+
 activityRecord.init()
 window.addEventListener('online', function () {
   ipc.send('check-update', 'check-update')

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:

browser/main/reducer.js

@@ -76,7 +76,7 @@ function folders (state = initialFolders, action) {
         if (newFolder.name == null || newFolder.name.length === 0) throw new Error('Folder name is required')
         if (newFolder.name.match(/\//)) throw new Error('`/` is not available for folder name')
 
-        let conflictFolder = _.find(state, folder => folder.name.toLowerCase() === newFolder.name.toLowerCase())
+        let conflictFolder = _.find(state, (folder) => folder.name.toLowerCase() === newFolder.name.toLowerCase())
         if (conflictFolder != null) throw new Error(`${conflictFolder.name} already exists!`)
         state.push(newFolder)
 
@@ -98,7 +98,7 @@ function folders (state = initialFolders, action) {
         if (targetFolder == null) throw new Error('Folder doesnt exist')
         // Name conflict check
         if (targetFolder.name !== folder.name) {
-          let conflictFolder = _.find(state, _folder => {
+          let conflictFolder = _.find(state, (_folder) => {
             return folder.name.toLowerCase() === _folder.name.toLowerCase() && folder.key !== _folder.key
           })
           if (conflictFolder != null) throw new Error('Name conflicted')
@@ -116,7 +116,7 @@ function folders (state = initialFolders, action) {
         if (state.length < 2) throw new Error('Folder must exist more than one')
 
         let targetKey = action.data.key
-        let targetIndex = _.findIndex(state, folder => folder.key === targetKey)
+        let targetIndex = _.findIndex(state, (folder) => folder.key === targetKey)
         if (targetIndex >= 0) {
           state.splice(targetIndex, 1)
         }
@@ -161,9 +161,9 @@ function articles (state = initialArticles, action) {
       {
         let modified = action.data.article
         let targetKey = action.data.key
-        let originalIndex = _.findIndex(state.data, _article => targetKey === _article.key)
+        let originalIndex = _.findIndex(state.data, (_article) => targetKey === _article.key)
         if (originalIndex === -1) return state
-        let modifiedIndex = _.findIndex(state.modified, _article => targetKey === _article.key)
+        let modifiedIndex = _.findIndex(state.modified, (_article) => targetKey === _article.key)
 
         modified = compareArticle(state.data[originalIndex], modified)
         if (modified == null) {