fixes #2903 - Rearrange layout of columns

browser/main/Detail/MarkdownNoteDetail.js

@@ -23,6 +23,7 @@ import RestoreButton from './RestoreButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import ToggleModeButton from './ToggleModeButton'
+import ToggleStackDirectionButton from './ToggleStackDirectionButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
@@ -45,6 +46,7 @@ class MarkdownNoteDetail extends React.Component {
       isLockButtonShown: props.config.editor.type !== 'SPLIT',
       isLocked: false,
       editorType: props.config.editor.type,
+      isStacking: props.config.editor.isStacking,
       switchPreview: props.config.editor.switchPreview
     }
 
@@ -338,6 +340,15 @@ class MarkdownNoteDetail extends React.Component {
     })
   }
 
+  handleSwitchStackDirection (type) {
+    this.setState({ isStacking: type }, () => {
+      this.focus()
+      const newConfig = Object.assign({}, this.props.config)
+      newConfig.editor.isStacking = type
+      ConfigManager.set(newConfig)
+    })
+  }
+
   handleDeleteNote () {
     this.handleTrashButtonClick()
   }
@@ -363,7 +374,7 @@ class MarkdownNoteDetail extends React.Component {
 
   renderEditor () {
     const { config, ignorePreviewPointerEvents } = this.props
-    const { note } = this.state
+    const { note, isStacking } = this.state
 
     if (this.state.editorType === 'EDITOR_PREVIEW') {
       return <MarkdownEditor
@@ -385,6 +396,7 @@ class MarkdownNoteDetail extends React.Component {
         value={note.content}
         storageKey={note.storage}
         noteKey={note.key}
+        isStacking={isStacking}
         linesHighlighted={note.linesHighlighted}
         onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
@@ -394,7 +406,7 @@ class MarkdownNoteDetail extends React.Component {
 
   render () {
     const { data, location, config } = this.props
-    const { note, editorType } = this.state
+    const { note, editorType, isStacking } = this.state
     const storageKey = note.storage
     const folderKey = note.folder
 
@@ -453,6 +465,11 @@ class MarkdownNoteDetail extends React.Component {
         <TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
       <div styleName='info-right'>
+        {editorType === 'SPLIT'
+          ? <ToggleStackDirectionButton onClick={(e) => this.handleSwitchStackDirection(e)} isStacking={isStacking} />
+          : null
+        }
+
         <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}

browser/main/Detail/ToggleStackDirectionButton.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleStackDirectionButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const ToggleStackDirectionButton = ({
+  onClick, isStacking
+}) => (
+  <button styleName='control-splitPanelDirection' onClick={() => onClick(!isStacking)}>
+    <img styleName='iconInfo' src={isStacking ? '../resources/icon/icon-panel-split-vertical.svg' : '../resources/icon/icon-panel-split-horizontal.svg'} />
+    <span lang={i18n.locale} styleName='tooltip'>{
+          isStacking ? i18n.__('Split Panels Horizontally') : i18n.__('Split Panels Vertically')
+
+          }</span>
+  </button>
+)
+
+ToggleStackDirectionButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isStacking: PropTypes.bool.isRequired
+}
+
+export default CSSModules(ToggleStackDirectionButton, styles)

browser/main/Detail/ToggleStackDirectionButton.styl

@@ -0,0 +1,31 @@
+.control-splitPanelDirection
+  topBarButtonRight()
+  position relative
+  .iconInfo
+      width 13px
+      height 13px
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 100%
+  left 50%
+  transform translateX(-50%)
+  white-space nowrap
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.tooltip:lang(ja)
+  @extend .tooltip
+  right 35px
+
+body[data-theme="dark"]
+  .control-splitPanelDirection
+    topBarButtonDark()