v0.8.10

Add notification on a copy button clicked

.eslintrc

@@ -1,6 +1,10 @@
 {
   "extends": ["standard", "standard-jsx"],
   "rules": {
-    "no-useless-escape": 0
+    "no-useless-escape": 0,
+    "prefer-const": "warn",
+    "no-unused-vars": "warn",
+    "no-undef": "warn",
+    "no-lone-blocks": "warn"
   }
 }

.travis.yml

@@ -1,6 +1,26 @@
 language: node_js
-node_js:
-  - 'stable'
-  - 'lts/*'
-
-script: npm run lint && npm run test
+# To fix the npm version in 4.x
+# refs: https://github.com/travis-ci/travis-ci/issues/4653#issuecomment-194051953
+before_install: 'if [[ `npm -v` != 4* ]]; then npm i -g npm@4; fi'
+matrix:
+  include:
+    - os: osx
+      install:
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" ]]; then yarn; fi'
+      node_js:
+        - 'stable'
+        - 'lts/*'
+      script:
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" && ${TRAVIS_NODE_VERSION} = "stable" ]]; then
+             npm run lint;
+             npm run test;
+             ./script/e2e-runner.sh;
+           fi'
+    - os: linux
+      node_js:
+        - 'stable'
+        - 'lts/*'
+      script:
+        - 'npm run lint'
+        - 'npm run test'
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" && ${TRAVIS_NODE_VERSION} = "stable" ]]; then ./script/e2e-runner.sh; fi'

LICENSE

@@ -1,8 +1,8 @@
 GPL-3.0
 
-Boostnote - the simplest note app
+Boostnote - an open source note-taking app made for programmers just like you.
 
-Copyright (C) 2016 MAISIN&CO.
+Copyright (C) 2017 Maisin&Co., Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by

browser/components/CodeEditor.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import path from 'path'
+import copyImage from 'browser/main/lib/dataApi/copyImage'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -55,20 +56,35 @@ export default class CodeEditor extends React.Component {
       indentWithTabs: this.props.indentType !== 'space',
       keyMap: this.props.keyMap,
       inputStyle: 'textarea',
+      dragDrop: false,
       extraKeys: {
         Tab: function (cm) {
+          const cursor = cm.getCursor()
+          const line = cm.getLine(cursor.line)
           if (cm.somethingSelected()) cm.indentSelection('add')
           else {
-            if (cm.getOption('indentWithTabs')) {
-              cm.execCommand('insertTab')
+            const tabs = cm.getOption('indentWithTabs')
+            if (line.trimLeft() === '- ' || line.trimLeft() === '* ' || line.trimLeft() === '+ ') {
+              cm.execCommand('goLineStart')
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
+              cm.execCommand('goLineEnd')
             } else {
-              cm.execCommand('insertSoftTab')
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
             }
           }
         },
         'Cmd-T': function (cm) {
           // Do nothing
-        }
+        },
+        Enter: 'newlineAndIndentContinueMarkdownList'
       }
     })
 
@@ -156,6 +172,7 @@ export default class CodeEditor extends React.Component {
     this.editor.setValue(this.props.value)
     this.editor.clearHistory()
     this.editor.on('change', this.changeHandler)
+    this.editor.refresh()
   }
 
   setValue (value) {
@@ -166,15 +183,18 @@ export default class CodeEditor extends React.Component {
 
   handleDropImage (e) {
     e.preventDefault()
-    let imagePath = e.dataTransfer.files[0].path
-    let filename = path.basename(imagePath)
-    let imageMd = `![${filename}](${imagePath})`
-    this.insertImage(imageMd)
+    const imagePath = e.dataTransfer.files[0].path
+    const filename = path.basename(imagePath)
+
+    copyImage(imagePath, this.props.storageKey).then((imagePathInTheStorage) => {
+      const imageMd = `![${encodeURI(filename)}](${imagePathInTheStorage})`
+      this.insertImageMd(imageMd)
+    })
   }
 
-  insertImage (imageMd) {
-    const textarea = this.editor.getInputField()
-    textarea.value = textarea.value.substr(0, textarea.selectionStart) + imageMd + textarea.value.substr(textarea.selectionEnd)
+  insertImageMd (imageMd) {
+    const cm = this.editor
+    cm.setValue(cm.getValue() + imageMd)
   }
 
   render () {

browser/components/MarkdownEditor.js

@@ -3,22 +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']
+    // char codes for ctrl + w
+    this.escapeFromEditor = [17, 87]
+
+    // ctrl + shift + ;
+    this.supportMdSelectionBold = [16, 17, 186]
 
     this.state = {
       status: 'PREVIEW',
       renderValue: props.value,
-      keyPressed: {}
+      keyPressed: new Set(),
+      isLocked: false
     }
+
+    this.lockEditorCode = () => this.handleLockEditor()
   }
 
   componentDidMount () {
     this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
   }
 
   componentDidUpdate () {
@@ -33,6 +42,7 @@ class MarkdownEditor extends React.Component {
 
   componentWillUnmount () {
     this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
   }
 
   queueRendering (value) {
@@ -72,12 +82,14 @@ class MarkdownEditor extends React.Component {
           this.refs.code.blur()
           this.refs.preview.focus()
         }
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
       })
     }
   }
 
   handleBlur (e) {
-    this.setState({ keyPressed: [] })
+    if (this.state.isLocked) return
+    this.setState({ keyPressed: new Set() })
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
       let cursorPosition = this.refs.code.editor.getCursor()
@@ -87,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)
     }
   }
 
@@ -102,6 +115,7 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.code.focus()
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -138,6 +152,7 @@ class MarkdownEditor extends React.Component {
     } else {
       this.refs.code.focus()
     }
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
   }
 
   reload () {
@@ -146,26 +161,49 @@ class MarkdownEditor extends React.Component {
     this.renderPreview(this.props.value)
   }
 
-  handleKeyDown(e) {
-    const keyPressed = Object.assign(this.state.keyPressed, {
-      [e.key]: true
-    })
+  handleKeyDown (e) {
+    if (this.state.status !== 'CODE') return false
+    const keyPressed = this.state.keyPressed
+    keyPressed.add(e.keyCode)
     this.setState({ keyPressed })
-    let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] }
-    if (this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
+    let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    if (keyPressed.size === this.escapeFromEditor.length &&
+        !this.state.isLocked && this.state.status === 'CODE' &&
+        this.escapeFromEditor.every(isNoteHandlerKey)) {
       document.activeElement.blur()
     }
+    if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+      this.addMdAroundWord('**')
+    }
+  }
+
+  addMdAroundWord (mdElement) {
+    if (this.refs.code.editor.getSelection()) {
+      return this.addMdAroundSelection(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 })
+  }
+
+  addMdAroundSelection (mdElement) {
+    this.refs.code.editor.replaceSelection(`${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`)
   }
 
   handleKeyUp (e) {
-    const keyPressed = Object.assign(this.state.keyPressed, {
-      [e.key]: false
-    })
+    const keyPressed = this.state.keyPressed
+    keyPressed.delete(e.keyCode)
     this.setState({ keyPressed })
   }
 
+  handleLockEditor () {
+    this.setState({ isLocked: !this.state.isLocked })
+  }
+
   render () {
-    let { className, value, config } = this.props
+    let { className, value, config, storageKey } = this.props
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -185,7 +223,10 @@ class MarkdownEditor extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
         onKeyUp={(e) => this.handleKeyUp(e)}
       >
-        <CodeEditor styleName='codeEditor'
+        <CodeEditor styleName={this.state.status === 'CODE'
+            ? 'codeEditor'
+            : 'codeEditor--hide'
+          }
           ref='code'
           mode='GitHub Flavored Markdown'
           value={value}
@@ -195,6 +236,7 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          storageKey={storageKey}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
         />

browser/components/MarkdownEditor.styl

@@ -4,8 +4,14 @@
 .codeEditor
   absolute top bottom left right
 
+.hide
+  z-index 0
+  opacity 0
+  pointer-events none
+
 .codeEditor--hide
   @extend .codeEditor
+  @extend .hide
 
 .preview
   display block
@@ -17,7 +23,5 @@
 
 .preview--hide
   @extend .preview
-  z-index 0
-  opacity 0
-  pointer-events none
+  @extend .hide
 

browser/components/MarkdownPreview.js

@@ -8,21 +8,8 @@ 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 = [
-    ['apos', '\''],
-    ['amp', '&'],
-    ['lt', '<'],
-    ['gt', '>']
-  ]
-
-  for (var i = 0, max = entities.length; i < max; ++i) {
-    text = text.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1])
-  }
-
-  return text
-}
+import htmlTextHelper from 'browser/lib/htmlTextHelper'
+import copy from 'copy-to-clipboard'
 
 const { remote } = require('electron')
 const { app } = remote
@@ -60,6 +47,26 @@ code {
   font-family: ${codeBlockFontFamily.join(', ')};
 }
 
+.clipboardButton {
+  color: rgba(147,147,149,0.8);;
+  fill: rgba(147,147,149,1);;
+  border-radius: 50%;
+  margin: 7px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+}
+
+.clipboardButton:hover {
+  transition: 0.2s;
+  color: #939395;
+  fill: #939395;
+  background-color: rgba(0,0,0,0.1);
+}
+
 h1, h2 {
   border: none;
 }
@@ -73,6 +80,10 @@ h2 {
   padding-bottom: 0.2em;
   margin: 1em 0 0.37em;
 }
+
+body p {
+  white-space: normal;
+}
 `
 }
 
@@ -152,7 +163,7 @@ export default class MarkdownPreview extends React.Component {
   exportAsDocument (fileType) {
     const options = {
       filters: [
-        { name: 'Documents', extensions: [fileType]}
+        { name: 'Documents', extensions: [fileType] }
       ],
       properties: ['openFile', 'createDirectory']
     }
@@ -181,6 +192,8 @@ 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)
   }
@@ -189,6 +202,8 @@ export default class MarkdownPreview extends React.Component {
     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)
   }
@@ -237,8 +252,19 @@ export default class MarkdownPreview extends React.Component {
     let { value, theme, indentSize, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
+
+    const codeBlocks = value.match(/(```)(.|[\n])*?(```)/g)
+    if (codeBlocks !== null) {
+      codeBlocks.forEach((codeBlock) => {
+        value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
+      })
+    }
     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)
     })
@@ -255,7 +281,17 @@ 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 = htmlTextHelper.decodeEntities(el.innerHTML)
+        const copyIcon = document.createElement('i')
+        copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
+        copyIcon.onclick = (e) => {
+          copy(content)
+          this.notify('Saved to Clipboard!', {
+            body: 'Paste it wherever you want!',
+            silent: true
+          })
+        }
+        el.parentNode.appendChild(copyIcon)
         el.innerHTML = ''
         el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
         CodeMirror.runMode(content, syntax.mime, el, {
@@ -273,7 +309,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = flowchart.parse(decodeHTMLEntities(el.innerHTML))
+        let diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, opts)
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -289,7 +325,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = SequenceDiagram.parse(decodeHTMLEntities(el.innerHTML))
+        let diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, {theme: 'simple'})
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -325,6 +361,18 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
+  preventImageDroppedHandler (e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  notify (title, options) {
+    if (global.process.platform === 'win32') {
+      options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
+    }
+    return new window.Notification(title, options)
+  }
+
   render () {
     let { className, style, tabIndex } = this.props
     return (

browser/components/ModalEscButton.js

@@ -0,0 +1,18 @@
+import React, {PropTypes} from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ModalEscButton.styl'
+
+const ModalEscButton = ({
+  handleEscButtonClick
+}) => (
+  <button styleName='escButton' onClick={handleEscButtonClick}>
+    <div styleName='esc-mark'>x</div>
+    <div styleName='esc-text'>esc</div>
+  </button>
+)
+
+ModalEscButton.propTypes = {
+  handleEscButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(ModalEscButton, styles)

browser/components/ModalEscButton.styl

@@ -0,0 +1,14 @@
+.escButton
+  height 50px
+  position absolute
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 1px
+  right 10px
+  text-align center
+  width top-bar--height
+  height top-bar-height
+
+.esc-mark
+  font-size 15px

browser/components/NoteItem.js

@@ -13,7 +13,7 @@ import styles from './NoteItem.styl'
  */
 const TagElement = ({ tagName }) => (
   <span styleName='item-bottom-tagList-item' key={tagName}>
-    {tagName}
+    #{tagName}
   </span>
 )
 
@@ -40,9 +40,10 @@ const TagElementList = (tags) => {
  * @param {Object} note
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
  * @param {string} dateDisplay
  */
-const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu }) => (
+const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart }) => (
   <div styleName={isActive
       ? 'item--active'
       : 'item'
@@ -50,10 +51,14 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
   >
     <div styleName='item-wrapper'>
-      <div styleName='item-bottom-time'>{dateDisplay}</div>
-
+      {note.type === 'SNIPPET_NOTE'
+        ? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
+        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
+      }
       <div styleName='item-title'>
         {note.title.trim().length > 0
           ? note.title
@@ -61,23 +66,18 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
         }
       </div>
 
+      <div styleName='item-bottom-time'>{dateDisplay}</div>
+      {note.isStarred
+        ? <i styleName='item-star' className='fa fa-star' /> : ''
+      }
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
             ? TagElementList(note.tags)
-            : ''
+            : <span styleName='item-bottom-tagList-empty' />
           }
         </div>
       </div>
-
-      {note.type === 'SNIPPET_NOTE'
-        ? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
-        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
-      }
-
-      {note.isStarred
-        ? <i styleName='item-star' className='fa fa-star' /> : ''
-      }
     </div>
   </div>
 )
@@ -94,7 +94,9 @@ NoteItem.propTypes = {
     isStarred: PropTypes.bool.isRequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired,
+  handleDragEnd: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -7,63 +7,72 @@ $control-height = 30px
 
 .item
   position relative
-  padding 0 25px
+  padding 0 20px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.15s
+  transition background-color 0.2s
   &:hover
-    background-color alpha($ui-active-color, 20%)
-  &:active
-    background-color $ui-active-color
-    color white
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     .item-title
-    .item-title-empty
-    .item-bottom-tagList-empty
-    .item-bottom-time
     .item-title-icon
-      color white
+    .item-bottom-time
+      transition 0.15s
+      color $ui-text-color
     .item-bottom-tagList-item
-      background-color transparent
-      color white
+      background-color alpha(white, 0.6)
+      color $ui-text-color
+    .item-star
+      color $ui-favorite-star-button-color
+  &:active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      transition 0.15s
+      color $ui-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 0.6)
+      color $ui-text-color
 
 .item-wrapper
-  padding 20px 0
+  padding 15px 0
   border-bottom $ui-border
 
 .item--active
   @extend .item
-  background-color $ui-active-color
-  color white
+  background-color $ui-button--active-backgroundColor
+  color $ui-text-color
   .item-title
   .item-title-empty
   .item-bottom-tagList-empty
   .item-bottom-time
   .item-title-icon
-    color white
+    color $ui-text-color
   .item-bottom-tagList-item
-    background-color transparent
-    color white
+    background-color alpha(white, 0.6)
+    color $ui-text-color
   .item-wrapper
     border-color transparent
+  .item-star
+    color $ui-favorite-star-button-color
   &:hover
-    background-color $ui-active-color
-
-.item-title
-  font-size 14px
-  height 40px
-  box-sizing border-box
-  line-height 24px
-  padding-top 5px
-  padding-bottom 20px
-  overflow ellipsis
-  color $ui-text-color
+    background-color $ui-button--active-backgroundColor
 
 .item-title-icon
-  position absolute
-  top 20px
-  right 25px
-  font-size 14px
+  position relative
+  font-size 12px
+  color $ui-inactive-text-color
+
+.item-title
+  font-size 13px
+  position relative
+  top -12px
+  left 20px
+  padding-right 15px
+  padding-bottom 4px
+  overflow ellipsis
   color $ui-inactive-text-color
 
 .item-title-empty
@@ -74,7 +83,6 @@ $control-height = 30px
   position relative
   bottom 0px
   margin-top 2px
-  height 20px
   font-size 12px
   line-height 20px
   overflow ellipsis
@@ -84,37 +92,35 @@ $control-height = 30px
   flex 1
   overflow ellipsis
   line-height 20px
-  color #FFFFFF
+  padding-top 2px
+  padding-left 2px
 
 .item-bottom-tagList-item
-  font-size 12px
+  font-size 10px
   margin-right 8px
-  padding 0 10px
+  padding 0
   height 20px
   box-sizing border-box
-  border-radius 20px
+  border-radius 2px
+  padding 1px 2px
   vertical-align middle
-  background-color $ui-tag-backgroundColor
-  color #FFFFFF
-
-.item-bottom-tagList-empty
+  background-color white
   color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
 
 .item-bottom-time
   color $ui-inactive-text-color
-  font-size 12px
+  font-size 10px
+  padding-left 2px
+  padding-bottom 2px
 
 .item-star
   position absolute
-  top 20px
-  right 29px
+  top 34px
+  left 5px
   width 34px
   height 34px
-  color $ui-favorite-star-button-color
-  font-size 14px
+  color alpha($ui-favorite-star-button-color, 60%)
+  font-size 12px
   padding 0
   border-radius 17px
 
@@ -126,42 +132,59 @@ body[data-theme="dark"]
   .item
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
-    &:active
-      background-color $ui-active-color
     &:hover
-      background-color alpha($ui-active-color, 20%)
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color  
 
   .item-wrapper
-    border-color $ui-dark-borderColor
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
 
   .item--active
-    @extend .item
     border-color $ui-dark-borderColor
-    background-color $ui-active-color
+    background-color $ui-dark-button--active-backgroundColor
     .item-wrapper
       border-color transparent
     .item-title
-      color white
+    .item-title-icon
+    .item-bottom-time
+      color $ui-dark-text-color
     .item-bottom-tagList-item
-      background-color transparent
-      color white
-    .item-bottom-tagList-empty
-      color white
-    &:hover
-      background-color $ui-active-color
+      background-color alpha(white, 10%)
+      color $ui-dark-text-color
 
   .item-title
-    color $ui-dark-text-color
+    color $ui-inactive-text-color
 
   .item-title-icon
-    color $ui-darkinactive-text-color
+    color $ui-inactive-text-color
 
   .item-title-empty
-    color $ui-dark-inactive-text-color
+    color $ui-inactive-text-color
 
   .item-bottom-tagList-item
-    background-color $ui-dark-tag-backgroundColor
-    color $ui-dark-text-color
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
 
   .item-bottom-tagList-empty
     color $ui-inactive-text-color

browser/components/NoteItemSimple.js

@@ -11,8 +11,9 @@ import styles from './NoteItemSimple.styl'
  * @param {Object} note
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenum, handleDragStart }) => (
   <div styleName={isActive
       ? 'item-simple--active'
       : 'item-simple'
@@ -20,6 +21,8 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
   >
     <div styleName='item-simple-title'>
       {note.type === 'SNIPPET_NOTE'
@@ -43,7 +46,8 @@ NoteItemSimple.propTypes = {
     title: PropTypes.string.isrequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItemSimple, styles)

browser/components/NoteItemSimple.styl

@@ -13,36 +13,40 @@ $control-height = 30px
   background-color $ui-noteList-backgroundColor
   transition background-color 0.15s
   &:hover
-    background-color alpha($ui-active-color, 20%)
-  &:active
-    background-color $ui-active-color
-    color white
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     .item-simple-title
     .item-simple-title-empty
     .item-simple-title-icon
-      color white
+      color $ui-text-color
+  &:active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color $ui-text-color
 
 .item-simple--active
   @extend .item-simple
-  background-color $ui-active-color
-  color white
+  background-color $ui-button--active-backgroundColor
+  color $ui-text-color
   .item-simple-title
   .item-simple-title-empty
     border-color transparent
-    color white
+    color $ui-text-color
   .item-simple-title-icon
-    color white
+    color $ui-text-color
   &:hover
-    background-color $ui-active-color
+    background-color $ui-button--active-backgroundColor
 
 .item-simple-title
-  font-size 14px
+  font-size 12px
   height 40px
   box-sizing border-box
   line-height 24px
   padding-top 8px
   overflow ellipsis
-  color $ui-text-color
+  color $ui-inactive-text-color
   border-bottom $ui-border
 
 .item-simple-title-icon
@@ -63,24 +67,36 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
     &:active
-      background-color $ui-active-color
+      background-color $ui-dark-button--active-backgroundColor
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-active-color, 20%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        color $ui-dark-text-color
 
   .item-simple--active
-    @extend .item-simple
     border-color $ui-dark-borderColor
-    background-color $ui-active-color
+    background-color $ui-dark-button--active-backgroundColor
     .item-simple-title
-    .item-simple-title-empty
-      color white
-      border-color transparent
-    &:hover
-      background-color $ui-active-color
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-dark-text-color
+    .item-simple-bottom-tagList-item
+      background-color transparent
+      color $ui-dark-text-color
 
   .item-simple-title
-    color $ui-dark-text-color
-    border-color $ui-dark-borderColor
+    color $ui-inactive-text-color
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
 
   .item-simple-title-icon
     color $ui-darkinactive-text-color

browser/components/ProfileImage.js

@@ -1,24 +0,0 @@
-import React, { PropTypes } from 'react'
-import md5 from 'md5'
-
-export default class ProfileImage extends React.Component {
-  render () {
-    let className = this.props.className == null ? 'ProfileImage' : 'ProfileImage ' + this.props.className
-    let email = this.props.email != null ? this.props.email : ''
-    let src = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=' + this.props.size
-
-    return (
-      <img
-        className={className}
-        width={this.props.size}
-        height={this.props.size}
-        src={src} />
-    )
-  }
-}
-
-ProfileImage.propTypes = {
-  email: PropTypes.string,
-  size: PropTypes.string,
-  className: PropTypes.string
-}

browser/components/SideNavFilter.js

@@ -21,10 +21,10 @@ const SideNavFilter = ({
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
-      <i className='fa fa-book fa-fw' />
+      <i className='fa fa-archive fa-fw' />
       <span styleName='menu-button-label'>All Notes</span>
     </button>
-    <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
+    <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
       onClick={handleStarredButtonClick}
     >
       <i className='fa fa-star fa-fw' />

browser/components/SideNavFilter.styl

@@ -5,17 +5,44 @@
   navButtonColor()
   height 32px
   padding 0 15px
-  font-size 14px
+  font-size 12px
   width 100%
   text-align left
   overflow ellipsis
 
 .menu-button--active
   @extend .menu-button
+  color #e74c3c
   background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
+  .menu-button-label
+    color $ui-text-color
   &:hover
     background-color $ui-button--active-backgroundColor
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+
+.menu-button-star--active
+  @extend .menu-button
+  color #F9BF3B
+  background-color $ui-button--active-backgroundColor
+  .menu-button-label
+    color $ui-text-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+    color #F9BF3B
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
+    color #F9BF3B
+    .menu-button-label
+      color $ui-text-color
 
 .menu-button-label
   margin-left 5px
@@ -48,11 +75,31 @@
 
 body[data-theme="dark"]
   .menu-button
-    navDarkButtonColor()
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
 
   .menu-button--active
-    @extend .menu-button
+    color #c0392b
     background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
+    .menu-button-label
+      color $ui-dark-text-color
     &:hover
       background-color $ui-dark-button--active-backgroundColor
+      color #c0392b
+      .menu-button-label
+        color $ui-dark-text-color
+
+  .menu-button-star--active
+    color $ui-favorite-star-button-color
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-favorite-star-button-color
+      .menu-button-label
+        color $ui-dark-text-color

browser/components/SnippetTab.js

@@ -96,6 +96,7 @@ class SnippetTab extends React.Component {
         {!this.state.isRenaming
           ? <button styleName='button'
             onClick={(e) => this.handleClick(e)}
+            onDoubleClick={(e) => this.handleRenameClick(e)}
             onContextMenu={(e) => this.handleContextMenu(e)}
           >
             {snippet.name.trim().length > 0

browser/components/SnippetTab.styl

@@ -60,7 +60,7 @@ body[data-theme="dark"]
         &:hover
           background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
-          color white
+          color $ui-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .root--active
@@ -73,7 +73,7 @@ body[data-theme="dark"]
         &:hover
           background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
-          color white
+          color $ui-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .button
@@ -83,9 +83,9 @@ body[data-theme="dark"]
     transition color background-color 0.15s
     border-left 4px solid transparent
     &:hover
-      color white
+      color $ui-dark-text-color
       background-color $ui-dark-button--hover-backgroundColor
 
   .input
     background-color $ui-dark-button--hover-backgroundColor
-    color white
+    color $ui-dark-text-color

browser/components/StorageItem.js

@@ -14,11 +14,14 @@ import { isNumber } from 'lodash'
  * @param {string} folderColor
  * @param {boolean} isFolded
  * @param {number} noteCount
+ * @param {Function} handleDrop
+ * @param {Function} handleDragEnter
+ * @param {Function} handleDragOut
  * @return {React.Component}
  */
 const StorageItem = ({
   isActive, handleButtonClick, handleContextMenu, folderName,
-  folderColor, isFolded, noteCount
+  folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
 }) => (
   <button styleName={isActive
       ? 'folderList-item--active'
@@ -26,6 +29,9 @@ const StorageItem = ({
     }
     onClick={handleButtonClick}
     onContextMenu={handleContextMenu}
+    onDrop={handleDrop}
+    onDragEnter={handleDragEnter}
+    onDragLeave={handleDragLeave}
   >
     <span styleName={isFolded
       ? 'folderList-item-name--folded' : 'folderList-item-name'
@@ -52,6 +58,8 @@ StorageItem.propTypes = {
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,
   isFolded: PropTypes.bool.isRequired,
+  handleDragEnter: PropTypes.func.isRequired,
+  handleDragLeave: PropTypes.func.isRequired,
   noteCount: PropTypes.number
 }
 

browser/components/StorageItem.styl

@@ -13,30 +13,32 @@
   text-align left
   border none
   overflow ellipsis
-  font-size 14px
+  font-size 12px
   &:first-child
     margin-top 0
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition background-color 0.15s
   &:active
-    color $ui-button--active-color
+    color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
 .folderList-item--active
   @extend .folderList-item
-  color $ui-button--active-color
+  color $ui-text-color
   background-color $ui-button--active-backgroundColor
   &:hover
-    color $ui-button--active-color
+    color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
 .folderList-item-name
   display block
   flex 1
-  padding 0 30px
+  padding 0 25px
   height 26px
   line-height 26px
-  border-width 0 0 0 3px
+  border-width 0 0 0 2px
   border-style solid
   border-color transparent
   overflow hidden
@@ -67,4 +69,24 @@
 
 .folderList-item-name--folded
   @extend .folderList-item-name
-  padding-left 14px
+  padding-left 12px
+
+
+body[data-theme="dark"]
+  .folderList-item
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-dark-text-color
+    background-color $ui-dark-button--active-backgroundColor
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+    &:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor

browser/components/TodoListPercentage.styl

@@ -0,0 +1,31 @@
+.percentageBar
+  position absolute
+  top 58px
+  right: 0px
+  left 0px
+  background-color #DADFE1
+  width 100%
+  height: 15px
+  font-size: 12px
+  z-index 100
+  border-radius 2px
+
+.progressBar
+  background-color: #6C7A89
+  height 15px
+  border-radius 2px
+  transition 0.3s
+
+.percentageText
+  color #f4f4f4
+  padding: 2px 43%
+
+body[data-theme="dark"]
+  .percentageBar
+    background-color #363A3D
+
+  .progressBar
+    background-color: alpha(#939395, 50%)
+
+  .percentageText
+    color $ui-dark-text-color

browser/components/TodolistPercentage.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Percentage of todo achievement.
+ */
+
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TodoListPercentage.styl'
+
+/**
+ * @param {number} percentageOfTodo
+ */
+
+const TodoListPercentage = ({
+  percentageOfTodo
+}) => (
+  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
+    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
+      <p styleName='percentageText'>{percentageOfTodo}%</p>
+    </div>
+  </div>
+)
+
+TodoListPercentage.propTypes = {
+  percentageOfTodo: PropTypes.number.isRequired
+}
+
+export default CSSModules(TodoListPercentage, styles)

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
@@ -272,7 +270,7 @@ table
         border-right solid 1px borderColor
 
 themeDarkBackground = darken(#21252B, 10%)
-themeDarkText = #DDDDDD
+themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
 themeDarkPreview = $ui-dark-noteDetail-backgroundColor
 themeDarkTableOdd = themeDarkPreview
@@ -290,8 +288,9 @@ body[data-theme="dark"]
     background-color alpha(lighten(brandColor, 30%), 0.2) !important
 
   code
+    color #EA6730
     border-color darken(themeDarkBorder, 10%)
-    background-color lighten(themeDarkPreview, 10%)
+    background-color lighten(themeDarkPreview, 5%)
 
   pre
     border-color lighten(#21252B, 20%)

browser/finder/index.js

@@ -10,6 +10,7 @@ import StorageSection from './StorageSection'
 import NoteList from './NoteList'
 import NoteDetail from './NoteDetail'
 import SideNavFilter from 'browser/components/SideNavFilter'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 require('!!style!css!stylus?sourceMap!../main/global.styl')
 require('../lib/customMeta')
 
@@ -68,7 +69,7 @@ class FinderMain extends React.Component {
 
   handleWindowBlur (e) {
     this.setState({
-      search: '',
+      search: ''
     })
   }
 
@@ -94,6 +95,7 @@ class FinderMain extends React.Component {
 
     if (e.keyCode === 13) {
       this.refs.detail.saveToClipboard()
+      AwsMobileAnalyticsConfig.recordDynamitCustomEvent('COPY_FINDER')
       hideFinder()
       e.preventDefault()
     }

browser/lib/findNoteTitle.js

@@ -0,0 +1,33 @@
+export function findNoteTitle (value) {
+  let splitted = value.split('\n')
+  let title = null
+  let isInsideCodeBlock = false
+
+  splitted.some((line, index) => {
+    let trimmedLine = line.trim()
+    let trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+    if (trimmedLine.match('```')) {
+      isInsideCodeBlock = !isInsideCodeBlock
+    }
+    if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
+      title = trimmedLine
+      return true
+    }
+  })
+
+  if (title === null) {
+    title = ''
+    splitted.some((line) => {
+      if (line.trim().length > 0) {
+        title = line.trim()
+        return true
+      }
+    })
+  }
+
+  return title
+}
+
+export default {
+  findNoteTitle
+}

browser/lib/htmlTextHelper.js

@@ -0,0 +1,45 @@
+/**
+ * @fileoverview Text trimmer for html.
+ */
+
+/**
+ * @param {string} text
+ * @return {string}
+ */
+
+export function decodeEntities (text) {
+  var entities = [
+    ['apos', '\''],
+    ['amp', '&'],
+    ['lt', '<'],
+    ['gt', '>'],
+    ['#63', '\\?'],
+    ['#36', '\\$']
+  ]
+
+  for (var i = 0, max = entities.length; i < max; ++i) {
+    text = text.replace(new RegExp(`&${entities[i][0]};`, 'g'), entities[i][1])
+  }
+
+  return text
+}
+
+export function encodeEntities (text) {
+  const entities = [
+    ['\'', 'apos'],
+    ['<', 'lt'],
+    ['>', 'gt'],
+    ['\\?', '#63'],
+    ['\\$', '#36']
+  ]
+
+  entities.forEach((entity) => {
+    text = text.replace(new RegExp(entity[0], 'g'), `&${entity[1]};`)
+  })
+  return text
+}
+
+export default {
+  decodeEntities,
+  encodeEntities
+}

browser/lib/markdown.js

@@ -19,6 +19,7 @@ var md = markdownit({
   linkify: true,
   html: true,
   xhtmlOut: true,
+  breaks: true,
   highlight: function (str, lang) {
     if (lang === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
@@ -56,6 +57,7 @@ md.use(math, {
     return output
   }
 })
+md.use(require('markdown-it-imsize'))
 md.use(require('markdown-it-footnote'))
 // Override task item
 md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {

browser/lib/search.js

@@ -0,0 +1,43 @@
+import _ from 'lodash'
+
+export default function searchFromNotes (data, search) {
+  let notes = data.noteMap.map((note) => note)
+  if (search.trim().length === 0) return []
+  let searchBlocks = search.split(' ')
+  searchBlocks.forEach((block) => {
+    if (block.match(/^#.+/)) {
+      notes = findByTag(notes, block)
+    } else {
+      notes = findByWord(notes, block)
+    }
+  })
+  return notes
+}
+
+function findByTag (notes, block) {
+  const tag = block.match(/#(.+)/)[1]
+  let regExp = new RegExp(_.escapeRegExp(tag), 'i')
+  return notes.filter((note) => {
+    if (!_.isArray(note.tags)) return false
+    return note.tags.some((_tag) => {
+      return _tag.match(regExp)
+    })
+  })
+}
+
+function findByWord (notes, block) {
+  let regExp = new RegExp(_.escapeRegExp(block), 'i')
+  return notes.filter((note) => {
+    if (_.isArray(note.tags) && note.tags.some((_tag) => {
+      return _tag.match(regExp)
+    })) {
+      return true
+    }
+    if (note.type === 'SNIPPET_NOTE') {
+      return note.description.match(regExp)
+    } else if (note.type === 'MARKDOWN_NOTE') {
+      return note.content.match(regExp)
+    }
+    return false
+  })
+}

browser/main/Detail/Detail.styl

@@ -1,8 +1,5 @@
 .root
   absolute top bottom right
-  border-width 1px 0
-  border-style solid
-  border-color $ui-borderColor
 
 .empty
   height 320px
@@ -18,7 +15,6 @@
 
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
   .empty-message
     color $ui-dark-inactive-text-color

browser/main/Detail/FolderSelect.styl

@@ -26,7 +26,7 @@
   overflow ellipsis
 
 .idle-label-name
-  font-size 16px
+  font-size 14px
   padding 2px
 
 .idle-label-name-surfix
@@ -81,7 +81,7 @@
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 4px transparent
+  border-left solid 2px transparent
   padding 2px 5px
 .search-optionList-item-name-surfix
   font-size 10px

browser/main/Detail/MarkdownNoteDetail.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
@@ -11,6 +12,8 @@ import ee from 'browser/main/lib/eventEmitter'
 import markdown from 'browser/lib/markdown'
 import StatusBar from '../StatusBar'
 import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 const electron = require('electron')
 const { remote } = electron
@@ -25,15 +28,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,34 +61,26 @@ class MarkdownNoteDetail extends React.Component {
     if (this.saveQueue != null) this.saveNow()
   }
 
-  findTitle (value) {
-    let splitted = value.split('\n')
-    let title = null
+  componentDidUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
+  }
 
-    for (let i = 0; i < splitted.length; i++) {
-      let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match(/^# .+/)) {
-        title = trimmedLine.substring(1, trimmedLine.length).trim()
-        break
+  getPercentageOfCompleteTodo (noteContent) {
+    let splitted = noteContent.split('\n')
+    let numberOfTodo = 0
+    let numberOfCompletedTodo = 0
+
+    splitted.forEach((line) => {
+      let trimmedLine = line.trim()
+      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+        numberOfTodo++
       }
-    }
-
-    if (title == null) {
-      for (let i = 0; i < splitted.length; i++) {
-        let trimmedLine = splitted[i].trim()
-        if (trimmedLine.length > 0) {
-          title = trimmedLine
-          break
-        }
+      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+        numberOfCompletedTodo++
       }
-      if (title == null) {
-        title = ''
-      }
-    }
+    })
 
-    title = markdown.strip(title)
-
-    return title
+    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
   }
 
   handleChange (e) {
@@ -85,7 +88,7 @@ class MarkdownNoteDetail extends React.Component {
 
     note.content = this.refs.content.value
     note.tags = this.refs.tags.value
-    note.title = this.findTitle(note.content)
+    note.title = markdown.strip(findNoteTitle(note.content))
     note.updatedAt = new Date()
 
     this.setState({
@@ -114,6 +117,7 @@ class MarkdownNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamitCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -152,6 +156,7 @@ class MarkdownNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -166,16 +171,7 @@ class MarkdownNoteDetail extends React.Component {
 
   }
 
-  handleContextButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleDeleteMenuClick (e) {
+  handleDeleteButtonClick (e) {
     let index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Delete a note',
@@ -200,10 +196,38 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
+  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
@@ -233,12 +257,44 @@ class MarkdownNoteDetail extends React.Component {
               value={this.state.note.tags}
               onChange={(e) => this.handleChange(e)}
             />
+            <TodoListPercentage
+              percentageOfTodo={this.getPercentageOfCompleteTodo(note.content)}
+            />
           </div>
           <div styleName='info-right'>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
+            {(() => {
+              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.handleDeleteButtonClick(e)}
             >
-              <i className='fa fa-ellipsis-v' />
+              <svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' 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>
+            <button styleName='control-fullScreenButton'
+              onMouseDown={(e) => this.handleFullScreenButton(e)}
+            >
+              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
             </button>
           </div>
         </div>
@@ -249,6 +305,7 @@ class MarkdownNoteDetail extends React.Component {
             styleName='body-noteEditor'
             config={config}
             value={this.state.note.content}
+            storageKey={this.state.note.storage}
             onChange={(e) => this.handleChange(e)}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
           />

browser/main/Detail/MarkdownNoteDetail.styl

@@ -9,6 +9,32 @@
   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()
+
+.control-fullScreenButton
+  float right
+  topBarButtonLight()
+
 .body
   absolute left right
   left $note-detail-left-margin
@@ -24,3 +50,15 @@ 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()
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/NoteDetailInfo.styl

@@ -38,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
@@ -54,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
@@ -88,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

@@ -15,6 +15,8 @@ import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 function pass (name) {
   switch (name) {
@@ -75,41 +77,13 @@ class SnippetNoteDetail extends React.Component {
     if (this.saveQueue != null) this.saveNow()
   }
 
-  findTitle (value) {
-    let splitted = value.split('\n')
-    let title = null
-
-    for (let i = 0; i < splitted.length; i++) {
-      let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match(/^# .+/)) {
-        title = trimmedLine.substring(1, trimmedLine.length).trim()
-        break
-      }
-    }
-
-    if (title == null) {
-      for (let i = 0; i < splitted.length; i++) {
-        let trimmedLine = splitted[i].trim()
-        if (trimmedLine.length > 0) {
-          title = trimmedLine
-          break
-        }
-      }
-      if (title == null) {
-        title = ''
-      }
-    }
-
-    return title
-  }
-
   handleChange (e) {
     let { note } = this.state
 
     note.tags = this.refs.tags.value
     note.description = this.refs.description.value
     note.updatedAt = new Date()
-    note.title = this.findTitle(note.description)
+    note.title = findNoteTitle(note.description)
 
     this.setState({
       note
@@ -137,6 +111,7 @@ class SnippetNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamitCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -175,6 +150,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -189,14 +165,7 @@ class SnippetNoteDetail extends React.Component {
 
   }
 
-  handleContextButtonClick (e) {
-    context.popup([{
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }])
-  }
-
-  handleDeleteMenuClick (e) {
+  handleDeleteButtonClick (e) {
     let index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Delete a note',
@@ -221,6 +190,10 @@ class SnippetNoteDetail extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
   handleTabPlusButtonClick (e) {
     this.addSnippet()
   }
@@ -250,15 +223,15 @@ class SnippetNoteDetail extends React.Component {
   }
 
   deleteSnippetByIndex (index) {
-    let snippets = this.state.note.snippets.slice()
+    const snippets = this.state.note.snippets.slice()
     snippets.splice(index, 1)
-    this.state.note.snippets = snippets
-    let snippetIndex = this.state.snippetIndex >= snippets.length
+    const note = Object.assign({}, this.state.note, {snippets})
+    const snippetIndex = this.state.snippetIndex >= snippets.length
       ? snippets.length - 1
       : this.state.snippetIndex
-    this.setState({
-      note: this.state.note,
-      snippetIndex
+    this.setState({ note, snippetIndex }, () => {
+      this.save()
+      this.refs['code-' + this.state.snippetIndex].reload()
     })
   }
 
@@ -545,10 +518,23 @@ class SnippetNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
+            <button styleName='control-trashButton'
+              onClick={(e) => this.handleDeleteButtonClick(e)}
             >
-              <i className='fa fa-ellipsis-v' />
+              <svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' 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>
+            <button styleName='control-fullScreenButton'
+              onMouseDown={(e) => this.handleFullScreenButton(e)}
+            >
+              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
             </button>
           </div>
         </div>

browser/main/Detail/SnippetNoteDetail.styl

@@ -22,6 +22,7 @@
   height 80px
 
 .body .description textarea
+  outline none
   display block
   height 100%
   width 100%
@@ -62,12 +63,17 @@
   button
     navButtonColor()
     height 24px
-    border-width 0 1px 0 0
-    border-style solid
-    border-color $ui-borderColor
     &:active .update-icon
       color white
 
+.control-trashButton
+  float right
+  topBarButtonLight()
+
+.control-fullScreenButton
+  float right
+  topBarButtonLight()
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -79,7 +85,7 @@ body[data-theme="dark"]
 
   .body .description textarea
     background-color $ui-dark-noteDetail-backgroundColor
-    color white
+    color $ui-dark-text-color
 
   .tabList
     background-color $ui-button--active-backgroundColor
@@ -93,3 +99,13 @@ body[data-theme="dark"]
   .override
     button
       border-color $ui-dark-borderColor
+      &:hover
+        background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        transition 0.15s
+        color $ui-dark-text-color
+
+  .control-trashButton
+    topBarButtonDark()
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/StarButton.styl

@@ -2,19 +2,46 @@
   left 7px
   top 0
   padding 0
+  color alpha($ui-favorite-star-button-color, 60%)
   &:hover
-    .icon
-      transform rotate(-72deg)
-    .tooltip
-      opacity 1
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
+  &:active
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
 
 .root--active
   @extend .root
   color $ui-favorite-star-button-color
   &:hover
+    transition 0.15s
     color $ui-favorite-star-button-color
-  .icon
-    transform rotate(-72deg)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+  &:active
+    transition 0.15s
+    color $ui-favorite-star-button-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
 
 .icon
   transition transform 0.15s
+
+body[data-theme="dark"]
+  .root
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+    &:active
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+
+  .root--active
+    @extend .root
+    color $ui-favorite-star-button-color
+    &:hover
+      transition 0.15s
+      color $ui-favorite-star-button-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

browser/main/Detail/TagSelect.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class TagSelect extends React.Component {
   constructor (props) {
@@ -56,6 +57,7 @@ class TagSelect extends React.Component {
   }
 
   submitTag () {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_TAG')
     let { value } = this.props
     let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
 
@@ -107,7 +109,7 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
-            <span styleName='tag-label'>{tag}</span>
+            <span styleName='tag-label'>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >

browser/main/Detail/TagSelect.styl

@@ -12,12 +12,12 @@
 
 .tag
   display inline-block
-  margin 0 2px
-  padding-left 10px
+  margin 1px 3px
+  padding 0
   vertical-align middle
   height 20px
-  background-color $ui-tag-backgroundColor
-  border-radius 20px
+  background-color alpha($ui-tag-backgroundColor, 10%)
+  border-radius 3px
   overflow hidden
   clearfix()
 
@@ -39,9 +39,9 @@
   padding-right 4px
 
 .tag-label
-  font-size 12px
-  font-weight bold
-  color: #FFFFFF
+  font-size 11px
+  font-weight 600
+  color: alpha($ui-text-color, 80%)
   float left
   height 20px
   line-height 20px
@@ -54,36 +54,13 @@
   height 24px
   box-sizing borde-box
   border none
-  border-bottom $ui-border
   background-color transparent
   outline none
   padding 0 4px
-  &:focus
-    border-color $ui-input--focus-borderColor = #369DCD
-  &:disabled
-    background-color $ui-input--disabled-backgroundColor = #DDD
-
-.add-tag-button
-  display inline
-  margin-left 5px
-  width 20px
-  height 20px
-  border none
-  border-radius 20px
-  padding 0
-  color #FFFFFF
-  &:hover
-    background-color rgba(0, 0, 0, 0.3)
-  &:active, &:active:hover
-    background-color rgba(0, 0, 0, 0.5)
-    color $ui-button--active-color
 
 body[data-theme="dark"]
-  .icon
-    color $ui-dark-button-color
-
   .tag
-    background-color $ui-dark-tag-backgroundColor
+    background-color alpha($ui-dark-tag-backgroundColor, 60%)
 
   .tag-removeButton
     border-color $ui-button--focus-borderColor
@@ -94,17 +71,6 @@ body[data-theme="dark"]
     color $ui-dark-text-color
 
   .newTag
-    border-color $ui-dark-borderColor
+    border-color none
     background-color transparent
-    color $ui-dark-text-color
-    &:focus
-      border-color $ui-input--focus-borderColor = #369DCD
-    &:disabled
-      background-color $ui-input--disabled-backgroundColor = #DDD
-
-  .add-tag-button
-    &:hover
-      background-color rgba(255, 255, 255, 0.3)
-    &:active, &:active:hover
-      background-color rgba(255, 255, 255, 0.5)
-      color $ui-button--active-color
+    color $ui-dark-text-color

browser/main/Detail/index.js

@@ -17,7 +17,7 @@ class Detail extends React.Component {
       this.refs.root != null && this.refs.root.focus()
     }
     this.deleteHandler = () => {
-      this.refs.root != null && this.refs.root.handleDeleteMenuClick()
+      this.refs.root != null && this.refs.root.handleDeleteButtonClick()
     }
   }
 

browser/main/Main.js

@@ -12,6 +12,8 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import modal from 'browser/main/lib/modal'
 import InitModal from 'browser/main/modals/InitModal'
 import mixpanel from 'browser/main/lib/mixpanel'
+import mobileAnalytics from 'browser/main/lib/awsMobileAnalyticsConfig'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 function focused () {
   mixpanel.track('MAIN_FOCUSED')
@@ -21,14 +23,23 @@ class Main extends React.Component {
   constructor (props) {
     super(props)
 
+    if (process.env.NODE_ENV === 'production') {
+      mobileAnalytics.initAwsMobileAnalytics()
+    }
+
     let { config } = props
 
     this.state = {
       isRightSliderFocused: false,
       listWidth: config.listWidth,
       navWidth: config.navWidth,
-      isLeftSliderFocused: false
+      isLeftSliderFocused: false,
+      fullScreen: false,
+      noteDetailWidth: 0,
+      mainBodyWidth: 0
     }
+
+    this.toggleFullScreen = () => this.handleFullScreenButton()
   }
 
   getChildContext () {
@@ -63,11 +74,13 @@ class Main extends React.Component {
         }
       })
 
+    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
     window.addEventListener('focus', focused)
   }
 
   componentWillUnmount () {
     window.removeEventListener('focus', focused)
+    eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
   }
 
   handleLeftSlideMouseDown (e) {
@@ -144,6 +157,31 @@ class Main extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    this.setState({ fullScreen: !this.state.fullScreen }, () => {
+      const noteDetail = document.querySelector('.NoteDetail')
+      const mainBody = document.querySelector('#main-body')
+
+      if (this.state.fullScreen) {
+        this.hideLeftLists(noteDetail, mainBody)
+      } else {
+        this.showLeftLists(noteDetail, mainBody)
+      }
+    })
+  }
+
+  hideLeftLists (noteDetail, mainBody) {
+    this.state.noteDetailWidth = noteDetail.style.left
+    this.state.mainBodyWidth = mainBody.style.left
+    noteDetail.style.left = '0px'
+    mainBody.style.left = '0px'
+  }
+
+  showLeftLists (noteDetail, mainBody) {
+    noteDetail.style.left = this.state.noteDetailWidth
+    mainBody.style.left = this.state.mainBodyWidth
+  }
+
   render () {
     let { config } = this.props
 
@@ -173,6 +211,7 @@ class Main extends React.Component {
           </div>
         }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          id='main-body'
           ref='body'
           style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
         >

browser/main/Main.styl

@@ -13,10 +13,12 @@
   absolute top bottom
   top -2px
   width 0
+  z-index 0
 
 .slider-right
   @extend .slider
   width 1px
+  z-index 0
 
 .slider--active
   @extend .slider

browser/main/NoteList/NoteList.styl

@@ -20,31 +20,36 @@ $control-height = 30px
   padding-left 25px
 
 .control-sortBy-select
-  margin-left 0
-  font-size 12px
+  appearance: none;
+  margin-left 3px
   color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
+  outline none
+  cursor pointer
   font-size 10px
+  &:hover
+    transition 0.2s
+    color $ui-text-color
 
 .control-button
   width 25px
   padding 0
   background-color transparent
   border none
-  color $ui-inactive-text-color
+  color alpha($ui-inactive-text-color, 60%)
   transition 0.15s
   &:active, &:active:hover
-    color $ui-active-color
+    color $ui-inactive-text-color
   &:hover
-    color $ui-text-color
+    color $ui-inactive-text-color
 
 .control-button--active
   @extend .control-button
-  color $ui-active-color
+  color $ui-inactive-text-color
   &:hover
-    color $ui-active-color
+    color $ui-inactive-text-color
 
 .list
   absolute left right bottom
@@ -56,15 +61,21 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
 
-  .control
-    background-color $ui-dark-noteList-backgroundColor
-
   .control
     background-color $ui-dark-noteList-backgroundColor
     border-color $ui-dark-borderColor
 
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+
   .control-button
     color $ui-dark-inactive-text-color
     &:hover
       color $ui-dark-text-color
-
+  
+  .control-button--active
+    color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color

browser/main/NoteList/index.js

@@ -8,6 +8,7 @@ import dataApi from 'browser/main/lib/dataApi'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import NoteItem from 'browser/components/NoteItem'
 import NoteItemSimple from 'browser/components/NoteItemSimple'
+import searchFromNotes from 'browser/lib/search'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -38,10 +39,14 @@ class NoteList extends React.Component {
     this.focusHandler = () => {
       this.refs.list.focus()
     }
-    this.alertIfSnippetHnalder = () => {
+    this.alertIfSnippetHandler = () => {
       this.alertIfSnippet()
     }
 
+    this.jumpToTopHandler = () => {
+      this.jumpToTop()
+    }
+
     this.state = {
     }
   }
@@ -51,7 +56,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.alertIfSnippetHnalder)
+    ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.on('list:top', this.jumpToTopHandler)
+    ee.on('list:jumpToTop', this.jumpToTopHandler)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -70,7 +77,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.alertIfSnippetHnalder)
+    ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.off('list:top', this.jumpToTopHandler)
+    ee.off('list:jumpToTop', this.jumpToTopHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -194,6 +203,7 @@ class NoteList extends React.Component {
 
   getNotes () {
     let { data, params, location } = this.props
+    let { router } = this.context
 
     if (location.pathname.match(/\/home/)) {
       return data.noteMap.map((note) => note)
@@ -204,6 +214,14 @@ class NoteList extends React.Component {
         .map((uniqueKey) => data.noteMap.get(uniqueKey))
     }
 
+    if (location.pathname.match(/\/searched/)) {
+      const searchInputText = document.getElementsByClassName('searchInput')[0].value
+      if (searchInputText === '') {
+        router.push('/home')
+      }
+      return searchFromNotes(this.props.data, searchInputText)
+    }
+
     let storageKey = params.storageKey
     let folderKey = params.folderKey
     let storage = data.storageMap.get(storageKey)
@@ -310,7 +328,7 @@ class NoteList extends React.Component {
     })
   }
 
-  alertIfSnippet() {
+  alertIfSnippet () {
     let { location } = this.props
     const targetIndex = _.findIndex(this.notes, (note) => {
       return `${note.storage}-${note.key}` === location.query.key
@@ -319,13 +337,36 @@ class NoteList extends React.Component {
       dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
         message: 'Sorry!',
-        detail: 'md/text import is available only a markdown note.'
+        detail: 'md/text import is available only a markdown note.',
+        buttons: ['OK', 'Cancel']
       })
     }
   }
 
+  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
+      }
+    })
+  }
+
+  handleDragStart (e, note) {
+    const noteData = JSON.stringify(note)
+    e.dataTransfer.setData('note', noteData)
+  }
+
   render () {
-    let { location, notes, config } = this.props
+    let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
       : config.sortBy === 'ALPHABETICAL'
@@ -357,6 +398,7 @@ class NoteList extends React.Component {
               key={key}
               handleNoteClick={this.handleNoteClick.bind(this)}
               handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+              handleDragStart={this.handleDragStart.bind(this)}
             />
           )
         }
@@ -368,6 +410,7 @@ class NoteList extends React.Component {
             key={key}
             handleNoteClick={this.handleNoteClick.bind(this)}
             handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+            handleDragStart={this.handleDragStart.bind(this)}
           />
         )
       })
@@ -379,7 +422,7 @@ class NoteList extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-sortBy'>
-            Sort by
+            <i className='fa fa-bolt' />
             <select styleName='control-sortBy-select'
               value={config.sortBy}
               onChange={(e) => this.handleSortByChange(e)}

browser/main/SideNav/SideNav.styl

@@ -1,7 +1,7 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  background-color $ui-backgroundColor
+  background-color #f9f9f9
   user-select none
   color $ui-text-color
 
@@ -12,9 +12,14 @@
   navButtonColor()
   height $topBar-height
   padding 0 15px
-  font-size 14px
+  font-size 12px
   width 100%
   text-align left
+  &:hover
+    color $ui-text-color
+  &:active, &:active:hover
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .top-menu-label
   margin-left 5px
@@ -110,10 +115,16 @@ body[data-theme="dark"]
 
   .top-menu
     navDarkButtonColor()
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
 
   .storageList-empty
     color $ui-dark-inactive-text-color
 
   .navToggle
-    navDarkButtonColor()
-
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color

browser/main/SideNav/StorageItem.js

@@ -7,6 +7,7 @@ import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
 import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItemChild from 'browser/components/StorageItem'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -131,8 +132,54 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleDragEnter (e) {
+    e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor)
+    e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)'
+  }
+
+  handleDragLeave (e) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+  }
+
+  handleDrop (e, storage, folder, dispatch, location) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+    const noteData = JSON.parse(e.dataTransfer.getData('note'))
+    const newNoteData = Object.assign({}, noteData, {storage: storage, folder: folder.key})
+    if (folder.key === noteData.folder) return
+    dataApi
+     .createNote(storage.key, newNoteData)
+     .then((note) => {
+       dataApi
+        .deleteNote(noteData.storage, noteData.key)
+        .then((data) => {
+          let dispatchHandler = () => {
+            dispatch({
+              type: 'DELETE_NOTE',
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
+            })
+          }
+          eventEmitter.once('list:moved', dispatchHandler)
+          eventEmitter.emit('list:next')
+        })
+         .catch((err) => {
+           console.error(err)
+         })
+       dispatch({
+         type: 'UPDATE_NOTE',
+         note: note
+       })
+       hashHistory.push({
+         pathname: location.pathname,
+         query: {key: `${note.storage}-${note.key}`}
+       })
+     })
+  }
+
   render () {
-    let { storage, location, isFolded, data } = this.props
+    let { storage, location, isFolded, data, dispatch } = this.props
     let { folderNoteMap } = data
     let folderList = storage.folders.map((folder) => {
       let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
@@ -151,6 +198,9 @@ class StorageItem extends React.Component {
           folderColor={folder.color}
           isFolded={isFolded}
           noteCount={noteCount}
+          handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
+          handleDragEnter={this.handleDragEnter}
+          handleDragLeave={this.handleDragLeave}
         />
       )
     })

browser/main/SideNav/StorageItem.styl

@@ -4,81 +4,75 @@
 
 .header
   position relative
-  height 26px
+  height 25px
   width 100%
   margin-bottom 5px
   transition 0.15s
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active
-    .header-toggleButton
-    .header-addFolderButton
-      color white
-      &:active
-        color $ui-active-color
 
 .header--active
-  @extend .header
-  .header-info
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+  margin-bottom 5px
+  background-color $ui-button--active-backgroundColor
+  transition color background-color  0.15s
+
+.header--active
   .header-toggleButton
+    color $ui-text-color
+
+.header--active
+  .header-info
+    color $ui-text-color
+
+.header--active
   .header-addFolderButton
-    color white
-    &:active
-    &:hover
-    &:hover:active
-      color white
+    color $ui-text-color
 
 .header-toggleButton
+  navButtonColor()
   position absolute
   left 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
-  color $ui-inactive-text-color
-  background-color transparent
+  border-radius 50%
   &:hover
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
-  &:active
-    color $ui-active-color
 
 .header-info
+  navButtonColor()
   display block
   width 100%
-  height 30px
-  padding-left 25px
+  height 25px
+  padding-left 23px
   padding-right 10px
-  line-height 26px
+  line-height 22px
   cursor pointer
-  font-size 14px
+  font-size 13px
   border none
   overflow ellipsis
   text-align left
-  background-color transparent
-  color $ui-inactive-text-color
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
   margin 0 5px
 
 .header-addFolderButton
+  navButtonColor()
   position absolute
   right 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
-  color $ui-inactive-text-color
-  background-color transparent
+  margin-right 5px
+  border-radius 50%
   &:hover
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
-  &:active
-    color $ui-active-color
 
 .root--folded
   @extend .root
@@ -108,16 +102,50 @@
     margin 0 5px
 
 body[data-theme="dark"]
-  .header-toggleButton
-  .header-addFolderButton
-    color $ui-dark-inactive-text-color
-    &:hover
-      color $ui-dark-text-color
-    &:active
-      color $ui-dark-active-color
+  .header--active
+    background-color $ui-dark-button--active-backgroundColor
+    transition color background-color  0.15s
+
   .header--active
     .header-toggleButton
-    .header-addFolderButton
-      color white
+      color $ui-dark-text-color
+
+  .header--active
+    .header-info
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
       &:active
-        color white
+        color $ui-dark-text-color
+        background-color $ui-dark-button--active-backgroundColor  
+
+  .header--active
+    .header-addFolderButton
+      color $ui-dark-text-color
+
+  .header-toggleButton
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .header-info
+    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .header-addFolderButton
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor

browser/main/StatusBar/StatusBar.styl

@@ -4,9 +4,7 @@
   absolute bottom left right
   height $statusBar-height
   background-color $ui-noteDetail-backgroundColor
-  border-top $ui-border
   display flex
-  box-shadow $note-detail-box-shadow
 
 .blank
   flex 1
@@ -24,9 +22,6 @@
 .zoom
   navButtonColor()
   height 24px
-  border-width 0 1px
-  border-style solid
-  border-color $ui-borderColor
 
 .update
   navButtonColor()
@@ -48,6 +43,10 @@ body[data-theme="dark"]
 
   .zoom
     border-color $ui-dark-borderColor
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color
 
   .help
     navButtonColor()

browser/main/TopBar/TopBar.styl

@@ -44,12 +44,13 @@ $control-height = 34px
 .control-search-optionList
   position fixed
   z-index 200
-  width 275px
-  height 175px
+  width 500px
+  height 250px
   overflow-y auto
   background-color $modal-background
   border-radius 2px
-  box-shadow 2px 2px 10px gray
+  border-none
+  box-shadow 0 0 1px rgba(76,86,103,.25), 0 2px 18px rgba(31,37,50,.32)
 
 .control-search-optionList-item
   height 50px
@@ -59,10 +60,10 @@ $control-height = 34px
   cursor pointer
   overflow ellipsis
   &:hover
-    background-color alpha($ui-active-color, 10%)
+    background-color alpha(#D4D4D4, 30%)
 
 .control-search-optionList-item-folder
-  border-left 4px solid transparent
+  border-left 2px solid transparent
   padding 2px 5px
   color $ui-text-color
   overflow ellipsis
@@ -144,7 +145,7 @@ body[data-theme="dark"]
   .control-search-optionList-item
     border-color $ui-dark-borderColor
     &:hover
-      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
   .control-search-optionList-item-folder
     color $ui-dark-text-color
   .control-search-optionList-item-folder-surfix
@@ -159,10 +160,14 @@ body[data-theme="dark"]
     color $ui-inactive-text-color
 
   .control-newPostButton
-    colorDarkDefaultButton()
+    color $ui-inactive-text-color
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      color $ui-dark-text-color
     &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       border-color $ui-dark-button--active-backgroundColor
 
   .control-newPostButton-tooltip

browser/main/TopBar/index.js

@@ -18,7 +18,7 @@ class TopBar extends React.Component {
     this.state = {
       search: '',
       searchOptions: [],
-      searchPopupOpen: false
+      isSearching: false
     }
 
     this.newNoteHandler = () => {
@@ -87,79 +87,17 @@ class TopBar extends React.Component {
   }
 
   handleSearchChange (e) {
+    let { router } = this.context
+    router.push('/searched')
     this.setState({
       search: this.refs.searchInput.value
     })
   }
 
-  getOptions () {
-    let { data } = this.props
-    let { search } = this.state
-    let notes = data.noteMap.map((note) => note)
-    if (search.trim().length === 0) return []
-    let searchBlocks = search.split(' ')
-    searchBlocks.forEach((block) => {
-      if (block.match(/^!#.+/)) {
-        let tag = block.match(/^!#(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
-        notes = notes
-          .filter((note) => {
-            if (!_.isArray(note.tags)) return false
-            return note.tags.some((_tag) => {
-              return _tag.match(regExp)
-            })
-          })
-      } else if (block.match(/^!.+/)) {
-        let block = block.match(/^!(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(block), 'i')
-        notes = notes.filter((note) => {
-          if (!_.isArray(note.tags) || !note.tags.some((_tag) => {
-            return _tag.match(regExp)
-          })) {
-            return true
-          }
-          if (note.type === 'SNIPPET_NOTE') {
-            return !note.description.match(regExp)
-          } else if (note.type === 'MARKDOWN_NOTE') {
-            return !note.content.match(regExp)
-          }
-          return false
-        })
-      } else if (block.match(/^#.+/)) {
-        let tag = block.match(/#(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
-        notes = notes
-          .filter((note) => {
-            if (!_.isArray(note.tags)) return false
-            return note.tags.some((_tag) => {
-              return _tag.match(regExp)
-            })
-          })
-      } else {
-        let regExp = new RegExp(_.escapeRegExp(block), 'i')
-        notes = notes.filter((note) => {
-          if (_.isArray(note.tags) && note.tags.some((_tag) => {
-            return _tag.match(regExp)
-          })) {
-            return true
-          }
-          if (note.type === 'SNIPPET_NOTE') {
-            return note.description.match(regExp)
-          } else if (note.type === 'MARKDOWN_NOTE') {
-            return note.content.match(regExp)
-          }
-          return false
-        })
-      }
-    })
-
-    return notes
-  }
-
   handleOptionClick (uniqueKey) {
     return (e) => {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       }, () => {
         let { location } = this.props
         hashHistory.push({
@@ -174,7 +112,7 @@ class TopBar extends React.Component {
 
   handleSearchFocus (e) {
     this.setState({
-      searchPopupOpen: true
+      isSearching: true
     })
   }
   handleSearchBlur (e) {
@@ -191,7 +129,7 @@ class TopBar extends React.Component {
     }
     if (!isStillFocused) {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       })
     }
   }
@@ -251,7 +189,7 @@ class TopBar extends React.Component {
   }
 
   handleOnSearchFocus () {
-    if (this.state.searchPopupOpen) {
+    if (this.state.isSearching) {
       this.refs.search.childNodes[0].blur()
     } else {
       this.refs.search.childNodes[0].focus()
@@ -260,27 +198,6 @@ class TopBar extends React.Component {
 
   render () {
     let { config, style, data } = this.props
-    let searchOptionList = this.getOptions()
-      .map((note) => {
-        let storage = data.storageMap.get(note.storage)
-        let folder = _.find(storage.folders, {key: note.folder})
-        return <div styleName='control-search-optionList-item'
-          key={note.storage + '-' + note.key}
-          onClick={(e) => this.handleOptionClick(note.storage + '-' + note.key)(e)}
-        >
-          <div styleName='control-search-optionList-item-folder'
-            style={{borderColor: folder.color}}>
-            {folder.name}
-            <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' />
-          }&nbsp;
-          {note.title}
-        </div>
-      })
-
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
@@ -301,15 +218,8 @@ class TopBar extends React.Component {
                 onChange={(e) => this.handleSearchChange(e)}
                 placeholder='Search'
                 type='text'
+                className='searchInput'
               />
-              {this.state.searchPopupOpen &&
-                <div styleName='control-search-optionList'>
-                  {searchOptionList.length > 0
-                    ? searchOptionList
-                    : <div styleName='control-search-optionList-empty'>Empty List</div>
-                  }
-                </div>
-              }
             </div>
             {this.state.search > 0 &&
               <button styleName='left-search-clearButton'

browser/main/global.styl

@@ -1,6 +1,6 @@
 global-reset()
 
-DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
+DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif
 
 html, body
   width 100%
@@ -11,7 +11,7 @@ body
   font-family DEFAULT_FONTS
   color textColor
   font-size fontSize
-  font-weight 400
+  font-weight 200
 
 button, input, select, textarea
   font-family DEFAULT_FONTS

browser/main/index.js

@@ -50,6 +50,7 @@ ReactDOM.render((
         <IndexRedirect to='/home' />
         <Route path='home' />
         <Route path='starred' />
+        <Route path='searched' />
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

browser/main/lib/AwsMobileAnalyticsConfig.js

@@ -0,0 +1,37 @@
+const AWS = require('aws-sdk')
+const AMA = require('aws-sdk-mobile-analytics')
+const ConfigManager = require('browser/main/lib/ConfigManager')
+
+const mobileAnalyticsClient = new AMA.Manager({
+  appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+  appTitle: 'xxxxxxxxxx'
+})
+
+function initAwsMobileAnalytics () {
+  AWS.config.region = 'us-east-1'
+  AWS.config.credentials = new AWS.CognitoIdentityCredentials({
+    IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxx'
+  })
+
+  AWS.config.credentials.get((err) => {
+    if (!err) {
+      console.log('Cognito Identity ID: ' + AWS.config.credentials.identityId)
+    }
+  })
+  recordStaticCustomEvent()
+}
+
+function recordDynamitCustomEvent (type) {
+  mobileAnalyticsClient.recordEvent(type)
+}
+
+function recordStaticCustomEvent () {
+  mobileAnalyticsClient.recordEvent('UI_COLOR_THEME', {
+    uiColorTheme: ConfigManager.default.get().ui.theme
+  })
+}
+
+module.exports = {
+  initAwsMobileAnalytics,
+  recordDynamitCustomEvent
+}

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',

browser/main/lib/dataApi/copyImage.js

@@ -0,0 +1,32 @@
+const fs = require('fs')
+const path = require('path')
+const _ = require('lodash')
+const sander = require('sander')
+
+/**
+ * @description To copy an image and return the path.
+ * @param {String} filePath
+ * @param {String} storageKey
+ * @return {String} an image path
+ */
+function copyImage (filePath, storageKey) {
+  return new Promise((resolve, reject) => {
+    try {
+      const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+      if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+      const storage = _.find(cachedStorageList, {key: storageKey})
+      if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+      const targetStorage = storage
+
+      const inputImage = fs.createReadStream(filePath)
+      const imageName = path.basename(filePath)
+      const outputImage = fs.createWriteStream(path.join(targetStorage.path, 'images', imageName))
+      inputImage.pipe(outputImage)
+      resolve(`${encodeURI(targetStorage.path)}/images/${encodeURI(imageName)}`)
+    } catch (e) {
+      return reject(e)
+    }
+  })
+}
+
+module.exports = copyImage

browser/main/lib/modal.js

@@ -15,6 +15,9 @@ class ModalBase extends React.Component {
 
   close () {
     if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
+    // Toggle overflow style on NoteList
+    let list = document.querySelector('.NoteList__list___browser-main-NoteList-')
+    list.style.overflow = 'auto'
   }
 
   render () {
@@ -37,7 +40,9 @@ let modalBase = ReactDOM.render(<ModalBase />, el)
 
 export function openModal (component, props) {
   if (modalBase == null) { return }
-
+  // Hide scrollbar by removing overflow when modal opens
+  let list = document.querySelector('.NoteList__list___browser-main-NoteList-')
+  list.style.overflow = 'hidden'
   document.body.setAttribute('data-modal', 'open')
   modalBase.setState({component: component, componentProps: props, isHidden: false})
 }

browser/main/modals/CreateFolderModal.js

@@ -4,6 +4,8 @@ import styles from './CreateFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class CreateFolderModal extends React.Component {
   constructor (props) {
@@ -47,6 +49,7 @@ class CreateFolderModal extends React.Component {
   }
 
   confirm () {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_FOLDER')
     if (this.state.name.trim().length > 0) {
       let { storage } = this.props
       let input = {
@@ -77,11 +80,7 @@ class CreateFolderModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Create new folder</div>
         </div>
-        <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>X</div>
-          <div styleName='close-text'>esc</div>
-        </button>
-
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>
           <div styleName='control-folder'>
             <div styleName='control-folder-label'>Folder name</div>
@@ -95,7 +94,7 @@ class CreateFolderModal extends React.Component {
           <button styleName='control-confirmButton'
             onClick={(e) => this.handleConfirmButtonClick(e)}
           >
-            Create Folder
+            Create
           </button>
         </div>
       </div>

browser/main/modals/CreateFolderModal.styl

@@ -1,52 +1,37 @@
 .root
   modal()
-  width 700px
-  height 200px
+  width 500px
+  height 270px
   overflow hidden
   position relative
   padding 0 40px
 
 .header
-  height 50px
+  height 70px
   margin-bottom 10px
-  margin-top 10px
+  margin-top 20px
   font-size 18px
   line-height 50px
   background-color $ui-backgroundColor
   color $ui-text-color
 
-.close-mark
-  font-size 15px
-
-.close
-  height 50px
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 7px
-  right 10px
-  text-align center
-  width top-bar--height
-  height top-bar--height
-
 .control-folder-label
   text-align left
-  font-size 14px
+  font-size 12px
   color $ui-text-color
 
 .control-folder-input
   display block
   height 30px
-  width 620px
+  width 420px
   padding 0 5px
   margin 10px auto 15px
   border 1px solid #C9C9C9 // TODO: use variable.
-  border-radius 5px
+  border-radius 2px
   background-color transparent
   outline none
   vertical-align middle
-  font-size 18px
+  font-size 14px
   &:disabled
     background-color $ui-input--disabled-backgroundColor
   &:focus, &:active
@@ -54,20 +39,21 @@
 
 .control-confirmButton
   display block
+  float right
   height 30px
-  width 620px
+  width 100px
   border none
-  border-radius 5px
+  border-radius 2px
   padding 0 25px
   margin 20px auto
-  font-size 14px
+  font-size 12px
   colorPrimaryButton()
 
 body[data-theme="dark"]
   .root
     modalDark()
-    width 700px
-    height 200px
+    width 500px
+    height 270px
     overflow hidden
     position relative
     padding 0 40px
@@ -84,10 +70,8 @@ body[data-theme="dark"]
     border 1px solid #C9C9C9 // TODO: use variable.
     color white
 
-  .closeButton
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    colorDarkDefaultButton()
-
-  .description
+   .description
     color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorDarkPrimaryButton()

browser/main/modals/DeleteArticleModal.js

@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
-import store from '../store'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -26,7 +25,6 @@ export default class DeleteArticleModal extends React.Component {
   }
 
   handleYesButtonClick (e) {
-    // store.dispatch(destroyArticle(this.props.articleKey))
     this.props.close()
   }
 

browser/main/modals/InitModal.js

@@ -5,6 +5,7 @@ import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
+import ModalEscButton from 'browser/components/ModalEscButton'
 
 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -41,10 +42,6 @@ class InitModal extends React.Component {
     }
   }
 
-  handleCloseButtonClick (e) {
-    this.props.close()
-  }
-
   handlePathChange (e) {
     this.setState({
       path: e.target.value
@@ -143,7 +140,7 @@ class InitModal extends React.Component {
               type: 'SNIPPET_NOTE',
               folder: data.storage.folders[0].key,
               title: 'Snippet note example',
-              description: 'Snippet note example\nYou can store a series of snippet as a single note like Gist.',
+              description: 'Snippet note example\nYou can store a series of snippets as a single note, like Gist.',
               snippets: [
                 {
                   name: 'example.html',
@@ -187,12 +184,6 @@ class InitModal extends React.Component {
     })
   }
 
-  handleKeyDown (e) {
-    if (e.keyCode === 27) {
-      this.props.close()
-    }
-  }
-
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
@@ -209,15 +200,13 @@ class InitModal extends React.Component {
         <div styleName='header'>
           <div styleName='header-title'>Initialize Storage</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='body'>
           <div styleName='body-welcome'>
-            Welcome you!
+            Welcome!
           </div>
           <div styleName='body-description'>
-            Boostnote will use this directory as a default storage.
+           Please select a directory for Boostnote storage.
           </div>
           <div styleName='body-path'>
             <input styleName='body-path-input'

browser/main/modals/InitModal.styl

@@ -22,15 +22,6 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  padding 0 25px
-  color $ui-text-color
-  colorDefaultButton()
-
 .body
   padding 30px
 

browser/main/modals/NewNoteModal.js

@@ -4,6 +4,8 @@ import styles from './NewNoteModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class NewNoteModal extends React.Component {
   constructor (props) {
@@ -22,6 +24,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleMarkdownNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_MARKDOWN')
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
     dataApi
       .createNote(storage, {
@@ -52,6 +56,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleSnippetNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_SNIPPET')
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
 
     dataApi
@@ -102,11 +108,7 @@ class NewNoteModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Make a Note</div>
         </div>
-        <button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>X</div>
-          <div styleName='close-text'>esc</div>
-        </button>
-
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>
           <button styleName='control-button'
             onClick={(e) => this.handleMarkdownNoteButtonClick(e)}
@@ -117,7 +119,7 @@ class NewNoteModal extends React.Component {
               className='fa fa-file-text-o'
             /><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>
+            <span styleName='control-button-description'>This format is for creating text documents. Checklists, code blocks and Latex blocks are available.</span>
           </button>
 
           <button styleName='control-button'
@@ -129,7 +131,7 @@ class NewNoteModal extends React.Component {
               className='fa fa-code'
             /><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 styleName='control-button-description'>This format is for creating code snippets. Multiple snippets can be grouped into a single note.
             </span>
           </button>
 

browser/main/modals/NewNoteModal.styl

@@ -13,25 +13,10 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  height 50px
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 1px
-  right 10px
-  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
@@ -73,7 +58,7 @@ body[data-theme="dark"]
     color $ui-dark-text-color
     background-color transparent
     &:focus
-      colorPrimaryButton()
+      colorDarkPrimaryButton()
 
   .description
     color $ui-inactive-text-color

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -32,14 +32,20 @@
 .group-section-control
   flex 1
 
+.group-section-control select
+  outline none
+  border 1px solid $ui-borderColor
+  background-color transparent
+
 .group-section-control-input
   height 30px
   vertical-align middle
   width 400px
   font-size $tab--button-font-size
   border solid 1px $border-color
-  border-radius $tab--input-border-radius
+  border-radius 2px
   padding 0 5px
+  outline none
   &:disabled
     background-color $ui-input--disabled-backgroundColor
 
@@ -64,7 +70,7 @@
 .group-control-leftButton
   colorDefaultButton()
   border none
-  border-radius 5px
+  border-radius 2px
   font-size $tab--button-font-size
   height $tab--button-height
   padding 0 15px
@@ -74,17 +80,17 @@
   float right
   colorPrimaryButton()
   border none
-  border-radius $tab--button-border-radius
+  border-radius 2px
   font-size $tab--button-font-size
-  height $tab--button-height
-  padding 0 15px
+  height 35px
+  width 100px
   margin-right 10px
 
 .group-hint
   border $ui-border
   padding 10px 15px
   margin 15px 0
-  border-radius 5px
+  border-radius 2px
   background-color $ui-backgroundColor
   color $ui-inactive-text-color
   ul
@@ -98,10 +104,17 @@
   margin-left: 10px
   font-size: 12px
 
+.code-mirror
+  width 400px
+  height 120px
+  margin 5px 0
+  font-size 12px
+
 colorDarkControl()
   border-color $ui-dark-borderColor
   background-color $ui-dark-backgroundColor
   color $ui-dark-text-color
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -139,6 +139,7 @@ class HotkeyTab extends React.Component {
                 <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>
+                <li><code>Shift</code></li>
               </ul>
             </div>
           }

browser/main/modals/PreferencesModal/InfoTab.js

@@ -30,28 +30,42 @@ class InfoTab extends React.Component {
             <div styleName='icon-right'>
               <div styleName='appId'>Boostnote {appVersion}</div>
               <div styleName='description'>
-                A simple markdown/snippet note app for developer.
+                An open source note-taking app made for programmers just like you.
               </div>
             </div>
           </div>
-          <div styleName='clear' />
-          <div styleName='madeBy'>Made by&nbsp;
-            <a href='http://maisin.co/'
-              onClick={(e) => this.handleLinkClick(e)}
-            >MAISIN&CO.</a></div>
-          <div styleName='copyright'>Copyright 2017 MAISIN&CO. All rights reserved.</div>
         </div>
         <ul styleName='list'>
           <li>
-            The codes of this app is published under GPLv3 license.
-          </li>
-          <li>
-            Any kinds of feedback, creating a new issue or a pull request, would be welcomed.
-          </li>
-          <li>
-            Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
+            <a href='https://boostnote.io'
               onClick={(e) => this.handleLinkClick(e)}
-            >https://github.com/BoostIO/Boostnote/issues</a>
+            >Website</a>
+          </li>
+          <li>
+            <a href='https://boostnote.paintory.com/'
+              onClick={(e) => this.handleLinkClick(e)}
+            >Boostnote Shop</a> : Products are shipped to all over the world 🌏
+          </li>
+          <li>
+            <a href='https://salt.bountysource.com/teams/boostnote'
+              onClick={(e) => this.handleLinkClick(e)}
+            >Donate via Bountysource</a> : Thank you for your support 🎉
+          </li>
+          <li>
+            <a href='https://github.com/BoostIO/Boostnote/issues'
+              onClick={(e) => this.handleLinkClick(e)}
+            >GitHub Issues</a> : We'd love to hear your feedback 🙌
+          </li>
+          <li>
+            <a href='https://github.com/BoostIO/Boostnote/blob/master/docs/build.md'
+              onClick={(e) => this.handleLinkClick(e)}
+            >Development</a> : Development configurations for Boostnote 🚀
+          </li>
+          <li styleName='cc'>
+            Copyright (C) 2017 Maisin&Co.
+          </li>
+          <li styleName='cc'>
+            License: GPL v3
           </li>
         </ul>
       </div>

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -4,11 +4,9 @@
   padding 15px
   white-space pre
   line-height 1.4
-  color $ui-text-color
+  color alpha($ui-text-color, 90%)
   width 100%
-
-.clear
-  clear both
+  font-size 14px
 
 .top
   text-align left
@@ -34,26 +32,16 @@
 .description
   font-size 14px
 
-.madeBy
-  font-size 14px
-  $ui-inactive-text-color
-
-.copyright
-  font-size 14px
-  $ui-inactive-text-color
-
 .list
   list-style square
   padding-left 2em
   li
     white-space normal
-
+    padding-bottom 10px
+  a
+    color #4E8EC6
+    text-decoration none
+  
 body[data-theme="dark"]
   .root
-    color $tab--dark-text-color
-
-  .madeBy
-    color $ui-dark-inactive-text-color
-
-  .copyright
-    color $ui-dark-inactive-text-color
+    color alpha($tab--dark-text-color, 80%)

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -20,17 +20,6 @@ top-bar--height = 50px
     font-size 18px
     line-height top-bar--height
 
-.top-bar-close
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 0
-  right 0
-  text-align center
-  width top-bar--height
-  height top-bar--height
-
 .nav
   absolute top left right
   top top-bar--height
@@ -45,22 +34,20 @@ top-bar--height = 50px
   text-align left
   width 100px
   margin 4px 0
-  padding 7px 0
-  padding-left 7px
+  padding 5px 0
+  padding-left 10px
   border none
-  border-radius 3px
+  border-radius 2px
   background-color transparent
   color $ui-text-color
   font-size 14px
-  &:hover
-    color $ui-active-color
 
 .nav-button--active
   @extend .nav-button
-  color white
-  background-color $ui-active-color
+  color $ui-text-color
+  background-color $ui-button--active-backgroundColor
   &:hover
-    color white
+    color $ui-text-color
 
 .nav-button-icon
   display block
@@ -91,3 +78,10 @@ body[data-theme="dark"]
     color $tab--dark-text-color
     &:hover
       color $ui-dark-text-color
+
+  .nav-button--active
+    @extend .nav-button
+    color white
+    background-color $dark-primary-button-background--active
+    &:hover
+      color white

browser/main/modals/PreferencesModal/StorageItem.styl

@@ -35,7 +35,7 @@
   border $ui-border
   border-radius 2px
   padding 0 5px
-
+  outline none
 
 .header-control
   float right
@@ -71,7 +71,7 @@
     background-color darken(white, 3%)
 .folderList-item-left
   height 30px
-  border-left solid 4px transparent
+  border-left solid 2px transparent
   padding 0 10px
   line-height 30px
   float left
@@ -105,6 +105,7 @@
   border $ui-border
   border-radius 2px
   padding 0 5px
+  outline none
 
 .folderList-item-right
   float right

browser/main/modals/PreferencesModal/StoragesTab.styl

@@ -28,12 +28,15 @@
 .list-control
   height 30px
 .list-control-addStorageButton
+  position absolute
+  top 7px
+  right 20px
   height $tab--button-height
   padding 0 15px
   border $ui-border
   colorDefaultButton()
   font-size $tab--button-font-size
-  border-radius $tab--button-border-radius
+  border-radius 2px
 
 .addStorage
   margin-bottom 15px

browser/main/modals/PreferencesModal/UiTab.js

@@ -4,44 +4,66 @@ import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
+import ReactCodeMirror from 'react-codemirror'
+import CodeMirror from 'codemirror'
 
 const OSX = global.process.platform === 'darwin'
 
 class UiTab extends React.Component {
   constructor (props) {
     super(props)
-
     this.state = {
-      config: props.config
+      config: props.config,
+      codemirrorTheme: props.config.editor.theme
     }
   }
 
+  componentWillMount () {
+    CodeMirror.autoLoadMode(ReactCodeMirror, 'javascript')
+  }
+
   handleUIChange (e) {
-    let { config } = this.state
+    const { codemirrorTheme } = this.state
+    let checkHighLight = document.getElementById('checkHighLight')
 
-    config.ui = {
-      theme: this.refs.uiTheme.value,
-      disableDirectWrite: this.refs.uiD2w != null
-        ? this.refs.uiD2w.checked
-        : false
-    }
-    config.editor = {
-      theme: this.refs.editorTheme.value,
-      fontSize: this.refs.editorFontSize.value,
-      fontFamily: this.refs.editorFontFamily.value,
-      indentType: this.refs.editorIndentType.value,
-      indentSize: this.refs.editorIndentSize.value,
-      switchPreview: this.refs.editorSwitchPreview.value,
-      keyMap: this.refs.editorKeyMap.value
-    }
-    config.preview = {
-      fontSize: this.refs.previewFontSize.value,
-      fontFamily: this.refs.previewFontFamily.value,
-      codeBlockTheme: this.refs.previewCodeBlockTheme.value,
-      lineNumber: this.refs.previewLineNumber.checked
+    if (checkHighLight === null) {
+      checkHighLight = document.createElement('link')
+      checkHighLight.setAttribute('id', 'checkHighLight')
+      checkHighLight.setAttribute('rel', 'stylesheet')
+      document.head.appendChild(checkHighLight)
     }
 
-    this.setState({ config })
+    const newConfig = {
+      ui: {
+        theme: this.refs.uiTheme.value,
+        disableDirectWrite: this.refs.uiD2w != null
+          ? this.refs.uiD2w.checked
+          : false
+      },
+      editor: {
+        theme: this.refs.editorTheme.value,
+        fontSize: this.refs.editorFontSize.value,
+        fontFamily: this.refs.editorFontFamily.value,
+        indentType: this.refs.editorIndentType.value,
+        indentSize: this.refs.editorIndentSize.value,
+        switchPreview: this.refs.editorSwitchPreview.value,
+        keyMap: this.refs.editorKeyMap.value
+      },
+      preview: {
+        fontSize: this.refs.previewFontSize.value,
+        fontFamily: this.refs.previewFontFamily.value,
+        codeBlockTheme: this.refs.previewCodeBlockTheme.value,
+        lineNumber: this.refs.previewLineNumber.checked
+      }
+    }
+
+    const newCodemirrorTheme = this.refs.editorTheme.value
+
+    if (newCodemirrorTheme !== codemirrorTheme) {
+      checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme}.css`)
+    }
+
+    this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme })
   }
 
   handleSaveUIClick (e) {
@@ -61,8 +83,8 @@ class UiTab extends React.Component {
 
   render () {
     const themes = consts.THEMES
-    const { config } = this.state
-
+    const { config, codemirrorTheme } = this.state
+    const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t  console.log("I am Happy!")\n\t} else {\n\t  console.log("I am not Happy!")\n\t}\n};'
     return (
       <div styleName='root'>
         <div styleName='group'>
@@ -113,6 +135,9 @@ class UiTab extends React.Component {
                   })
                 }
               </select>
+              <div styleName='code-mirror'>
+                <ReactCodeMirror value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} />
+              </div>
             </div>
           </div>
           <div styleName='group-section'>
@@ -191,6 +216,7 @@ class UiTab extends React.Component {
               >
                 <option value='sublime'>default</option>
                 <option value='vim'>vim</option>
+                <option value='emacs'>emacs</option>
               </select>
               <span styleName='note-for-keymap'>Please reload boostnote after you change the keymap</span>
             </div>
@@ -253,7 +279,7 @@ class UiTab extends React.Component {
             <button styleName='group-control-rightButton'
               onClick={(e) => this.handleSaveUIClick(e)}
             >
-              Save UI Config
+              Save
             </button>
           </div>
         </div>

browser/main/modals/PreferencesModal/index.js

@@ -5,6 +5,7 @@ import HotkeyTab from './HotkeyTab'
 import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import StoragesTab from './StoragesTab'
+import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
 
@@ -117,10 +118,7 @@ class Preferences extends React.Component {
         <div styleName='top-bar'>
           <p>Your menu for Boostnote</p>
         </div>
-        <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
-          <div styleName='top-bar-close-mark'>X</div>
-          <div styleName='top-bar-close-text'>esc</div>
-        </button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleEscButtonClick(e)} />
         <div styleName='nav'>
           {navButtons}
         </div>

browser/main/modals/RenameFolderModal.js

@@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './RenameFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
+import ModalEscButton from 'browser/components/ModalEscButton'
 
 class RenameFolderModal extends React.Component {
   constructor (props) {
@@ -72,9 +73,7 @@ class RenameFolderModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Rename Folder</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
 
         <div styleName='control'>
           <input styleName='control-input'

browser/main/modals/RenameFolderModal.styl

@@ -6,24 +6,13 @@
 
 .header
   height 50px
-  font-size 18px
+  font-size 16px
   line-height 50px
   padding 0 15px
   background-color $ui-backgroundColor
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
 .control
   padding 25px 15px 15px
   text-align center
@@ -40,7 +29,7 @@
   background-color transparent
   outline none
   vertical-align middle
-  font-size 18px
+  font-size 14px
   text-align center
   &:disabled
     background-color $ui-input--disabled-backgroundColor
@@ -65,13 +54,12 @@ 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()
-
-  .description
+   .description
     color $ui-inactive-text-color
 
   .control-input
     border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .control-confirmButton
+    colorDarkPrimaryButton()

browser/styles/index.styl

@@ -11,7 +11,7 @@ $sideNav--folded-width = 44px
 $topBar-height = 60px
 
 // UI default
-$ui-text-color = #515151
+$ui-text-color = #333333
 $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FFFFFF
@@ -23,9 +23,9 @@ $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 
 // UI Button
 $ui-button-color = #939395
-$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
+$ui-button--hover-backgroundColor = #D9D9D9
 $ui-button--active-color = white
-$ui-button--active-backgroundColor = #6AA5E9
+$ui-button--active-backgroundColor = #D9D9D9
 $ui-button--focus-borderColor = lighten(#369DCD, 25%)
 
 // UI Tooltip
@@ -67,29 +67,43 @@ $active-border = solid 1px $active-border-color
 // Default button
 $default-button-background = white
 $default-button-background--hover = #e6e6e6
-$default-button-background--active = #d4d4d4
+$default-button-background--active = #D9D9D9
 
 colorDefaultButton()
   background-color $default-button-background
   &:hover
-    background-color $default-button-background--hover
+    background-color transparent
   &:active
   &:active:hover
     background-color $default-button-background--active
 
 // Primary button(Brand color)
-$primary-button-background = $brand-color
+$primary-button-background = alpha($brand-color, 60%)
 $primary-button-background--hover = darken($brand-color, 5%)
 $primary-button-background--active = darken($brand-color, 10%)
 
 colorPrimaryButton()
-  color white
-  background-color $primary-button-background
+  color $ui-text-color
+  background-color $default-button-background--hover
   &:hover
-    background-color $primary-button-background--hover
+    background-color $default-button-background--active
   &:active
   &:active:hover
-    background-color $primary-button-background--active
+    background-color $default-button-background--active
+
+// Dark Primary button(Brand color)
+$dark-primary-button-background = alpha(#3A404C, 80%)
+$dark-primary-button-background--hover = #3A404C
+$dark-primary-button-background--active = #3A404C
+
+colorDarkPrimaryButton()
+  color white
+  background-color $dark-primary-button-background
+  &:hover
+    background-color $dark-primary-button-background--hover
+  &:active
+  &:active:hover
+    background-color $dark-primary-button-background--active
 
 // Danger button(Brand color)
 $danger-button-background = #c9302c
@@ -113,13 +127,15 @@ navButtonColor()
   border none
   color $ui-button-color
   background-color transparent
-  transition color background-color  0.15s
+  transition 0.15s
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition  0.15s
+    color $ui-text-color
   &:active, &:active:hover
     background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-
+    color $ui-text-color
+    transition 0.15s
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -137,20 +153,40 @@ modal()
   background-color $modal-background
   overflow hidden
   border-radius $modal-border-radius
-  box-shadow 2px 2px 10px gray
+  box-shadow 0 0 1px rgba(76,86,103,.15), 0 2px 18px rgba(31,37,50,.22)
+
+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-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
-$ui-dark-backgroundColor = #1D1D1D
-$ui-dark-noteList-backgroundColor = #181818
-$ui-dark-noteDetail-backgroundColor = #0D0D0D
-$ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3)
+$ui-dark-backgroundColor = #1E2124
+$ui-dark-noteList-backgroundColor = #282C30
+$ui-dark-noteDetail-backgroundColor = #2D3033
+$ui-dark-tag-backgroundColor = #3A404C
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD
 $ui-dark-button--active-color = white
-$ui-dark-button--active-backgroundColor = #6AA5E9
+$ui-dark-button--active-backgroundColor = #3A404C
 $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
@@ -181,14 +217,27 @@ navDarkButtonColor()
   border none
   color $ui-dark-button-color
   background-color transparent
-  transition color background-color 0.15s
+  transition 0.15s
   &:hover
-    color white
+    color $ui-dark-text-color
     background-color $ui-dark-button--hover-backgroundColor
+    transition 0.15s
   &:active
+  &:active:hover
+    transition 0.15s
+    color $ui-dark-text-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
-    color $ui-dark-button--active-color
+  &:focus
+    border-color $ui-button--focus-borderColor
 
 $ui-dark-tooltip-text-color = white
 $ui-dark-tooltip-backgroundColor = alpha(#444, 70%)

contributing.md

@@ -1,5 +1,12 @@
 # Contributing to Boostnote
 
+## When you open an issue of a bug report
+There are no issue template. But there is a request.
+
+**Please paste screenshots of Boostnote with developer tool open**
+
+Thank you for your help in advance.
+
 ## 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.
@@ -9,7 +16,32 @@ Because GPL v3 is too strict to be compatible with any other License, We thought
 
 ---
 
-# Contributing to Boostnote(Japanese)
+# Contributing to Boostnote (Korean)
+
+## 버그 리포트를 보고할 때
+이슈의 양식은 없습니다. 하지만 부탁이 있습니다.
+
+**개발자 도구를 연 상태의 Boostnote 스크린샷을 첨부해주세요**
+
+도움을 주셔서 감사합니다.
+
+## Pull Request의 저작권에 관하여
+
+당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 MAISIN&CO에 양도한다는 것에 동의한다는 의미입니다.
+
+이것은 Boostnote가 유료화가 되는 것을 의미하는 건 아닙니다. 만약 우리가 자금이 필요하다면, 우리는 클라우드 연동, 모바일 앱 통합 혹은 특수한 기능 같은 것을 사용해 수입 창출을 시도할 것입니다.
+GPL v3 라이센스는 다른 라이센스와 혼합해 사용하기엔 너무 엄격하므로, 우리는 BSD, MIT 라이센스와 같은 더 자유로운 라이센스로 교체하는 것을 생각하고 있습니다.
+
+---
+
+# Contributing to Boostnote (Japanese)
+
+## バグレポートに関してのissueを立てる時
+イシューテンプレートはありませんが、1つお願いがあります。
+
+**開発者ツールを開いた状態のBoostnoteのスクリーンショットを貼ってください**
+
+よろしくお願いします。
 
 ## Pull requestの著作権について
 

docs/build.md

@@ -1,52 +1,52 @@
 # Build
 
+## Environments
+* npm: 4.x
+* node: 7.x
+
+You should use `npm v4.x` because `$ grand pre-build` fails on `v5.x`.
+
 ## Development
 
 We use Webpack HMR to develop Boostnote.
-You can use following commands to use default configuration at the top of project directory.
+Running the following commands, at the top of the project directory, will start Boostnote with the default configurations.
 
-Install requirement packages.
+Install the required packages using yarn.
 
 ```
-$ npm install
+$ yarn
 ```
 
-Build codes.
+Build and run.
 
 ```
-$ npm run webpack
+$ yarn run dev-start
 ```
 
-After a few seconds, you will see this message.
+This command runs `yarn run webpack` and `yarn run hot` in parallel. It is the same as running these commands in two terminals.
 
-```
-webpack: bundle is now VALID.
-```
+The `webpack` will watch for code changes and then apply them automatically.
 
-Then, we have to run the app.
-```
-$ npm run hot
-```
-> Actually the app can be start with `npm start`. However, the app will use the compiled script.
+If the following error occurs: `Failed to load resource: net::ERR_CONNECTION_REFUSED`, please reload Boostnote.
 
-By this, webpack will watch the code changes and apply it automatically.
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
 
 > ### Notice
-> There are some cases you have to refresh app yourself.
-> 1. When editing constructor method of a component
-> 2. When adding a new css class(same to 1: CSS class is re-written by each component. This process occurs at Constructor method.)
+> There are some cases where you have to refresh the app manually.
+> 1. When editing a constructor method of a component
+> 2. When adding a new css class (similar to 1: the CSS class is re-written by each component. This process occurs at the Constructor method.)
 
 ## Deploy
 
-We use Grunt.
-Acutal deploy can be run by `grunt`. However, you shouldn't use because the default task is including codesign and authenticode.
+We use Grunt to automate deployment.
+You can build the program by using `grunt`. However, we don't recommend this because the default task includes codesign and authenticode.
 
-So, we prepare a script which just make an executable file.
+So, we've prepared a separate script which just makes an executable file.
 
 ```
 grunt pre-build
 ```
 
-You will find the executable from `dist`. In this case, auto updater won't work because the app isn't signed.
+You will find the executable in the `dist` directory. Note, the auto updater won't work because the app isn't signed.
 
-If you are necessary, you can do codesign or authenticode by this excutable.
+If you find it necessary, you can use codesign or authenticode with this executable.

docs/debug.md

@@ -0,0 +1,20 @@
+# How to debug Boostnote (Electron app)
+Boostnote is an Electron app so it's based on Chromium; developers can use `Developer Tools` just like Google Chrome.
+
+You can toggle the `Developer Tools` like this:
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+The `Developer Tools` will look like this:
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+When errors occur, the error messages are displayed at the `console`.
+
+## Debugging
+For example, you can use the `debugger` to set a breakpoint in the code like this:
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+This is just an illustrative example, you should find a way to debug which fits your style.
+
+## References
+* [Official document of Google Chrome about debugging](https://developer.chrome.com/devtools)

docs/jp/build.md

@@ -5,25 +5,25 @@
 Webpack HRMを使います。
 次の命令から私達がしておいた設定を使うことができます。
 
-```
-npm run webpack
-```
-
-数秒後、次のメッセージが表示されます。
+依存するパッケージをインストールします。
 
 ```
-webpack: bundle is now VALID.
+$ yarn
 ```
 
-では、アプリを起動します。
+ビルドして実行します。
 
 ```
-npm run hot
+$ yarn run dev-start
 ```
 
-> 元々、アプリは`npm start`から起動できます。しかし、この場合、コンパイルされたスクリプトを利用します。
+このコマンドは `yarn run webpack` と `yarn run hot`を並列に実行します。つまりこのコマンドは2つのターミナルで同時にこれらのコマンドを実行するのと同じことです。
 
-これにより、Webpackが自動的にコードの変更を確認し、それを適用してくれるようになります。
+そして、Webpackが自動的にコードの変更を確認し、それを適用してくれるようになります。
+
+もし、 `Failed to load resource: net::ERR_CONNECTION_REFUSED`というエラーが起きた場合、Boostnoteをリロードしてください。
+
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
 
 > ### 注意
 > 時々、直接リフレッシュをする必要があります。

docs/jp/debug.md

@@ -0,0 +1,20 @@
+# Boostnote(electronアプリケーション)のデバッグ方法について
+Boostnoteを作っているelectronはChromiumからできており、開発者は `Developer Tools`をGoogle Chromeと同じように使うことができます。
+
+Developer Toolsの切り替え方法はこちらです:
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+実際のデベロッパーツールはこちらです:
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+何かエラーが起きた場合 `console`にエラーメッセージが表示されます。
+
+## デバッグ
+例えば、 `debugger`をコード中にブレークポイントとして挟む方法があります。
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+ですがこれは一例にしか過ぎません。最もあなたに合うデバッグ方法を見つけた方がいいでしょう。
+
+## 参考
+* [デバッグに関するGoogle Chromeの公式ドキュメント](https://developer.chrome.com/devtools)

docs/jp/testing.md

@@ -0,0 +1,15 @@
+# Testing for Boostnote
+## e2eテスト
+Boostnoteには[ava](https://github.com/avajs/ava)と[spectron](https://github.com/electron/spectron)で書かれたe2eテストがあります。
+
+### 実行方法
+以下のe2eテストのコマンドがあります。
+
+```
+$ yarn run test:e2e
+```
+
+もう一つのテストコマンドと分けた理由は、travisCIの都合です。
+
+### travisCIでは
+travisCIではmasterブランチで飲みe2eテストを実行するようにしています。もし興味がある方は `.travis.yml`をご覧ください。

docs/ko/build.md

@@ -6,7 +6,7 @@ Webpack HRM을 개발을 위해 사용합니다.
 다음 명령을 통해 저희가 해둔 설정을 사용 할 수 있습니다.
 
 ```
-npm run webpack
+yarn run webpack
 ```
 
 몇 초 후, 다음 메세지를 보게 될겁니다.
@@ -18,10 +18,10 @@ webpack: bundle is now VALID.
 그럼 앱을 실행합시다.
 
 ```
-npm run hot
+yarn run hot
 ```
 
-> 원래 앱은 `npm start`로 실행가능합니다. 하지만 이 경우, 컴파일된 스크립트를 사용할 것입니다.
+> 원래 앱은 `yarn start`로 실행가능합니다. 하지만 이 경우, 컴파일된 스크립트를 사용할 것입니다.
 
 이로써 웹팩이 자동적으로 코드변경을 확인하고 적용해줄 것입니다.
 

docs/testing.md

@@ -0,0 +1,15 @@
+# Testing for Boostnote
+## e2e testing
+There is e2e tests for Boostnote written in [ava](https://github.com/avajs/ava) and [spectron](https://github.com/electron/spectron).
+
+### How to run
+There is a command for e2e testing bellow:
+
+```
+$ yarn run test:e2e
+```
+
+The reason why I seperate aother test command is because of convenience of travisCI.
+
+### On travisCI
+I set e2e tests running on travisCI only master branch. If you're interested in it, please take a look at .travis.yml

gruntfile.js

@@ -259,6 +259,8 @@ module.exports = function (grunt) {
       case 'osx':
         grunt.task.run(['compile', 'pack:osx'])
         break
+      case 'linux':
+        grunt.task.run(['compile', 'pack:linux'])
     }
   })
 

lib/finder-menu.js

@@ -1,84 +0,0 @@
-const electron = require('electron')
-const BrowserWindow = electron.BrowserWindow
-
-const OSX = process.platform === 'darwin'
-// const WIN = process.platform === 'win32'
-
-var edit = {
-  label: 'Edit',
-  submenu: [
-    {
-      label: 'Undo',
-      accelerator: 'Command+Z',
-      selector: 'undo:'
-    },
-    {
-      label: 'Redo',
-      accelerator: 'Shift+Command+Z',
-      selector: 'redo:'
-    },
-    {
-      type: 'separator'
-    },
-    {
-      label: 'Cut',
-      accelerator: 'Command+X',
-      selector: 'cut:'
-    },
-    {
-      label: 'Copy',
-      accelerator: 'Command+C',
-      selector: 'copy:'
-    },
-    {
-      label: 'Paste',
-      accelerator: 'Command+V',
-      selector: 'paste:'
-    },
-    {
-      label: 'Select All',
-      accelerator: 'Command+A',
-      selector: 'selectAll:'
-    }
-  ]
-}
-
-var view = {
-  label: 'View',
-  submenu: [
-    {
-      label: 'Focus Search',
-      accelerator: 'Control + Alt + F',
-      click: function () {
-        console.log('focus find')
-      }
-    },
-    {
-      type: 'separator'
-    },
-    {
-      label: 'Toggle Markdown Preview',
-      accelerator: OSX ? 'Command + P' : 'Ctrl + P',
-      click: function () {
-        console.log('markdown')
-      }
-    },
-    {
-      type: 'separator'
-    },
-    {
-      label: 'Reload',
-      accelerator: (function () {
-        if (process.platform === 'darwin') return 'Command+R'
-        else return 'Ctrl+R'
-      })(),
-      click: function () {
-        BrowserWindow.getFocusedWindow().reload()
-      }
-    }
-  ]
-}
-
-module.exports = process.platform === 'darwin'
-  ? [edit, view]
-  : [view]

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

@@ -32,6 +32,7 @@
   <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/keymap/emacs.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../node_modules/raphael/raphael.min.js"></script>

lib/main-app.js

@@ -102,6 +102,9 @@ app.on('ready', function () {
       Menu.setApplicationMenu(menu)
       break
     case 'win32':
+      /* eslint-disable */
+      finderWindow = require('./finder-window')
+      /* eslint-disable */
       mainWindow.setMenu(menu)
       break
     case 'linux':

lib/main-menu.js

@@ -3,11 +3,11 @@ const BrowserWindow = electron.BrowserWindow
 const shell = electron.shell
 const mainWindow = require('./main-window')
 
-const OSX = process.platform === 'darwin'
+const macOS = process.platform === 'darwin'
 // const WIN = process.platform === 'win32'
 const LINUX = process.platform === 'linux'
 
-var boost = OSX
+const boost = macOS
   ? {
     label: 'Boostnote',
     submenu: [
@@ -36,6 +36,7 @@ var boost = OSX
         type: 'separator'
       },
       {
+        label: 'Quit Boostnote',
         role: 'quit'
       }
     ]
@@ -49,19 +50,19 @@ var boost = OSX
     ]
   }
 
-var file = {
+const file = {
   label: 'File',
   submenu: [
     {
       label: 'New Note',
-      accelerator: 'CmdOrCtrl + N',
-      click: function () {
+      accelerator: 'CommandOrControl+N',
+      click () {
         mainWindow.webContents.send('top:new-note')
       }
     },
     {
       label: 'Focus Note',
-      accelerator: 'Control + E',
+      accelerator: 'Control+E',
       click () {
         mainWindow.webContents.send('detail:focus')
       }
@@ -93,8 +94,8 @@ var file = {
     },
     {
       label: 'Delete Note',
-      accelerator: OSX ? 'Control + Backspace' : 'Control + Delete',
-      click: function () {
+      accelerator: macOS ? 'Control+Backspace' : 'Control+Delete',
+      click () {
         mainWindow.webContents.send('detail:delete')
       }
     }
@@ -104,13 +105,12 @@ var file = {
 if (LINUX) {
   file.submenu.push({
     type: 'separator'
-  })
-  file.submenu.push({
+  }, {
     role: 'quit'
   })
 }
 
-var edit = {
+const edit = {
   label: 'Edit',
   submenu: [
     {
@@ -149,20 +149,20 @@ var edit = {
   ]
 }
 
-var view = {
+const view = {
   label: 'View',
   submenu: [
     {
       label: 'Reload',
-      accelerator: 'CmdOrCtrl+R',
-      click: function () {
+      accelerator: 'CommandOrControl+R',
+      click () {
         BrowserWindow.getFocusedWindow().reload()
       }
     },
     {
       label: 'Toggle Developer Tools',
-      accelerator: OSX ? 'Command+Alt+I' : 'Ctrl+Shift+I',
-      click: function () {
+      accelerator: macOS ? 'Command+Alt+I' : 'Control+Shift+I',
+      click () {
         BrowserWindow.getFocusedWindow().toggleDevTools()
       }
     },
@@ -171,24 +171,31 @@ var view = {
     },
     {
       label: 'Next Note',
-      accelerator: 'Control + J',
+      accelerator: 'Control+J',
       click () {
         mainWindow.webContents.send('list:next')
       }
     },
     {
       label: 'Previous Note',
-      accelerator: 'Control + U',
+      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',
+      accelerator: 'Control+S',
       click () {
         mainWindow.webContents.send('top:focus-search')
       }
@@ -196,7 +203,7 @@ var view = {
   ]
 }
 
-var window = {
+const window = {
   label: 'Window',
   submenu: [
     {
@@ -219,21 +226,21 @@ var window = {
   ]
 }
 
-var help = {
+const help = {
   label: 'Help',
   role: 'help',
   submenu: [
     {
       label: 'Boostnote official site',
-      click: function () { shell.openExternal('https://boostnote.io/') }
+      click () { shell.openExternal('https://boostnote.io/') }
     },
     {
       label: 'Issue Tracker',
-      click: function () { shell.openExternal('https://github.com/BoostIO/Boostnote/issues') }
+      click () { shell.openExternal('https://github.com/BoostIO/Boostnote/issues') }
     },
     {
       label: 'Changelog',
-      click: function () { shell.openExternal('https://github.com/BoostIO/boost-releases') }
+      click () { shell.openExternal('https://github.com/BoostIO/boost-releases') }
     }
   ]
 }

lib/main-window.js

@@ -6,9 +6,9 @@ const Config = require('electron-config')
 const config = new Config()
 
 var showMenu = process.platform !== 'win32'
-let windowSize = config.get('windowsize') || { width: 1080, height: 720 }
+const windowSize = config.get('windowsize') || { width: 1080, height: 720 }
 
-let mainWindow = new BrowserWindow({
+const mainWindow = new BrowserWindow({
   width: windowSize.width,
   height: windowSize.height,
   minWidth: 500,
@@ -40,12 +40,19 @@ mainWindow.webContents.sendInputEvent({
 
 if (process.platform !== 'linux' || process.env.DESKTOP_SESSION === 'cinnamon') {
   mainWindow.on('close', function (e) {
+    e.preventDefault()
     if (process.platform === 'win32') {
       mainWindow.minimize()
     } else {
-      mainWindow.hide()
+      if (mainWindow.isFullScreen()) {
+        mainWindow.once('leave-full-screen', function () {
+          mainWindow.hide()
+        })
+        mainWindow.setFullScreen(false)
+      } else {
+        mainWindow.hide()
+      }
     }
-    e.preventDefault()
   })
 
   app.on('before-quit', function (e) {

lib/main.html

@@ -11,7 +11,7 @@
 
   <style>
   @font-face {
-    font-family: 'Lato';
+    font-family: 'OpenSans';
     src: url('../resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
          url('../resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
          url('../resources/fonts/Lato-Regular.ttf') format('truetype');
@@ -20,6 +20,7 @@
     text-rendering: optimizeLegibility;
   }
   #loadingCover{
+    background-color: #f4f4f4;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -47,7 +48,7 @@
 <body>
   <div id="loadingCover">
     <img src="../resources/app.png">
-    <div class='message'>Loading...</div>
+    <div class='message'><i class="fa fa-spinner fa-spin" spin></i></div>
   </div>
 
   <div id="content"></div>
@@ -58,6 +59,7 @@
   <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/keymap/emacs.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/continuelist.js"></script>

package.json

@@ -1,8 +1,8 @@
 {
   "name": "boost",
-  "version": "0.8.4",
-  "description": "Boostnote",
+  "version": "0.8.10",
   "main": "index.js",
+  "description": "Boostnote",
   "license": "GPL-3.0",
   "scripts": {
     "start": "electron ./index.js",
@@ -10,8 +10,10 @@
     "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
     "compile": "grunt compile",
     "test": "PWD=$(pwd) NODE_ENV=test ava",
+    "test:e2e": "NODE_ENV=test ava tests/e2e/*",
     "fix": "npm run lint --fix",
-    "lint": "eslint ./**/*.js"
+    "lint": "eslint .",
+    "dev-start": "concurrently --kill-others \"npm run webpack\" \"npm run hot\""
   },
   "config": {
     "electron-version": "1.2.8"
@@ -48,6 +50,8 @@
   "dependencies": {
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",
+    "aws-sdk": "^2.48.0",
+    "aws-sdk-mobile-analytics": "^0.9.2",
     "codemirror": "^5.19.0",
     "electron-config": "^0.2.1",
     "electron-gh-releases": "^2.0.2",
@@ -55,22 +59,25 @@
     "font-awesome": "^4.3.0",
     "immutable": "^3.8.1",
     "js-sequence-diagrams": "^1000000.0.6",
-    "katex": "^0.6.0",
+    "katex": "^0.7.1",
     "lodash": "^4.11.1",
     "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-emoji": "^1.1.1",
     "markdown-it-footnote": "^3.0.0",
+    "markdown-it-imsize": "^2.0.1",
     "md5": "^2.0.0",
     "mixpanel": "^0.4.1",
     "moment": "^2.10.3",
     "node-ipc": "^8.1.0",
     "raphael": "^2.2.7",
     "react": "^15.0.2",
+    "react-codemirror": "^0.3.0",
     "react-dom": "^15.0.2",
     "react-redux": "^4.4.5",
     "redux": "^3.5.2",
     "sander": "^0.5.1",
+    "spectron": "^3.6.2",
     "superagent": "^1.2.0",
     "superagent-promise": "^1.0.3"
   },
@@ -84,6 +91,8 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.0.1",
     "babel-register": "^6.11.6",
+    "concurrently": "^3.4.0",
+    "copy-to-clipboard": "^3.0.6",
     "css-loader": "^0.19.0",
     "devtron": "^1.1.0",
     "dom-storage": "^2.0.2",
@@ -97,12 +106,11 @@
     "grunt-electron-installer": "^1.2.0",
     "history": "^1.17.0",
     "jsdom": "^9.4.2",
+    "json-loader": "^0.5.4",
     "merge-stream": "^1.0.0",
     "nib": "^1.1.0",
-    "react": "^15.3.0",
     "react-color": "^2.2.2",
     "react-css-modules": "^3.7.6",
-    "react-dom": "^15.3.0",
     "react-input-autosize": "^1.1.0",
     "react-router": "^2.4.0",
     "react-router-redux": "^4.0.4",

readme-ja.md

@@ -23,12 +23,15 @@
 ## Contributors
 [Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
 
+## slack group
+私たちにはslack groupもあります！世界中のプログラマー達と、Boostnoteについてディスカッションをしましょう！ <br>
+[こちらから](https://join.slack.com/boostnote-group/shared_invite/MTkwOTg2NjAzNTUyLTE0OTYzODQ3ODgtMGI4NDZlY2E5OQ)
 
 ## 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)
+* Donation: [Bountysource](https://salt.bountysource.com/teams/boostnote)
 * Development: https://github.com/BoostIO/Boostnote/blob/master/docs/build.md
 * Copyright (C) 2017 Maisin&Co.
 

readme.md

@@ -13,7 +13,7 @@
 
 [![Build Status](https://travis-ci.org/BoostIO/Boostnote.svg?branch=master)](https://travis-ci.org/BoostIO/Boostnote)
 
-## Author & Maintainer
+## Authors & Maintainers
 - [Rokt33r](https://github.com/rokt33r)
 - [sota1235](https://github.com/sota1235)
 - [Kohei TAKATA](https://github.com/kohei-takata)
@@ -23,13 +23,16 @@
 ## Contributors
 [Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
 
+## Slack Group
+Let's talk about Boostnote's great features, new feature requests and things like Japanese gourmet. 🍣 <br>
+[Join us](https://join.slack.com/boostnote-group/shared_invite/MTkwOTg2NjAzNTUyLTE0OTYzODQ3ODgtMGI4NDZlY2E5OQ)
 
 ## 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
+* [Website](https://boostnote.io)
+* [Boostnote Shop](https://boostnote.paintory.com/) : Products are shipped to all over the world 🌏
+* [Donate via Bountysource](https://salt.bountysource.com/teams/boostnote) : Thank you for your support 🎉
+* [GitHub Issues](https://github.com/BoostIO/Boostnote/issues) : We'd love to hear your feedback 🙌
+* [Development](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md) : Development configurations for Boostnote 🚀
 * Copyright (C) 2017 Maisin&Co.
 
 ## License

script/e2e-runner.sh

@@ -0,0 +1,9 @@
+if [[ ${TRAVIS_OS_NAME} = "linux" ]]; then
+  export DISPLAY=:99.0
+  sh -e /etc/init.d/xvfb start;
+  sleep 3
+fi
+
+npm install grunt-cli -g
+grunt pre-build
+npm run test:e2e