Merge pull request #527 from BoostIO/fix-add-description

Add description for package.json

.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"
   }
 }

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

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
+import path from 'path'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -54,20 +55,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')) {
+            const tabs = cm.getOption('indentWithTabs')
-              cm.execCommand('insertTab')
+            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'
       }
     })
 
@@ -155,6 +171,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) {
@@ -163,6 +180,19 @@ export default class CodeEditor extends React.Component {
     this.editor.setCursor(cursor)
   }
 
+  handleDropImage (e) {
+    e.preventDefault()
+    const imagePath = e.dataTransfer.files[0].path
+    const filename = path.basename(imagePath)
+    const imageMd = `![${encodeURI(filename)}](${encodeURI(imagePath)})`
+    this.insertImage(imageMd)
+  }
+
+  insertImage (imageMd) {
+    const textarea = this.editor.getInputField()
+    textarea.value = textarea.value.substr(0, textarea.selectionStart) + imageMd + textarea.value.substr(textarea.selectionEnd)
+  }
+
   render () {
     let { className, fontFamily, fontSize } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
@@ -180,6 +210,7 @@ export default class CodeEditor extends React.Component {
           fontFamily: fontFamily.join(', '),
           fontSize: fontSize
         }}
+        onDrop={(e) => this.handleDropImage(e)}
       />
     )
   }

browser/components/MarkdownEditor.js

@@ -3,19 +3,29 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
     super(props)
 
+    this.escapeFromEditor = ['Control', 'w']
+
+    this.supportMdSelectionBold = ['Control', ':']
+
     this.state = {
       status: 'PREVIEW',
-      renderValue: props.value
+      renderValue: props.value,
+      keyPressed: {},
+      isLocked: false
     }
+
+    this.lockEditorCode = () => this.handleLockEditor()
   }
 
   componentDidMount () {
     this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
   }
 
   componentDidUpdate () {
@@ -30,6 +40,7 @@ class MarkdownEditor extends React.Component {
 
   componentWillUnmount () {
     this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
   }
 
   queueRendering (value) {
@@ -69,11 +80,14 @@ class MarkdownEditor extends React.Component {
           this.refs.code.blur()
           this.refs.preview.focus()
         }
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
       })
     }
   }
 
   handleBlur (e) {
+    if (this.state.isLocked) return
+    this.setState({ keyPressed: [] })
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
       let cursorPosition = this.refs.code.editor.getCursor()
@@ -83,6 +97,7 @@ class MarkdownEditor extends React.Component {
         this.refs.preview.focus()
         this.refs.preview.scrollTo(cursorPosition.line)
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -98,6 +113,7 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.code.focus()
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -134,6 +150,7 @@ class MarkdownEditor extends React.Component {
     } else {
       this.refs.code.focus()
     }
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
   }
 
   reload () {
@@ -142,6 +159,47 @@ class MarkdownEditor extends React.Component {
     this.renderPreview(this.props.value)
   }
 
+  handleKeyDown (e) {
+    if (this.state.status !== 'CODE') return false
+    const keyPressed = Object.assign(this.state.keyPressed, {
+      [e.key]: true
+    })
+    this.setState({ keyPressed })
+    let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] }
+    if (!this.state.isLocked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
+      document.activeElement.blur()
+    }
+    if (this.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
+    })
+    this.setState({ keyPressed })
+  }
+
+  handleLockEditor () {
+    this.setState({ isLocked: !this.state.isLocked })
+  }
+
   render () {
     let { className, value, config } = this.props
 
@@ -160,6 +218,8 @@ class MarkdownEditor extends React.Component {
         }
         onContextMenu={(e) => this.handleContextMenu(e)}
         tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+        onKeyUp={(e) => this.handleKeyUp(e)}
       >
         <CodeEditor styleName='codeEditor'
           ref='code'

browser/components/MarkdownPreview.js

@@ -6,25 +6,14 @@ import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
 import SequenceDiagram from 'js-sequence-diagrams'
-
+import eventEmitter from 'browser/main/lib/eventEmitter'
-function decodeHTMLEntities (text) {
+import fs from 'fs'
-  var entities = [
+import htmlTextHelper from 'browser/lib/htmlTextHelper'
-    ['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
-}
 
 const { remote } = require('electron')
 const { app } = remote
 const path = require('path')
+const dialog = remote.dialog
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const appPath = 'file://' + (process.env.NODE_ENV === 'production'
@@ -49,6 +38,8 @@ body {
 }
 code {
   font-family: ${codeBlockFontFamily.join(', ')};
+  background-color: rgba(0,0,0,0.04);
+  color: #CC305F;
 }
 .lineNumber {
   ${lineNumber && 'display: block !important;'}
@@ -68,6 +59,10 @@ h2 {
   padding-bottom: 0.2em;
   margin: 1em 0 0.37em;
 }
+
+body p {
+  white-space: normal;
+}
 `
 }
 
@@ -90,6 +85,8 @@ export default class MarkdownPreview extends React.Component {
     this.mouseUpHandler = (e) => this.handleMouseUp(e)
     this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e)
     this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
+    this.saveAsTextHandler = () => this.handleSaveAsText()
+    this.saveAsMdHandler = () => this.handleSaveAsMd()
   }
 
   handlePreviewAnchorClick (e) {
@@ -134,6 +131,31 @@ export default class MarkdownPreview extends React.Component {
     if (this.props.onMouseUp != null) this.props.onMouseUp(e)
   }
 
+  handleSaveAsText () {
+    this.exportAsDocument('txt')
+  }
+
+  handleSaveAsMd () {
+    this.exportAsDocument('md')
+  }
+
+  exportAsDocument (fileType) {
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: [fileType] }
+      ],
+      properties: ['openFile', 'createDirectory']
+    }
+    dialog.showSaveDialog(remote.getCurrentWindow(), options,
+    (filename) => {
+      if (filename) {
+        fs.writeFile(filename, this.props.value, (err) => {
+          if (err) throw err
+        })
+      }
+    })
+  }
+
   componentDidMount () {
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
@@ -149,12 +171,20 @@ export default class MarkdownPreview extends React.Component {
 
     this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.addEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
+    eventEmitter.on('export:save-text', this.saveAsTextHandler)
+    eventEmitter.on('export:save-md', this.saveAsMdHandler)
   }
 
   componentWillUnmount () {
     this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
     this.refs.root.contentWindow.document.removeEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.removeEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.removeEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.removeEventListener('dragover', this.preventImageDroppedHandler)
+    eventEmitter.off('export:save-text', this.saveAsTextHandler)
+    eventEmitter.off('export:save-md', this.saveAsMdHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -201,8 +231,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)
     })
@@ -219,7 +260,7 @@ export default class MarkdownPreview extends React.Component {
       let syntax = CodeMirror.findModeByName(el.className)
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
-        let content = el.innerHTML
+        let content = htmlTextHelper.decodeEntities(el.innerHTML)
         el.innerHTML = ''
         el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
         CodeMirror.runMode(content, syntax.mime, el, {
@@ -237,7 +278,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) => {
@@ -253,7 +294,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) => {
@@ -289,6 +330,11 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
+  preventImageDroppedHandler (e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   render () {
     let { className, style, tabIndex } = this.props
     return (

browser/components/NoteItem.js

@@ -13,7 +13,7 @@ import styles from './NoteItem.styl'
  */
 const TagElement = ({ tagName }) => (
   <span styleName='item-bottom-tagList-item' key={tagName}>
-    {tagName}
+    #{tagName}
   </span>
 )
 
@@ -52,8 +52,10 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
   >
     <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 +63,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>
 )

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%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
-  &:active
-    background-color $ui-active-color
-    color white
     .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
+      background-color alpha(white, 0.6)
-      color white
+      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
+  background-color $ui-button--active-backgroundColor
-  color white
+  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
+    background-color alpha(white, 0.6)
-    color white
+    color $ui-text-color
   .item-wrapper
     border-color transparent
+  .item-star
+    color $ui-favorite-star-button-color
   &:hover
-    background-color $ui-active-color
+    background-color $ui-button--active-backgroundColor
-
-.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
 
 .item-title-icon
-  position absolute
+  position relative
-  top 20px
+  font-size 12px
-  right 25px
+  color $ui-inactive-text-color
-  font-size 14px
+
+.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
@@ -84,37 +93,34 @@ $control-height = 30px
   flex 1
   overflow ellipsis
   line-height 20px
-  color #FFFFFF
+  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
+  background-color white
-  color #FFFFFF
-
-.item-bottom-tagList-empty
   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
+  top 34px
-  right 29px
+  left 5px
   width 34px
   height 34px
-  color $ui-favorite-star-button-color
+  color alpha($ui-favorite-star-button-color, 60%)
-  font-size 14px
+  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
+      background-color alpha(white, 10%)
-      color white
+      color $ui-dark-text-color
-    .item-bottom-tagList-empty
-      color white
-    &:hover
-      background-color $ui-active-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
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
-    color $ui-dark-text-color
+    color $ui-inactive-text-color
 
   .item-bottom-tagList-empty
     color $ui-inactive-text-color

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%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
-  &:active
-    background-color $ui-active-color
-    color white
     .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
+  background-color $ui-button--active-backgroundColor
-  color white
+  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
+    .item-simple-title-icon
-      color white
+    .item-simple-bottom-time
-      border-color transparent
+      color $ui-dark-text-color
-    &:hover
+    .item-simple-bottom-tagList-item
-      background-color $ui-active-color
+      background-color transparent
+      color $ui-dark-text-color
 
   .item-simple-title
-    color $ui-dark-text-color
+    color $ui-inactive-text-color
-    border-color $ui-dark-borderColor
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
 
   .item-simple-title-icon
     color $ui-darkinactive-text-color

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.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/markdown.styl

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

browser/finder/FinderMain.styl

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

browser/finder/index.js

@@ -67,12 +67,8 @@ class FinderMain extends React.Component {
   }
 
   handleWindowBlur (e) {
-    let { filter } = this.state
-    filter.type = 'ALL'
     this.setState({
-      search: '',
+      search: ''
-      filter,
-      index: 0
     })
   }
 

browser/lib/htmlTextHelper.js

@@ -0,0 +1,43 @@
+/**
+ * @fileoverview Text trimmer for html.
+ */
+
+/**
+ * @param {string} text
+ * @return {string}
+ */
+
+export function decodeEntities (text) {
+  var entities = [
+    ['apos', '\''],
+    ['amp', '&'],
+    ['lt', '<'],
+    ['gt', '>'],
+    ['#63', '\\?']
+  ]
+
+  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']
+  ]
+
+  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>`

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

@@ -25,15 +25,23 @@ class MarkdownNoteDetail extends React.Component {
       note: Object.assign({
         title: '',
         content: ''
-      }, props.note)
+      }, props.note),
+      isLockButtonShown: false,
+      isLocked: false
     }
     this.dispatchTimer = null
+
+    this.toggleLockButton = this.handleToggleLockButton.bind(this)
   }
 
   focus () {
     this.refs.content.focus()
   }
 
+  componentDidMount () {
+    ee.on('topbar:togglelockbutton', this.toggleLockButton)
+  }
+
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
@@ -50,13 +58,20 @@ class MarkdownNoteDetail extends React.Component {
     if (this.saveQueue != null) this.saveNow()
   }
 
+  componentDidUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
+  }
+
   findTitle (value) {
     let splitted = value.split('\n')
     let title = null
+    let isMarkdownInCode = false
 
     for (let i = 0; i < splitted.length; i++) {
       let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match(/^# .+/)) {
+      if (trimmedLine.match('```')) {
+        isMarkdownInCode = !isMarkdownInCode
+      } else if (isMarkdownInCode === false && trimmedLine.match(/^# +/)) {
         title = trimmedLine.substring(1, trimmedLine.length).trim()
         break
       }
@@ -166,16 +181,7 @@ class MarkdownNoteDetail extends React.Component {
 
   }
 
-  handleContextButtonClick (e) {
+  handleDeleteButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleDeleteMenuClick (e) {
     let index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Delete a note',
@@ -200,10 +206,34 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleLockButtonMouseDown (e) {
+    e.preventDefault()
+    ee.emit('editor:lock')
+    this.setState({ isLocked: !this.state.isLocked })
+    if (this.state.isLocked) this.focus()
+  }
+
+  getToggleLockButton () {
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock-alt'
+  }
+
   handleDeleteKeyDown (e) {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
+  handleToggleLockButton (event, noteStatus) {
+    // first argument event is not used
+    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
+      this.setState({isLockButtonShown: true})
+    } else {
+      this.setState({isLockButtonShown: false})
+    }
+  }
+
+  handleFocus (e) {
+    this.focus()
+  }
+
   render () {
     let { data, config } = this.props
     let { note } = this.state
@@ -235,10 +265,34 @@ class MarkdownNoteDetail extends React.Component {
             />
           </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>
           </div>
         </div>

browser/main/Detail/MarkdownNoteDetail.styl

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

browser/main/Detail/NoteDetailInfo.styl

@@ -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

@@ -189,14 +189,7 @@ class SnippetNoteDetail extends React.Component {
 
   }
 
-  handleContextButtonClick (e) {
+  handleDeleteButtonClick (e) {
-    context.popup([{
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }])
-  }
-
-  handleDeleteMenuClick (e) {
     let index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Delete a note',
@@ -250,15 +243,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
+    const note = Object.assign({}, this.state.note, {snippets})
-    let snippetIndex = this.state.snippetIndex >= snippets.length
+    const snippetIndex = this.state.snippetIndex >= snippets.length
       ? snippets.length - 1
       : this.state.snippetIndex
-    this.setState({
+    this.setState({ note, snippetIndex }, () => {
-      note: this.state.note,
+      this.save()
-      snippetIndex
+      this.refs['code-' + this.state.snippetIndex].reload()
     })
   }
 
@@ -545,10 +538,18 @@ class SnippetNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <button styleName='info-right-button'
+            <button styleName='control-trashButton'
-              onClick={(e) => this.handleContextButtonClick(e)}
+              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>
           </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,13 @@
   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()
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -79,7 +81,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 +95,10 @@ 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()

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
+    transition 0.15s
-      transform rotate(-72deg)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
-    .tooltip
+    color $ui-favorite-star-button-color
-      opacity 1
+  &: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
+    background-color alpha($ui-button--active-backgroundColor, 40%)
-    transform rotate(-72deg)
+  &: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

@@ -107,7 +107,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
+  margin 1px 3px
-  padding-left 10px
+  padding 0
   vertical-align middle
   height 20px
-  background-color $ui-tag-backgroundColor
+  background-color alpha($ui-tag-backgroundColor, 10%)
-  border-radius 20px
+  border-radius 3px
   overflow hidden
   clearfix()
 
@@ -39,9 +39,9 @@
   padding-right 4px
 
 .tag-label
-  font-size 12px
+  font-size 11px
-  font-weight bold
+  font-weight 600
-  color: #FFFFFF
+  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
+    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

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/NoteList/NoteList.styl

@@ -20,31 +20,36 @@ $control-height = 30px
   padding-left 25px
 
 .control-sortBy-select
-  margin-left 0
+  appearance: none;
-  font-size 12px
+  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

@@ -38,6 +38,13 @@ class NoteList extends React.Component {
     this.focusHandler = () => {
       this.refs.list.focus()
     }
+    this.alertIfSnippetHandler = () => {
+      this.alertIfSnippet()
+    }
+
+    this.jumpToTopHandler = () => {
+      this.jumpToTop()
+    }
 
     this.state = {
     }
@@ -48,6 +55,9 @@ class NoteList extends React.Component {
     ee.on('list:next', this.selectNextNoteHandler)
     ee.on('list:prior', this.selectPriorNoteHandler)
     ee.on('list:focus', this.focusHandler)
+    ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.on('list:top', this.jumpToTopHandler)
+    ee.on('list:jumpToTop', this.jumpToTopHandler)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -66,6 +76,9 @@ class NoteList extends React.Component {
     ee.off('list:next', this.selectNextNoteHandler)
     ee.off('list:prior', this.selectPriorNoteHandler)
     ee.off('list:focus', this.focusHandler)
+    ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.off('list:top', this.jumpToTopHandler)
+    ee.off('list:jumpToTop', this.jumpToTopHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -305,6 +318,37 @@ class NoteList extends React.Component {
     })
   }
 
+  alertIfSnippet () {
+    let { location } = this.props
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return `${note.storage}-${note.key}` === location.query.key
+    })
+    if (this.notes[targetIndex].type === 'SNIPPET_NOTE') {
+      dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Sorry!',
+        detail: 'md/text import is available only a markdown note.'
+      })
+    }
+  }
+
+  jumpToTop () {
+    if (this.notes === null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+
+    const targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+  }
+
   render () {
     let { location, notes, config } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
@@ -360,7 +404,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

@@ -10,11 +10,16 @@
 
 .top-menu
   navButtonColor()
-  height $topBar-height - 1
+  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.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
+  margin-bottom 5px
-  .header-info
+  background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
+  transition color background-color  0.15s
-    background-color $ui-button--active-backgroundColor
+
+.header--active
   .header-toggleButton
+    color $ui-text-color
+
+.header--active
+  .header-info
+    color $ui-text-color
+
+.header--active
   .header-addFolderButton
-    color white
+    color $ui-text-color
-    &:active
-    &:hover
-    &:hover:active
-      color white
 
 .header-toggleButton
+  navButtonColor()
   position absolute
   left 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
-  color $ui-inactive-text-color
+  border-radius 50%
-  background-color transparent
   &: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
+  height 25px
-  padding-left 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
+  background-color alpha($ui-button--active-backgroundColor, 20%)
-  color $ui-inactive-text-color
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
 
 .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
+  margin-right 5px
-  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
 
 .root--folded
   @extend .root
@@ -108,16 +102,50 @@
     margin 0 5px
 
 body[data-theme="dark"]
-  .header-toggleButton
+  .header--active
-  .header-addFolderButton
+    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-inactive-text-color
+    transition color background-color  0.15s
-    &:hover
+
-      color $ui-dark-text-color
-    &:active
-      color $ui-dark-active-color
   .header--active
     .header-toggleButton
-    .header-addFolderButton
+      color $ui-dark-text-color
-      color white
+
+  .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/StatusBar/index.js

@@ -8,7 +8,7 @@ const electron = require('electron')
 const { remote, ipcRenderer } = electron
 const { Menu, MenuItem, dialog } = remote
 
-const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3]
+const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0]
 
 class StatusBar extends React.Component {
   updateApp () {

browser/main/TopBar/TopBar.styl

@@ -44,12 +44,13 @@ $control-height = 34px
 .control-search-optionList
   position fixed
   z-index 200
-  width 275px
+  width 500px
-  height 175px
+  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

@@ -24,14 +24,20 @@ class TopBar extends React.Component {
     this.newNoteHandler = () => {
       this.handleNewPostButtonClick()
     }
+
+    this.focusSearchHandler = () => {
+      this.handleOnSearchFocus()
+    }
   }
 
   componentDidMount () {
     ee.on('top:new-note', this.newNoteHandler)
+    ee.on('top:focus-search', this.focusSearchHandler)
   }
 
   componentWillUnmount () {
     ee.off('top:new-note', this.newNoteHandler)
+    ee.off('top:focus-search', this.focusSearchHandler)
   }
 
   handleNewPostButtonClick (e) {
@@ -244,6 +250,14 @@ class TopBar extends React.Component {
     })
   }
 
+  handleOnSearchFocus () {
+    if (this.state.searchPopupOpen) {
+      this.refs.search.childNodes[0].blur()
+    } else {
+      this.refs.search.childNodes[0].focus()
+    }
+  }
+
   render () {
     let { config, style, data } = this.props
     let searchOptionList = this.getOptions()

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/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

@@ -78,7 +78,7 @@ class CreateFolderModal extends React.Component {
           <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-mark'>×</div>
           <div styleName='close-text'>esc</div>
         </button>
 
@@ -95,7 +95,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,15 +1,15 @@
 .root
   modal()
-  width 700px
+  width 500px
-  height 200px
+  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
@@ -19,34 +19,34 @@
   font-size 15px
 
 .close
-  height 50px
+  height 70px
   position absolute
   background-color transparent
   color $ui-inactive-text-color
   border none
   top 7px
-  right 10px
+  right 30px
   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 +54,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
+    width 500px
-    height 200px
+    height 270px
     overflow hidden
     position relative
     padding 0 40px
@@ -91,3 +92,6 @@ body[data-theme="dark"]
 
   .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

@@ -41,10 +41,6 @@ class InitModal extends React.Component {
     }
   }
 
-  handleCloseButtonClick (e) {
-    this.props.close()
-  }
-
   handlePathChange (e) {
     this.setState({
       path: e.target.value
@@ -143,7 +139,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 +183,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 +199,12 @@ 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>
         <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

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

browser/main/modals/NewNoteModal.js

@@ -102,9 +102,10 @@ class NewNoteModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Make a Note</div>
         </div>
-        <button styleName='closeButton'
+        <button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
-          onClick={(e) => this.handleCloseButtonClick(e)}
+          <div styleName='close-mark'>×</div>
-        >Close</button>
+          <div styleName='close-text'>esc</div>
+        </button>
 
         <div styleName='control'>
           <button styleName='control-button'
@@ -116,7 +117,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'
@@ -128,7 +129,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

@@ -14,20 +14,24 @@
   color $ui-text-color
 
 .closeButton
+  height 50px
   position absolute
-  top 10px
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 1px
   right 10px
-  height 30px
+  text-align center
-  width 0 25px
+  width top-bar--height
-  border $ui-border
+  height top-bar--height
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
 
 .control
   padding 25px 15px 15px
   text-align center
 
+.close-mark
+  font-size 15px
+
 .control-button
   width 220px
   height 220px
@@ -64,17 +68,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()
-
   .control-button
     border-color $ui-dark-borderColor
     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
+  height 35px
-  padding 0 15px
+  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

@@ -138,6 +138,8 @@ class HotkeyTab extends React.Component {
                 <li><code>Escape</code> (or <code>Esc</code> for short)</li>
                 <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
                 <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+                <li><code>Control</code> (or <code>Ctrl</code> for short)</li>
+                <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.
+            <a href='https://boostnote.io'
-          </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'
               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%
-
+  font-size 14px
-.clear
-  clear both
 
 .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
+    color alpha($tab--dark-text-color, 80%)
-
-  .madeBy
-    color $ui-dark-inactive-text-color
-
-  .copyright
-    color $ui-dark-inactive-text-color

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -45,22 +45,20 @@ top-bar--height = 50px
   text-align left
   width 100px
   margin 4px 0
-  padding 7px 0
+  padding 5px 0
-  padding-left 7px
+  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
+  color $ui-text-color
-  background-color $ui-active-color
+  background-color $ui-button--active-backgroundColor
   &:hover
-    color white
+    color $ui-text-color
 
 .nav-button-icon
   display block
@@ -91,3 +89,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 = {
+    if (checkHighLight === null) {
-      theme: this.refs.uiTheme.value,
+      checkHighLight = document.createElement('link')
-      disableDirectWrite: this.refs.uiD2w != null
+      checkHighLight.setAttribute('id', 'checkHighLight')
-        ? this.refs.uiD2w.checked
+      checkHighLight.setAttribute('rel', 'stylesheet')
-        : false
+      document.head.appendChild(checkHighLight)
-    }
-    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
     }
 
-    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'>
@@ -253,7 +278,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

@@ -118,7 +118,7 @@ class Preferences extends React.Component {
           <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-mark'>×</div>
           <div styleName='top-bar-close-text'>esc</div>
         </button>
         <div styleName='nav'>

browser/main/modals/RenameFolderModal.styl

@@ -6,7 +6,7 @@
 
 .header
   height 50px
-  font-size 18px
+  font-size 16px
   line-height 50px
   padding 0 15px
   background-color $ui-backgroundColor
@@ -40,7 +40,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
@@ -75,3 +75,7 @@ body[data-theme="dark"]
 
   .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
+  color $ui-text-color
-  background-color $primary-button-background
+  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-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,19 +1,11 @@
 # Contributing to Boostnote
 
-> English below.
+## When you open an issue of a bug report
+There are no issue template. But there is a request.
 
-## Pull requestの著作権について
+**Please paste screenshots of Boostnote with developer tool open**
 
-Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
+Thank you for your help in advance.
-
-アプリケーションのLicenseのをいつでも変える選択肢を残したいからです。
-しかし、これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。
-もし、このアプリケーションで金を稼ごうとするならBoostnote専用のCloud storageの提供やMobile appとの連動、何か特殊なプレミアム機能の提供など形になると思います。
-現在考えられているのは、GPL v3の場合、他のライセンスとの互換が不可能であるため、もしより自由なLicense(BSD, MIT)に変える時に改めて著作権者としてライセンスし直す選択肢を残したいぐらいのイメージです。
-
----
-
-# Contributing to Boostnote(ENG)
 
 ## About copyright of Pull Request
 
@@ -21,3 +13,23 @@ If you make a pull request, It means you agree to transfer the copyright of the
 
 It doesn't mean Boostnote will become a paid app. If we want to earn some money, We will try other way, which is some kind of cloud storage, Mobile app integration or some SPECIAL features.
 Because GPL v3 is too strict to be compatible with any other License, We thought this is needed to replace the license with much freer one(like BSD, MIT) somewhen.
+
+---
+
+# Contributing to Boostnote(Japanese)
+
+## バグレポートに関してのissueを立てる時
+イシューテンプレートはありませんが、1つお願いがあります。
+
+**開発者ツールを開いた状態のBoostnoteのスクリーンショットを貼ってください**
+
+よろしくお願いします。
+
+## Pull requestの著作権について
+
+Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
+
+アプリケーションのLicenseをいつでも変える選択肢を残したいと思うからです。
+これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。
+もし、このアプリケーションに料金が発生する時は、Boostnote専用のCloud storageの提供やMobile appとの連動、何か特殊なプレミアム機能の提供など形になります。
+現在考えられているのは、GPL v3の場合、他のライセンスとの互換が不可能であるため、もしより自由なLicense(BSD, MIT)に変える時に改めて著作権者としてライセンスし直す選択肢を残すイメージです。

docs/build.md

@@ -3,50 +3,44 @@
 ## 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.
 
-```
+The `webpack` will watch for code changes and then apply them automatically.
-webpack: bundle is now VALID.
-```
 
-Then, we have to run the app.
+If the following error occurs: `Failed to load resource: net::ERR_CONNECTION_REFUSED`, please reload Boostnote.
-```
-$ npm run hot
-```
-> Actually the app can be start with `npm start`. However, the app will use the compiled script.
 
-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.
+> There are some cases where you have to refresh the app manually.
-> 1. When editing constructor method of a component
+> 1. When editing a 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.)
+> 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.
+We use Grunt to automate deployment.
-Acutal deploy can be run by `grunt`. However, you shouldn't use because the default task is including codesign and authenticode.
+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/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`로 실행가능합니다. 하지만 이 경우, 컴파일된 스크립트를 사용할 것입니다.
 
 이로써 웹팩이 자동적으로 코드변경을 확인하고 적용해줄 것입니다.
 

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'
+var trayIcon = process.platform === 'darwin' || process.platform === 'win32'
-  ? !systemPreferences.isDarkMode()
+  ? path.join(__dirname, '../resources/tray-icon-default.png')
-    ? path.join(__dirname, '../resources/tray-icon-default.png')
+  : path.join(__dirname, '../resources/tray-icon.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 appIcon = new Tray(trayIcon)
 appIcon.setToolTip('Boostnote')
 if (process.platform === 'darwin') {

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,23 +50,52 @@ var boost = OSX
     ]
   }
 
-var file = {
+const file = {
   label: 'File',
   submenu: [
     {
       label: 'New Note',
-      accelerator: 'CmdOrCtrl + N',
+      accelerator: 'CommandOrControl+N',
-      click: function () {
+      click () {
         mainWindow.webContents.send('top:new-note')
       }
     },
+    {
+      label: 'Focus Note',
+      accelerator: 'Control+E',
+      click () {
+        mainWindow.webContents.send('detail:focus')
+      }
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Export as',
+      submenu: [
+        {
+          label: 'Plain Text (.txt)',
+          click () {
+            mainWindow.webContents.send('list:isMarkdownNote')
+            mainWindow.webContents.send('export:save-text')
+          }
+        },
+        {
+          label: 'MarkDown (.md)',
+          click () {
+            mainWindow.webContents.send('list:isMarkdownNote')
+            mainWindow.webContents.send('export:save-md')
+          }
+        }
+      ]
+    },
     {
       type: 'separator'
     },
     {
       label: 'Delete Note',
-      accelerator: OSX ? 'Control + Backspace' : 'Control + Delete',
+      accelerator: macOS ? 'Control+Backspace' : 'Control+Delete',
-      click: function () {
+      click () {
         mainWindow.webContents.send('detail:delete')
       }
     }
@@ -75,13 +105,12 @@ var file = {
 if (LINUX) {
   file.submenu.push({
     type: 'separator'
-  })
+  }, {
-  file.submenu.push({
     role: 'quit'
   })
 }
 
-var edit = {
+const edit = {
   label: 'Edit',
   submenu: [
     {
@@ -120,27 +149,61 @@ var edit = {
   ]
 }
 
-var view = {
+const view = {
   label: 'View',
   submenu: [
     {
       label: 'Reload',
-      accelerator: 'CmdOrCtrl+R',
+      accelerator: 'CommandOrControl+R',
-      click: function () {
+      click () {
         BrowserWindow.getFocusedWindow().reload()
       }
     },
     {
       label: 'Toggle Developer Tools',
-      accelerator: OSX ? 'Command+Alt+I' : 'Ctrl+Shift+I',
+      accelerator: macOS ? 'Command+Alt+I' : 'Control+Shift+I',
-      click: function () {
+      click () {
         BrowserWindow.getFocusedWindow().toggleDevTools()
       }
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Next Note',
+      accelerator: 'Control+J',
+      click () {
+        mainWindow.webContents.send('list:next')
+      }
+    },
+    {
+      label: 'Previous Note',
+      accelerator: 'Control+U',
+      click () {
+        mainWindow.webContents.send('list:prior')
+      }
+    },
+    {
+      label: 'Jump to Top',
+      accelerator: 'Control+G',
+      click () {
+        mainWindow.webContents.send('list:jumpToTop')
+      }
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Focus Search',
+      accelerator: 'Control+S',
+      click () {
+        mainWindow.webContents.send('top:focus-search')
+      }
     }
   ]
 }
 
-var window = {
+const window = {
   label: 'Window',
   submenu: [
     {
@@ -163,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,16 +40,28 @@ 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) {
-    config.set('windowsize', mainWindow.getBounds())
+    try {
+      config.set('windowsize', mainWindow.getBounds())
+    } catch (e) {
+      // ignore any errors because an error occurs only on update
+      // refs: https://github.com/BoostIO/Boostnote/issues/243
+    }
     mainWindow.removeAllListeners()
   })
 } else {

lib/main.html

@@ -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>

package.json

@@ -1,8 +1,8 @@
 {
   "name": "boost",
-  "version": "0.8.2",
+  "version": "0.8.9",
-  "description": "Boostnote",
   "main": "index.js",
+  "description": "Boostnote",
   "license": "GPL-3.0",
   "scripts": {
     "start": "electron ./index.js",
@@ -11,7 +11,8 @@
     "compile": "grunt compile",
     "test": "PWD=$(pwd) NODE_ENV=test ava",
     "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"
@@ -55,7 +56,7 @@
     "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",
@@ -67,6 +68,7 @@
     "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",
@@ -84,6 +86,7 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.0.1",
     "babel-register": "^6.11.6",
+    "concurrently": "^3.4.0",
     "css-loader": "^0.19.0",
     "devtron": "^1.1.0",
     "dom-storage": "^2.0.2",
@@ -99,10 +102,8 @@
     "jsdom": "^9.4.2",
     "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

@@ -17,17 +17,21 @@
 - [Rokt33r](https://github.com/rokt33r)
 - [sota1235](https://github.com/sota1235)
 - [Kohei TAKATA](https://github.com/kohei-takata)
+- [asmsuechan](https://github.com/asmsuechan)
 - [Kazu Yokomizo](https://github.com/kazup01)
 
 ## Contributors
 [Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
 
+## slack group
+私たちにはslack groupもあります！世界中のプログラマー達と、Boostnoteについてディスカッションをしましょう！ <br>
+[こちらから](https://join.slack.com/boostnote-group/shared_invite/MTc2NTc5MTkyMjc3LTE0OTM0NDI5MzgtNzdkNjZjMzJhNA)
 
 ## 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-ko.md

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

readme.md

@@ -13,22 +13,26 @@
 
 [![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)
+- [asmsuechan](https://github.com/asmsuechan)
 - [Kazu Yokomizo](https://github.com/kazup01)
 
 ## 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/MTc2NTc5MTkyMjc3LTE0OTM0NDI5MzgtNzdkNjZjMzJhNA)
 
 ## More Information
-* Website: http://boostnote.io/
+* [Website](https://boostnote.io)
-* Roadmap(upcoming features and bug fixes): https://github.com/BoostIO/Boostnote/wiki/List-of-the-requested-features
+* [Boostnote Shop](https://boostnote.paintory.com/) : Products are shipped to all over the world 🌏
-* Boostnote Shop(Products are shipped to all over the world :+1:): https://boostnote.paintory.com/
+* [Donate via Bountysource](https://salt.bountysource.com/teams/boostnote) : Thank you for your support 🎉
-* Donation: [Patreon](https://www.patreon.com/boostnote)
+* [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](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md) : Development configurations for Boostnote 🚀
 * Copyright (C) 2017 Maisin&Co.
 
 ## License

tests/lib/html-text-helper-test.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Unit test for browser/lib/htmlTextHelper
+ */
+const test = require('ava')
+const htmlTextHelper = require('browser/lib/htmlTextHelper')
+
+// Unit test
+test('htmlTextHelper#decodeEntities should return encoded text (string)', t => {
+  // [input, expected]
+  const testCases = [
+    ['&lt;a href=', '<a href='],
+    ['var test = &apos;test&apos;', 'var test = \'test\''],
+    ['&lt;a href=&apos;https://boostnote.io&apos;&gt;Boostnote', '<a href=\'https://boostnote.io\'>Boostnote'],
+    ['&lt;\\\\?php\n var = &apos;hoge&apos;;', '<\\\\?php\n var = \'hoge\';'],
+    ['&amp;', '&']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(htmlTextHelper.decodeEntities(input), expected, `Test for decodeEntities() input: ${input} expected: ${expected}`)
+  })
+})
+
+test('htmlTextHelper#decodeEntities() should return decoded text (string)', t => {
+  // [input, expected]
+  const testCases = [
+    ['<a href=', '&lt;a href='],
+    ['var test = \'test\'', 'var test = &apos;test&apos;'],
+    ['<a href=\'https://boostnote.io\'>Boostnote', '&lt;a href=&apos;https://boostnote.io&apos;&gt;Boostnote'],
+    ['<?php\n var = \'hoge\';', '&lt;&#63;php\n var = &apos;hoge&apos;;']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(htmlTextHelper.encodeEntities(input), expected, `Test for encodeEntities() input: ${input} expected: ${expected}`)
+  })
+})
+
+// Integration test
+test(t => {
+  const testCases = [
+    'var test = \'test\'',
+    '<a href=\'https://boostnote.io\'>Boostnote',
+    '<Component styleName=\'test\' />'
+  ]
+
+  testCases.forEach(testCase => {
+    const encodedText = htmlTextHelper.encodeEntities(testCase)
+    const decodedText = htmlTextHelper.decodeEntities(encodedText)
+    t.is(decodedText, testCase, 'Integration test through encodedText() and decodedText()')
+  })
+})