Merge branch 'master' into filter-tags-and-folders

# Conflicts:
#	locales/zh-CN.json

browser/main/Detail/MarkdownNoteDetail.js

@@ -31,6 +31,7 @@ import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 import markdownToc from 'browser/lib/markdown-toc-generator'
 import queryString from 'query-string'
 import { replace } from 'connected-react-router'
+import ToggleDirectionButton from 'browser/main/Detail/ToggleDirectionButton'
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
@@ -46,7 +47,8 @@ class MarkdownNoteDetail extends React.Component {
       isLockButtonShown: props.config.editor.type !== 'SPLIT',
       isLocked: false,
       editorType: props.config.editor.type,
-      switchPreview: props.config.editor.switchPreview
+      switchPreview: props.config.editor.switchPreview,
+      RTL: false
     }
 
     this.dispatchTimer = null
@@ -61,6 +63,7 @@ class MarkdownNoteDetail extends React.Component {
 
   componentDidMount () {
     ee.on('topbar:togglelockbutton', this.toggleLockButton)
+    ee.on('topbar:toggledirectionbutton', () => this.handleSwitchDirection())
     ee.on('topbar:togglemodebutton', () => {
       const reversedType = this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'
       this.handleSwitchMode(reversedType)
@@ -99,6 +102,7 @@ class MarkdownNoteDetail extends React.Component {
 
   componentWillUnmount () {
     ee.off('topbar:togglelockbutton', this.toggleLockButton)
+    ee.on('topbar:toggledirectionbutton', this.handleSwitchDirection)
     ee.off('code:generate-toc', this.generateToc)
     if (this.saveQueue != null) this.saveNow()
   }
@@ -354,6 +358,12 @@ class MarkdownNoteDetail extends React.Component {
     })
   }
 
+  handleSwitchDirection () {
+    // If in split mode, hide the lock button
+    const direction = this.state.RTL
+    this.setState({ RTL: !direction })
+  }
+
   handleDeleteNote () {
     this.handleTrashButtonClick()
   }
@@ -393,6 +403,7 @@ class MarkdownNoteDetail extends React.Component {
         onChange={this.handleUpdateContent.bind(this)}
         isLocked={this.state.isLocked}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+        RTL={this.state.RTL}
       />
     } else {
       return <MarkdownSplitEditor
@@ -404,6 +415,7 @@ class MarkdownNoteDetail extends React.Component {
         linesHighlighted={note.linesHighlighted}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+        RTL={this.state.RTL}
       />
     }
   }
@@ -472,7 +484,7 @@ class MarkdownNoteDetail extends React.Component {
       </div>
       <div styleName='info-right'>
         <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
-
+        <ToggleDirectionButton onClick={(e) => this.handleSwitchDirection(e)} isRTL={this.state.RTL} />
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}
           isActive={note.isStarred}
@@ -518,6 +530,7 @@ class MarkdownNoteDetail extends React.Component {
           print={this.print}
         />
       </div>
+
     </div>
 
     return (

browser/main/Detail/MarkdownNoteDetail.styl

@@ -15,7 +15,7 @@
 .control-lockButton
   topBarButtonRight()
   position absolute
-  right 225px
+  right 265px
   &:hover .tooltip
     opacity 1
 

browser/main/Detail/ToggleDirectionButton.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleDirectionButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const ToggleDirectionButton = ({
+  onClick, isRTL
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={isRTL ? 'active' : undefined} onClick={() => onClick()}>
+      <img src={!isRTL ? '../resources/icon/icon-left-to-right.svg' : ''} />
+    </div>
+    <div styleName={!isRTL ? 'active' : undefined} onClick={() => onClick()}>
+      <img src={!isRTL ? '' : '../resources/icon/icon-right-to-left.svg'} />
+    </div>
+    <span lang={i18n.locale} styleName='tooltip'>{i18n.__('Toggle Direction')}</span>
+  </div>
+)
+
+ToggleDirectionButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isRTL: PropTypes.string.isRequired
+}
+
+export default CSSModules(ToggleDirectionButton, styles)

browser/main/Detail/ToggleDirectionButton.styl

@@ -0,0 +1,85 @@
+.control-toggleModeButton
+  height 25px
+  border-radius 50px
+  background-color #F4F4F4
+  width 52px
+  display flex
+  align-items center
+  position: relative
+  top 2px
+  margin-left 5px
+  .active
+    background-color #1EC38B
+    width 33px
+    height 24px
+    box-shadow 2px 0px 7px #eee
+    z-index 1
+
+  div
+    width 40px
+    height 100%
+    border-radius 50%
+    display flex
+    align-items center
+    justify-content center
+    cursor pointer
+
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 33px
+  left -10px
+  z-index 200
+  width 80px
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.tooltip:lang(ja)
+  @extend .tooltip
+  left -8px
+  width 70px
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()
+
+  .control-toggleModeButton
+      background-color #3A404C
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #444444
+
+body[data-theme="solarized-dark"]
+  .control-toggleModeButton
+      background-color #002B36
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #222222
+
+body[data-theme="monokai"]
+  .control-toggleModeButton
+      background-color #373831
+    .active
+      background-color #f92672
+      box-shadow 2px 0px 7px #222222
+
+body[data-theme="dracula"]
+  .control-toggleModeButton
+      background-color #44475a
+    .active
+      background-color #bd93f9
+      box-shadow 2px 0px 7px #222222
+
+.control-toggleModeButton
+  -webkit-user-drag none
+  user-select none
+  > div img
+    -webkit-user-drag none
+    user-select none

browser/main/global.styl

@@ -182,4 +182,4 @@ body[data-theme="default"]
   .SideNav ::-webkit-scrollbar-thumb
     background-color rgba(255, 255, 255, 0.3)
 
-@import '../styles/Detail/TagSelect.styl'
+@import '../styles/Detail/TagSelect.styl'

browser/main/lib/ConfigManager.js

@@ -31,6 +31,7 @@ export const DEFAULT_CONFIG = {
   hotkey: {
     toggleMain: OSX ? 'Command + Alt + L' : 'Super + Alt + E',
     toggleMode: OSX ? 'Command + Alt + M' : 'Ctrl + M',
+    toggleDirection: OSX ? 'Command + Alt + Right' : 'Ctrl + Right',
     deleteNote: OSX ? 'Command + Shift + Backspace' : 'Ctrl + Shift + Backspace',
     pasteSmartly: OSX ? 'Command + Shift + V' : 'Ctrl + Shift + V',
     prettifyMarkdown: OSX ? 'Command + Shift + F' : 'Ctrl + Shift + F',
@@ -75,7 +76,7 @@ export const DEFAULT_CONFIG = {
     customMarkdownLintConfig: DEFAULT_MARKDOWN_LINT_CONFIG,
     prettierConfig: ` {
       "trailingComma": "es5",
-      "tabWidth": 4,
+      "tabWidth": 2,
       "semi": false,
       "singleQuote": true
     }`,

browser/main/lib/shortcut.js

@@ -4,6 +4,9 @@ module.exports = {
   'toggleMode': () => {
     ee.emit('topbar:togglemodebutton')
   },
+  'toggleDirection': () => {
+    ee.emit('topbar:toggledirectionbutton')
+  },
   'deleteNote': () => {
     ee.emit('hotkey:deletenote')
   },

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -30,7 +30,8 @@ class HotkeyTab extends React.Component {
     this.handleSettingError = (err) => {
       if (
         this.state.config.hotkey.toggleMain === '' ||
-        this.state.config.hotkey.toggleMode === ''
+        this.state.config.hotkey.toggleMode === '' ||
+        this.state.config.hotkey.toggleDirection === ''
       ) {
         this.setState({keymapAlert: {
           type: 'success',
@@ -79,6 +80,7 @@ class HotkeyTab extends React.Component {
     config.hotkey = Object.assign({}, config.hotkey, {
       toggleMain: this.refs.toggleMain.value,
       toggleMode: this.refs.toggleMode.value,
+      toggleDirection: this.refs.toggleDirection.value,
       deleteNote: this.refs.deleteNote.value,
       pasteSmartly: this.refs.pasteSmartly.value,
       prettifyMarkdown: this.refs.prettifyMarkdown.value,
@@ -154,6 +156,17 @@ class HotkeyTab extends React.Component {
               />
             </div>
           </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Toggle Direction')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleDirection'
+                value={config.hotkey.toggleDirection}
+                type='text'
+              />
+            </div>
+          </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>{i18n.__('Delete Note')}</div>
             <div styleName='group-section-control'>

browser/main/modals/PreferencesModal/InfoTab.js

@@ -142,7 +142,7 @@ class InfoTab extends React.Component {
             >{i18n.__('Development')}</a>{i18n.__(' : Development configurations for Boostnote.')}
           </li>
           <li styleName='cc'>
-            {i18n.__('Copyright (C) 2017 - 2019 BoostIO')}
+            {i18n.__('Copyright (C) 2017 - 2020 BoostIO')}
           </li>
           <li styleName='cc'>
             {i18n.__('License: GPL v3')}