Merge branch 'master' into feature-editor-line-lines

2026-02-03 11:07:16 +00:00 · 2017-12-23 23:06:26 +01:00
parent 85065357e2 16d264ebfa
commit da1098e441
222 changed files with 6346 additions and 2127 deletions
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -1,5 +1,8 @@
 .root
  absolute top bottom right
+  display flex
+  align-items center
+  justify-content center

 .empty
  height 320px
@@ -8,8 +11,9 @@

 .empty-message
  width 100%
-  font-size 42px
-  line-height 72px
+  font-size 36px
+  font-weight 600
+  line-height 56px
  text-align center
  color $ui-inactive-text-color

@@ -18,3 +22,9 @@ body[data-theme="dark"]
    background-color $ui-dark-backgroundColor
  .empty-message
    color $ui-dark-inactive-text-color
+    
+body[data-theme="solarized-dark"]
+  .root
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+  .empty-message
+    color $ui-solarized-dark-text-color
--- a/browser/main/Detail/DetailVars.styl
+++ b/browser/main/Detail/DetailVars.styl
@@ -3,7 +3,9 @@
 */

 // Margin on the left side and the right side for NoteDetail component.
-$note-detail-left-margin = 25px
-$note-detail-right-margin = 25px
+$note-detail-left-margin = 100px
+$note-detail-right-margin = 120px
+$snippet-note-detail-left-margin = 60px
+$snippet-note-detail-right-margin = 80px

 $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset
--- a/browser/main/Detail/FolderSelect.js
+++ b/browser/main/Detail/FolderSelect.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FolderSelect.styl'
 import _ from 'lodash'
@@ -73,8 +74,8 @@ class FolderSelect extends React.Component {
      case 9:
        if (e.shiftKey) {
          e.preventDefault()
-          let tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
-          let previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
+          const tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
+          const previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
          if (previousEl != null) previousEl.focus()
        }
    }
@@ -89,9 +90,9 @@ class FolderSelect extends React.Component {
  }

  handleSearchInputChange (e) {
-    let { folders } = this.props
-    let search = this.refs.search.value
-    let optionIndex = search.length > 0
+    const { folders } = this.props
+    const search = this.refs.search.value
+    const optionIndex = search.length > 0
      ? _.findIndex(folders, (folder) => {
        return folder.name.match(new RegExp('^' + _.escapeRegExp(search), 'i'))
      })
@@ -129,7 +130,7 @@ class FolderSelect extends React.Component {

  nextOption () {
    let { optionIndex } = this.state
-    let { folders } = this.props
+    const { folders } = this.props

    optionIndex++
    if (optionIndex >= folders.length) optionIndex = 0
@@ -140,7 +141,7 @@ class FolderSelect extends React.Component {
  }

  previousOption () {
-    let { folders } = this.props
+    const { folders } = this.props
    let { optionIndex } = this.state

    optionIndex--
@@ -152,10 +153,10 @@ class FolderSelect extends React.Component {
  }

  selectOption () {
-    let { folders } = this.props
-    let optionIndex = this.state.optionIndex
+    const { folders } = this.props
+    const optionIndex = this.state.optionIndex

-    let folder = folders[optionIndex]
+    const folder = folders[optionIndex]
    if (folder != null) {
      this.setState({
        status: 'FOCUS'
@@ -184,10 +185,10 @@ class FolderSelect extends React.Component {
  }

  render () {
-    let { className, data, value } = this.props
-    let splitted = value.split('-')
-    let storageKey = splitted.shift()
-    let folderKey = splitted.shift()
+    const { className, data, value } = this.props
+    const splitted = value.split('-')
+    const storageKey = splitted.shift()
+    const folderKey = splitted.shift()
    let options = []
    data.storageMap.forEach((storage, index) => {
      storage.folders.forEach((folder) => {
@@ -198,14 +199,14 @@ class FolderSelect extends React.Component {
      })
    })

-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]

    if (this.state.search.trim().length > 0) {
-      let filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
+      const filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
      options = options.filter((option) => filter.test(option.folder.name))
    }

-    let optionList = options
+    const optionList = options
      .map((option, index) => {
        return (
          <div styleName={index === this.state.optionIndex
@@ -259,12 +260,11 @@ class FolderSelect extends React.Component {
              {optionList}
            </div>
          </div>
-          : <div styleName='idle'>
+          : <div styleName='idle' style={{color: currentOption.folder.color}}>
            <div styleName='idle-label'>
-              <span styleName='idle-label-name'
-                style={{color: currentOption.folder.color}}
-              >
-                {currentOption.folder.name} /
+              <i className='fa fa-folder' />
+              <span styleName='idle-label-name'>
+                {currentOption.folder.name}
              </span>
            </div>
          </div>
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -1,21 +1,22 @@
 .root
  position relative
  border solid 1px transparent
-  line-height 26px
  vertical-align middle
  border-radius 2px
  transition 0.15s
  user-select none
+  margin-right 10px
  &:hover
    background-color $ui-button--hover-backgroundColor

 .root--search, .root--focus
  @extend .root
-  background-color $ui-noteDetail-backgroundColor = #F4F4F4
+  background-color $ui-noteDetail-backgroundColor = #fff
  border-color $ui-input--focus-borderColor
-  width 100px
+  width 154px
+  height 30px
  &:hover
-    border-color $ui-input--focus-borderColor
+    border-color $ui-input--focus-borderColor = #fff

 .idle
  position relative
@@ -24,13 +25,16 @@
 .idle-label
  right 20px
  overflow ellipsis
+  display flex
+  align-items center

 .idle-label-name
-  font-size 14px
-  padding 2px
+  font-size 13px
+  font-weight 600
+  margin-left 4px

 .idle-label-name-surfix
-  font-size 10px
+  font-size 15px
  color $ui-inactive-text-color
  margin-left 5px
 .idle-caret
@@ -38,40 +42,42 @@
  height 34px
  width 20px
  line-height 34px
-
-.search
-  absolute top left right bottom
-  line-height 34px
-
+  
 .search-input
  vertical-align middle
  position relative
-  top -2px
+  top 0
+  font-size 14px
  outline none
  border none
-  height 20px
-  line-height 20px
+  width 100%
  background-color transparent
  padding 0 10px

 .search-optionList
-  position fixed
+  position absolute
+  top 30px
  max-height 450px
+  min-width 150px
  overflow auto
  z-index 200
  border $ui-border
  background-color white
  border-radius 2px
+  padding 10px 6px

 .search-optionList-item
+  width 140px
  height 34px
-  width 250px
+  display flex
+  align-items center
  box-sizing border-box
-  padding 0 5px
+  padding 0
+  margin-bottom 10px
  overflow ellipsis
  cursor pointer
  &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color $ui-button--hover-backgroundColor 

 .search-optionList-item--active
  @extend .search-optionList-item
@@ -81,13 +87,17 @@
    background-color $ui-button--active-backgroundColor
    color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 2px transparent
-  padding 2px 5px
+  border-left solid 3px transparent
+  padding 6px
 .search-optionList-item-name-surfix
  font-size 10px
  color $ui-inactive-text-color
  margin-left 5px

+
+
+
+
 body[data-theme="dark"]
  .root
    color $ui-dark-text-color
--- a/browser/main/Detail/FullscreenButton.js
+++ b/browser/main/Detail/FullscreenButton.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FullscreenButton.styl'
+
+const FullscreenButton = ({
+ onClick
+}) => (
+  <button styleName='control-fullScreenButton' title='Fullscreen' onMouseDown={(e) => onClick(e)}>
+    <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+    <span styleName='tooltip'>Fullscreen</span>
+  </button>
+)
+
+FullscreenButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(FullscreenButton, styles)
--- a/browser/main/Detail/FullscreenButton.styl
+++ b/browser/main/Detail/FullscreenButton.styl
@@ -0,0 +1,22 @@
+.control-fullScreenButton
+  top 80px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  right 0
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()
--- a/browser/main/Detail/InfoButton.js
+++ b/browser/main/Detail/InfoButton.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoButton.styl'

@@ -6,9 +7,10 @@ const InfoButton = ({
  onClick
 }) => (
  <button styleName='control-infoButton'
-    onClick={onClick}
+    onClick={(e) => onClick(e)}
  >
-    <i className='fa fa-info infoButton' styleName='info-button' />
+    <img className='infoButton' src='../resources/icon/icon-info.svg' />
+    <span styleName='tooltip'>Info</span>
  </button>
 )

--- a/browser/main/Detail/InfoButton.styl
+++ b/browser/main/Detail/InfoButton.styl
@@ -1,12 +1,17 @@
 .control-infoButton
-  float right
-  topBarButtonLight()
+  top 10px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1

-.control-infoPanel
-  position fixed
+.tooltip
+  tooltip()
+  position absolute
  pointer-events none
-  top 50px
+  top 26px
+  right 0
  z-index 200
+  padding 5px
  line-height normal
  border-radius 2px
  opacity 0
@@ -14,7 +19,6 @@

 .infoButton
  padding 0px
-  margin 15px 0

 body[data-theme="dark"]
  .control-infoButton
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -1,73 +1,60 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'

 const InfoPanel = ({
-  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type
+  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type, print
 }) => (
  <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Storage
-      </div>
-      <div styleName='group-section-control'>
-        {storageName}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Folder
-      </div>
-      <div styleName='group-section-control'>
-        {folderName}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Created
-      </div>
-      <div styleName='group-section-control'>
-        {createdAt}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Updated
-      </div>
-      <div styleName='group-section-control'>
-        {updatedAt}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Note Link
-      </div>
-      <div styleName='group-section-control'>
-        <input value={noteLink} onClick={(e) => { e.target.select() }} />
-      </div>
+    <div>
+      <p styleName='modification-date'>{updatedAt}</p>
+      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
    </div>
+
+    <hr />
+
    {type === 'SNIPPET_NOTE'
      ? ''
-      : <div>
-        <div styleName='group-section'>
-          <div styleName='group-section-label'>
-            Words
-          </div>
-          <div styleName='group-section-control'>
-            {wordCount}
-          </div>
+      : <div styleName='count-wrap'>
+        <div styleName='count-number'>
+          <p styleName='infoPanel-defaul-count'>{wordCount}</p>
+          <p styleName='infoPanel-sub-count'>Words</p>
        </div>
-        <div styleName='group-section'>
-          <div styleName='group-section-label'>
-            Letters
-          </div>
-          <div styleName='group-section-control'>
-            {letterCount}
-          </div>
+        <div styleName='count-number'>
+          <p styleName='infoPanel-defaul-count'>{letterCount}</p>
+          <p styleName='infoPanel-sub-count'>Letters</p>
        </div>
      </div>
    }

+    {type === 'SNIPPET_NOTE'
+      ? ''
+      : <hr />
+    }
+
+    <div>
+      <p styleName='infoPanel-default'>{storageName}</p>
+      <p styleName='infoPanel-sub'>STORAGE</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{folderName}</p>
+      <p styleName='infoPanel-sub'>FOLDER</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{createdAt}</p>
+      <p styleName='infoPanel-sub'>CREATION DATE</p>
+    </div>
+
+    <div>
+      <input styleName='infoPanel-noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+      <p styleName='infoPanel-sub'>NOTE LINK</p>
+    </div>
+
+    <hr />
+
    <div id='export-wrap'>
      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
        <i className='fa fa-file-code-o fa-fw' />
@@ -79,9 +66,9 @@ const InfoPanel = ({
        <p>.txt</p>
      </button>

-      <button styleName='export--unable'>
-        <i className='fa fa-file-pdf-o fa-fw' />
-        <p>.pdf</p>
+      <button styleName='export--enable' onClick={(e) => print(e)}>
+        <i className='fa fa-print fa-fw' />
+        <p>Print</p>
      </button>
    </div>
  </div>
@@ -97,7 +84,8 @@ InfoPanel.propTypes = {
  exportAsTxt: PropTypes.func.isRequired,
  wordCount: PropTypes.number,
  letterCount: PropTypes.number,
-  type: PropTypes.string.isRequired
+  type: PropTypes.string.isRequired,
+  print: PropTypes.func.isRequired
 }

 export default CSSModules(InfoPanel, styles)
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -10,57 +10,86 @@

 .control-infoButton-panel
  z-index 200
-  margin-top 45px
-  margin-left -210px
+  margin-top 0px
+  right 0
  position absolute
-  padding 20px 20px 0 20px
-  width 340px
+  padding 20px 25px 0 25px
+  width 300px
+  height 350px
+  overflow auto
  background-color $ui-noteList-backgroundColor
-  border 1px solid $border-color
+  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
+  border-radius 2px
+
+.modification-date
+  font-size 18px
+  line-height 30px
+  color $ui-text-color
+
+.modification-date-desc
+  font-size 18px
+  color $ui-inactive-text-color

 .control-infoButton-panel-trash
  z-index 200
-  margin-top 45px
-  margin-left -230px
+  margin-top 0px
+  right 0px
  position absolute
-  padding 20px 20px 0 20px
-  width 320px
+  padding 20px 25px 0 25px
+  width 300px
  background-color $ui-noteList-backgroundColor
-  border 1px solid $border-color
+  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
+  border-radius 2px

-.group-section
-  display flex
+.count-wrap 
+	display flex
+	position relative
+	width 100%
+
+.count-number 
+	position relative
+	display block
+	width 50%
+	overflow hidden
+	margin 0
+	padding 0
+
+.infoPanel-defaul-count
+  font-size 16px
  line-height 30px
-  font-size 13px
-
-.group-section-label
-  width 70px
-  height 20px
-  text-align left
-  margin-right 50px
-  font-size 13px
-  color $ui-inactive-text-color
-
-.group-section-control
-  flex 1
-  font-size 13px
  color $ui-text-color

-.group-section-control input
-  width 160px
-  height 25px
+.infoPanel-sub-count
+  font-size 16px
+  color $ui-inactive-text-color
+  padding-bottom 8px

-.group-section-control text
-  color #EA4447
-  font-weight 600
+.infoPanel-default
+  font-size 14px
+  line-height 30px
+  color $ui-text-color
+
+.infoPanel-sub
+  font-size 14px
+  color $ui-inactive-text-color
+  padding-bottom 8px
+
+.infoPanel-noteLink
+  padding-right 5px
+  width 200px
+  height 25px
+  margin-bottom 6px
+
+.infoPanel-trash
+  color #EA4447		
+  font-weight 600		
  font-size 14px
  width 70px
-  height 25px
  background-color rgba(226,33,113,0.1)
-  border none
+  border none		
  outline none
-  border-radius 2px
-  margin-right 5px
+  border-radius 2px		
+  margin-right 5px		
  padding 2px 5px

 [id=export-wrap]
@@ -96,20 +125,30 @@
 body[data-theme="dark"]
  .control-infoButton-panel
    background-color $ui-dark-noteList-backgroundColor
-    border 1px solid $ui-dark-borderColor

  .control-infoButton-panel-trash
    background-color $ui-dark-noteList-backgroundColor
-    border 1px solid $ui-dark-borderColor

-  .group-section-label
-    color $ui-inactive-text-color
-
-  .group-section-control
+  .modification-date
    color $ui-dark-text-color

-  .group-section-control input
-    background-color alpha($ui-dark-borderColor, 80%)
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-dark-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-dark-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-dark-borderColor, 60%)
    color $ui-dark-text-color

  [id=export-wrap]
--- a/browser/main/Detail/InfoPanelTrashed.js
+++ b/browser/main/Detail/InfoPanelTrashed.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'

@@ -6,37 +7,26 @@ const InfoPanelTrashed = ({
  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt
 }) => (
  <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Storage
-      </div>
-      <div styleName='group-section-control'>
-        {storageName}
-      </div>
+    <div>
+      <p styleName='modification-date'>{updatedAt}</p>
+      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Folder
-      </div>
-      <div styleName='group-section-control'>
-        <text>Trash</text>{folderName}
-      </div>
+
+    <hr />
+
+    <div>
+      <p styleName='infoPanel-default'>{storageName}</p>
+      <p styleName='infoPanel-sub'>STORAGE</p>
    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Created
-      </div>
-      <div styleName='group-section-control'>
-        {createdAt}
-      </div>
+
+    <div>
+      <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
+      <p styleName='infoPanel-sub'>FOLDER</p>
    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Updated
-      </div>
-      <div styleName='group-section-control'>
-        {updatedAt}
-      </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{createdAt}</p>
+      <p styleName='infoPanel-sub'>CREATION DATE</p>
    </div>

    <div id='export-wrap'>
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -1,7 +1,9 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import MarkdownSplitEditor from 'browser/components/MarkdownSplitEditor'
 import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
@@ -9,21 +11,26 @@ import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
-import markdown from 'browser/lib/markdown'
+import markdown from 'browser/lib/markdownTextHelper'
 import StatusBar from '../StatusBar'
 import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import ConfigManager from 'browser/main/lib/ConfigManager'
 import TrashButton from './TrashButton'
+import FullscreenButton from './FullscreenButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
+import ToggleModeButton from './ToggleModeButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
 import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
+import striptags from 'striptags'

 const electron = require('electron')
 const { remote } = electron
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote

 class MarkdownNoteDetail extends React.Component {
  constructor (props) {
@@ -36,7 +43,8 @@ class MarkdownNoteDetail extends React.Component {
        content: ''
      }, props.note),
      isLockButtonShown: false,
-      isLocked: false
+      isLocked: false,
+      editorType: props.config.editor.type
    }
    this.dispatchTimer = null

@@ -72,11 +80,11 @@ class MarkdownNoteDetail extends React.Component {
  }

  handleChange (e) {
-    let { note } = this.state
+    const { note } = this.state

    note.content = this.refs.content.value
    if (this.refs.tags) note.tags = this.refs.tags.value
-    note.title = markdown.strip(findNoteTitle(note.content))
+    note.title = markdown.strip(striptags(findNoteTitle(note.content)))
    note.updatedAt = new Date()

    this.setState({
@@ -94,7 +102,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  saveNow () {
-    let { note, dispatch } = this.props
+    const { note, dispatch } = this.props
    clearTimeout(this.saveQueue)
    this.saveQueue = null

@@ -110,11 +118,11 @@ class MarkdownNoteDetail extends React.Component {
  }

  handleFolderChange (e) {
-    let { note } = this.state
-    let value = this.refs.folder.value
-    let splitted = value.split('-')
-    let newStorageKey = splitted.shift()
-    let newFolderKey = splitted.shift()
+    const { note } = this.state
+    const value = this.refs.folder.value
+    const splitted = value.split('-')
+    const newStorageKey = splitted.shift()
+    const newFolderKey = splitted.shift()

    dataApi
      .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
@@ -123,7 +131,7 @@ class MarkdownNoteDetail extends React.Component {
          isMovingNote: true,
          note: Object.assign({}, newNote)
        }, () => {
-          let { dispatch, location } = this.props
+          const { dispatch, location } = this.props
          dispatch({
            type: 'MOVE_NOTE',
            originNote: note,
@@ -143,7 +151,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  handleStarButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')

    note.isStarred = !note.isStarred
@@ -168,22 +176,22 @@ class MarkdownNoteDetail extends React.Component {
  }

  handleTrashButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
    const { isTrashed } = note

    if (isTrashed) {
-      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
        type: 'warning',
        message: 'Confirm note deletion',
        detail: 'This will permanently remove this note.',
        buttons: ['Confirm', 'Cancel']
      })
      if (dialogueButtonIndex === 1) return
-      let { note, dispatch } = this.props
+      const { note, dispatch } = this.props
      dataApi
        .deleteNote(note.storage, note.key)
        .then((data) => {
-          let dispatchHandler = () => {
+          const dispatchHandler = () => {
            dispatch({
              type: 'DELETE_NOTE',
              storageKey: data.storageKey,
@@ -205,7 +213,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  handleUndoButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state

    note.isTrashed = false

@@ -230,7 +238,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  getToggleLockButton () {
-    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
+    return this.state.isLocked ? '../resources/icon/icon-previewoff-on.svg' : '../resources/icon/icon-previewoff-off.svg'
  }

  handleDeleteKeyDown (e) {
@@ -255,13 +263,50 @@ class MarkdownNoteDetail extends React.Component {
    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
  }

-  render () {
-    let { data, config, location } = this.props
-    let { note } = this.state
-    let storageKey = note.storage
-    let folderKey = note.folder
+  print (e) {
+    ee.emit('print')
+  }

-    let options = []
+  handleSwitchMode (type) {
+    this.setState({ editorType: type }, () => {
+      const newConfig = Object.assign({}, this.props.config)
+      newConfig.editor.type = type
+      ConfigManager.set(newConfig)
+    })
+  }
+
+  renderEditor () {
+    const { config, ignorePreviewPointerEvents } = this.props
+    const { note } = this.state
+    if (this.state.editorType === 'EDITOR_PREVIEW') {
+      return <MarkdownEditor
+        ref='content'
+        styleName='body-noteEditor'
+        config={config}
+        value={note.content}
+        storageKey={note.storage}
+        onChange={(e) => this.handleChange(e)}
+        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+      />
+    } else {
+      return <MarkdownSplitEditor
+        ref='content'
+        config={config}
+        value={note.content}
+        storageKey={note.storage}
+        onChange={(e) => this.handleChange(e)}
+        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+      />
+    }
+  }
+
+  render () {
+    const { data, location } = this.props
+    const { note, editorType } = this.state
+    const storageKey = note.storage
+    const folderKey = note.folder
+
+    const options = []
    data.storageMap.forEach((storage, index) => {
      storage.folders.forEach((folder) => {
        options.push({
@@ -270,7 +315,7 @@ class MarkdownNoteDetail extends React.Component {
        })
      })
    })
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]

    const trashTopBar = <div styleName='info'>
      <div styleName='info-left'>
@@ -280,7 +325,7 @@ class MarkdownNoteDetail extends React.Component {
        />
      </div>
      <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
        <InfoButton
          onClick={(e) => this.handleInfoButtonClick(e)}
        />
@@ -297,10 +342,6 @@ class MarkdownNoteDetail extends React.Component {

    const detailTopBar = <div styleName='info'>
      <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
        <div styleName='info-left-top'>
          <FolderSelect styleName='info-left-top-folderSelect'
            value={this.state.note.storage + '-' + this.state.note.folder}
@@ -315,36 +356,40 @@ class MarkdownNoteDetail extends React.Component {
          value={this.state.note.tags}
          onChange={(e) => this.handleChange(e)}
        />
-        <TodoListPercentage
-          percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
-        />
+
+        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
+
+        <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
      </div>
      <div styleName='info-right'>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
        {(() => {
-          const faClassName = `fa ${this.getToggleLockButton()}`
+          const imgSrc = `${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>
+              <img styleName='iconInfo' src={imgSrc} />
            </button>
+
          return (
            this.state.isLockButtonShown ? lockButtonComponent : ''
          )
        })()}
+
+        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />
+
        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <i className='fa fa-expand' styleName='fullScreen-button' />
-        </button>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
+
        <InfoPanel
          storageName={currentOption.storage.name}
          folderName={currentOption.folder.name}
@@ -354,8 +399,9 @@ class MarkdownNoteDetail extends React.Component {
          exportAsMd={this.exportAsMd}
          exportAsTxt={this.exportAsTxt}
          wordCount={note.content.split(' ').length}
-          letterCount={note.content.length}
+          letterCount={note.content.replace(/\r?\n/g, '').length}
          type={note.type}
+          print={this.print}
        />
      </div>
    </div>
@@ -369,15 +415,7 @@ class MarkdownNoteDetail extends React.Component {
        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}

        <div styleName='body'>
-          <MarkdownEditor
-            ref='content'
-            styleName='body-noteEditor'
-            config={config}
-            value={this.state.note.content}
-            storageKey={this.state.note.storage}
-            onChange={(e) => this.handleChange(e)}
-            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
-          />
+          {this.renderEditor()}
        </div>

        <StatusBar
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -3,50 +3,42 @@

 .root
  absolute top right bottom
-  border-width 0 0 1px
-  border-style solid
-  border-color $ui-borderColor
+  border-left 1px solid alpha(#DEDEDE, 60%)
  background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
+  padding 20px 40px

 .lock-button
  padding-bottom 3px

 .control-lockButton
-  topBarButtonLight()
+  top 150px
+  topBarButtonRight()

-.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-fullScreenButton
-  float right
-  padding 0 0 2px 0
-  topBarButtonLight()
+.trashed-infopanel
+  top 40px
+  position relative

 .body
  absolute left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left 0
+  right 0
  top $info-height + $info-margin-under-border
  bottom $statusBar-height
-
+  margin 0 45px
 .body-noteEditor
  absolute top bottom left right
+  
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none

 body[data-theme="dark"]
  .root
-    border-color $ui-dark-borderColor
    background-color $ui-dark-noteDetail-backgroundColor
    box-shadow none
+    border-left 1px solid $ui-dark-borderColor

  .control-lockButton
    topBarButtonDark()
@@ -56,3 +48,9 @@ body[data-theme="dark"]

  .control-fullScreenButton
    topBarButtonDark()
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-left 1px solid $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -1,33 +1,31 @@
@import('DetailVars')

-$info-height = 60px
-$info-margin-under-border = 27px
+$info-height = 50px
+$info-margin-under-border = 30px

 .info
  absolute top left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left 0
+  right 0
  height $info-height
-  border-bottom $ui-border
+  border-bottom 1px solid #eee
  background-color $ui-noteDetail-backgroundColor
+  width 100%
+  display flex
+  align-items center

 .info-left
-  float left
-  padding 0 5px
-  margin 0px 2px
-.info-left-top
-  display inline-block
-  height $info-height
-  line-height $info-height
+  padding 0 10px
+  width 100%
+  display flex
+  align-items center
+

 .info-left-top-folderSelect
-  padding 0 3px
-  height 34px
-  line-height 26px
  display flex
  align-items center
  justify-content center
-  border-radius 3px
+
 .info-left-button
  width 34px
  height 34px
@@ -48,18 +46,18 @@ $info-margin-under-border = 27px

 .info-right
  position absolute
-  right 0
-  top 0
-  background $ui-noteDetail-backgroundColor
+  right 40px
+  top 60px
  bottom 1px
  padding-left 30px
+  z-index 101

 .undo-button
  width 34px
  height 34px
  border-radius 17px
  font-size 14px
-  margin 15px 7px
+  margin 5px 0px
  border none
  color $ui-button-color
  display flex
@@ -72,6 +70,7 @@ $info-margin-under-border = 27px
    border-color $ui-button--active-backgroundColor
  &:hover
    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transition 0.2s
    .control-lockButton-tooltip
      opacity 1

@@ -96,4 +95,10 @@ body[data-theme="dark"]
    background-color $ui-dark-noteDetail-backgroundColor

  .undo-button
-    topBarButtonDark()
+    topBarButtonDark()
+
+body[data-theme="solarized-dark"]
+  .info
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    
--- a/browser/main/Detail/PermanentDeleteButton.js
+++ b/browser/main/Detail/PermanentDeleteButton.js
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TrashButton.styl'
+
+const PermanentDeleteButton = ({
+  onClick
+}) => (
+  <button styleName='control-trashButton--in-trash'
+    onClick={(e) => onClick(e)}
+  >
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <span styleName='tooltip'>Permanent Delete</span>
+  </button>
+)
+
+PermanentDeleteButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(PermanentDeleteButton, styles)
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SnippetNoteDetail.styl'
 import CodeEditor from 'browser/components/CodeEditor'
@@ -18,6 +19,7 @@ import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
@@ -60,7 +62,7 @@ class SnippetNoteDetail extends React.Component {
  componentWillReceiveProps (nextProps) {
    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
      if (this.saveQueue != null) this.saveNow()
-      let nextNote = Object.assign({
+      const nextNote = Object.assign({
        description: ''
      }, nextProps.note, {
        snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
@@ -69,7 +71,7 @@ class SnippetNoteDetail extends React.Component {
        snippetIndex: 0,
        note: nextNote
      }, () => {
-        let { snippets } = this.state.note
+        const { snippets } = this.state.note
        snippets.forEach((snippet, index) => {
          this.refs['code-' + index].reload()
        })
@@ -83,7 +85,7 @@ class SnippetNoteDetail extends React.Component {
  }

  handleChange (e) {
-    let { note } = this.state
+    const { note } = this.state

    if (this.refs.tags) note.tags = this.refs.tags.value
    note.description = this.refs.description.value
@@ -105,7 +107,7 @@ class SnippetNoteDetail extends React.Component {
  }

  saveNow () {
-    let { note, dispatch } = this.props
+    const { note, dispatch } = this.props
    clearTimeout(this.saveQueue)
    this.saveQueue = null

@@ -121,11 +123,11 @@ class SnippetNoteDetail extends React.Component {
  }

  handleFolderChange (e) {
-    let { note } = this.state
-    let value = this.refs.folder.value
-    let splitted = value.split('-')
-    let newStorageKey = splitted.shift()
-    let newFolderKey = splitted.shift()
+    const { note } = this.state
+    const value = this.refs.folder.value
+    const splitted = value.split('-')
+    const newStorageKey = splitted.shift()
+    const newFolderKey = splitted.shift()

    dataApi
      .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
@@ -134,7 +136,7 @@ class SnippetNoteDetail extends React.Component {
          isMovingNote: true,
          note: Object.assign({}, newNote)
        }, () => {
-          let { dispatch, location } = this.props
+          const { dispatch, location } = this.props
          dispatch({
            type: 'MOVE_NOTE',
            originNote: note,
@@ -154,7 +156,7 @@ class SnippetNoteDetail extends React.Component {
  }

  handleStarButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')

    note.isStarred = !note.isStarred
@@ -171,22 +173,22 @@ class SnippetNoteDetail extends React.Component {
  }

  handleTrashButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
    const { isTrashed } = note

    if (isTrashed) {
-      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
        type: 'warning',
        message: 'Confirm note deletion',
        detail: 'This will permanently remove this note.',
        buttons: ['Confirm', 'Cancel']
      })
      if (dialogueButtonIndex === 1) return
-      let { note, dispatch } = this.props
+      const { note, dispatch } = this.props
      dataApi
        .deleteNote(note.storage, note.key)
        .then((data) => {
-          let dispatchHandler = () => {
+          const dispatchHandler = () => {
            dispatch({
              type: 'DELETE_NOTE',
              storageKey: data.storageKey,
@@ -208,7 +210,7 @@ class SnippetNoteDetail extends React.Component {
  }

  handleUndoButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state

    note.isTrashed = false

@@ -234,10 +236,31 @@ class SnippetNoteDetail extends React.Component {
    })
  }

+  handleTabDragStart (e, index) {
+    e.dataTransfer.setData('text/plain', index)
+  }
+
+  handleTabDrop (e, index) {
+    const oldIndex = parseInt(e.dataTransfer.getData('text'))
+
+    const snippets = this.state.note.snippets.slice()
+    const draggedSnippet = snippets[oldIndex]
+    snippets[oldIndex] = snippets[index]
+    snippets[index] = draggedSnippet
+    const snippetIndex = index
+
+    const note = Object.assign({}, this.state.note, {snippets})
+    this.setState({ note, snippetIndex }, () => {
+      this.save()
+      this.refs['code-' + index].reload()
+      this.refs['code-' + oldIndex].reload()
+    })
+  }
+
  handleTabDeleteButtonClick (e, index) {
    if (this.state.note.snippets.length > 1) {
      if (this.state.note.snippets[index].content.trim().length > 0) {
-        let dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        const dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
          type: 'warning',
          message: 'Delete a snippet',
          detail: 'This work cannot be undone.',
@@ -266,11 +289,16 @@ class SnippetNoteDetail extends React.Component {
  }

  renameSnippetByIndex (index, name) {
-    let snippets = this.state.note.snippets.slice()
+    const snippets = this.state.note.snippets.slice()
    snippets[index].name = name
-    let syntax = CodeMirror.findModeByFileName(name.trim())
-    let mode = syntax != null ? syntax.name : null
-    if (mode != null) snippets[index].mode = mode
+    const syntax = CodeMirror.findModeByFileName(name.trim())
+    const mode = syntax != null ? syntax.name : null
+    if (mode != null) {
+      snippets[index].mode = mode
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('SNIPPET_LANG', {
+        name: mode
+      })
+    }
    this.setState({note: Object.assign(this.state.note, {snippets: snippets})})

    this.setState({
@@ -282,7 +310,7 @@ class SnippetNoteDetail extends React.Component {

  handleModeOptionClick (index, name) {
    return (e) => {
-      let snippets = this.state.note.snippets.slice()
+      const snippets = this.state.note.snippets.slice()
      snippets[index].mode = name
      this.setState({note: Object.assign(this.state.note, {snippets: snippets})})

@@ -291,12 +319,16 @@ class SnippetNoteDetail extends React.Component {
      }, () => {
        this.save()
      })
+
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('SELECT_LANG', {
+        name
+      })
    }
  }

  handleCodeChange (index) {
    return (e) => {
-      let snippets = this.state.note.snippets.slice()
+      const snippets = this.state.note.snippets.slice()
      snippets[index].content = this.refs['code-' + index].value
      this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
      this.setState({
@@ -323,7 +355,7 @@ class SnippetNoteDetail extends React.Component {
        break
      case 76:
        {
-          let isSuper = global.process.platform === 'darwin'
+          const isSuper = global.process.platform === 'darwin'
            ? e.metaKey
            : e.ctrlKey
          if (isSuper) {
@@ -334,7 +366,7 @@ class SnippetNoteDetail extends React.Component {
        break
      case 84:
        {
-          let isSuper = global.process.platform === 'darwin'
+          const isSuper = global.process.platform === 'darwin'
            ? e.metaKey
            : e.ctrlKey
          if (isSuper) {
@@ -347,7 +379,7 @@ class SnippetNoteDetail extends React.Component {
  }

  handleModeButtonClick (e, index) {
-    let menu = new Menu()
+    const menu = new Menu()
    CodeMirror.modeInfo.forEach((mode) => {
      menu.append(new MenuItem({
        label: mode.name,
@@ -388,8 +420,8 @@ class SnippetNoteDetail extends React.Component {
  }

  handleIndentSizeItemClick (e, indentSize) {
-    let { config, dispatch } = this.props
-    let editor = Object.assign({}, config.editor, {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
      indentSize
    })
    ConfigManager.set({
@@ -404,8 +436,8 @@ class SnippetNoteDetail extends React.Component {
  }

  handleIndentTypeItemClick (e, indentType) {
-    let { config, dispatch } = this.props
-    let editor = Object.assign({}, config.editor, {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
      indentType
    })
    ConfigManager.set({
@@ -424,14 +456,14 @@ class SnippetNoteDetail extends React.Component {
  }

  addSnippet () {
-    let { note } = this.state
+    const { note } = this.state

    note.snippets = note.snippets.concat([{
      name: '',
      mode: 'Plain Text',
      content: ''
    }])
-    let snippetIndex = note.snippets.length - 1
+    const snippetIndex = note.snippets.length - 1

    this.setState({
      note,
@@ -477,19 +509,19 @@ class SnippetNoteDetail extends React.Component {
  }

  render () {
-    let { data, config, location } = this.props
-    let { note } = this.state
+    const { data, config, location } = this.props
+    const { note } = this.state

-    let storageKey = note.storage
-    let folderKey = note.folder
+    const storageKey = note.storage
+    const folderKey = note.folder

    let editorFontSize = parseInt(config.editor.fontSize, 10)
    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
    let editorIndentSize = parseInt(config.editor.indentSize, 10)
    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4

-    let tabList = note.snippets.map((snippet, index) => {
-      let isActive = this.state.snippetIndex === index
+    const tabList = note.snippets.map((snippet, index) => {
+      const isActive = this.state.snippetIndex === index

      return <SnippetTab
        key={index}
@@ -500,11 +532,13 @@ class SnippetNoteDetail extends React.Component {
        onDelete={(e) => this.handleTabDeleteButtonClick(e, index)}
        onRename={(name) => this.renameSnippetByIndex(index, name)}
        isDeletable={note.snippets.length > 1}
+        onDragStart={(e) => this.handleTabDragStart(e, index)}
+        onDrop={(e) => this.handleTabDrop(e, index)}
      />
    })

-    let viewList = note.snippets.map((snippet, index) => {
-      let isActive = this.state.snippetIndex === index
+    const viewList = note.snippets.map((snippet, index) => {
+      const isActive = this.state.snippetIndex === index

      let syntax = CodeMirror.findModeByName(pass(snippet.mode))
      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
@@ -532,6 +566,7 @@ class SnippetNoteDetail extends React.Component {
            indentSize={editorIndentSize}
            displayLineNumbers={config.editor.displayLineNumbers}
            keyMap={config.editor.keyMap}
+            scrollPastEnd={config.editor.scrollPastEnd}
            onChange={(e) => this.handleCodeChange(index)(e)}
            ref={'code-' + index}
          />
@@ -539,7 +574,7 @@ class SnippetNoteDetail extends React.Component {
      </div>
    })

-    let options = []
+    const options = []
    data.storageMap.forEach((storage, index) => {
      storage.folders.forEach((folder) => {
        options.push({
@@ -548,7 +583,7 @@ class SnippetNoteDetail extends React.Component {
        })
      })
    })
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]

    const trashTopBar = <div styleName='info'>
      <div styleName='info-left'>
@@ -558,7 +593,7 @@ class SnippetNoteDetail extends React.Component {
        />
      </div>
      <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
        <InfoButton
          onClick={(e) => this.handleInfoButtonClick(e)}
        />
@@ -575,10 +610,6 @@ class SnippetNoteDetail extends React.Component {

    const detailTopBar = <div styleName='info'>
      <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
        <div styleName='info-left-top'>
          <FolderSelect styleName='info-left-top-folderSelect'
            value={this.state.note.storage + '-' + this.state.note.folder}
@@ -595,15 +626,21 @@ class SnippetNoteDetail extends React.Component {
        />
      </div>
      <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <i className='fa fa-expand' styleName='fullScreen-button' />
-        </button>
        <InfoButton
          onClick={(e) => this.handleInfoButtonClick(e)}
        />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        <button styleName='control-fullScreenButton' title='Fullscreen'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}>
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+        </button>
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
        <InfoPanel
          storageName={currentOption.storage.name}
          folderName={currentOption.folder.name}
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -3,23 +3,21 @@

 .root
  absolute top bottom right
-  border-width 0 0 1px
-  border-style solid
-  border-color $ui-borderColor
+  border-left 1px solid alpha(#DEDEDE, 60%)
  background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none

 .body
  absolute left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left $snippet-note-detail-left-margin
+  right $snippet-note-detail-right-margin
  top $info-height + $info-margin-under-border
  bottom $statusBar-height
  background-color $ui-noteDetail-backgroundColor

 .body .description
  absolute top left right
-  height 80px
+  height 50px

 .body .description textarea
  outline none
@@ -27,14 +25,14 @@
  height 100%
  width 100%
  resize none
-  border none
-  padding 10px
+  border 1px solid $ui-borderColor
+  padding 2px 5px
  line-height 1.6
  background-color $ui-noteDetail-backgroundColor

 .tabList
  absolute left right
-  top 80px
+  top 55px
  height 30px
  display flex
  background-color $ui-noteDetail-backgroundColor
@@ -45,35 +43,42 @@
  overflow hidden

 .tabList .plusButton
-  navButtonColor()
+  navWhiteButtonColor()
  width 30px

 .tabView
  absolute left right bottom
-  top 130px
+  top 100px

 .tabView-content
  absolute top left right bottom

 .override
  absolute bottom left
+  bottom 1px
  left 60px
-  height 23px
-  z-index 1
+  z-index 101
  button
    navButtonColor()
-    height 24px
+    padding 0 6px
+    &:hover
+      color $ui-active-color
    &:active .update-icon
-      color white
+      color $ui-active-color

 .control-fullScreenButton
-  float right
-  padding 0 0 2px 0
-  topBarButtonLight()
+  top 80px
+  margin-bottom 10px
+  topBarButtonRight()
+
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none

 body[data-theme="dark"]
  .root
-    border-color $ui-dark-borderColor
+    border-left 1px solid $ui-dark-borderColor
    background-color $ui-dark-noteDetail-backgroundColor
    box-shadow none

@@ -83,6 +88,7 @@ body[data-theme="dark"]
  .body .description textarea
    background-color $ui-dark-noteDetail-backgroundColor
    color $ui-dark-text-color
+    border 1px solid $ui-dark-borderColor

  .tabList
    background-color $ui-button--active-backgroundColor
@@ -103,3 +109,20 @@ body[data-theme="dark"]

  .control-fullScreenButton
    topBarButtonDark()
+
+body[data-theme="solarized-dark"]
+  .root
+    border-left 1px solid $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    color $ui-solarized-dark-text-color
+    border 1px solid $ui-solarized-dark-borderColor
+
+  .tabList
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    color $ui-solarized-dark-text-color
--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StarButton.styl'
 import _ from 'lodash'
@@ -31,7 +32,7 @@ class StarButton extends React.Component {
  }

  render () {
-    let { className } = this.props
+    const { className } = this.props

    return (
      <button className={_.isString(className)
@@ -45,14 +46,14 @@ class StarButton extends React.Component {
        onMouseDown={(e) => this.handleMouseDown(e)}
        onMouseUp={(e) => this.handleMouseUp(e)}
        onMouseLeave={(e) => this.handleMouseLeave(e)}
-        onClick={this.props.onClick}
-      >
-        <i styleName='icon'
-          className={this.state.isActive || this.props.isActive
-            ? 'fa fa-star'
-            : 'fa fa-star-o'
+        onClick={this.props.onClick}>
+        <img styleName='icon'
+          src={this.state.isActive || this.props.isActive
+            ? '../resources/icon/icon-starred.svg'
+            : '../resources/icon/icon-star.svg'
          }
        />
+        <span styleName='tooltip'>Star</span>
      </button>
    )
  }
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -1,47 +1,40 @@
 .root
-  left 7px
-  top 0
-  padding 0
-  color alpha($ui-favorite-star-button-color, 60%)
+  top 45px
+  topBarButtonRight()
  &:hover
-    transition 0.15s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-favorite-star-button-color
-  &:active
-    transition 0.15s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-favorite-star-button-color
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  right 0
+  width 100%
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s

 .root--active
  @extend .root
+  transition 0.15s
  color $ui-favorite-star-button-color
  &:hover
-    transition 0.15s
-    color $ui-favorite-star-button-color
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-  &:active
-    transition 0.15s
-    color $ui-favorite-star-button-color
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)

 .icon
  transition transform 0.15s

 body[data-theme="dark"]
  .root
+    topBarButtonDark()
    &: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%)
+      transition 0.2s
+      color alpha($ui-favorite-star-button-color, 0.6)
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
@@ -37,6 +38,10 @@ class TagSelect extends React.Component {
    }
  }

+  handleNewTagBlur (e) {
+    this.submitTag()
+  }
+
  removeLastTag () {
    let { value } = this.props

@@ -59,7 +64,7 @@ class TagSelect extends React.Component {
  submitTag () {
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
    let { value } = this.props
-    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
+    const newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')

    if (newTag.length <= 0) {
      this.setState({
@@ -101,9 +106,9 @@ class TagSelect extends React.Component {
  }

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

-    let tagList = _.isArray(value)
+    const tagList = _.isArray(value)
      ? value.map((tag) => {
        return (
          <span styleName='tag'
@@ -113,7 +118,7 @@ class TagSelect extends React.Component {
            <button styleName='tag-removeButton'
              onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
            >
-              <i className='fa fa-times fa-fw tag-removeButton-icon' />
+              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
            </button>
          </span>
        )
@@ -134,6 +139,7 @@ class TagSelect extends React.Component {
          placeholder='Add tag...'
          onChange={(e) => this.handleNewTagInputChange(e)}
          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
+          onBlur={(e) => this.handleNewTagBlur(e)}
        />
      </div>
    )
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -1,61 +1,53 @@
 .root
-  display inline-block
+  display flex
+  align-items center
  user-select none
-  height 23px
  vertical-align middle
-  width 300px
+  width 100%
  overflow-x scroll
  white-space nowrap
+  margin-right 10px

 .root::-webkit-scrollbar
  display none

 .tag
-  display inline-block
-  margin 1px 3px
-  padding 0
-  height 20px
-  background-color alpha($ui-tag-backgroundColor, 10%)
-  border-radius 3px
-  overflow hidden
+  display flex
+  align-items center
+  margin 0px 2px
+  padding 2px 4px
+  background-color alpha($ui-tag-backgroundColor, 3%)
+  border-radius 4px
+  position relative
  clearfix()

 .tag-removeButton
-  float right
-  height 20px
-  width 18px
  margin 0
  padding 0
  border-style solid
  border-width 0
  border-radius 20px
-  line-height 18px
  background-color transparent
  color $ui-button-color
+  position absolute
+  right 6px

 .tag-removeButton-icon
  width 5px
  padding-right 4px

 .tag-label
-  font-size 11px
-  font-weight 600
-  color: alpha($ui-text-color, 80%)
-  float left
-  height 20px
-  line-height 20px
-  padding 0 6px
+  font-size 13px
+  color: $ui-text-color
+  padding 4px 16px 4px 8px

 .newTag
-  display inline-block
-  margin 2px 0 15px 2px
-  vertical-align middle
-  height 18px
-  box-sizing borde-box
+  box-sizing border-box
  border none
  background-color transparent
  outline none
  padding 0 4px
+  font-size 13px

 body[data-theme="dark"]
  .tag
@@ -72,4 +64,20 @@ body[data-theme="dark"]
  .newTag
    border-color none
    background-color transparent
-    color $ui-dark-text-color
+    color $ui-dark-text-color
+    
+body[data-theme="solarized-dark"]
+  .tag
+    background-color $ui-solarized-dark-tag-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+
+  .tag-label
+    color $ui-solarized-dark-text-color
+
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-solarized-dark-text-color
--- a/browser/main/Detail/ToggleModeButton.js
+++ b/browser/main/Detail/ToggleModeButton.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleModeButton.styl'
+
+const ToggleModeButton = ({
+  onClick, editorType
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
+    </div>
+    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
+    </div>
+    <span styleName='tooltip'>Toggle Mode</span>
+  </div>
+)
+
+ToggleModeButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  editorType: PropTypes.string.Required
+}
+
+export default CSSModules(ToggleModeButton, styles)
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -0,0 +1,61 @@
+.control-toggleModeButton
+  border 1px solid #eee
+  height 34px
+  display flex
+  align-items center
+
+  div
+    width 40px
+    height 100%
+    background-color #f9f9f9
+    display flex
+    align-items center
+    justify-content center
+    cursor pointer
+
+    &:first-child
+      border-right 1px solid #eee
+    .active
+      background-color #fff
+      box-shadow 2px 0px 7px #eee
+      z-index 1
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 47px
+  right 11px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()
+
+  .control-toggleModeButton
+    border 1px solid #444444
+    div
+      background-color $ui-dark-noteDetail-backgroundColor
+      &:first-child
+        border-right 1px solid #444444
+    .active
+      background-color #3A404C
+      box-shadow 2px 0px 7px #444444
+
+body[data-theme="solarized-dark"]
+  .control-toggleModeButton
+    border 1px solid #586E75
+    div
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      &:first-child
+        border-right 1px solid #586E75
+    .active
+      background-color #002B36
+      box-shadow 2px 0px 7px #222222
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'

@@ -8,7 +9,8 @@ const TrashButton = ({
  <button styleName='control-trashButton'
    onClick={(e) => onClick(e)}
  >
-    <i className='fa fa-trash trashButton' styleName='info-button' />
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <span styleName='tooltip'>Trash</span>
  </button>
 )

--- a/browser/main/Detail/TrashButton.styl
+++ b/browser/main/Detail/TrashButton.styl
@@ -1,10 +1,28 @@
 .control-trashButton
-  float right
-  topBarButtonLight()
+  top 115px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  right 0
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.control-trashButton--in-trash
+  top 60px
+  topBarButtonRight()

 .trashButton
  padding 0px
-  margin 15px 0

 body[data-theme="dark"]
  .control-trashButton
--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './Detail.styl'
 import _ from 'lodash'
@@ -32,12 +33,12 @@ class Detail extends React.Component {
  }

  render () {
-    let { location, data, config } = this.props
+    const { location, data, config } = this.props
    let note = null
    if (location.query.key != null) {
-      let splitted = location.query.key.split('-')
-      let storageKey = splitted.shift()
-      let noteKey = splitted.shift()
+      const splitted = location.query.key.split('-')
+      const storageKey = splitted.shift()
+      const noteKey = splitted.shift()

      note = data.noteMap.get(storageKey + '-' + noteKey)
    }