fixes #2903 - Rearrange layout of columns

2025-12-13 01:36:22 +00:00 · 2019-03-19 20:39:34 +00:00
parent 78c00b1722
commit 93f0d3c1cf
10 changed files with 234 additions and 32 deletions
--- a/browser/components/CodeEditor.js
+++ b/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={
--- a/browser/components/MarkdownPreview.js
+++ b/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') {
--- a/browser/components/MarkdownSplitEditor.js
+++ b/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,6 +103,24 @@ class MarkdownSplitEditor extends React.Component {
  handleMouseMove (e) {
    if (this.state.isSliderFocused) {
      const rootRect = this.refs.root.getBoundingClientRect()
+      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 (newCodeEditorHeightInPercent <= 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
@@ -120,6 +139,7 @@ class MarkdownSplitEditor extends React.Component {
        })
      }
    }
+  }

  handleMouseUp (e) {
    e.preventDefault()
@@ -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
-    const previewStyle = {}
+    if (!(editorStyle.fontSize > 0 && editorStyle.fontSize < 132)) editorIndentSize = 4
+    editorStyle.indentSize = editorIndentSize
+
+    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
--- a/browser/components/MarkdownSplitEditor.styl
+++ b/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
+      
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/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)}
--- a/browser/main/Detail/ToggleStackDirectionButton.js
+++ b/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)
--- a/browser/main/Detail/ToggleStackDirectionButton.styl
+++ b/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()
--- a/browser/main/lib/ConfigManager.js
+++ b/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,
--- a/resources/icon/icon-panel-split-horizontal.svg
+++ b/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>
--- a/resources/icon/icon-panel-split-vertical.svg
+++ b/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>