Merge pull request #342 from sota1235/feature-v0-8-7

v0.8.7

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+compiled/
+dist/

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": ["standard", "standard-jsx"],
+  "rules": {
+    "no-useless-escape": 0
+  }
+}

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - 'stable'
+  - 'lts/*'
+
+script: npm run lint && npm run test

browser/components/CodeEditor.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
+import path from 'path'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -52,8 +53,9 @@ export default class CodeEditor extends React.Component {
       indentUnit: this.props.indentSize,
       tabSize: this.props.indentSize,
       indentWithTabs: this.props.indentType !== 'space',
-      keyMap: 'sublime',
+      keyMap: this.props.keyMap,
       inputStyle: 'textarea',
+      dragDrop: false,
       extraKeys: {
         Tab: function (cm) {
           if (cm.somethingSelected()) cm.indentSelection('add')
@@ -102,6 +104,9 @@ export default class CodeEditor extends React.Component {
     if (prevProps.fontFamily !== this.props.fontFamily) {
       needRefresh = true
     }
+    if (prevProps.keyMap !== this.props.keyMap) {
+      needRefresh = true
+    }
 
     if (prevProps.indentSize !== this.props.indentSize) {
       this.editor.setOption('indentUnit', this.props.indentSize)
@@ -160,6 +165,19 @@ export default class CodeEditor extends React.Component {
     this.editor.setCursor(cursor)
   }
 
+  handleDropImage (e) {
+    e.preventDefault()
+    const imagePath = e.dataTransfer.files[0].path
+    const filename = path.basename(imagePath)
+    const imageMd = `![${encodeURI(filename)}](${encodeURI(imagePath)})`
+    this.insertImage(imageMd)
+  }
+
+  insertImage (imageMd) {
+    const textarea = this.editor.getInputField()
+    textarea.value = textarea.value.substr(0, textarea.selectionStart) + imageMd + textarea.value.substr(textarea.selectionEnd)
+  }
+
   render () {
     let { className, fontFamily, fontSize } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
@@ -177,6 +195,7 @@ export default class CodeEditor extends React.Component {
           fontFamily: fontFamily.join(', '),
           fontSize: fontSize
         }}
+        onDrop={(e) => this.handleDropImage(e)}
       />
     )
   }
@@ -194,6 +213,7 @@ CodeEditor.propTypes = {
 CodeEditor.defaultProps = {
   readOnly: false,
   theme: 'xcode',
+  keyMap: 'sublime',
   fontSize: 14,
   fontFamily: 'Monaco, Consolas',
   indentSize: 4,

browser/components/MarkdownEditor.js

@@ -3,19 +3,31 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
     super(props)
 
+    this.escapeFromEditor = ['Control', 'w']
+
+    this.supportMdBold = ['Control', 'b']
+
+    this.supportMdWordBold = ['Control', ':']
+
     this.state = {
       status: 'PREVIEW',
-      renderValue: props.value
+      renderValue: props.value,
+      keyPressed: {},
+      isLocked: false
     }
+
+    this.lockEditorCode = () => this.handleLockEditor()
   }
 
   componentDidMount () {
     this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
   }
 
   componentDidUpdate () {
@@ -30,6 +42,7 @@ class MarkdownEditor extends React.Component {
 
   componentWillUnmount () {
     this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
   }
 
   queueRendering (value) {
@@ -69,11 +82,14 @@ class MarkdownEditor extends React.Component {
           this.refs.code.blur()
           this.refs.preview.focus()
         }
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
       })
     }
   }
 
   handleBlur (e) {
+    if (this.state.isLocked) return
+    this.setState({ keyPressed: [] })
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
       let cursorPosition = this.refs.code.editor.getCursor()
@@ -83,6 +99,7 @@ class MarkdownEditor extends React.Component {
         this.refs.preview.focus()
         this.refs.preview.scrollTo(cursorPosition.line)
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -98,6 +115,7 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.code.focus()
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -134,6 +152,7 @@ class MarkdownEditor extends React.Component {
     } else {
       this.refs.code.focus()
     }
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
   }
 
   reload () {
@@ -142,6 +161,50 @@ class MarkdownEditor extends React.Component {
     this.renderPreview(this.props.value)
   }
 
+  handleKeyDown(e) {
+    if (this.state.status !== 'CODE') return false
+    const keyPressed = Object.assign(this.state.keyPressed, {
+      [e.key]: true
+    })
+    this.setState({ keyPressed })
+    let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] }
+    if (!this.state.isLocked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
+      document.activeElement.blur()
+    }
+    if (this.supportMdBold.every(isNoteHandlerKey)) {
+      this.addMdAndMoveCaretToCenter('****')
+    }
+    if (this.supportMdWordBold.every(isNoteHandlerKey)) {
+      this.addMdBetweenWord('**')
+    }
+  }
+
+  addMdAndMoveCaretToCenter (mdElement) {
+    const currentCaret = this.refs.code.editor.getCursor()
+    const cmDoc = this.refs.code.editor.getDoc()
+    cmDoc.replaceRange(mdElement, currentCaret)
+    this.refs.code.editor.setCursor({line: currentCaret.line, ch: currentCaret.ch + mdElement.length/2})
+  }
+
+  addMdBetweenWord (mdElement) {
+    const currentCaret = this.refs.code.editor.getCursor()
+    const word = this.refs.code.editor.findWordAt(currentCaret)
+    const cmDoc = this.refs.code.editor.getDoc()
+    cmDoc.replaceRange(mdElement, word.anchor)
+    cmDoc.replaceRange(mdElement, { line: word.head.line, ch: word.head.ch + mdElement.length })
+  }
+
+  handleKeyUp (e) {
+    const keyPressed = Object.assign(this.state.keyPressed, {
+      [e.key]: false
+    })
+    this.setState({ keyPressed })
+  }
+
+  handleLockEditor () {
+    this.setState({ isLocked: !this.state.isLocked })
+  }
+
   render () {
     let { className, value, config } = this.props
 
@@ -160,12 +223,15 @@ class MarkdownEditor extends React.Component {
         }
         onContextMenu={(e) => this.handleContextMenu(e)}
         tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+        onKeyUp={(e) => this.handleKeyUp(e)}
       >
         <CodeEditor styleName='codeEditor'
           ref='code'
           mode='GitHub Flavored Markdown'
           value={value}
           theme={config.editor.theme}
+          keyMap={config.editor.keyMap}
           fontFamily={config.editor.fontFamily}
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
@@ -179,6 +245,7 @@ class MarkdownEditor extends React.Component {
           }
           style={previewStyle}
           theme={config.ui.theme}
+          keyMap={config.editor.keyMap}
           fontSize={config.preview.fontSize}
           fontFamily={config.preview.fontFamily}
           codeBlockTheme={config.preview.codeBlockTheme}

browser/components/MarkdownPreview.js

@@ -6,6 +6,8 @@ import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
 import SequenceDiagram from 'js-sequence-diagrams'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import fs from 'fs'
 
 function decodeHTMLEntities (text) {
   var entities = [
@@ -25,6 +27,7 @@ function decodeHTMLEntities (text) {
 const { remote } = require('electron')
 const { app } = remote
 const path = require('path')
+const dialog = remote.dialog
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const appPath = 'file://' + (process.env.NODE_ENV === 'production'
@@ -49,6 +52,8 @@ body {
 }
 code {
   font-family: ${codeBlockFontFamily.join(', ')};
+  background-color: rgba(0,0,0,0.04);
+  color: #CC305F;
 }
 .lineNumber {
   ${lineNumber && 'display: block !important;'}
@@ -90,6 +95,8 @@ export default class MarkdownPreview extends React.Component {
     this.mouseUpHandler = (e) => this.handleMouseUp(e)
     this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e)
     this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
+    this.saveAsTextHandler = () => this.handleSaveAsText()
+    this.saveAsMdHandler = () => this.handleSaveAsMd()
   }
 
   handlePreviewAnchorClick (e) {
@@ -134,13 +141,38 @@ export default class MarkdownPreview extends React.Component {
     if (this.props.onMouseUp != null) this.props.onMouseUp(e)
   }
 
+  handleSaveAsText () {
+    this.exportAsDocument('txt')
+  }
+
+  handleSaveAsMd () {
+    this.exportAsDocument('md')
+  }
+
+  exportAsDocument (fileType) {
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: [fileType]}
+      ],
+      properties: ['openFile', 'createDirectory']
+    }
+    dialog.showSaveDialog(remote.getCurrentWindow(), options,
+    (filename) => {
+      if (filename) {
+        fs.writeFile(filename, this.props.value, (err) => {
+          if (err) throw err
+        })
+      }
+    })
+  }
+
   componentDidMount () {
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
 
     this.refs.root.contentWindow.document.head.innerHTML = `
       <style id='style'></style>
-      <link rel="stylesheet" href="${appPath}/compiled/katex-style.css">
+      <link rel="stylesheet" href="${appPath}/node_modules/katex/dist/katex.min.css">
       <link rel="stylesheet" href="${appPath}/node_modules/codemirror/lib/codemirror.css">
       <link rel="stylesheet" id="codeTheme">
     `
@@ -149,12 +181,20 @@ export default class MarkdownPreview extends React.Component {
 
     this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.addEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
+    eventEmitter.on('export:save-text', this.saveAsTextHandler)
+    eventEmitter.on('export:save-md', this.saveAsMdHandler)
   }
 
   componentWillUnmount () {
     this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
     this.refs.root.contentWindow.document.removeEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.removeEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.removeEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.removeEventListener('dragover', this.preventImageDroppedHandler)
+    eventEmitter.off('export:save-text', this.saveAsTextHandler)
+    eventEmitter.off('export:save-md', this.saveAsMdHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -184,9 +224,9 @@ export default class MarkdownPreview extends React.Component {
   }
 
   setCodeTheme (theme) {
-    theme = consts.THEMES.some((_theme) => _theme === theme)
+    theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
       ? theme
-      : 'default'
+      : 'elegant'
     this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
 
@@ -203,6 +243,10 @@ export default class MarkdownPreview extends React.Component {
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
     this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
 
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.taskListItem'), (el) => {
+      el.parentNode.parentNode.style.listStyleType = 'none'
+    })
+
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       el.addEventListener('click', this.anchorClickHandler)
     })
@@ -219,7 +263,7 @@ export default class MarkdownPreview extends React.Component {
       let syntax = CodeMirror.findModeByName(el.className)
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
-        let content = el.innerHTML
+        let content = decodeHTMLEntities(el.innerHTML)
         el.innerHTML = ''
         el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
         CodeMirror.runMode(content, syntax.mime, el, {
@@ -289,6 +333,11 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
+  preventImageDroppedHandler(e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   render () {
     let { className, style, tabIndex } = this.props
     return (

browser/components/NoteItem.js

@@ -75,8 +75,8 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
         : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
       }
 
-      {note.isStarred ?
-        <i styleName='item-star' className='fa fa-star' /> : ''
+      {note.isStarred
+        ? <i styleName='item-star' className='fa fa-star' /> : ''
       }
     </div>
   </div>
@@ -91,10 +91,10 @@ NoteItem.propTypes = {
     type: PropTypes.string.isRequired,
     title: PropTypes.string.isrequired,
     tags: PropTypes.array,
-    isStarred: PropTypes.bool.isRequired,
+    isStarred: PropTypes.bool.isRequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItem, styles)

browser/components/NoteItemSimple.js

@@ -40,10 +40,10 @@ NoteItemSimple.propTypes = {
     storage: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
-    title: PropTypes.string.isrequired,
+    title: PropTypes.string.isrequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItemSimple, styles)

browser/components/ProfileImage.js

@@ -12,7 +12,7 @@ export default class ProfileImage extends React.Component {
         className={className}
         width={this.props.size}
         height={this.props.size}
-        src={src}/>
+        src={src} />
     )
   }
 }

browser/components/SideNavFilter.js

@@ -17,17 +17,17 @@ const SideNavFilter = ({
   isFolded, isHomeActive, handleAllNotesButtonClick,
   isStarredActive, handleStarredButtonClick
 }) => (
-  <div styleName={ isFolded ? 'menu--folded' : 'menu' }>
+  <div styleName={isFolded ? 'menu--folded' : 'menu'}>
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
-      <i className='fa fa-book fa-fw'/>
+      <i className='fa fa-book fa-fw' />
       <span styleName='menu-button-label'>All Notes</span>
     </button>
     <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleStarredButtonClick}
     >
-      <i className='fa fa-star fa-fw'/>
+      <i className='fa fa-star fa-fw' />
       <span styleName='menu-button-label'>Starred</span>
     </button>
   </div>
@@ -38,7 +38,7 @@ SideNavFilter.propTypes = {
   isHomeActive: PropTypes.bool.isRequired,
   handleAllNotesButtonClick: PropTypes.func.isRequired,
   isStarredActive: PropTypes.bool.isRequired,
-  handleStarredButtonClick: PropTypes.func.isRequired,
+  handleStarredButtonClick: PropTypes.func.isRequired
 }
 
 export default CSSModules(SideNavFilter, styles)

browser/components/SnippetTab.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SnippetTab.styl'
 import context from 'browser/lib/context'
@@ -117,7 +117,7 @@ class SnippetTab extends React.Component {
           <button styleName='deleteButton'
             onClick={(e) => this.handleDeleteButtonClick(e)}
           >
-            <i className='fa fa-times'/>
+            <i className='fa fa-times' />
           </button>
         }
       </div>

browser/components/StorageItem.js

@@ -27,8 +27,8 @@ const StorageItem = ({
     onClick={handleButtonClick}
     onContextMenu={handleContextMenu}
   >
-    <span styleName={isFolded ?
-      'folderList-item-name--folded' : 'folderList-item-name'
+    <span styleName={isFolded
+      ? 'folderList-item-name--folded' : 'folderList-item-name'
     }
       style={{borderColor: folderColor}}
     >
@@ -52,7 +52,7 @@ StorageItem.propTypes = {
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,
   isFolded: PropTypes.bool.isRequired,
-  noteCount: PropTypes.number,
+  noteCount: PropTypes.number
 }
 
 export default CSSModules(StorageItem, styles)

browser/components/StorageItem.styl

@@ -39,6 +39,8 @@
   border-width 0 0 0 3px
   border-style solid
   border-color transparent
+  overflow hidden
+  text-overflow ellipsis
 
 .folderList-item-noteCount
   float right

browser/components/markdown.styl

@@ -54,7 +54,6 @@ body
   font-family helvetica, arial, sans-serif
   line-height 1.6
   overflow-x hidden
-  user-select all
   background-color $ui-noteDetail-backgroundColor
   .katex
     font 400 1.2em 'KaTeX_Main'
@@ -78,7 +77,6 @@ body
 li
   label.taskListItem
     margin-left -2em
-    background-color white
 div.math-rendered
   text-align center
 .math-failed

browser/finder/FinderMain.styl

@@ -25,6 +25,7 @@ $list-width = 250px
 .result
   absolute left right bottom
   top $search-height
+  background-color $ui-noteDetail-backgroundColor
 
 .result-nav
   user-select none
@@ -89,6 +90,9 @@ body[data-theme="dark"]
   .search-input
     color $ui-dark-text-color
 
+  .result
+    background-color $ui-dark-noteList-backgroundColor
+
   .result-nav
     background-color $ui-dark-backgroundColor
     label

browser/finder/NoteDetail.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteDetail.styl'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
@@ -97,9 +97,7 @@ class NoteDetail extends React.Component {
     let { note, config } = this.props
     if (note == null) {
       return (
-        <div styleName='root'>
-
-        </div>
+        <div styleName='root' />
       )
     }
 
@@ -154,6 +152,7 @@ class NoteDetail extends React.Component {
               fontSize={editorFontSize}
               indentType={config.editor.indentType}
               indentSize={editorIndentSize}
+              keyMap={config.editor.keyMap}
               readOnly
               ref={'code-' + index}
             />

browser/finder/NoteList.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import NoteItem from 'browser/components/NoteItem'
 import moment from 'moment'
 
@@ -54,12 +54,11 @@ class NoteList extends React.Component {
   }
 
   render () {
-    let { storageMap, notes, index } = this.props
+    let { notes, index } = this.props
 
     let notesList = notes
       .slice(0, 10 + 10 * this.state.range)
       .map((note, _index) => {
-
         const isActive = (index === _index)
         const key = `${note.storage}-${note.key}`
         const dateDisplay = moment(note.updatedAt).fromNow()

browser/finder/StorageSection.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StorageSection.styl'
 import StorageItem from 'browser/components/StorageItem'

browser/finder/index.js

@@ -67,12 +67,8 @@ class FinderMain extends React.Component {
   }
 
   handleWindowBlur (e) {
-    let { filter } = this.state
-    filter.type = 'ALL'
     this.setState({
       search: '',
-      filter,
-      index: 0
     })
   }
 
@@ -351,7 +347,7 @@ function refreshData () {
 
 ReactDOM.render((
   <Provider store={store}>
-    <Finder/>
+    <Finder />
   </Provider>
 ), document.getElementById('content'), function () {
   refreshData()

browser/lib/api.js

@@ -1,21 +0,0 @@
-import superagent from 'superagent'
-import superagentPromise from 'superagent-promise'
-
-export const SERVER_URL = 'https://b00st.io/'
-// export const SERVER_URL = 'http://localhost:3333/'
-
-export const request = superagentPromise(superagent, Promise)
-
-export function shareViaPublicURL (input) {
-  return request
-    .post(SERVER_URL + 'apis/share')
-    // .set({
-    //   Authorization: 'Bearer ' + auth.token()
-    // })
-    .send(input)
-}
-
-export default {
-  SERVER_URL,
-  shareViaPublicURL
-}

browser/lib/customMeta.js

@@ -1,4 +1,3 @@
 import CodeMirror from 'codemirror'
-import _ from 'lodash'
 
 CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})

browser/lib/date-formatter.js

@@ -1,17 +1,17 @@
 /**
  * @fileoverview Formatting date string.
  */
-import moment from 'moment';
+import moment from 'moment'
 
 /**
  * @description Return date string. For example, 'Sep.9, 2016 12:00'.
  * @param {mixed}
  * @return {string}
  */
-export function getLastUpdated(date) {
+export function getLastUpdated (date) {
   const m = moment(date)
   if (!m.isValid()) {
-    throw Error('Invalid argument.');
+    throw Error('Invalid argument.')
   }
 
   return m.format('MMM D, gggg H:mm')

browser/lib/markdown.js

@@ -58,7 +58,7 @@ md.use(math, {
 })
 md.use(require('markdown-it-footnote'))
 // Override task item
-md.block.ruler.at('paragraph', function (state, startLine/*, endLine*/) {
+md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   let content, terminate, i, l, token
   let nextLine = startLine + 1
   let terminatorRules = state.md.block.ruler.getRules('paragraph')

browser/main/Detail/FolderSelect.js

@@ -128,8 +128,8 @@ class FolderSelect extends React.Component {
   }
 
   nextOption () {
-    let { storages } = this.props
     let { optionIndex } = this.state
+    let { folders } = this.props
 
     optionIndex++
     if (optionIndex >= folders.length) optionIndex = 0
@@ -262,13 +262,11 @@ class FolderSelect extends React.Component {
           : <div styleName='idle'>
             <div styleName='idle-label'>
               <span styleName='idle-label-name'
-                style={{borderColor: currentOption.folder.color}}
+                style={{color: currentOption.folder.color}}
               >
-                {currentOption.folder.name}
-                <span styleName='idle-label-name-surfix'>in {currentOption.storage.name}</span>
+                {currentOption.folder.name} /
               </span>
             </div>
-            <i styleName='idle-caret' className='fa fa-fw fa-caret-down'/>
           </div>
         }
 

browser/main/Detail/FolderSelect.styl

@@ -7,29 +7,28 @@
   transition 0.15s
   user-select none
   &:hover
-    background-color white
-    border-color $ui-borderColor
+    background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color white
+  background-color $ui-noteDetail-backgroundColor = #F4F4F4
   border-color $ui-input--focus-borderColor
+  width 100px
   &:hover
-    background-color white
     border-color $ui-input--focus-borderColor
 
 .idle
   position relative
   cursor pointer
+
 .idle-label
-  absolute left top
-  padding 0 0 0 5px
   right 20px
   overflow ellipsis
 
 .idle-label-name
-  border-left solid 4px transparent
-  padding 2px 5px
+  font-size 16px
+  padding 2px
+
 .idle-label-name-surfix
   font-size 10px
   color $ui-inactive-text-color
@@ -60,9 +59,9 @@
   max-height 450px
   overflow auto
   z-index 200
+  border $ui-border
   background-color white
   border-radius 2px
-  box-shadow 2px 2px 10px gray
 
 .search-optionList-item
   height 34px
@@ -115,8 +114,8 @@ body[data-theme="dark"]
 
   .search-optionList
     color white
+    border-color $ui-dark-borderColor
     background-color $ui-dark-button--hover-backgroundColor
-    box-shadow 2px 2px 10px black
 
   .search-optionList-item
     &:hover

browser/main/Detail/LastUpdatedString.js

@@ -21,7 +21,7 @@ const LastUpdatedString = ({ date }) => {
 }
 
 LastUpdatedString.propTypes = {
-  date: PropTypes.string,
+  date: PropTypes.string
 }
 
 export default CSSModules(LastUpdatedString, styles)

browser/main/Detail/LastUpdatedString.styl

@@ -1,5 +1,7 @@
 .info-right-date
   display inline
+  line-height 24px
+  padding-right 25px
   font-size 11px
   color $ui-button-color
 

browser/main/Detail/MarkdownNoteDetail.js

@@ -4,7 +4,7 @@ import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
-import LastUpdatedString from './LastUpdatedString'
+import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
@@ -25,15 +25,23 @@ class MarkdownNoteDetail extends React.Component {
       note: Object.assign({
         title: '',
         content: ''
-      }, props.note)
+      }, props.note),
+      isLockButtonShown: false,
+      isLocked: false
     }
     this.dispatchTimer = null
+
+    this.toggleLockButton = this.handleToggleLockButton.bind(this)
   }
 
   focus () {
     this.refs.content.focus()
   }
 
+  componentDidMount () {
+    ee.on('topbar:togglelockbutton', this.toggleLockButton)
+  }
+
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
@@ -50,13 +58,20 @@ class MarkdownNoteDetail extends React.Component {
     if (this.saveQueue != null) this.saveNow()
   }
 
+  componentDidUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
+  }
+
   findTitle (value) {
     let splitted = value.split('\n')
     let title = null
+    let isMarkdownInCode = false
 
     for (let i = 0; i < splitted.length; i++) {
       let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match(/^# .+/)) {
+      if (trimmedLine.match('```')) {
+        isMarkdownInCode = !isMarkdownInCode
+      } else if (isMarkdownInCode === false && trimmedLine.match(/^# +/)) {
         title = trimmedLine.substring(1, trimmedLine.length).trim()
         break
       }
@@ -200,10 +215,34 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleLockButtonMouseDown (e) {
+    e.preventDefault()
+    ee.emit('editor:lock')
+    this.setState({ isLocked: !this.state.isLocked })
+    if (this.state.isLocked) this.focus()
+  }
+
+  getToggleLockButton () {
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock-alt'
+  }
+
   handleDeleteKeyDown (e) {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
+  handleToggleLockButton (event, noteStatus) {
+    // first argument event is not used
+    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
+      this.setState({isLockButtonShown: true})
+    } else {
+      this.setState({isLockButtonShown: false})
+    }
+  }
+
+  handleFocus (e) {
+    this.focus()
+  }
+
   render () {
     let { data, config } = this.props
     let { note } = this.state
@@ -219,6 +258,15 @@ class MarkdownNoteDetail extends React.Component {
               onClick={(e) => this.handleStarButtonClick(e)}
               isActive={note.isStarred}
             />
+            <div styleName='info-left-top'>
+              <FolderSelect styleName='info-left-top-folderSelect'
+                value={this.state.note.storage + '-' + this.state.note.folder}
+                ref='folder'
+                data={data}
+                onChange={(e) => this.handleFolderChange(e)}
+              />
+            </div>
+
             <TagSelect
               ref='tags'
               value={this.state.note.tags}
@@ -226,11 +274,34 @@ class MarkdownNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <LastUpdatedString date={note.updatedAt} />
-            <button styleName='info-right-button'
+            {(() => {
+              const faClassName=`fa ${this.getToggleLockButton()}`
+              const lockButtonComponent =
+                <button styleName='control-lockButton'
+                  onFocus={(e) => this.handleFocus(e)}
+                  onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
+                >
+                  <i className={faClassName} styleName='lock-button'/>
+                  <span styleName='control-lockButton-tooltip'>
+                  {this.state.isLocked ? 'Unlock' : 'Lock'}
+                  </span>
+                </button>
+              return (
+                this.state.isLockButtonShown ? lockButtonComponent : ''
+              )
+            })()}
+            <button styleName='control-trashButton'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
-              <i className='fa fa-ellipsis-v' />
+              <svg height="17px" id="Capa_1" style={{"enableBackground":"new 0 0 753.23 753.23"}} width="17px" version="1.1" viewBox="0 0 753.23 753.23" x="0px" y="0px" xmlSpace="preserve">
+                 <g>
+                   <g id="_x34__19_">
+                     <g>
+                       <path d="M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z"/>
+                     </g>
+                   </g>
+                 </g>
+               </svg>
             </button>
           </div>
         </div>
@@ -248,6 +319,7 @@ class MarkdownNoteDetail extends React.Component {
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/MarkdownNoteDetail.styl

@@ -9,6 +9,28 @@
   background-color $ui-noteDetail-backgroundColor
   box-shadow $note-detail-box-shadow
 
+.lock-button
+  padding-bottom 3px
+
+.control-lockButton
+  topBarButtonLight()
+
+.control-lockButton-tooltip
+  tooltip()
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.control-trashButton
+  float right
+  topBarButtonLight()
+
 .body
   absolute left right
   left $note-detail-left-margin
@@ -24,3 +46,12 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
+
+  .control-lockButton
+    topBarButtonDark()
+
+  .control-lockButton-tooltip
+    darkTooltip()
+
+  .control-trashButton
+    topBarButtonDark()

browser/main/Detail/NoteDetailInfo.styl

@@ -16,6 +16,19 @@ $info-margin-under-border = 27px
   padding 0 5px
   margin 0px 2px
 
+.info-left-top
+  display inline-block
+  height $info-height
+  line-height $info-height
+
+.info-left-top-folderSelect
+  display inline-block
+  padding 0 3px
+  height 34px
+  line-height 34px
+  vertical-align middle
+  border-radius 3px
+
 .info-left-button
   width 34px
   height 34px
@@ -25,7 +38,7 @@ $info-margin-under-border = 27px
   margin 13px 2px
   padding 0
   border-radius 17px
-  &:hover .info-right-button-tooltip
+  &:hover .info-left-button-tooltip
     opacity 1
   &:focus
     border-color $ui-favorite-star-button-color
@@ -41,21 +54,6 @@ $info-margin-under-border = 27px
   bottom 1px
   padding-left 30px
 
-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  font-size 14px
-  margin 13px 7px
-  padding 0
-  border none
-  color $ui-button-color
-  background-color transparent
-  &:hover
-    opacity 1
-    background-color $ui-button--hover-backgroundColor
-
-
 body[data-theme="dark"]
   .info
     border-color $ui-dark-borderColor
@@ -75,11 +73,3 @@ body[data-theme="dark"]
 
   .info-right
     background-color $ui-dark-noteDetail-backgroundColor
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:focus
-      border-color $ui-button--focus-borderColor

browser/main/Detail/SnippetNoteDetail.js

@@ -5,7 +5,7 @@ import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
-import LastUpdatedString from './LastUpdatedString'
+import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
@@ -14,6 +14,7 @@ import SnippetTab from 'browser/components/SnippetTab'
 import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import _ from 'lodash'
 
 function pass (name) {
   switch (name) {
@@ -258,6 +259,8 @@ class SnippetNoteDetail extends React.Component {
     this.setState({
       note: this.state.note,
       snippetIndex
+    }, () => {
+      this.save()
     })
   }
 
@@ -508,6 +511,7 @@ class SnippetNoteDetail extends React.Component {
             fontSize={editorFontSize}
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
+            keyMap={config.editor.keyMap}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
           />
@@ -527,6 +531,15 @@ class SnippetNoteDetail extends React.Component {
               onClick={(e) => this.handleStarButtonClick(e)}
               isActive={note.isStarred}
             />
+            <div styleName='info-left-top'>
+              <FolderSelect styleName='info-left-top-folderSelect'
+                value={this.state.note.storage + '-' + this.state.note.folder}
+                ref='folder'
+                data={data}
+                onChange={(e) => this.handleFolderChange(e)}
+              />
+            </div>
+
             <TagSelect
               ref='tags'
               value={this.state.note.tags}
@@ -534,11 +547,18 @@ class SnippetNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <LastUpdatedString date={note.updatedAt} />
-            <button styleName='info-right-button'
+            <button styleName='control-trashButton'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
-              <i className='fa fa-ellipsis-v'/>
+              <svg height="17px" id="Capa_1" style={{"enableBackground":"new 0 0 753.23 753.23"}} width="17px" version="1.1" viewBox="0 0 753.23 753.23" x="0px" y="0px" xmlSpace="preserve">
+                <g>
+                  <g id="_x34__19_">
+                    <g>
+                      <path d="M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z"/>
+                    </g>
+                  </g>
+                </g>
+              </svg>
             </button>
           </div>
         </div>
@@ -563,7 +583,7 @@ class SnippetNoteDetail extends React.Component {
             <button styleName='plusButton'
               onClick={(e) => this.handleTabPlusButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
             </button>
           </div>
           {viewList}
@@ -577,24 +597,25 @@ class SnippetNoteDetail extends React.Component {
               ? 'Select Syntax...'
               : this.state.note.snippets[this.state.snippetIndex].mode
             }&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
           <button
             onClick={(e) => this.handleIndentTypeButtonClick(e)}
           >
             Indent: {config.editor.indentType}&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
           <button
             onClick={(e) => this.handleIndentSizeButtonClick(e)}
           >
             size: {config.editor.indentSize}&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
         </div>
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/SnippetNoteDetail.styl

@@ -56,6 +56,7 @@
 
 .override
   absolute bottom left
+  left 60px
   height 23px
   z-index 1
   button
@@ -67,6 +68,10 @@
     &:active .update-icon
       color white
 
+.control-trashButton
+  float right
+  topBarButtonLight()
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -92,3 +97,6 @@ body[data-theme="dark"]
   .override
     button
       border-color $ui-dark-borderColor
+
+  .control-trashButton
+    topBarButtonDark()

browser/main/Detail/StarButton.styl

@@ -1,5 +1,4 @@
 .root
-  position absolute
   left 7px
   top 0
   padding 0

browser/main/Detail/TagSelect.js

@@ -8,7 +8,7 @@ class TagSelect extends React.Component {
     super(props)
 
     this.state = {
-      newTag: '',
+      newTag: ''
     }
   }
 
@@ -111,7 +111,7 @@ class TagSelect extends React.Component {
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
-              <i className='fa fa-times fa-fw tag-removeButton-icon'/>
+              <i className='fa fa-times fa-fw tag-removeButton-icon' />
             </button>
           </span>
         )

browser/main/Detail/TagSelect.styl

@@ -1,7 +1,6 @@
 .root
-  position absolute
+  display inline-block
   top 19px
-  left 44px
   user-select none
   vertical-align middle
   width 300px

browser/main/Main.js

@@ -112,7 +112,7 @@ class Main extends React.Component {
         ConfigManager.set({ navWidth })
         dispatch({
           type: 'SET_NAV_WIDTH',
-          navWidth,
+          navWidth
         })
       })
     }
@@ -169,7 +169,7 @@ class Main extends React.Component {
             onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
             draggable='false'
           >
-            <div styleName='slider-hitbox'/>
+            <div styleName='slider-hitbox' />
           </div>
         }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}

browser/main/NoteList/index.js

@@ -38,6 +38,13 @@ class NoteList extends React.Component {
     this.focusHandler = () => {
       this.refs.list.focus()
     }
+    this.alertIfSnippetHandler = () => {
+      this.alertIfSnippet()
+    }
+
+    this.jumpToTopHandler = () => {
+      this.jumpToTop()
+    }
 
     this.state = {
     }
@@ -48,6 +55,9 @@ class NoteList extends React.Component {
     ee.on('list:next', this.selectNextNoteHandler)
     ee.on('list:prior', this.selectPriorNoteHandler)
     ee.on('list:focus', this.focusHandler)
+    ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.on('list:top', this.jumpToTopHandler)
+    ee.on('list:jumpToTop', this.jumpToTopHandler)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -66,6 +76,9 @@ class NoteList extends React.Component {
     ee.off('list:next', this.selectNextNoteHandler)
     ee.off('list:prior', this.selectPriorNoteHandler)
     ee.off('list:focus', this.focusHandler)
+    ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.off('list:top', this.jumpToTopHandler)
+    ee.off('list:jumpToTop', this.jumpToTopHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -305,6 +318,37 @@ class NoteList extends React.Component {
     })
   }
 
+  alertIfSnippet() {
+    let { location } = this.props
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return `${note.storage}-${note.key}` === location.query.key
+    })
+    if (this.notes[targetIndex].type === 'SNIPPET_NOTE') {
+      dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Sorry!',
+        detail: 'md/text import is available only a markdown note.'
+      })
+    }
+  }
+
+  jumpToTop() {
+    if (this.notes === null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+
+    const targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+  }
+
   render () {
     let { location, notes, config } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
@@ -324,8 +368,8 @@ class NoteList extends React.Component {
         const isDefault = config.listStyle === 'DEFAULT'
         const isActive = location.query.key === note.storage + '-' + note.key
         const dateDisplay = moment(
-          config.sortBy === 'CREATED_AT' ?
-            note.createdAt : note.updatedAt
+          config.sortBy === 'CREATED_AT'
+            ? note.createdAt : note.updatedAt
         ).fromNow()
         const key = `${note.storage}-${note.key}`
 
@@ -376,7 +420,7 @@ class NoteList extends React.Component {
             }
             onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
           >
-            <i className='fa fa-th-large'/>
+            <i className='fa fa-th-large' />
           </button>
           <button styleName={config.listStyle === 'SMALL'
               ? 'control-button--active'
@@ -384,7 +428,7 @@ class NoteList extends React.Component {
             }
             onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
           >
-            <i className='fa fa-list-ul'/>
+            <i className='fa fa-list-ul' />
           </button>
         </div>
         <div styleName='list'

browser/main/SideNav/SideNav.styl

@@ -10,7 +10,7 @@
 
 .top-menu
   navButtonColor()
-  height $topBar-height - 1
+  height $topBar-height
   padding 0 15px
   font-size 14px
   width 100%

browser/main/SideNav/StorageItem.js

@@ -181,7 +181,7 @@ class StorageItem extends React.Component {
             <button styleName='header-addFolderButton'
               onClick={(e) => this.handleAddFolderButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
             </button>
           }
 

browser/main/SideNav/index.js

@@ -7,9 +7,6 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
 
-const electron = require('electron')
-const { remote } = electron
-
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
   handleMenuButtonClick (e) {
@@ -65,7 +62,7 @@ class SideNav extends React.Component {
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
-            <i className='fa fa-navicon fa-fw'/>
+            <i className='fa fa-navicon fa-fw' />
             <span styleName='top-menu-label'>Menu</span>
           </button>
         </div>
@@ -87,8 +84,8 @@ class SideNav extends React.Component {
           onClick={(e) => this.handleToggleButtonClick(e)}
         >
           {isFolded
-            ? <i className='fa fa-angle-double-right'/>
-            : <i className='fa fa-angle-double-left'/>
+            ? <i className='fa fa-angle-double-right' />
+            : <i className='fa fa-angle-double-left' />
           }
         </button>
       </div>

browser/main/StatusBar/index.js

@@ -2,12 +2,13 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
+import LastUpdatedString from '../Detail/LastUpdatedString'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
 const { Menu, MenuItem, dialog } = remote
 
-const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3]
+const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0]
 
 class StatusBar extends React.Component {
   updateApp () {
@@ -52,22 +53,23 @@ class StatusBar extends React.Component {
       <div className='StatusBar'
         styleName='root'
       >
-        <div styleName='blank' />
-        {status.updateReady
-          ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
-          </button>
-          : null
-        }
-        {/*<button styleName='help'>
-          <i className='fa fa-info-circle' />
-        </button>*/}
         <button styleName='zoom'
           onClick={(e) => this.handleZoomButtonClick(e)}
         >
           <i className='fa fa-search-plus' />&nbsp;
           {Math.floor(config.zoom * 100)}%
         </button>
+
+        <div styleName='blank' />
+
+        {status.updateReady
+          ? <button onClick={this.updateApp} styleName='update'>
+            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
+            </button>
+          : null
+        }
+
+        <LastUpdatedString date={this.props.date} />
       </div>
     )
   }
@@ -77,7 +79,8 @@ StatusBar.contextTypes = {
   status: PropTypes.shape({
     updateReady: PropTypes.bool.isRequired
   }).isRequired,
-  config: PropTypes.shape({}).isRequired
+  config: PropTypes.shape({}).isRequired,
+  date: PropTypes.string
 }
 
 StatusBar.propTypes = {

browser/main/TopBar/index.js

@@ -10,8 +10,6 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import dataApi from 'browser/main/lib/dataApi'
 
 const OSX = window.process.platform === 'darwin'
-const { remote } = require('electron')
-const { Menu, MenuItem } = remote
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -26,14 +24,20 @@ class TopBar extends React.Component {
     this.newNoteHandler = () => {
       this.handleNewPostButtonClick()
     }
+
+    this.focusSearchHandler = () => {
+      this.handleOnSearchFocus()
+    }
   }
 
   componentDidMount () {
     ee.on('top:new-note', this.newNoteHandler)
+    ee.on('top:focus-search', this.focusSearchHandler)
   }
 
   componentWillUnmount () {
     ee.off('top:new-note', this.newNoteHandler)
+    ee.off('top:focus-search', this.focusSearchHandler)
   }
 
   handleNewPostButtonClick (e) {
@@ -71,10 +75,10 @@ class TopBar extends React.Component {
         break
       }
     }
-    if (storage == null) alert('No storage to create a note')
+    if (storage == null) window.alert('No storage to create a note')
     let folder = _.find(storage.folders, {key: params.folderKey})
     if (folder == null) folder = storage.folders[0]
-    if (folder == null) alert('No folder to create a note')
+    if (folder == null) window.alert('No folder to create a note')
 
     return {
       storage,
@@ -246,6 +250,14 @@ class TopBar extends React.Component {
     })
   }
 
+  handleOnSearchFocus () {
+    if (this.state.searchPopupOpen) {
+      this.refs.search.childNodes[0].blur()
+    } else {
+      this.refs.search.childNodes[0].focus()
+    }
+  }
+
   render () {
     let { config, style, data } = this.props
     let searchOptionList = this.getOptions()
@@ -262,8 +274,8 @@ class TopBar extends React.Component {
             <span styleName='control-search-optionList-item-folder-surfix'>in {storage.name}</span>
           </div>
           {note.type === 'SNIPPET_NOTE'
-            ? <i styleName='control-search-optionList-item-type' className='fa fa-code'/>
-            : <i styleName='control-search-optionList-item-type' className='fa fa-file-text-o'/>
+            ? <i styleName='control-search-optionList-item-type' className='fa fa-code' />
+            : <i styleName='control-search-optionList-item-type' className='fa fa-file-text-o' />
           }&nbsp;
           {note.title}
         </div>
@@ -276,7 +288,7 @@ class TopBar extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-search'>
-            <i styleName='control-search-icon' className='fa fa-search fa-fw'/>
+            <i styleName='control-search-icon' className='fa fa-search fa-fw' />
             <div styleName='control-search-input'
               onFocus={(e) => this.handleSearchFocus(e)}
               onBlur={(e) => this.handleSearchBlur(e)}
@@ -303,14 +315,14 @@ class TopBar extends React.Component {
               <button styleName='left-search-clearButton'
                 onClick={(e) => this.handleSearchClearButton(e)}
               >
-                <i className='fa fa-times'/>
+                <i className='fa fa-times' />
               </button>
             }
 
           </div>
           <button styleName='control-newPostButton'
             onClick={(e) => this.handleNewPostButtonClick(e)}>
-            <i className='fa fa-plus'/>
+            <i className='fa fa-plus' />
             <span styleName='control-newPostButton-tooltip'>
               Make a Note {OSX ? '⌘' : '^'} + n
             </span>

browser/main/lib/ConfigManager.js

@@ -16,7 +16,7 @@ export const DEFAULT_CONFIG = {
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
   hotkey: {
     toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
-    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
+    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E',
   },
   ui: {
     theme: 'default',
@@ -25,6 +25,7 @@ export const DEFAULT_CONFIG = {
   },
   editor: {
     theme: 'default',
+    keyMap: 'sublime',
     fontSize: '14',
     fontFamily: 'Monaco, Consolas',
     indentType: 'space',
@@ -34,7 +35,7 @@ export const DEFAULT_CONFIG = {
   preview: {
     fontSize: '14',
     fontFamily: 'Lato',
-    codeBlockTheme: 'xcode',
+    codeBlockTheme: 'elegant',
     lineNumber: true
   }
 }

browser/main/lib/modal.js

@@ -20,10 +20,10 @@ class ModalBase extends React.Component {
   render () {
     return (
       <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
-        <div onClick={(e) => this.close(e)} className='modalBack'/>
+        <div onClick={(e) => this.close(e)} className='modalBack' />
         {this.state.component == null ? null : (
           <Provider store={store}>
-            <this.state.component {...this.state.componentProps} close={this.close}/>
+            <this.state.component {...this.state.componentProps} close={this.close} />
           </Provider>
         )}
       </div>
@@ -33,7 +33,7 @@ class ModalBase extends React.Component {
 
 let el = document.createElement('div')
 document.body.appendChild(el)
-let modalBase = ReactDOM.render(<ModalBase/>, el)
+let modalBase = ReactDOM.render(<ModalBase />, el)
 
 export function openModal (component, props) {
   if (modalBase == null) { return }

browser/main/modals/DeleteArticleModal.js

@@ -33,13 +33,13 @@ export default class DeleteArticleModal extends React.Component {
   render () {
     return (
       <div className='DeleteArticleModal modal'>
-        <div className='title'><i className='fa fa-fw fa-trash'/> Delete an article.</div>
+        <div className='title'><i className='fa fa-fw fa-trash' /> Delete an article.</div>
 
         <div className='message'>Do you really want to delete?</div>
 
         <div className='control'>
-          <button ref='no' onClick={(e) => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
-          <button ref='yes' onClick={(e) => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check'/> Yes</button>
+          <button ref='no' onClick={(e) => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close' /> No</button>
+          <button ref='yes' onClick={(e) => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check' /> Yes</button>
         </div>
       </div>
     )

browser/main/modals/InitModal.js

@@ -1,11 +1,10 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InitModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
-import keygen from 'browser/lib/keygen'
 
 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -197,7 +196,7 @@ class InitModal extends React.Component {
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
-        <i styleName='spinner' className='fa fa-spin fa-spinner'/>
+        <i styleName='spinner' className='fa fa-spin fa-spinner' />
         <div styleName='loadingMessage'>Preparing initialization...</div>
       </div>
     }
@@ -235,7 +234,7 @@ class InitModal extends React.Component {
 
           {this.state.legacyStorageExists &&
             <div styleName='body-migration'>
-              <label><input type='checkbox' checked={this.state.migrationRequested} onChange={(e) => this.handleMigrationRequestedChange(e)}/> Migrate old data from the legacy app v0.5</label>
+              <label><input type='checkbox' checked={this.state.migrationRequested} onChange={(e) => this.handleMigrationRequestedChange(e)} /> Migrate old data from the legacy app v0.5</label>
             </div>
           }
 
@@ -247,7 +246,7 @@ class InitModal extends React.Component {
             >
               {this.state.isSending
                 ? <span>
-                  <i className='fa fa-spin fa-spinner'/> Loading...
+                  <i className='fa fa-spin fa-spinner' /> Loading...
                 </span>
                 : 'Let\'s Go!'
               }

browser/main/modals/InitModal.styl

@@ -28,8 +28,6 @@
   right 10px
   height 30px
   padding 0 25px
-  border $ui-border
-  border-radius 2px
   color $ui-text-color
   colorDefaultButton()
 

browser/main/modals/NewNoteModal.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewNoteModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
@@ -102,9 +102,10 @@ class NewNoteModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Make a Note</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
+          <div styleName='close-mark'>X</div>
+          <div styleName='close-text'>esc</div>
+        </button>
 
         <div styleName='control'>
           <button styleName='control-button'
@@ -114,8 +115,8 @@ class NewNoteModal extends React.Component {
           >
             <i styleName='control-button-icon'
               className='fa fa-file-text-o'
-            /><br/>
-            <span styleName='control-button-label'>Markdown Note</span><br/>
+            /><br />
+            <span styleName='control-button-label'>Markdown Note</span><br />
             <span styleName='control-button-description'>It is good for any type of documents. Check List, Code block and Latex block are available.</span>
           </button>
 
@@ -126,14 +127,14 @@ class NewNoteModal extends React.Component {
           >
             <i styleName='control-button-icon'
               className='fa fa-code'
-            /><br/>
-            <span styleName='control-button-label'>Snippet Note</span><br/>
+            /><br />
+            <span styleName='control-button-label'>Snippet Note</span><br />
             <span styleName='control-button-description'>This format is specialized on managing snippets like Gist. Multiple snippets can be grouped as a note.
             </span>
           </button>
 
         </div>
-        <div styleName='description'><i className='fa fa-arrows-h'/> Tab to switch format</div>
+        <div styleName='description'><i className='fa fa-arrows-h' /> Tab to switch format</div>
 
       </div>
     )

browser/main/modals/NewNoteModal.styl

@@ -14,20 +14,24 @@
   color $ui-text-color
 
 .closeButton
+  height 50px
   position absolute
-  top 10px
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 1px
   right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
+  text-align center
+  width top-bar--height
+  height top-bar--height
 
 .control
   padding 25px 15px 15px
   text-align center
 
+.close-mark
+  font-size 15px
+
 .control-button
   width 220px
   height 220px
@@ -64,11 +68,6 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
-  .closeButton
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    colorDarkDefaultButton()
-
   .control-button
     border-color $ui-dark-borderColor
     color $ui-dark-text-color

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -94,6 +94,10 @@
   p
     line-height 1.2
 
+.note-for-keymap
+  margin-left: 10px
+  font-size: 12px
+
 colorDarkControl()
   border-color $ui-dark-borderColor
   background-color $ui-dark-backgroundColor

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -7,8 +7,6 @@ import store from 'browser/main/store'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 
-const OSX = global.process.platform === 'darwin'
-
 class HotkeyTab extends React.Component {
   constructor (props) {
     super(props)
@@ -140,6 +138,7 @@ class HotkeyTab extends React.Component {
                 <li><code>Escape</code> (or <code>Esc</code> for short)</li>
                 <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
                 <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+                <li><code>Control</code> (or <code>Ctrl</code> for short)</li>
               </ul>
             </div>
           }
@@ -150,7 +149,7 @@ class HotkeyTab extends React.Component {
 }
 
 HotkeyTab.propTypes = {
-  dispatch: PropTypes.func,
+  dispatch: PropTypes.func
 }
 
 export default CSSModules(HotkeyTab, styles)

browser/main/modals/PreferencesModal/InfoTab.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoTab.styl'
 
@@ -26,7 +26,7 @@ class InfoTab extends React.Component {
 
         <div styleName='top'>
           <div styleName='icon-space'>
-            <img styleName='icon' src='../resources/app.png' width='92' height='92'/>
+            <img styleName='icon' src='../resources/app.png' width='92' height='92' />
             <div styleName='icon-right'>
               <div styleName='appId'>Boostnote {appVersion}</div>
               <div styleName='description'>
@@ -34,7 +34,7 @@ class InfoTab extends React.Component {
               </div>
             </div>
           </div>
-          <div styleName='clear'></div>
+          <div styleName='clear' />
           <div styleName='madeBy'>Made by&nbsp;
             <a href='http://maisin.co/'
               onClick={(e) => this.handleLinkClick(e)}

browser/main/modals/PreferencesModal/StorageItem.js

@@ -106,7 +106,10 @@ class UnstyledFolderItem extends React.Component {
     const popover = { position: 'absolute', zIndex: 2 }
     const cover = {
       position: 'fixed',
-      top: 0, right: 0, bottom: 0, left: 0
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
     }
     const pickerStyle = Object.assign({}, {
       position: 'absolute'
@@ -137,7 +140,7 @@ class UnstyledFolderItem extends React.Component {
               </div>
               : null
             }
-            <i className='fa fa-square'/>
+            <i className='fa fa-square' />
           </button>
           <input styleName='folderList-item-left-nameInput'
             value={this.state.folder.name}
@@ -368,17 +371,17 @@ class StorageItem extends React.Component {
             : <div styleName='header-label'
               onClick={(e) => this.handleLabelClick(e)}
             >
-              <i className='fa fa-folder-open'/>&nbsp;
+              <i className='fa fa-folder-open' />&nbsp;
               {storage.name}&nbsp;
               <span styleName='header-label-path'>({storage.path})</span>&nbsp;
-              <i styleName='header-label-editButton' className='fa fa-pencil'/>
+              <i styleName='header-label-editButton' className='fa fa-pencil' />
             </div>
           }
           <div styleName='header-control'>
             <button styleName='header-control-button'
               onClick={(e) => this.handleNewFolderButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -20}}
               >Add Folder</span>
@@ -386,7 +389,7 @@ class StorageItem extends React.Component {
             <button styleName='header-control-button'
               onClick={(e) => this.handleExternalButtonClick(e)}
             >
-              <i className='fa fa-external-link'/>
+              <i className='fa fa-external-link' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -50}}
               >Open Storage folder</span>
@@ -394,7 +397,7 @@ class StorageItem extends React.Component {
             <button styleName='header-control-button'
               onClick={(e) => this.handleUnlinkButtonClick(e)}
             >
-              <i className='fa fa-unlink'/>
+              <i className='fa fa-unlink' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -10}}
               >Unlink</span>

browser/main/modals/PreferencesModal/StoragesTab.js

@@ -72,7 +72,7 @@ class StoragesTab extends React.Component {
           <button styleName='list-control-addStorageButton'
             onClick={(e) => this.handleAddStorageButton(e)}
           >
-            <i className='fa fa-plus'/> Add Storage
+            <i className='fa fa-plus' /> Add Storage
           </button>
         </div>
       </div>

browser/main/modals/PreferencesModal/UiTab.js

@@ -5,9 +5,6 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
 
-const electron = require('electron')
-const ipc = electron.ipcRenderer
-
 const OSX = global.process.platform === 'darwin'
 
 class UiTab extends React.Component {
@@ -34,7 +31,8 @@ class UiTab extends React.Component {
       fontFamily: this.refs.editorFontFamily.value,
       indentType: this.refs.editorIndentType.value,
       indentSize: this.refs.editorIndentSize.value,
-      switchPreview: this.refs.editorSwitchPreview.value
+      switchPreview: this.refs.editorSwitchPreview.value,
+      keyMap: this.refs.editorKeyMap.value
     }
     config.preview = {
       fontSize: this.refs.previewFontSize.value,
@@ -181,6 +179,23 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Editor Keymap
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.editor.keyMap}
+                ref='editorKeyMap'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                <option value='sublime'>default</option>
+                <option value='vim'>vim</option>
+              </select>
+              <span styleName='note-for-keymap'>Please reload boostnote after you change the keymap</span>
+            </div>
+          </div>
+
           <div styleName='group-header2'>Preview</div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>

browser/main/modals/PreferencesModal/index.js

@@ -43,7 +43,7 @@ class Preferences extends React.Component {
 
     switch (this.state.currentTab) {
       case 'INFO':
-        return <InfoTab/>
+        return <InfoTab />
       case 'HOTKEY':
         return (
           <HotkeyTab
@@ -86,9 +86,9 @@ class Preferences extends React.Component {
 
     let tabs = [
       {target: 'STORAGES', label: 'Storages'},
-      {target: 'HOTKEY',   label: 'Hotkey'},
-      {target: 'UI',       label: 'UI'},
-      {target: 'INFO',     label: 'Info'}
+      {target: 'HOTKEY', label: 'Hotkey'},
+      {target: 'UI', label: 'UI'},
+      {target: 'INFO', label: 'Info'}
     ]
 
     let navButtons = tabs.map((tab) => {

browser/main/modals/RenameFolderModal.styl

@@ -75,3 +75,4 @@ body[data-theme="dark"]
 
   .control-input
     border-color $ui-dark-borderColor
+    color $ui-dark-text-color

browser/styles/index.styl

@@ -139,6 +139,24 @@ modal()
   border-radius $modal-border-radius
   box-shadow 2px 2px 10px gray
 
+topBarButtonLight()
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding-top 7px
+  border none
+  color $ui-button-color
+  fill $ui-button-color
+  background-color transparent
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+    .control-lockButton-tooltip
+      opacity 1
+
 // Dark theme
 $ui-dark-borderColor = lighten(#21252B, 20%)
 $ui-dark-backgroundColor = #1D1D1D
@@ -151,6 +169,7 @@ $ui-dark-button--active-color = white
 $ui-dark-button--active-backgroundColor = #6AA5E9
 $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
+$ui-dark-topbar-button-color = #939395
 
 $dark-default-button-background = $ui-dark-backgroundColor
 $dark-default-button-background--hover = $ui-dark-button--hover-backgroundColor
@@ -190,6 +209,18 @@ navDarkButtonColor()
     background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-button--active-color
 
+topBarButtonDark()
+  border-color $ui-dark-borderColor
+  color $ui-dark-topbar-button-color
+  &:hover
+    background-color $dark-default-button-background--hover
+  &:active
+    border-color $ui-dark-button--focus-borderColor
+  &:active:hover
+    background-color $ui-dark-button--active-backgroundColor
+  &:focus
+    border-color $ui-button--focus-borderColor
+
 $ui-dark-tooltip-text-color = white
 $ui-dark-tooltip-backgroundColor = alpha(#444, 70%)
 $ui-dark-tooltip-button-backgroundColor = #D1D1D1

contributing.md

@@ -1,23 +1,21 @@
 # Contributing to Boostnote
 
-> English below.
-
-## Pull requestの著作権について
-
-Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
-
-アプリケーションのLicenseのをいつでも変える選択肢を残したいからです。
-しかし、これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。
-もし、このアプリケーションで金を稼ごうとするならBoostnote専用のCloud storageの提供やMobile appとの連動、何か特殊なプレミアム機能の提供など形になると思います。
-現在考えられているのは、GPL v3の場合、他のライセンスとの互換が不可能であるため、もしより自由なLicense(BSD, MIT)に変える時に改めて著作権者としてライセンスし直す選択肢を残したいぐらいのイメージです。
-
----
-
-# Contributing to Boostnote(ENG)
-
 ## About copyright of Pull Request
 
 If you make a pull request, It means you agree to transfer the copyright of the code changes to MAISIN&CO.
 
 It doesn't mean Boostnote will become a paid app. If we want to earn some money, We will try other way, which is some kind of cloud storage, Mobile app integration or some SPECIAL features.
 Because GPL v3 is too strict to be compatible with any other License, We thought this is needed to replace the license with much freer one(like BSD, MIT) somewhen.
+
+---
+
+# Contributing to Boostnote(Japanese)
+
+## Pull requestの著作権について
+
+Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
+
+アプリケーションのLicenseをいつでも変える選択肢を残したいと思うからです。
+これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。
+もし、このアプリケーションに料金が発生する時は、Boostnote専用のCloud storageの提供やMobile appとの連動、何か特殊なプレミアム機能の提供など形になります。
+現在考えられているのは、GPL v3の場合、他のライセンスとの互換が不可能であるため、もしより自由なLicense(BSD, MIT)に変える時に改めて著作権者としてライセンスし直す選択肢を残すイメージです。

docs/build.md

@@ -29,11 +29,6 @@ $ npm run hot
 ```
 > Actually the app can be start with `npm start`. However, the app will use the compiled script.
 
-If the app gets stuck on load, you may need to run the following.
-```
-$ npm run vendor
-```
-
 By this, webpack will watch the code changes and apply it automatically.
 
 > ### Notice

gruntfile.js

@@ -5,16 +5,16 @@ const packager = require('electron-packager')
 const WIN = process.platform === 'win32'
 
 module.exports = function (grunt) {
-  var auth_code
+  var authCode
   try {
-    auth_code = grunt.file.readJSON('secret/auth_code.json')
+    authCode = grunt.file.readJSON('secret/auth_code.json')
   } catch (e) {
     if (e.origError.code === 'ENOENT') {
       console.warn('secret/auth_code.json is not found. CodeSigning is not available.')
     }
   }
-  const OSX_COMMON_NAME = auth_code != null ? auth_code.OSX_COMMON_NAME : ''
-  const WIN_CERT_PASSWORD = auth_code != null ? auth_code.WIN_CERT_PASSWORD : ''
+  const OSX_COMMON_NAME = authCode != null ? authCode.OSX_COMMON_NAME : ''
+  const WIN_CERT_PASSWORD = authCode != null ? authCode.WIN_CERT_PASSWORD : ''
 
   var initConfig = {
     pkg: grunt.file.readJSON('package.json'),
@@ -98,7 +98,7 @@ module.exports = function (grunt) {
       prune: true,
       overwrite: true,
       out: path.join(__dirname, 'dist'),
-      ignore: /node_modules\/ace-builds\/(?!src-min)|node_modules\/ace-builds\/(?=src-min-noconflict)|node_modules\/devicon\/icons|dist|^\/browser|^\/secret|\.babelrc|\.gitignore|^\/\.gitmodules|^\/gruntfile|^\/readme.md|^\/webpack|^\/appdmg\.json|^\/node_modules\/grunt/
+      ignore: /node_modules\/ace-builds\/(?!src-min)|node_modules\/ace-builds\/(?=src-min-noconflict)|node_modules\/devicon\/icons|^\/browser|^\/secret|\.babelrc|\.gitignore|^\/\.gitmodules|^\/gruntfile|^\/readme.md|^\/webpack|^\/appdmg\.json|^\/node_modules\/grunt/
     }
     switch (platform) {
       case 'win':

lib/finder-app.js

@@ -1,19 +1,14 @@
 const electron = require('electron')
 const app = electron.app
-const Menu = electron.Menu
-
-var finderWindow = null
 
 app.on('ready', function () {
   if (process.platform === 'darwin') {
     app.dock.hide()
   }
 
-  // var template = require('./finder-menu')
-  // var menu = Menu.buildFromTemplate(template)
-  // Menu.setApplicationMenu(menu)
-
+  /* eslint-disable */
   finderWindow = require('./finder-window')
+  /* eslint-enable */
 })
 
 module.exports = app

lib/finder-window.js

@@ -1,6 +1,5 @@
 const electron = require('electron')
 const { app } = electron
-const { systemPreferences } = electron
 const BrowserWindow = electron.BrowserWindow
 const Menu = electron.Menu
 const MenuItem = electron.MenuItem
@@ -45,13 +44,9 @@ finderWindow.on('close', function (e) {
   finderWindow.hide()
 })
 
-var trayIcon = process.platform === 'darwin'
-  ? !systemPreferences.isDarkMode()
-    ? path.join(__dirname, '../resources/tray-icon-default.png')
-    : path.join(__dirname, '../resources/tray-icon-dark.png')
-  : process.platform === 'win32'
-    ? path.join(__dirname, '../resources/tray-icon-dark.png')
-    : path.join(__dirname, '../resources/tray-icon.png')
+var trayIcon = process.platform === 'darwin' || process.platform === 'win32'
+  ? path.join(__dirname, '../resources/tray-icon-default.png')
+  : path.join(__dirname, '../resources/tray-icon.png')
 var appIcon = new Tray(trayIcon)
 appIcon.setToolTip('Boostnote')
 if (process.platform === 'darwin') {

lib/finder.html

@@ -31,16 +31,17 @@
   <script src="../node_modules/codemirror/addon/mode/overlay.js"></script>
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
+  <script src="../node_modules/codemirror/keymap/vim.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
-  <script src="../compiled/raphael.js"></script>
-  <script src="../compiled/flowchart.js"></script>
+  <script src="../node_modules/raphael/raphael.min.js"></script>
+  <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>
 
-  <script src="../compiled/katex.js"></script>
-  <script src="../compiled/react.js"></script>
-  <script src="../compiled/react-dom.js"></script>
-  <script src="../compiled/redux.js"></script>
-  <script src="../compiled/react-redux.js"></script>
+  <script src="../node_modules/katex/dist/katex.min.js"></script>
+  <script src="../node_modules/react/dist/react.min.js"></script>
+  <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
+  <script src="../node_modules/redux/dist/redux.min.js"></script>
+  <script src="../node_modules/react-redux/dist/react-redux.min.js"></script>
   <script>
     window._ = require('lodash');
   </script>

lib/main-app.js

@@ -2,7 +2,6 @@ const electron = require('electron')
 const app = electron.app
 const Menu = electron.Menu
 const ipc = electron.ipcMain
-const autoUpdater = electron.autoUpdater
 const path = require('path')
 const ChildProcess = require('child_process')
 const _ = require('lodash')
@@ -11,9 +10,8 @@ const GhReleases = require('electron-gh-releases')
 var ipcServer = null
 
 var mainWindow = null
-var finderWindow = null
 
-var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) {
+var shouldQuit = app.makeSingleInstance(function (commandLine, workingDirectory) {
   if (mainWindow) {
     if (process.platform === 'win32') {
       mainWindow.minimize()
@@ -26,12 +24,8 @@ var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory)
 
 if (shouldQuit) {
   app.quit()
-  return
 }
 
-var version = app.getVersion()
-var versionText = (version == null || version.length === 0) ? 'DEV version' : 'v' + version
-
 var isUpdateReady = false
 
 var ghReleasesOpts = {
@@ -108,14 +102,12 @@ app.on('ready', function () {
       Menu.setApplicationMenu(menu)
       break
     case 'win32':
+      /* eslint-disable */
       finderWindow = require('./finder-window')
+      /* eslint-disable */
       mainWindow.setMenu(menu)
       break
     case 'linux':
-      // Finder is available on cinnamon only.
-      if (process.env.DESKTOP_SESSION === 'cinnamon') {
-        finderWindow = require('./finder-window')
-      }
       Menu.setApplicationMenu(menu)
       mainWindow.setMenu(menu)
   }

lib/main-menu.js

@@ -59,6 +59,35 @@ var file = {
         mainWindow.webContents.send('top:new-note')
       }
     },
+    {
+      label: 'Focus Note',
+      accelerator: 'Control + E',
+      click () {
+        mainWindow.webContents.send('detail:focus')
+      }
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Export as',
+      submenu: [
+        {
+          label: 'Plain Text (.txt)',
+          click () {
+            mainWindow.webContents.send('list:isMarkdownNote')
+            mainWindow.webContents.send('export:save-text')
+          }
+        },
+        {
+          label: 'MarkDown (.md)',
+          click () {
+            mainWindow.webContents.send('list:isMarkdownNote')
+            mainWindow.webContents.send('export:save-md')
+          }
+        }
+      ]
+    },
     {
       type: 'separator'
     },
@@ -136,6 +165,40 @@ var view = {
       click: function () {
         BrowserWindow.getFocusedWindow().toggleDevTools()
       }
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Next Note',
+      accelerator: 'Control + J',
+      click () {
+        mainWindow.webContents.send('list:next')
+      }
+    },
+    {
+      label: 'Previous Note',
+      accelerator: 'Control + U',
+      click () {
+        mainWindow.webContents.send('list:prior')
+      }
+    },
+    {
+      label: 'Jump to Top',
+      accelerator: 'Control + G',
+      click () {
+        mainWindow.webContents.send('list:jumpToTop')
+      }
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Focus Search',
+      accelerator: 'Control + S',
+      click () {
+        mainWindow.webContents.send('top:focus-search')
+      }
     }
   ]
 }
@@ -169,7 +232,7 @@ var help = {
   submenu: [
     {
       label: 'Boostnote official site',
-      click: function () { shell.openExternal('https://b00st.io/') }
+      click: function () { shell.openExternal('https://boostnote.io/') }
     },
     {
       label: 'Issue Tracker',

lib/main-window.js

@@ -2,12 +2,15 @@ const electron = require('electron')
 const app = electron.app
 const BrowserWindow = electron.BrowserWindow
 const path = require('path')
+const Config = require('electron-config')
+const config = new Config()
 
 var showMenu = process.platform !== 'win32'
+let windowSize = config.get('windowsize') || { width: 1080, height: 720 }
 
-var mainWindow = new BrowserWindow({
-  width: 1080,
-  height: 720,
+let mainWindow = new BrowserWindow({
+  width: windowSize.width,
+  height: windowSize.height,
   minWidth: 500,
   minHeight: 320,
   autoHideMenuBar: showMenu,
@@ -46,6 +49,12 @@ if (process.platform !== 'linux' || process.env.DESKTOP_SESSION === 'cinnamon')
   })
 
   app.on('before-quit', function (e) {
+    try {
+      config.set('windowsize', mainWindow.getBounds())
+    } catch (e) {
+      // ignore any errors because an error occurs only on update
+      // refs: https://github.com/BoostIO/Boostnote/issues/243
+    }
     mainWindow.removeAllListeners()
   })
 } else {

lib/main.html

@@ -57,22 +57,23 @@
   <script src="../node_modules/codemirror/addon/mode/overlay.js"></script>
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
+  <script src="../node_modules/codemirror/keymap/vim.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/continuelist.js"></script>
 
-  <script src="../compiled/raphael.js"></script>
-  <script src="../compiled/flowchart.js"></script>
+  <script src="../node_modules/raphael/raphael.min.js"></script>
+  <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>
   <script>
     window._ = require('lodash')
   </script>
-  <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
 
-  <script src="../compiled/katex.js"></script>
-  <script src="../compiled/react.js"></script>
-  <script src="../compiled/react-dom.js"></script>
-  <script src="../compiled/redux.js"></script>
-  <script src="../compiled/react-redux.js"></script>
+  <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
+  <script src="../node_modules/katex/dist/katex.min.js"></script>
+  <script src="../node_modules/react/dist/react.min.js"></script>
+  <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
+  <script src="../node_modules/redux/dist/redux.min.js"></script>
+  <script src="../node_modules/react-redux/dist/react-redux.min.js"></script>
   <script type='text/javascript'>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)

oh-my-cdn.json

@@ -1,13 +0,0 @@
-{
-  "directory": "compiled",
-  "targets": {
-    "react": "https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js",
-    "react-dom": "https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js",
-    "redux": "https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js",
-    "react-redux": "https://unpkg.com/react-redux@4.4.5/dist/react-redux.min.js",
-    "katex": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js",
-    "katex-style": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css",
-    "raphael": "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js",
-    "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js"
-  }
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.8.0",
+  "version": "0.8.7",
   "description": "Boostnote",
   "main": "index.js",
   "license": "GPL-3.0",
@@ -8,10 +8,10 @@
     "start": "electron ./index.js",
     "hot": "electron ./index.js --hot",
     "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
-    "postinstall": "npm run vendor",
-    "vendor": "oh-my-cdn",
     "compile": "grunt compile",
-    "test": "PWD=$(pwd) NODE_ENV=test ava"
+    "test": "PWD=$(pwd) NODE_ENV=test ava",
+    "fix": "npm run lint --fix",
+    "lint": "eslint ./**/*.js"
   },
   "config": {
     "electron-version": "1.2.8"
@@ -44,15 +44,18 @@
   "bugs": {
     "url": "https://github.com/BoostIO/Boostnote/issues"
   },
-  "homepage": "https://b00st.io",
+  "homepage": "https://boostnote.io",
   "dependencies": {
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",
     "codemirror": "^5.19.0",
+    "electron-config": "^0.2.1",
     "electron-gh-releases": "^2.0.2",
+    "flowchart.js": "^1.6.5",
     "font-awesome": "^4.3.0",
     "immutable": "^3.8.1",
     "js-sequence-diagrams": "^1000000.0.6",
+    "katex": "^0.6.0",
     "lodash": "^4.11.1",
     "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",
@@ -62,6 +65,11 @@
     "mixpanel": "^0.4.1",
     "moment": "^2.10.3",
     "node-ipc": "^8.1.0",
+    "raphael": "^2.2.7",
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
     "sander": "^0.5.1",
     "superagent": "^1.2.0",
     "superagent-promise": "^1.0.3"
@@ -81,6 +89,9 @@
     "dom-storage": "^2.0.2",
     "electron-packager": "^6.0.0",
     "electron-prebuilt": "^1.2.8",
+    "eslint": "^3.13.1",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-config-standard-jsx": "^3.2.0",
     "faker": "^3.1.0",
     "grunt": "^0.4.5",
     "grunt-electron-installer": "^1.2.0",
@@ -88,7 +99,6 @@
     "jsdom": "^9.4.2",
     "merge-stream": "^1.0.0",
     "nib": "^1.1.0",
-    "oh-my-cdn": "^0.1.1",
     "react": "^15.3.0",
     "react-color": "^2.2.2",
     "react-css-modules": "^3.7.6",
@@ -107,14 +117,9 @@
     "grunt-electron-installer-debian": "^0.2.0"
   },
   "optional": false,
-  "standard": {
-    "globals": [
-      "localStorage"
-    ]
-  },
   "ava": {
     "files": [
-      "tests/**/*.js"
+      "tests/**/*-test.js"
     ],
     "require": [
       "babel-register"

readme-ja.md

@@ -1,84 +1,37 @@
-# Boostnote
-
-> [Boostnote store](https://boostnote.paintory.com/)をはじめました!! :tada: そして、[Pateron](https://www.patreon.com/boostnote)からも私達を支援することができます!
+<h1 align="center">
+  <a href="https://github.com/BoostIO/Boostnote"><img src="./resources/app.png" alt="Boostnote" width="180"></a>
+  <br>
+  Boostnote
+  <br>
+  <br>
+</h1>
+<h4 align="center">クールなプログラマーの為の、オープンソースのノートアプリ </h4>
+<h5 align="center">macOS, Windows, Linuxで利用できます。</h5>
+<h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
 
 ![Boostnote app screenshot](./resources/repository/top.png)
 
-オープンソースノートアプリ
-
-次の用務がある場合にはIssue trackerを利用してください。
-- Boostnoteに関して質問したい時
-- Boostnoteや計画事項にフィードバックがしたい時
-- Boostnoteにバグを報告したい時
-- Boostnoteに寄与したい時
-
-## Goal
-
-単に何かを書くのが楽しくなってほしいです。 :grinning:
-
-- ターゲット OS : OSX, Windows, Linux(後々はモバイルも!)
-- Cloud : Google drive, Dropbox, One drive, iCloud...
-- オープンソースで残ること!
-
-## 印象を受けたアプリ/サービス
-
-- Atom
-- Quiver
-- Evernote
-- GitKraken
-- GitBook
-- Gist
-- Gistbox
-- Snippets Lab
-
-
-## Using stack
-
-- Electron
-- React
-- Webpack
-- Redux
-- CSSModules
-
-## Codestyle
-
-[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
-
-## Development
-
-- [Build](docs/build.md)
-
-## Goods
-
-<img src="https://b00st.io/images/t3.png" width="250"/>
-<img src="https://b00st.io/images/t1.png" width="250"/>
-
-[Boostnote store](https://boostnote.paintory.com/)から幾つかのグッズを販売しています。
-
-商品は全世界何処でも届けることができます。このストアは[Paintory](https://paintory.com/)から提供されます。
-
-## Donation
-
-寄付は[Pateron page](https://www.patreon.com/boostnote)からできます。
+[![Build Status](https://travis-ci.org/BoostIO/Boostnote.svg?branch=master)](https://travis-ci.org/BoostIO/Boostnote)
 
 ## Author & Maintainer
-
-[Rokt33r(Dick Choi of MAISIN&CO.)](https://github.com/rokt33r)
+- [Rokt33r](https://github.com/rokt33r)
+- [sota1235](https://github.com/sota1235)
+- [Kohei TAKATA](https://github.com/kohei-takata)
+- [asmsuechan](https://github.com/asmsuechan)
+- [Kazu Yokomizo](https://github.com/kazup01)
 
 ## Contributors
+[Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
 
-- [Kazu Yokomizo](https://github.com/kazup01)
-- [dojineko](https://github.com/dojineko)
-- [Romain Bazile](https://github.com/gromain)
-- [Bruno Paz](https://github.com/brpaz)
-- [Fabian Mueller](https://github.com/dotcs)
-- [Yoshihisa Mochihara](https://github.com/yosmoc)
-- [Mike Resoli](https://github.com/mikeres0)
-- [tjado](https://github.com/tejado)
-- [sota1235](https://github.com/sota1235)
 
-## Copyright & License
+## More Information
+* Website: http://boostnote.io/
+* Roadmap(upcoming features and bug fixes): https://github.com/BoostIO/Boostnote/wiki/List-of-the-requested-features
+* Boostnote Shop(Products are shipped to all over the world :+1:): https://boostnote.paintory.com/
+* Donation: [Patreon](https://www.patreon.com/boostnote)
+* Development: https://github.com/BoostIO/Boostnote/blob/master/docs/build.md
+* Copyright (C) 2017 Maisin&Co.
 
-Copyright (C) 2016 MAISIN&CO.
+## License
 
 [GPL v3](./LICENSE).

readme-ko.md

@@ -1,85 +0,0 @@
-# Boostnote
-
-> [Boostnote store](https://boostnote.paintory.com/)가 생겼습니다!! :tada: 그리고,[Pateron](https://www.patreon.com/boostnote)에서도 저희를 지원 하실 수 있습니다.!
-
-![Boostnote app screenshot](./resources/repository/top.png)
-
-오픈소스 노트 앱
-
-다음과 같은 용무가 있는 경우 이슈트래커를 이용해 주세요.
-- Boostnote에 대해 질문을 하고 싶을 때
-- Boostnote나 계획사항에 대해 피드백을 주고 싶을 때
-- Boostnote에 버그를 보고하고 싶을 때
-- Boostnote에 기여하고 싶을 때
-
-저흰 Slack을 운영하고 있습니다. 혹시 좀 더 저희들과 깊게 관여하고 싶으시다면 @rokt33r에 초대를 부탁하세요.
-
-## Goal
-
-그냥 글쓰는게 즐거워지셨으면 좋겠어요. :grinning:
-
-- 타겟 OS : OSX, Windows, Linux(나중엔 모바일까지도!)
-- Cloud : Google drive, Dropbox, One drive, iCloud...
-- 오픈소스로 남을 것!
-
-## 영감받은 앱/서비스
-
-- Atom
-- Quiver
-- Evernote
-- GitKraken
-- GitBook
-- Gist
-- Gistbox
-- Snippets Lab
-
-## Using stack
-
-- Electron
-- React
-- Webpack
-- Redux
-- CSSModules
-
-## Codestyle
-
-[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
-
-## Development
-
-- [Build](docs/build.md)
-
-## Goods
-
-<img src="https://b00st.io/images/t3.png" width="250"/>
-<img src="https://b00st.io/images/t1.png" width="250"/>
-
-[Boostnote store](https://boostnote.paintory.com/)에서 몇가지 상품들을 팔고있습니다.
-
-전세계 어디든 배송 가능합니다. 이 스토어는 [Paintory](https://paintory.com/)에서 제공됩니다.
-
-## Donation
-
-[Pateron page](https://www.patreon.com/boostnote)에서 기부 하실 수 있습니다.
-
-## Author & Maintainer
-
-[Rokt33r(Dick Choi of MAISIN&CO.)](https://github.com/rokt33r)
-
-## Contributors
-
-- [Kazu Yokomizo](https://github.com/kazup01)
-- [dojineko](https://github.com/dojineko)
-- [Romain Bazile](https://github.com/gromain)
-- [Bruno Paz](https://github.com/brpaz)
-- [Fabian Mueller](https://github.com/dotcs)
-- [Yoshihisa Mochihara](https://github.com/yosmoc)
-- [Mike Resoli](https://github.com/mikeres0)
-- [tjado](https://github.com/tejado)
-- [sota1235](https://github.com/sota1235)
-
-## Copyright & License
-
-Copyright (C) 2016 MAISIN&CO.
-
-[GPL v3](./LICENSE).

readme.md

@@ -5,68 +5,33 @@
   <br>
   <br>
 </h1>
-<h4 align="center">Note app built for developers. </h4>
+<h4 align="center">Note-taking app for programmers. </h4>
 <h5 align="center">macOS, Windows and Linux</h5>
 <h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
-<h1> </h1>
-
-> We launched our [Boostnote store](https://boostnote.paintory.com/)!! :tada: Also, you can support us via [Patreon](https://www.patreon.com/boostnote) and [Open collective](https://opencollective.com/boostnote)!
 
 ![Boostnote app screenshot](./resources/repository/top.png)
 
-[日本語](./readme-ja.md) - [한국어](./readme-ko.md)
-
-## Goals
-* We want our users to enjoying writing _anything_. :grinning:
-* Open sourced forever!
-
-See upcoming features and bug fixes [here](https://github.com/BoostIO/Boostnote/issues/68)
-## Feedback
-Please use the [issue tracker](https://github.com/BoostIO/Boostnote/issues) for questions, bug reporting and contribution information.
-
-## Development
-If you want to join our dev Slack group ask @rokt33r.
-**[Build instructions](docs/build.md)**
-
-[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
-
-## Inspirations
-- Atom
-- Quiver
-- Evernote
-- GitKraken
-- GitBook
-- Gist
-- Gistbox
-- Snippets Lab
-
-## Store
-<img src="https://b00st.io/images/t3.png" width="250"/>
-<img src="https://b00st.io/images/t1.png" width="250"/>
-
-We're selling Boostnote goods on the [Boostnote store](https://boostnote.paintory.com/).
-
-Products are shipped worldwide. Powered by [Paintory](https://paintory.com/)
-
-## Donation
-* [Patreon](https://www.patreon.com/boostnote)
-* [Open collective](https://opencollective.com/boostnote)
+[![Build Status](https://travis-ci.org/BoostIO/Boostnote.svg?branch=master)](https://travis-ci.org/BoostIO/Boostnote)
 
 ## Author & Maintainer
-[Rokt33r(Dick Choi of MAISIN&CO.)](https://github.com/rokt33r)
+- [Rokt33r](https://github.com/rokt33r)
+- [sota1235](https://github.com/sota1235)
+- [Kohei TAKATA](https://github.com/kohei-takata)
+- [asmsuechan](https://github.com/asmsuechan)
+- [Kazu Yokomizo](https://github.com/kazup01)
 
 ## Contributors
-- [Kazu Yokomizo](https://github.com/kazup01)
-- [dojineko](https://github.com/dojineko)
-- [Romain Bazile](https://github.com/gromain)
-- [Bruno Paz](https://github.com/brpaz)
-- [Fabian Mueller](https://github.com/dotcs)
-- [Yoshihisa Mochihara](https://github.com/yosmoc)
-- [Mike Resoli](https://github.com/mikeres0)
-- [tjado](https://github.com/tejado)
-- [sota1235](https://github.com/sota1235)
+[Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
 
-## Copyright & License
-Copyright (C) 2016 MAISIN&CO.
+
+## More Information
+* Website: http://boostnote.io/
+* Roadmap(upcoming features and bug fixes): https://github.com/BoostIO/Boostnote/wiki/List-of-the-requested-features
+* Boostnote Shop(Products are shipped to all over the world :+1:): https://boostnote.paintory.com/
+* Donation: [Patreon](https://www.patreon.com/boostnote)
+* Development: https://github.com/BoostIO/Boostnote/blob/master/docs/build.md
+* Copyright (C) 2017 Maisin&Co.
+
+## License
 
 [GPL v3](./LICENSE).

tests/dataApi/init.js

@@ -36,7 +36,7 @@ test.beforeEach((t) => {
 })
 
 test.serial('Initialize All Storages', (t) => {
-  const { v1StorageData, legacyStorageData, emptyStorageData } = t.context
+  const { v1StorageData, legacyStorageData } = t.context
   return Promise.resolve()
     .then(function test () {
       return init()

tests/dataApi/moveNote-test.js

@@ -12,7 +12,6 @@ const TestDummy = require('../fixtures/TestDummy')
 const sander = require('sander')
 const os = require('os')
 const CSON = require('@rokt33r/season')
-const faker = require('faker')
 
 const storagePath = path.join(os.tmpdir(), 'test/move-note')
 const storagePath2 = path.join(os.tmpdir(), 'test/move-note2')