moves orientation button to view menu

browser/main/Detail/MarkdownNoteDetail.js

@@ -23,7 +23,6 @@ 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'
@@ -60,6 +59,7 @@ class MarkdownNoteDetail extends React.Component {
     this.toggleLockButton = this.handleToggleLockButton.bind(this)
     this.generateToc = this.handleGenerateToc.bind(this)
     this.handleUpdateContent = this.handleUpdateContent.bind(this)
+    this.handleSwitchStackDirection = this.handleSwitchStackDirection.bind(this)
   }
 
   focus() {
@@ -67,6 +67,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   componentDidMount() {
+    ee.on('editor:orientation', this.handleSwitchStackDirection)
     ee.on('topbar:togglelockbutton', this.toggleLockButton)
     ee.on('topbar:toggledirectionbutton', () => this.handleSwitchDirection())
     ee.on('topbar:togglemodebutton', () => {
@@ -393,13 +394,16 @@ class MarkdownNoteDetail extends React.Component {
     )
   }
 
-  handleSwitchStackDirection(type) {
-    this.setState({ isStacking: type }, () => {
-      this.focus()
-      const newConfig = Object.assign({}, this.props.config)
-      newConfig.ui.isStacking = type
-      ConfigManager.set(newConfig)
-    })
+  handleSwitchStackDirection() {
+    this.setState(
+      prevState => ({ isStacking: !prevState.isStacking }),
+      () => {
+        this.focus()
+        const newConfig = Object.assign({}, this.props.config)
+        newConfig.ui.isStacking = this.state.isStacking
+        ConfigManager.set(newConfig)
+      }
+    )
   }
 
   handleSwitchDirection() {
@@ -476,7 +480,7 @@ class MarkdownNoteDetail extends React.Component {
 
   render() {
     const { data, dispatch, location, config } = this.props
-    const { note, editorType, isStacking } = this.state
+    const { note, editorType } = this.state
     const storageKey = note.storage
     const folderKey = note.folder
 
@@ -553,12 +557,6 @@ class MarkdownNoteDetail extends React.Component {
           />
         </div>
         <div styleName='info-right'>
-          {editorType === 'SPLIT' ? (
-            <ToggleStackDirectionButton
-              onClick={e => this.handleSwitchStackDirection(e)}
-              isStacking={isStacking}
-            />
-          ) : null}
           <ToggleModeButton
             onClick={e => this.handleSwitchMode(e)}
             editorType={editorType}

browser/main/Detail/ToggleStackDirectionButton.js

@@ -1,32 +0,0 @@
-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 }) => {
-  const imgSrc = isStacking
-    ? '../resources/icon/icon-panel-split-vertical.svg'
-    : '../resources/icon/icon-panel-split-horizontal.svg'
-  const text = isStacking
-    ? i18n.__('Split Panels Horizontally')
-    : i18n.__('Split Panels Vertically')
-  return (
-    <button
-      styleName='control-splitPanelDirection'
-      onClick={() => onClick(!isStacking)}
-    >
-      <img styleName='iconInfo' src={imgSrc} />
-      <span lang={i18n.locale} styleName='tooltip'>
-        {text}
-      </span>
-    </button>
-  )
-}
-
-ToggleStackDirectionButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  isStacking: PropTypes.bool.isRequired
-}
-
-export default CSSModules(ToggleStackDirectionButton, styles)

browser/main/Detail/ToggleStackDirectionButton.styl

@@ -1,31 +0,0 @@
-.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()

lib/main-menu.js

@@ -314,6 +314,12 @@ const view = {
         mainWindow.webContents.send('editor:fullscreen')
       }
     },
+    {
+      label: 'Toggle Editor Orientation',
+      click() {
+        mainWindow.webContents.send('editor:orientation')
+      }
+    },
     {
       type: 'separator'
     },