Merge branch 'master' of https://github.com/BoostIO/Boostnote

2025-12-13 17:56:25 +00:00 · 2019-01-11 10:36:59 +07:00
parent 9ad0f58095 5a9de1a95d
commit c6c5e33ee6
43 changed files with 587 additions and 84 deletions
--- a/browser/components/ColorPicker.js
+++ b/browser/components/ColorPicker.js
@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { SketchPicker } from 'react-color'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ColorPicker.styl'
+
+const componentHeight = 330
+
+class ColorPicker extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      color: this.props.color || '#939395'
+    }
+
+    this.onColorChange = this.onColorChange.bind(this)
+    this.handleConfirm = this.handleConfirm.bind(this)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    this.onColorChange(nextProps.color)
+  }
+
+  onColorChange (color) {
+    this.setState({
+      color
+    })
+  }
+
+  handleConfirm () {
+    this.props.onConfirm(this.state.color)
+  }
+
+  render () {
+    const { onReset, onCancel, targetRect } = this.props
+    const { color } = this.state
+
+    const clientHeight = document.body.clientHeight
+    const alignX = targetRect.right + 4
+    let alignY = targetRect.top
+    if (targetRect.top + componentHeight > clientHeight) {
+      alignY = targetRect.bottom - componentHeight
+    }
+
+    return (
+      <div styleName='colorPicker' style={{top: `${alignY}px`, left: `${alignX}px`}}>
+        <div styleName='cover' onClick={onCancel} />
+        <SketchPicker color={color} onChange={this.onColorChange} />
+        <div styleName='footer'>
+          <button styleName='btn-reset' onClick={onReset}>Reset</button>
+          <button styleName='btn-cancel' onClick={onCancel}>Cancel</button>
+          <button styleName='btn-confirm' onClick={this.handleConfirm}>Confirm</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+ColorPicker.propTypes = {
+  color: PropTypes.string,
+  targetRect: PropTypes.object,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onReset: PropTypes.func.isRequired
+}
+
+export default CSSModules(ColorPicker, styles)
--- a/browser/components/ColorPicker.styl
+++ b/browser/components/ColorPicker.styl
@@ -0,0 +1,39 @@
+.colorPicker
+  position fixed
+  z-index 2
+  display flex
+  flex-direction column
+
+.cover
+  position fixed
+  top 0
+  right 0
+  bottom 0
+  left 0
+
+.footer
+  display flex
+  justify-content center
+  z-index 2
+  align-items center
+  & > button + button
+    margin-left 10px
+
+.btn-cancel,
+.btn-confirm,
+.btn-reset
+  vertical-align middle
+  height 25px
+  margin-top 2.5px
+  border-radius 2px
+  border none
+  padding 0 5px
+  background-color $default-button-background
+  &:hover
+    background-color $default-button-background--hover
+.btn-confirm
+  background-color #1EC38B
+  &:hover
+    background-color darken(#1EC38B, 25%)
+
+
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -398,6 +398,31 @@ export default class MarkdownPreview extends React.Component {
    }
  }

+  /**
+   * @description Convert special characters between three ```
+   * @param {string[]} splitWithCodeTag Array of HTML strings separated by three ```
+   * @returns {string} HTML in which special characters between three ``` have been converted
+   */
+  escapeHtmlCharactersInCodeTag (splitWithCodeTag) {
+    for (let index = 0; index < splitWithCodeTag.length; index++) {
+      const codeTagRequired = (splitWithCodeTag[index] !== '\`\`\`' && index < splitWithCodeTag.length - 1)
+      if (codeTagRequired) {
+        splitWithCodeTag.splice((index + 1), 0, '\`\`\`')
+      }
+    }
+    let inCodeTag = false
+    let result = ''
+    for (let content of splitWithCodeTag) {
+      if (content === '\`\`\`') {
+        inCodeTag = !inCodeTag
+      } else if (inCodeTag) {
+        content = escapeHtmlCharacters(content)
+      }
+      result += content
+    }
+    return result
+  }
+
  getScrollBarStyle () {
    const { theme } = this.props

@@ -632,11 +657,16 @@ export default class MarkdownPreview extends React.Component {
      indentSize,
      showCopyNotification,
      storagePath,
-      noteKey
+      noteKey,
+      sanitize
    } = this.props
    let { value, codeBlockTheme } = this.props

    this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
+    if (sanitize === 'NONE') {
+      const splitWithCodeTag = value.split('```')
+      value = this.escapeHtmlCharactersInCodeTag(splitWithCodeTag)
+    }
    const renderedHTML = this.markdown.render(value)
    attachmentManagement.migrateAttachments(value, storagePath, noteKey)
    this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS(
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isArray } from 'lodash'
+import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import { getTodoStatus } from 'browser/lib/getTodoStatus'
 import styles from './NoteItem.styl'
@@ -13,29 +14,38 @@ import i18n from 'browser/lib/i18n'
 /**
 * @description Tag element component.
 * @param {string} tagName
+ * @param {string} color
 * @return {React.Component}
 */
-const TagElement = ({ tagName }) => (
-  <span styleName='item-bottom-tagList-item' key={tagName}>
+const TagElement = ({ tagName, color }) => {
+  const style = {}
+  if (color) {
+    style.backgroundColor = color
+    style.color = invertColor(color, { black: '#222', white: '#f1f1f1', threshold: 0.3 })
+  }
+  return (
+    <span styleName='item-bottom-tagList-item' key={tagName} style={style}>
      #{tagName}
    </span>
  )
+}

 /**
 * @description Tag element list component.
 * @param {Array|null} tags
 * @param {boolean} showTagsAlphabetically
+ * @param {Object} coloredTags
 * @return {React.Component}
 */
-const TagElementList = (tags, showTagsAlphabetically) => {
+const TagElementList = (tags, showTagsAlphabetically, coloredTags) => {
  if (!isArray(tags)) {
    return []
  }

  if (showTagsAlphabetically) {
-    return _.sortBy(tags).map(tag => TagElement({ tagName: tag }))
+    return _.sortBy(tags).map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
  } else {
-    return tags.map(tag => TagElement({ tagName: tag }))
+    return tags.map(tag => TagElement({ tagName: tag, color: coloredTags[tag] }))
  }
 }

@@ -46,6 +56,7 @@ const TagElementList = (tags, showTagsAlphabetically) => {
 * @param {Function} handleNoteClick
 * @param {Function} handleNoteContextMenu
 * @param {Function} handleDragStart
+ * @param {Object} coloredTags
 * @param {string} dateDisplay
 */
 const NoteItem = ({
@@ -59,7 +70,8 @@ const NoteItem = ({
  storageName,
  folderName,
  viewType,
-  showTagsAlphabetically
+  showTagsAlphabetically,
+  coloredTags
 }) => (
  <div
    styleName={isActive ? 'item--active' : 'item'}
@@ -97,7 +109,7 @@ const NoteItem = ({
      <div styleName='item-bottom'>
        <div styleName='item-bottom-tagList'>
          {note.tags.length > 0
-            ? TagElementList(note.tags, showTagsAlphabetically)
+            ? TagElementList(note.tags, showTagsAlphabetically, coloredTags)
            : <span
              style={{ fontStyle: 'italic', opacity: 0.5 }}
              styleName='item-bottom-tagList-empty'
@@ -127,6 +139,7 @@ const NoteItem = ({
 NoteItem.propTypes = {
  isActive: PropTypes.bool.isRequired,
  dateDisplay: PropTypes.string.isRequired,
+  coloredTags: PropTypes.object,
  note: PropTypes.shape({
    storage: PropTypes.string.isRequired,
    key: PropTypes.string.isRequired,
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -10,11 +10,12 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {string} name
 * @param {Function} handleClickTagListItem
 * @param {Function} handleClickNarrowToTag
-* @param {bool} isActive
-* @param {bool} isRelated
+* @param {boolean} isActive
+* @param {boolean} isRelated
+* @param {string} bgColor tab backgroundColor
 */

-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count}) => (
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, handleContextMenu, isActive, isRelated, count, color}) => (
  <div styleName='tagList-itemContainer' onContextMenu={e => handleContextMenu(e, name)}>
    {isRelated
      ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
@@ -23,6 +24,7 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, hand
      : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} />
    }
    <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
+      <span styleName='tagList-item-color' style={{backgroundColor: color || 'transparent'}} />
      <span styleName='tagList-item-name'>
        {`# ${name}`}
        <span styleName='tagList-item-count'>{count !== 0 ? count : ''}</span>
@@ -33,7 +35,8 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, hand

 TagListItem.propTypes = {
  name: PropTypes.string.isRequired,
-  handleClickTagListItem: PropTypes.func.isRequired
+  handleClickTagListItem: PropTypes.func.isRequired,
+  color: PropTypes.string
 }

 export default CSSModules(TagListItem, styles)
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -71,6 +71,11 @@
  padding-right 15px
  font-size 13px

+.tagList-item-color
+  height 26px
+  width 3px
+  display inline-block
+
 body[data-theme="white"]
  .tagList-item
    color $ui-inactive-text-color
--- a/browser/main/Detail/FullscreenButton.js
+++ b/browser/main/Detail/FullscreenButton.js
@@ -5,15 +5,17 @@ import styles from './FullscreenButton.styl'
 import i18n from 'browser/lib/i18n'

 const OSX = global.process.platform === 'darwin'
-const hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B'
 const FullscreenButton = ({
 onClick
-}) => (
+}) => {
+  const hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B'
+  return (
    <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')} onMouseDown={(e) => onClick(e)}>
      <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-    <span styleName='tooltip'>{i18n.__('Fullscreen')}({hotkey})</span>
+      <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Fullscreen')}({hotkey})</span>
    </button>
  )
+}

 FullscreenButton.propTypes = {
  onClick: PropTypes.func.isRequired
--- a/browser/main/Detail/FullscreenButton.styl
+++ b/browser/main/Detail/FullscreenButton.styl
@@ -17,6 +17,10 @@
  opacity 0
  transition 0.1s

+.tooltip:lang(ja)
+  @extend .tooltip
+  right 35px
+
 body[data-theme="dark"]
  .control-fullScreenButton
    topBarButtonDark()
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -437,6 +437,7 @@ class MarkdownNoteDetail extends React.Component {
          showTagsAlphabetically={config.ui.showTagsAlphabetically}
          data={data}
          onChange={this.handleUpdateTag.bind(this)}
+          coloredTags={config.coloredTags}
        />
        <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
      </div>
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -20,6 +20,7 @@ import _ from 'lodash'
 import {findNoteTitle} from 'browser/lib/findNoteTitle'
 import convertModeName from 'browser/lib/convertModeName'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import FullscreenButton from './FullscreenButton'
 import TrashButton from './TrashButton'
 import RestoreButton from './RestoreButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
@@ -791,6 +792,7 @@ class SnippetNoteDetail extends React.Component {
          showTagsAlphabetically={config.ui.showTagsAlphabetically}
          data={data}
          onChange={(e) => this.handleChange(e)}
+          coloredTags={config.coloredTags}
        />
      </div>
      <div styleName='info-right'>
@@ -799,11 +801,7 @@ class SnippetNoteDetail extends React.Component {
          isActive={note.isStarred}
        />

-        <button styleName='control-fullScreenButton' title={i18n.__('Fullscreen')}
-          onMouseDown={(e) => this.handleFullScreenButton(e)}>
-          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-          <span styleName='tooltip'>{i18n.__('Fullscreen')}</span>
-        </button>
+        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />

        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -54,7 +54,7 @@ class StarButton extends React.Component {
            : '../resources/icon/icon-star.svg'
          }
        />
-        <span styleName='tooltip'>{i18n.__('Star')}</span>
+        <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Star')}</span>
      </button>
    )
  }
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -21,6 +21,11 @@
  opacity 0
  transition 0.1s

+.tooltip:lang(ja)
+  @extend .tooltip
+  right 103px
+  width 70px
+
 .root--active
  @extend .root
  transition 0.15s
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
@@ -185,19 +186,34 @@ class TagSelect extends React.Component {
  }

  render () {
-    const { value, className, showTagsAlphabetically } = this.props
+    const { value, className, showTagsAlphabetically, coloredTags } = this.props

    const tagList = _.isArray(value)
      ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
+        const wrapperStyle = {}
+        const textStyle = {}
+        const BLACK = '#333333'
+        const WHITE = '#f1f1f1'
+        const color = coloredTags[tag]
+        const invertedColor = color && invertColor(color, { black: BLACK, white: WHITE })
+        let iconRemove = '../resources/icon/icon-x.svg'
+        if (color) {
+          wrapperStyle.backgroundColor = color
+          textStyle.color = invertedColor
+        }
+        if (invertedColor === WHITE) {
+          iconRemove = '../resources/icon/icon-x-light.svg'
+        }
        return (
          <span styleName='tag'
            key={tag}
+            style={wrapperStyle}
          >
-            <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
+            <span styleName='tag-label' style={textStyle} onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
            <button styleName='tag-removeButton'
              onClick={(e) => this.handleTagRemoveButtonClick(tag)}
            >
-              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
+              <img className='tag-removeButton-icon' src={iconRemove} width='8px' />
            </button>
          </span>
        )
@@ -246,7 +262,8 @@ TagSelect.contextTypes = {
 TagSelect.propTypes = {
  className: PropTypes.string,
  value: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  coloredTags: PropTypes.object
 }

 export default CSSModules(TagSelect, styles)
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -3,19 +3,18 @@
  align-items center
  user-select none
  vertical-align middle
-  width 100%
-  overflow-x scroll
+  width 96%
+  overflow-x auto
  white-space nowrap
-  margin-top 31px
+  top 50px
  position absolute
-
-.root::-webkit-scrollbar
-  display none
+  &::-webkit-scrollbar
+    height 8px

 .tag
  display flex
  align-items center
-  margin 0px 2px
+  margin 0px 2px 2px
  padding 2px 4px
  background-color alpha($ui-tag-backgroundColor, 3%)
  border-radius 4px
--- a/browser/main/Detail/ToggleModeButton.js
+++ b/browser/main/Detail/ToggleModeButton.js
@@ -14,7 +14,7 @@ const ToggleModeButton = ({
    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
    </div>
-    <span styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
+    <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Toggle Mode')}</span>
  </div>
 )

--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -40,6 +40,11 @@
  opacity 0
  transition 0.1s

+.tooltip:lang(ja)
+  @extend .tooltip
+  left -8px
+  width 70px
+
 body[data-theme="dark"]
  .control-fullScreenButton
    topBarButtonDark()
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -11,7 +11,7 @@ const TrashButton = ({
    onClick={(e) => onClick(e)}
  >
    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
-    <span styleName='tooltip'>{i18n.__('Trash')}</span>
+    <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Trash')}</span>
  </button>
 )

--- a/browser/main/Detail/TrashButton.styl
+++ b/browser/main/Detail/TrashButton.styl
@@ -17,6 +17,10 @@
  opacity 0
  transition 0.1s

+.tooltip:lang(ja)
+  @extend .tooltip
+  right 46px
+
 .control-trashButton--in-trash
  top 60px
  topBarButtonRight()
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -172,10 +172,21 @@ class Main extends React.Component {
    delete CodeMirror.keyMap.emacs['Ctrl-V']

    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
+    eventEmitter.on('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this))
  }

  componentWillUnmount () {
    eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
+    eventEmitter.off('menubar:togglemenubar', this.toggleMenuBarVisible.bind(this))
+  }
+
+  toggleMenuBarVisible () {
+    const { config } = this.props
+    const { ui } = config
+
+    const newUI = Object.assign(ui, {showMenuBar: !ui.showMenuBar})
+    const newConfig = Object.assign(config, newUI)
+    ConfigManager.set(newConfig)
  }

  handleLeftSlideMouseDown (e) {
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -1047,6 +1047,7 @@ class NoteList extends React.Component {
              storageName={this.getNoteStorage(note).name}
              viewType={viewType}
              showTagsAlphabetically={config.ui.showTagsAlphabetically}
+              coloredTags={config.coloredTags}
            />
          )
        }
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -20,6 +20,7 @@ import i18n from 'browser/lib/i18n'
 import context from 'browser/lib/context'
 import { remote } from 'electron'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
+import ColorPicker from 'browser/components/ColorPicker'

 function matchActiveTags (tags, activeTags) {
  return _.every(activeTags, v => tags.indexOf(v) >= 0)
@@ -27,6 +28,22 @@ function matchActiveTags (tags, activeTags) {

 class SideNav extends React.Component {
  // TODO: should not use electron stuff v0.7
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      colorPicker: {
+        show: false,
+        color: null,
+        tagName: null,
+        targetRect: null
+      }
+    }
+
+    this.dismissColorPicker = this.dismissColorPicker.bind(this)
+    this.handleColorPickerConfirm = this.handleColorPickerConfirm.bind(this)
+    this.handleColorPickerReset = this.handleColorPickerReset.bind(this)
+  }

  componentDidMount () {
    EventEmitter.on('side:preferences', this.handleMenuButtonClick)
@@ -104,9 +121,64 @@ class SideNav extends React.Component {
      click: this.deleteTag.bind(this, tag)
    })

+    menu.push({
+      label: i18n.__('Customize Color'),
+      click: this.displayColorPicker.bind(this, tag, e.target.getBoundingClientRect())
+    })
+
    context.popup(menu)
  }

+  dismissColorPicker () {
+    this.setState({
+      colorPicker: {
+        show: false
+      }
+    })
+  }
+
+  displayColorPicker (tagName, rect) {
+    const { config } = this.props
+    this.setState({
+      colorPicker: {
+        show: true,
+        color: config.coloredTags[tagName],
+        tagName,
+        targetRect: rect
+      }
+    })
+  }
+
+  handleColorPickerConfirm (color) {
+    const { dispatch, config: {coloredTags} } = this.props
+    const { colorPicker: { tagName } } = this.state
+    const newColoredTags = Object.assign({}, coloredTags, {[tagName]: color.hex})
+
+    const config = { coloredTags: newColoredTags }
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+    this.dismissColorPicker()
+  }
+
+  handleColorPickerReset () {
+    const { dispatch, config: {coloredTags} } = this.props
+    const { colorPicker: { tagName } } = this.state
+    const newColoredTags = Object.assign({}, coloredTags)
+
+    delete newColoredTags[tagName]
+
+    const config = { coloredTags: newColoredTags }
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+    this.dismissColorPicker()
+  }
+
  handleToggleButtonClick (e) {
    const { dispatch, config } = this.props

@@ -207,6 +279,7 @@ class SideNav extends React.Component {

  tagListComponent () {
    const { data, location, config } = this.props
+    const { colorPicker } = this.state
    const activeTags = this.getActiveTags(location.pathname)
    const relatedTags = this.getRelatedTags(activeTags, data.noteMap)
    let tagList = _.sortBy(data.tagNoteMap.map(
@@ -237,10 +310,11 @@ class SideNav extends React.Component {
            handleClickTagListItem={this.handleClickTagListItem.bind(this)}
            handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
            handleContextMenu={this.handleTagContextMenu.bind(this)}
-            isActive={this.getTagActive(location.pathname, tag.name)}
+            isActive={this.getTagActive(location.pathname, tag.name) || (colorPicker.tagName === tag.name)}
            isRelated={tag.related}
            key={tag.name}
            count={tag.size}
+            color={config.coloredTags[tag.name]}
          />
        )
      })
@@ -333,6 +407,7 @@ class SideNav extends React.Component {

  render () {
    const { data, location, config, dispatch } = this.props
+    const { colorPicker: colorPickerState } = this.state

    const isFolded = config.isSideNavFolded

@@ -349,6 +424,20 @@ class SideNav extends React.Component {
        useDragHandle
      />
    })
+
+    let colorPicker
+    if (colorPickerState.show) {
+      colorPicker = (
+        <ColorPicker
+          color={colorPickerState.color}
+          targetRect={colorPickerState.targetRect}
+          onConfirm={this.handleColorPickerConfirm}
+          onCancel={this.dismissColorPicker}
+          onReset={this.handleColorPickerReset}
+        />
+      )
+    }
+
    const style = {}
    if (!isFolded) style.width = this.props.width
    const isTagActive = location.pathname.match(/tag/)
@@ -368,6 +457,7 @@ class SideNav extends React.Component {
          </div>
        </div>
        {this.SideNavComponent(isFolded, storageList)}
+        {colorPicker}
      </div>
    )
  }
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -26,14 +26,16 @@ export const DEFAULT_CONFIG = {
    toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E',
    toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
    deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace',
-    pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V'
+    pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V',
+    toggleMenuBar: 'Alt'
  },
  ui: {
    language: 'en',
    theme: 'default',
    showCopyNotification: true,
    disableDirectWrite: false,
-    defaultNote: 'ALWAYS_ASK' // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
+    defaultNote: 'ALWAYS_ASK', // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
+    showMenuBar: false
  },
  editor: {
    theme: 'base16-light',
@@ -86,7 +88,8 @@ export const DEFAULT_CONFIG = {
    token: '',
    username: '',
    password: ''
-  }
+  },
+  coloredTags: {}
 }

 function validate (config) {
--- a/browser/main/lib/shortcut.js
+++ b/browser/main/lib/shortcut.js
@@ -6,5 +6,8 @@ module.exports = {
  },
  'deleteNote': () => {
    ee.emit('hotkey:deletenote')
+  },
+  'toggleMenuBar': () => {
+    ee.emit('menubar:togglemenubar')
  }
 }
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -62,7 +62,7 @@
 .folderItem-right-button
  vertical-align middle
  height 25px
-  margin-top 2.5px
+  margin-top 2px
  colorDefaultButton()
  border-radius 2px
  border $ui-border
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/browser/main/modals/PreferencesModal/HotkeyTab.js
@@ -80,7 +80,8 @@ class HotkeyTab extends React.Component {
      toggleMain: this.refs.toggleMain.value,
      toggleMode: this.refs.toggleMode.value,
      deleteNote: this.refs.deleteNote.value,
-      pasteSmartly: this.refs.pasteSmartly.value
+      pasteSmartly: this.refs.pasteSmartly.value,
+      toggleMenuBar: this.refs.toggleMenuBar.value
    }
    this.setState({
      config
@@ -128,6 +129,17 @@ class HotkeyTab extends React.Component {
              />
            </div>
          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Show/Hide Menu Bar')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleMenuBar'
+                value={config.hotkey.toggleMenuBar}
+                type='text'
+              />
+            </div>
+          </div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>{i18n.__('Toggle Editor Mode')}</div>
            <div styleName='group-section-control'>
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -75,6 +75,7 @@ class UiTab extends React.Component {
        showTagsAlphabetically: this.refs.showTagsAlphabetically.checked,
        saveTagsAlphabetically: this.refs.saveTagsAlphabetically.checked,
        enableLiveNoteCounts: this.refs.enableLiveNoteCounts.checked,
+        showMenuBar: this.refs.showMenuBar.checked,
        disableDirectWrite: this.refs.uiD2w != null
          ? this.refs.uiD2w.checked
          : false
@@ -238,6 +239,16 @@ class UiTab extends React.Component {
            </div>
          </div>

+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.showMenuBar}
+                ref='showMenuBar'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Show menu bar')}
+            </label>
+          </div>
          <div styleName='group-checkBoxSection'>
            <label>
              <input onChange={(e) => this.handleUIChange(e)}
--- a/browser/styles/Detail/TagSelect.styl
+++ b/browser/styles/Detail/TagSelect.styl
@@ -4,8 +4,10 @@
    border none
    background-color transparent
    outline none
-    padding 0 4px
+    padding 2px 4px
+    margin 0px 2px 2px
    font-size 13px
+    height 23px

  ul
    position fixed
--- a/docs/build.md
+++ b/docs/build.md
@@ -1,10 +1,11 @@
 # Build
-This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md) and [German](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md).
+
+This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md), [Portuguese](https://github.com/BoostIO/Boostnote/blob/master/docs/pt_BR/build.md) and [German](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md).

 ## Environments

-* npm: 6.x
-* node: 8.x
+- npm: 6.x
+- node: 8.x

 ## Development

@@ -24,7 +25,9 @@ $ yarn run dev
 ```

 > ### Notice
+>
 > There are some cases where you have to refresh the app manually.
+>
 > 1. When editing a constructor method of a component
 > 2. When adding a new css class (similar to 1: the CSS class is re-written by each component. This process occurs at the Constructor method.)

@@ -51,7 +54,6 @@ Distribution packages are created by exec `grunt build` on Linux platform (e.g.

 After installing the supported version of `node` and `npm`, install build dependency packages.

-
 Ubuntu/Debian:

 ```
--- a/docs/de/build.md
+++ b/docs/de/build.md
@@ -1,10 +1,11 @@
 # Build
-Diese Seite ist auch verfügbar in [Japanisch](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Koreanisch](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russisch](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Vereinfachtem Chinesisch](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), [Französisch](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md) und [Deutsch](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md).
+
+Diese Seite ist auch verfügbar in [Japanisch](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Koreanisch](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russisch](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Vereinfachtem Chinesisch](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), [Französisch](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md), [Portugiesisch](https://github.com/BoostIO/Boostnote/blob/master/docs/pt_BR/build.md) und [Deutsch](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md).

 ## Umgebungen

-* npm: 6.x
-* node: 8.x
+- npm: 6.x
+- node: 8.x

 ## Entwicklung

@@ -24,7 +25,9 @@ $ yarn run dev
 ```

 > ### Notiz
+>
 > Es gibt einige Fälle bei denen die App manuell zu refreshen ist.
+>
 > 1. Wenn eine "constructor method" einer Komponente manuell editiert wird.
 > 2. Wenn eine neue CSS Klasse ergänzt wird (ähnlich wie 1: die CSS Klasse wird von jeder Komponenete neu geschrieben. Dieser Prozess passiert in der "Constructor method".)

@@ -51,7 +54,6 @@ Distributions Pakete können mittels `grunt build` auf Linux Plattformen (e.g. U

 Nach der Installation der supporteten Version von `node` and `npm`, installiere auch build dependency packages.

-
 Ubuntu/Debian:

 ```
--- a/docs/de/debug.md
+++ b/docs/de/debug.md
@@ -1,7 +1,6 @@
 # How to debug Boostnote (Electron app)

-Diese Seite ist auch verfügbar in [Japanisch](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Koreanisch](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russisch](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Vereinfachtem Chinesisch](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [Französisch](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md) und [Deutsch](https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md).
-
+Diese Seite ist auch verfügbar in [Japanisch](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Koreanisch](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russisch](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Vereinfachtem Chinesisch](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [Französisch](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md), [Portugiesisch](https://github.com/BoostIO/Boostnote/blob/master/docs/pt_BR/debug.md) und [Deutsch](https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md).

 Boostnote ist eine Electron App und basiert auf Chromium.

@@ -13,7 +12,6 @@ Die Anzeige der `Developer Tools` sieht in etwa so aus:

 ![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)

-
 ## Debugging

 Fehlermeldungen werden in der Regel in der `console` ausgegeben, die du über den gleichnamigen Reiter der `Developer Tools` anzeigen lassen kannst. Zum Debuggen kannst du beispielsweise über den `debugger` Haltepunkte im Code setzen.
@@ -24,7 +22,7 @@ Du kannst aber natürlich auch die Art von Debugging verwenden mit der du am bes

 ## Referenz

-* [Official document of Google Chrome about debugging](https://developer.chrome.com/devtools)
+- [Official document of Google Chrome about debugging](https://developer.chrome.com/devtools)

 ---

--- a/docs/debug.md
+++ b/docs/debug.md
@@ -1,8 +1,9 @@
 # How to debug Boostnote (Electron app)

-This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md) and [German](https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md).
+This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md), [Portuguese](https://github.com/BoostIO/Boostnote/blob/master/docs/pt_BR/debug.md) and [German](https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md).

 ## Debug with Google Chrome developer Tools
+
 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:
@@ -14,6 +15,7 @@ The `Developer Tools` will look like this:
 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)
@@ -21,16 +23,18 @@ For example, you can use the `debugger` to set a breakpoint in the code like thi
 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)
+
+- [Official document of Google Chrome about debugging](https://developer.chrome.com/devtools)

 ## Debug with Visual Studio Code

-1. Install **[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome "Install Debugger for Chrome")** plugin for Visual Studio Code. Then restart it.
+1. Install **[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 'Install Debugger for Chrome')** plugin for Visual Studio Code. Then restart it.
 2. Pressing **Shift+Command+B** or running **Run Build Task** from the global **Terminal** menu, then pick the task named **Build Boostnote**. Or run `yarn run watch` from the terminal.
 3. When above task is running, open **Debug view** in **Activity Bar** on the side of VS Code or use shortcut **Shift+Command+D**.
 4. Select the configuration named **Boostnote All** from the **Debug configuration**, then click the green arrow button or press **F5** to start debugging.
 5. Now you should find **Boostnote** is running. You will see two processes running, one named **Boostnote Main** and the other named **Boostnote Renderer**. Now you can set **debug breakpoints** in vscode. If you find your **breakpoints** is unverified, you need to switch to the appropriate process between **Boostnote Renderer** and **Boostnote Main**.

   ### References
-	* [Electron application debugging](https://electronjs.org/docs/tutorial/application-debugging)
-	* [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
+
+   - [Electron application debugging](https://electronjs.org/docs/tutorial/application-debugging)
+   - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
--- a/docs/fr/build.md
+++ b/docs/fr/build.md
@@ -1,10 +1,11 @@
 # Build
-Cette page est également disponible en [Anglais](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md), [Japonais](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Coréen](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russe](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Chinois Simplifié](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md) et en [Allemand](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md)
+
+Cette page est également disponible en [Anglais](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md), [Japonais](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Coréen](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russe](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Chinois Simplifié](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), [Portugais](https://github.com/BoostIO/Boostnote/blob/master/docs/pt_BR/build.md) et en [Allemand](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md)

 ## Environnements

-* npm: 6.x
-* node: 8.x
+- npm: 6.x
+- node: 8.x

 ## Développement

@@ -16,6 +17,7 @@ Installez les paquets requis à l'aide de `yarn`.
 ```
 $ yarn
 ```
+
 Build et start

 ```
@@ -23,7 +25,9 @@ $ yarn run dev
 ```

 > ### Notice
+>
 > Il y a certains cas où vous voudrez relancer l'application manuellement.
+>
 > 1. Quand vous éditez la méthode constructeur dans un composant
 > 2. Quand vous ajoutez une nouvelle classe css. (Comme pour 1: la classe est réécrite pour chaque composant. Le process intervient dans la méthode constructeur)

@@ -37,6 +41,7 @@ Nous avons donc préparé un script séparé qui va rendre un fichier exécutabl
 ```
 grunt pre-build
 ```
+
 Vous trouverez l'exécutable dans le dossier `dist`.
 Note : l'auto updater ne marchera pas car l'application n'est pas signée.

@@ -50,7 +55,6 @@ Les paquets sont créés en exécutant `grunt build` sur une plateforme Linux (e

 Après avoir installé la version supportée de `node` et de `npm`, installer les paquets de builds.

-
 Ubuntu/Debian:

 ```
--- a/docs/pt_BR/build.md
+++ b/docs/pt_BR/build.md
@@ -0,0 +1,75 @@
+# Build
+
+Esta página também está disponível em [Japônes](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Coreano](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russo](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Chinês simplificado](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), [Francês](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md) e [Alemão](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md).
+
+## Ambiente
+
+- npm: 6.x
+- node: 8.x
+
+## Desenvolvimento
+
+Nós usamos o Webpack HMR para desenvolver o Boostnote.
+Ao executar os seguintes comandos no diretório raiz do projeto, o Boostnote será iniciado com as configurações padrão.
+
+Instala os pacotes necessários usando o yarn.
+
+```
+$ yarn
+```
+
+Gerar e iniciar.
+
+```
+$ yarn run dev
+```
+
+> ### Notice
+>
+> Existe alguns casos onde você precisa atualizar o app manualmente.
+>
+> 1. Quando editar um método construtor de um componente
+> 2. Quando adicionar uma nova classe de css (similiar ao 1: a classe do css é reescrita por cada componente. Esse processo ocorre através do método construtor)
+
+## Deploy
+
+Nós usamos o Grunt para automatizar o desenvolvimento.
+Você pode gerar o programa usando `grunt`. Contudo, nós não recomendamos isso porque a tarefa padrão inclui _codedesign_ e _authenticode_.
+
+Então nós preparamos um _script_ separado, o qual somente cria um executável.
+
+```
+grunt pre-build
+```
+
+Você irá encontrar o executável na pasta `dist`. Nota: o atualizador automático não funciona porque o app não está certificado.
+
+Se você achar isto necessário, você pode usar o _codesign_ ou o _authenticode_ com esse executável.
+
+## Faça seus próprios pacotes de distribuição (deb, rpm)
+
+Pacotes de distribuição são gerados através do comando `grunt build` em plataforma Linux (e.g. Ubuntu, Fedora).
+
+> Nota: você pode criar `.deb` e `.rpm` em um mesmo ambiente.
+
+Depois de instalar uma versão suportada do `node` e do `npm`, deve-se instalar as dependências para gerar os pacotes.
+
+Ubuntu/Debian:
+
+```
+$ sudo apt-get install -y rpm fakeroot
+```
+
+Fedora:
+
+```
+$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
+```
+
+Então execute `grunt build`.
+
+```
+$ grunt build
+```
+
+Você vai encontrar o `.deb` e o `.rpm` na pasta`dist`.
--- a/docs/pt_BR/debug.md
+++ b/docs/pt_BR/debug.md
@@ -0,0 +1,40 @@
+# Como debugar Boostnote (app Electron)
+
+Esta página também está disponível em [Japônes](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Coreano](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russo](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Chinês simplificado](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), [Francês](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md) e [Alemão](https://github.com/BoostIO/Boostnote/blob/master/docs/de/debug.md).
+
+## Debugar com o Google Chrome developer Tools
+
+Boostnote é um app Electron, por isso ele é baseado no Chromium; desenvolvedores podem usar o `Developer Tools` igual no Google Chrome.
+
+Você pode habilitar e desabilitar o `Developer Tools` assim:
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+O `Developer Tools` deve parecer assim:
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+Quando erros acontecem, eles são apresentados na aba `console`.
+
+### Debugando
+
+Por exemplo, você pode usar o `debugger` para adicionar um _breakpoint_ (ponto de parada) no código dessa forma:
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+Isso é só um exemplo ilustrativo, mas você deve encontrar um jeito de debugar que encaixe no seu estilo.
+
+### Referências
+
+- [Documentação do Google Chrome sobre como debugar](https://developer.chrome.com/devtools)
+
+## Debugar com o Visual Studio Code (VS Code)
+
+1. Instale o plugin **[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 'Instale o pacote Debugger for Chrome')** para Visual Studio Code. Então reinicie-o.
+2. Pressione **Shift+Command+B** ou execute **Run Build Task** do menu global **Terminal**, então seleciona a task **Build Boostnote**. Ou execute `yarn run watch` no terminal.
+3. Quando a task acima estiver rodando, abra o **Debug view** na **Activity Bar** no lado do seu VS Code ou use o atalho **Shift+Command+D**.
+4. Selecione a configuração **Boostnote All** no **Debug configuration**, então clique na seta verde ou aperte **F5** para começar a debugar.
+5. Agora você deve encontrar seu **Boostnote** rodando. Você vai ver dois processos rodando, um com nome de **Boostnote Main** e outro com nome de **Boostnote Renderer**. Agora você pode adicionar os **debug breakpoints** no vscode. Se os seus **breakpoints** não forem alertados você pode precisar altenrar entre os processos **Boostnote Renderer** e **Boostnote Main**.
+
+### Referências
+
+- [Debugando uma aplicação Electron](https://electronjs.org/docs/tutorial/application-debugging)
+- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
--- a/docs/zh_TW/build.md
+++ b/docs/zh_TW/build.md
@@ -1,10 +1,11 @@
 # 編譯
-此文件還提供下列的語言 [日文](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [韓文](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [俄文](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [簡體中文](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), [法文](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md) and [德文](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md).
+
+此文件還提供下列的語言 [日文](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [韓文](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [俄文](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [簡體中文](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), [法文](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md), [葡萄牙](https://github.com/BoostIO/Boostnote/blob/master/docs/pt_BR/build.md) and [德文](https://github.com/BoostIO/Boostnote/blob/master/docs/de/build.md).

 ## 環境

-* npm: 6.x
-* node: 8.x
+- npm: 6.x
+- node: 8.x

 ## 開發

@@ -25,7 +26,9 @@ $ yarn run dev
 ```

 > ### Notice
+>
 > There are some cases where you have to refresh the app manually.
+>
 > 1. When editing a constructor method of a component
 > 2. When adding a new css class (similar to 1: the CSS class is re-written by each component. This process occurs at the Constructor method.)

@@ -52,7 +55,6 @@ Distribution packages are created by exec `grunt build` on Linux platform (e.g.

 After installing the supported version of `node` and `npm`, install build dependency packages.

-
 Ubuntu/Debian:

 ```
--- a/lib/ipcServer.js
+++ b/lib/ipcServer.js
@@ -32,6 +32,7 @@ ipcMain.on('config-renew', (e, payload) => {
  globalShortcut.unregisterAll()
  var { config } = payload

+  mainWindow.setMenuBarVisibility(config.ui.showMenuBar)
  var errors = []
  try {
    globalShortcut.register(config.hotkey.toggleMain, toggleMainWindow)
--- a/lib/main-window.js
+++ b/lib/main-window.js
@@ -6,7 +6,6 @@ const Config = require('electron-config')
 const config = new Config()
 const _ = require('lodash')

-var showMenu = process.platform !== 'win32'
 const windowSize = config.get('windowsize') || {
  x: null,
  y: null,
@@ -22,7 +21,6 @@ const mainWindow = new BrowserWindow({
  useContentSize: true,
  minWidth: 500,
  minHeight: 320,
-  autoHideMenuBar: showMenu,
  webPreferences: {
    zoomFactor: 1.0,
    enableBlinkFeatures: 'OverlayScrollbars'
@@ -33,6 +31,7 @@ const mainWindow = new BrowserWindow({
 const url = path.resolve(__dirname, './main.html')

 mainWindow.loadURL('file://' + url)
+mainWindow.setMenuBarVisibility(false)

 mainWindow.webContents.on('new-window', function (e) {
  e.preventDefault()
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -8,7 +8,10 @@
 	"to create a new note": "ノートを新規に作成",
 	"Toggle Mode": "モード切替",
 	"Add tag...": "タグを追加...",
+  "Star": "お気に入り",
+  "Fullscreen": "全画面",
 	"Trash": "ゴミ箱",
+  "Info": "情報",
 	"MODIFICATION DATE": "修正日",
 	"Words": "ワード",
 	"Letters": "文字",
@@ -26,6 +29,9 @@
 	"Storage Locations": "ストレージ",
 	"Add Storage Location": "ストレージロケーションを追加",
 	"Add Folder": "フォルダを追加",
+	"Create new folder": "新規フォルダ作成",
+	"Folder name": "フォルダ名",
+	"Create": "作成",
 	"Select Folder": "フォルダを選択",
 	"Open Storage folder": "ストレージフォルダを開く",
 	"Unlink": "リンク解除",
@@ -68,6 +74,10 @@
 	"Enable smart quotes": "スマートクォートを有効にする",
 	"Bring in web page title when pasting URL on editor": "URLを貼り付けた時にWebページのタイトルを取得する",
 	"Enable smart table editor": "スマートテーブルエディタを有効にする",
+	"Enable HTML paste": "HTML貼り付けを有効にする",
+	"Matching character pairs": "自動補完する括弧ペアの列記",
+	"Matching character triples": "自動補完する３文字括弧の列記",
+	"Exploding character pairs": "改行時に空行を挿入する括弧ペアの列記",
 	"Preview": "プレビュー",
 	"Preview Font Size": "プレビュー時フォントサイズ",
 	"Preview Font Family": "プレビュー時フォント",
@@ -118,7 +128,19 @@
 	"French": "フランス語",
 	"Show \"Saved to Clipboard\" notification when copying": "クリップボードコピー時に \"クリップボードに保存\" 通知を表示する",
 	"All Notes": "すべてのノート",
+	"Pin to Top": "一番上にピン留め",
+	"Remove pin": "ピン削除",
+	"Clone Note": "ノート複製",
+	"Copy Note Link": "ノートのリンクをコピー",
+	"Publish Blog": "ブログを公開",
 	"Starred": "スター付き",
+	"Empty Trash": "ゴミ箱を空にする",
+	"Restore Note": "ノート復元",
+	"Rename Folder": "フォルダの名称変更",
+	"Export Folder": "フォルダの書き出し",
+	"Export as txt": ".txtで書き出す",
+	"Export as md": ".mdで書き出す",
+	"Delete Folder": "フォルダ削除",
 	"Are you sure to ": "本当に ",
 	" delete": "このフォルダを",
 	"this folder?": "削除しますか？",
@@ -149,6 +171,7 @@
 	"Show/Hide Boostnote": "Boostnote の表示／非表示",
 	"Toggle Editor Mode": "エディタモードの切替",
 	"Delete Note": "ノート削除",
+	"Paste HTML": "HTMLで貼り付け",
 	"Restore": "リストア",
 	"Permanent Delete": "永久に削除",
 	"Confirm note deletion": "ノート削除確認",
@@ -179,6 +202,7 @@
 	"Cloud-Syncing-and-Backup": "Cloud-Syncing-and-Backup",
 	"Location": "ロケーション",
 	"Add": "追加",
+	"Export Storage": "ストレージの書き出し",
 	"Unlink Storage": "ストレージのリンクを解除",
 	"Unlinking removes this linked storage from Boostnote. No data is removed, please manually delete the folder from your hard drive if needed.": "リンクの解除ではBoostnoteからリンクされたストレージを削除しますが、データは削除されません。データを削除する場合はご自身でハードドライブからフォルダを削除してください。",
 	"Editor Rulers": "罫線",
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@@ -33,7 +33,7 @@
 	"White": "Branco",
 	"Solarized Dark": "Escuro Solarizado",
 	"Dark": "Escuro",
-	"Show a confirmation dialog when deleting notes": "Mostrar um diálogo de confirmação ao escluir notas",
+	"Show a confirmation dialog when deleting notes": "Mostrar um diálogo de confirmação ao excluir notas",
 	"Editor Theme": "Tema do Editor",
 	"Editor Font Size": "Tamanho da Fonte do Editor",
 	"Editor Font Family": "Família da Fonte do Editor",
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
    "i18n-2": "^0.7.2",
    "iconv-lite": "^0.4.19",
    "immutable": "^3.8.1",
+    "invert-color": "^2.0.0",
    "js-sequence-diagrams": "^1000000.0.6",
    "js-yaml": "^3.12.0",
    "katex": "^0.9.0",
@@ -91,13 +92,14 @@
    "mdurl": "^1.0.1",
    "mermaid": "^8.0.0-rc.8",
    "moment": "^2.10.3",
-    "mousetrap": "^1.6.1",
+    "mousetrap": "^1.6.2",
    "mousetrap-global-bind": "^1.1.0",
    "node-ipc": "^8.1.0",
    "raphael": "^2.2.7",
    "react": "^15.5.4",
    "react-autosuggest": "^9.4.0",
    "react-codemirror": "^0.3.0",
+    "react-color": "^2.2.2",
    "react-debounce-render": "^4.0.1",
    "react-dom": "^15.0.2",
    "react-image-carousel": "^2.0.18",
@@ -154,7 +156,6 @@
    "merge-stream": "^1.0.0",
    "mock-require": "^3.0.1",
    "nib": "^1.1.0",
-    "react-color": "^2.2.2",
    "react-css-modules": "^3.7.6",
    "react-input-autosize": "^1.1.0",
    "react-router": "^2.4.0",
--- a/resources/icon/icon-x-light.svg
+++ b/resources/icon/icon-x-light.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>x</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Feather" transform="translate(-1910.000000, -644.000000)" stroke="#c1c1c1" stroke-width="2">
+            <g id="Group" transform="translate(175.000000, 332.000000)">
+                <g id="x" transform="translate(1736.000000, 313.000000)">
+                    <path d="M12,0 L0,12" id="Shape"></path>
+                    <path d="M0,0 L12,12" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/tests/components/TagListItem.snapshot.test.js
+++ b/tests/components/TagListItem.snapshot.test.js
@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer'
 import TagListItem from 'browser/components/TagListItem'

 it('TagListItem renders correctly', () => {
-  const tagListItem = renderer.create(<TagListItem name='Test' handleClickTagListItem={jest.fn()} />)
+  const tagListItem = renderer.create(<TagListItem name='Test' handleClickTagListItem={jest.fn()} color='#000' />)

  expect(tagListItem.toJSON()).toMatchSnapshot()
 })
--- a/tests/components/snapshots/TagListItem.snapshot.test.js.snap
+++ b/tests/components/snapshots/TagListItem.snapshot.test.js.snap
@@ -12,6 +12,14 @@ exports[`TagListItem renders correctly 1`] = `
    className="tagList-item"
    onClick={[Function]}
  >
+    <span
+      className="tagList-item-color"
+      style={
+        Object {
+          "backgroundColor": "#000",
+        }
+      }
+    />
    <span
      className="tagList-item-name"
    >