fixes #2903 - Rearrange layout of columns

browser/components/CodeEditor.js

@@ -747,14 +747,14 @@ export default class CodeEditor extends React.Component {
   }
 
   incrementLines (start, linesAdded, linesRemoved, editor) {
-    let highlightedLines = editor.options.linesHighlighted
+    const highlightedLines = editor.options.linesHighlighted
 
     const totalHighlightedLines = highlightedLines.length
 
-    let offset = linesAdded - linesRemoved
+    const offset = linesAdded - linesRemoved
 
     // Store new items to be added as we're changing the lines
-    let newLines = []
+    const newLines = []
 
     let i = totalHighlightedLines
 
@@ -1128,10 +1128,12 @@ export default class CodeEditor extends React.Component {
   render () {
     const {
       className,
-      fontSize
+      fontSize,
+      width,
+      height
     } = this.props
     const fontFamily = normalizeEditorFontFamily(this.props.fontFamily)
-    const width = this.props.width
+
     return (<
       div className={
         className == null ? 'CodeEditor' : `CodeEditor ${className}`
@@ -1142,7 +1144,8 @@ export default class CodeEditor extends React.Component {
       {
         fontFamily,
         fontSize: fontSize,
-        width: width
+        width: width,
+        height: height
       }
       }
       onDrop={

browser/components/MarkdownPreview.js

@@ -321,7 +321,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
+      if (this.props.isStacking) {
-      const offset = rootRect.left
+        const rootHeight = rootRect.height
-      let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
+        const offset = rootRect.top
+        let newCodeEditorHeightInPercent = (e.pageY - offset) / rootHeight * 100
 
-      // limit minSize to 10%, maxSize to 90%
+        // limit minSize to 10%, maxSize to 90%
-      if (newCodeEditorWidthInPercent <= 10) {
+        if (newCodeEditorHeightInPercent <= 10) {
-        newCodeEditorWidthInPercent = 10
+          newCodeEditorHeightInPercent = 10
+        }
+
+        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
+
+        // limit minSize to 10%, maxSize to 90%
+        if (newCodeEditorWidthInPercent <= 10) {
+          newCodeEditorWidthInPercent = 10
+        }
+
+        if (newCodeEditorWidthInPercent >= 90) {
+          newCodeEditorWidthInPercent = 90
+        }
+
+        this.setState({
+          codeEditorWidthInPercent: newCodeEditorWidthInPercent
+        })
       }
-
-      if (newCodeEditorWidthInPercent >= 90) {
-        newCodeEditorWidthInPercent = 90
-      }
-
-      this.setState({
-        codeEditorWidthInPercent: newCodeEditorWidthInPercent
-      })
     }
   }
 
@@ -136,15 +156,39 @@ 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)
+
+    const editorStyle = {}
+    const previewStyle = {}
+    const 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
+    if (!(editorStyle.fontSize > 0 && editorStyle.fontSize < 132)) editorIndentSize = 4
-    const previewStyle = {}
+    editorStyle.indentSize = editorIndentSize
-    previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
+
+    if (isStacking) {
+      editorStyle.width = 100 + '%'
+      editorStyle.height = this.state.codeEditorHeightInPercent + '%'
+      previewStyle.width = 100 + '%'
+      previewStyle.height = (100 - this.state.codeEditorHeightInPercent) + '%'
+      sliderStyle.left = 0
+      sliderStyle.top = this.state.codeEditorHeightInPercent + '%'
+    } else {
+      editorStyle.width = this.state.codeEditorWidthInPercent + '%'
+      editorStyle.height = 100 + '%'
+      previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
+      previewStyle.height = 100 + '%'
+      sliderStyle.left = this.state.codeEditorWidthInPercent + '%'
+      sliderStyle.top = 0
+    }
+
     if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused) previewStyle.pointerEvents = 'none'
+
     return (
       <div styleName='root' ref='root'
         onMouseMove={e => this.handleMouseMove(e)}
@@ -152,19 +196,20 @@ class MarkdownSplitEditor extends React.Component {
         <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}
@@ -180,7 +225,7 @@ class MarkdownSplitEditor extends React.Component {
           hotkey={config.hotkey}
           switchPreview={config.editor.switchPreview}
        />
-        <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

@@ -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()

browser/main/lib/ConfigManager.js

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

resources/icon/icon-panel-split-horizontal.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{filter:url(#filter-1);}
+	.st1{opacity:0;fill-rule:evenodd;clip-rule:evenodd;fill:#D8D8D8;}
+	.st2{fill:none;stroke:#C7C7C7;stroke-width:1.5556;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<filter  filterUnits="objectBoundingBox" height="100.0%" id="filter-1" width="100.0%" x="0.0%" y="0.0%">
+	<feOffset  dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+	
+		<feColorMatrix  in="shadowOffsetOuter1" result="shadowMatrixOuter1" type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0">
+		</feColorMatrix>
+	<feMerge>
+		<feMergeNode  in="shadowMatrixOuter1"></feMergeNode>
+		<feMergeNode  in="SourceGraphic"></feMergeNode>
+	</feMerge>
+</filter>
+<title>icon-mode-split-on</title>
+<desc>Created with Sketch.</desc>
+<g id="Artboard-4" transform="translate(-1378.000000, -372.000000)">
+	<g id="Group" transform="translate(1336.000000, 363.000000)" class="st0">
+		<g id="icon-mode-split-on_1_" transform="translate(40.000000, 7.000000)">
+			<g id="Rectangle-7_1_">
+				<rect class="st1" width="20" height="20"/>
+			</g>
+			<g id="sidebar_1_" transform="translate(3.000000, 3.000000)">
+				<path id="Rectangle-path_1_" class="st2" d="M1.6,0h10.9C13.3,0,14,0.7,14,1.6v10.9c0,0.9-0.7,1.6-1.6,1.6H1.6
+					C0.7,14,0,13.3,0,12.4V1.6C0,0.7,0.7,0,1.6,0z"/>
+				<path id="Shape_1_" class="st2" d="M-0.5,7h14"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

resources/icon/icon-panel-split-vertical.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{filter:url(#filter-1);}
+	.st1{opacity:0;fill-rule:evenodd;clip-rule:evenodd;fill:#D8D8D8;}
+	.st2{fill:none;stroke:#C7C7C7;stroke-width:1.5556;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<filter  filterUnits="objectBoundingBox" height="100.0%" id="filter-1" width="100.0%" x="0.0%" y="0.0%">
+	<feOffset  dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+	
+		<feColorMatrix  in="shadowOffsetOuter1" result="shadowMatrixOuter1" type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0">
+		</feColorMatrix>
+	<feMerge>
+		<feMergeNode  in="shadowMatrixOuter1"></feMergeNode>
+		<feMergeNode  in="SourceGraphic"></feMergeNode>
+	</feMerge>
+</filter>
+<title>icon-mode-split-on</title>
+<desc>Created with Sketch.</desc>
+<g id="Artboard-4" transform="translate(-1378.000000, -372.000000)">
+	<g id="Group" transform="translate(1336.000000, 363.000000)" class="st0">
+		<g id="icon-mode-split-on_1_" transform="translate(40.000000, 7.000000)">
+			<g id="Rectangle-7_1_">
+				<rect class="st1" width="20" height="20"/>
+			</g>
+			<g id="sidebar_1_" transform="translate(3.000000, 3.000000)">
+				<path id="Rectangle-path_1_" class="st2" d="M1.6,0h10.9C13.3,0,14,0.7,14,1.6v10.9c0,0.9-0.7,1.6-1.6,1.6H1.6
+					C0.7,14,0,13.3,0,12.4V1.6C0,0.7,0.7,0,1.6,0z"/>
+				<path id="Shape_1_" class="st2" d="M7.5,0v14"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>