fixes #2903 - Rearrange layout of columns

browser/components/CodeEditor.js

@@ -1127,21 +1127,26 @@ export default class CodeEditor extends React.Component {
   render () {
     const {
       className,
-      fontSize
+      fontSize,
+      fontFamily,
+      width,
+      height
     } = this.props
-    const fontFamily = normalizeEditorFontFamily(this.props.fontFamily)
-    const width = this.props.width
+    const normalizedFontFamily = normalizeEditorFontFamily(fontFamily)
+
     return (<
       div className={
         className == null ? 'CodeEditor' : `CodeEditor ${className}`
       }
       ref='root'
       tabIndex='-1'
       style={{
-        fontFamily,
+        normalizedFontFamily,
         fontSize: fontSize,
-        width: width
-      }}
+        width: width,
+        height: height
+      }
+      }
       onDrop={
         e => this.handleDropImage(e)
       }

browser/components/MarkdownPreview.js

@@ -344,7 +344,7 @@ export default class MarkdownPreview extends React.Component {
       allowCustomCSS,
       customCSS
     )
-    let body = this.markdown.render(noteContent)
+    const body = this.markdown.render(noteContent)
     const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
     files.forEach(file => {
       if (global.process.platform === 'win32') {

browser/components/MarkdownSplitEditor.js

@@ -16,7 +16,8 @@ class MarkdownSplitEditor extends React.Component {
     this.userScroll = true
     this.state = {
       isSliderFocused: false,
-      codeEditorWidthInPercent: 50
+      codeEditorWidthInPercent: 50,
+      codeEditorHeightInPercent: 50
     }
   }
 
@@ -102,22 +103,41 @@ class MarkdownSplitEditor extends React.Component {
   handleMouseMove (e) {
     if (this.state.isSliderFocused) {
       const rootRect = this.refs.root.getBoundingClientRect()
-      const rootWidth = rootRect.width
-      const offset = rootRect.left
-      let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
+      if (this.props.isStacking) {
+        const rootHeight = rootRect.height
+        const offset = rootRect.top
+        let newCodeEditorHeightInPercent = (e.pageY - offset) / rootHeight * 100
 
-      // limit minSize to 10%, maxSize to 90%
-      if (newCodeEditorWidthInPercent <= 10) {
-        newCodeEditorWidthInPercent = 10
-      }
+        // limit minSize to 10%, maxSize to 90%
+        if (newCodeEditorHeightInPercent <= 10) {
+          newCodeEditorHeightInPercent = 10
+        }
 
-      if (newCodeEditorWidthInPercent >= 90) {
-        newCodeEditorWidthInPercent = 90
-      }
+        if (newCodeEditorHeightInPercent >= 90) {
+          newCodeEditorHeightInPercent = 90
+        }
+
+        this.setState({
+          codeEditorHeightInPercent: newCodeEditorHeightInPercent
+        })
+      } else {
+        const rootWidth = rootRect.width
+        const offset = rootRect.left
+        let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
 
-      this.setState({
-        codeEditorWidthInPercent: newCodeEditorWidthInPercent
-      })
+        // limit minSize to 10%, maxSize to 90%
+        if (newCodeEditorWidthInPercent <= 10) {
+          newCodeEditorWidthInPercent = 10
+        }
+
+        if (newCodeEditorWidthInPercent >= 90) {
+          newCodeEditorWidthInPercent = 90
+        }
+
+        this.setState({
+          codeEditorWidthInPercent: newCodeEditorWidthInPercent
+        })
+      }
     }
   }
 
@@ -136,35 +156,68 @@ class MarkdownSplitEditor extends React.Component {
   }
 
   render () {
-    const {config, value, storageKey, noteKey, linesHighlighted} = this.props
+    const {config, value, storageKey, noteKey, linesHighlighted, isStacking} = this.props
     const storage = findStorage(storageKey)
+
+    let editorStyle = {}
+    let previewStyle = {}
+    let sliderStyle = {}
+
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
+    editorStyle.fontSize = editorFontSize
+
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
-    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
-    const previewStyle = {}
-    previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
+    if (!(editorStyle.fontSize > 0 && editorStyle.fontSize < 132)) editorIndentSize = 4
+    editorStyle.indentSize = editorIndentSize
+
+    editorStyle = Object.assign(editorStyle, isStacking ? {
+      width: '100%',
+      height: `${this.state.codeEditorHeightInPercent}%`
+    } : {
+      width: `${this.state.codeEditorWidthInPercent}%`,
+      height: '100%'
+    })
+
+    previewStyle = Object.assign(previewStyle, isStacking ? {
+      width: '100%',
+      height: `${100 - this.state.codeEditorHeightInPercent}%`
+    } : {
+      width: `${100 - this.state.codeEditorWidthInPercent}%`,
+      height: '100%'
+    })
+
+    sliderStyle = Object.assign(sliderStyle, isStacking ? {
+      left: 0,
+      top: `${this.state.codeEditorHeightInPercent}%`
+    } : {
+      left: `${this.state.codeEditorWidthInPercent}%`,
+      top: 0
+    })
+
     if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused) previewStyle.pointerEvents = 'none'
+
     return (
       <div styleName='root' ref='root'
         onMouseMove={e => this.handleMouseMove(e)}
         onMouseUp={e => this.handleMouseUp(e)}>
         <CodeEditor
           styleName='codeEditor'
           ref='code'
-          width={this.state.codeEditorWidthInPercent + '%'}
+          width={editorStyle.width}
+          height={editorStyle.height}
           mode='Boost Flavored Markdown'
           value={value}
           theme={config.editor.theme}
           keyMap={config.editor.keyMap}
           fontFamily={config.editor.fontFamily}
-          fontSize={editorFontSize}
+          fontSize={editorStyle.fontSize}
           displayLineNumbers={config.editor.displayLineNumbers}
           matchingPairs={config.editor.matchingPairs}
           matchingTriples={config.editor.matchingTriples}
           explodingPairs={config.editor.explodingPairs}
           indentType={config.editor.indentType}
-          indentSize={editorIndentSize}
+          indentSize={editorStyle.indentSize}
           enableRulers={config.editor.enableRulers}
           rulers={config.editor.rulers}
           scrollPastEnd={config.editor.scrollPastEnd}
@@ -182,7 +235,7 @@ class MarkdownSplitEditor extends React.Component {
           enableMarkdownLint={config.editor.enableMarkdownLint}
           customMarkdownLintConfig={config.editor.customMarkdownLintConfig}
        />
-        <div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
+        <div styleName={isStacking ? 'slider-hoz' : 'slider'} style={{left: sliderStyle.left, top: sliderStyle.top}} onMouseDown={e => this.handleMouseDown(e)} >
           <div styleName='slider-hitbox' />
         </div>
         <MarkdownPreview

browser/components/MarkdownSplitEditor.styl

@@ -3,6 +3,7 @@
   height 100%
   font-size 30px
   display flex
+  flex-wrap wrap
   .slider
     absolute top bottom
     top -2px
@@ -14,3 +15,11 @@
     left -3px
     z-index 10
     cursor col-resize
+  .slider-hoz
+    absolute left right
+    .slider-hitbox
+      absolute left right
+      width: 100%
+      height 7px
+      cursor row-resize
+

browser/main/Detail/MarkdownNoteDetail.js

@@ -22,6 +22,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'
@@ -46,6 +47,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
     }
 
@@ -344,6 +346,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()
   }
@@ -369,7 +380,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
@@ -391,6 +402,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}
@@ -400,7 +412,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
 
@@ -460,6 +472,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()

browser/main/lib/ConfigManager.js

@@ -58,6 +58,7 @@ export const DEFAULT_CONFIG = {
     delfaultStatus: 'PREVIEW', // 'PREVIEW', 'CODE'
     scrollPastEnd: false,
     type: 'SPLIT', // 'SPLIT', 'EDITOR_PREVIEW'
+    isStacking: false,
     fetchUrlTitle: true,
     enableTableEditor: false,
     enableFrontMatterTitle: true,