Merge pull request #2936 from callumbooth/fix-2903

fixes #2903 - Rearrange layout of columns

browser/main/Detail/MarkdownNoteDetail.js

@@ -60,6 +60,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 +68,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', () => {
@@ -383,7 +385,7 @@ class MarkdownNoteDetail extends React.Component {
   handleSwitchMode(type) {
     // If in split mode, hide the lock button
     this.setState(
-      { editorType: type, isLockButtonShown: !(type === 'SPLIT') },
+      { editorType: type, isLockButtonShown: type !== 'SPLIT' },
       () => {
         this.focus()
         const newConfig = Object.assign({}, this.props.config)
@@ -393,6 +395,18 @@ class MarkdownNoteDetail extends React.Component {
     )
   }
 
+  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() {
     if (!this.props.config.editor.rtlEnabled) {
       return
@@ -429,7 +443,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 (
@@ -455,6 +469,7 @@ class MarkdownNoteDetail extends React.Component {
           value={note.content}
           storageKey={note.storage}
           noteKey={note.key}
+          isStacking={isStacking}
           linesHighlighted={note.linesHighlighted}
           onChange={this.handleUpdateContent}
           ignorePreviewPointerEvents={ignorePreviewPointerEvents}

browser/main/lib/ConfigManager.js

@@ -71,7 +71,8 @@ export const DEFAULT_CONFIG = {
     disableDirectWrite: false,
     showScrollBar: true,
     defaultNote: 'ALWAYS_ASK', // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
-    showMenuBar: false
+    showMenuBar: false,
+    isStacking: false
   },
   editor: {
     theme: 'base16-light',