added rtl toggle button

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
@@ -354,6 +356,12 @@ class MarkdownNoteDetail extends React.Component {
     })
   }
 
+  handleSwitchDirection () {
+    // If in split mode, hide the lock button
+    let direction = this.state.RTL
+    this.setState({ RTL: !direction })
+  }
+
   handleDeleteNote () {
     this.handleTrashButtonClick()
   }
@@ -393,6 +401,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 +413,7 @@ class MarkdownNoteDetail extends React.Component {
         linesHighlighted={note.linesHighlighted}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+        RTL={this.state.RTL}
       />
     }
   }
@@ -472,7 +482,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)} editorDirection={this.state.RTL} />
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}
           isActive={note.isStarred}
@@ -518,6 +528,8 @@ 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, editorDirection
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={editorDirection ? 'active' : undefined} onClick={() => onClick()}>
+      <img src={!editorDirection ? '../resources/icon/icon-left-to-right.svg' : ''} />
+    </div>
+    <div styleName={!editorDirection ? 'active' : undefined} onClick={() => onClick()}>
+      <img src={!editorDirection ? '' : '../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,
+  editorDirection: 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