From 93f0d3c1cf2a000ea4e061edc1973b45a3b1ac20 Mon Sep 17 00:00:00 2001 From: Callum booth Date: Tue, 19 Mar 2019 20:39:34 +0000 Subject: [PATCH] fixes #2903 - Rearrange layout of columns --- browser/components/CodeEditor.js | 15 +-- browser/components/MarkdownPreview.js | 2 +- browser/components/MarkdownSplitEditor.js | 91 ++++++++++++++----- browser/components/MarkdownSplitEditor.styl | 9 ++ browser/main/Detail/MarkdownNoteDetail.js | 21 ++++- .../main/Detail/ToggleStackDirectionButton.js | 24 +++++ .../Detail/ToggleStackDirectionButton.styl | 31 +++++++ browser/main/lib/ConfigManager.js | 1 + .../icon/icon-panel-split-horizontal.svg | 36 ++++++++ resources/icon/icon-panel-split-vertical.svg | 36 ++++++++ 10 files changed, 234 insertions(+), 32 deletions(-) create mode 100644 browser/main/Detail/ToggleStackDirectionButton.js create mode 100644 browser/main/Detail/ToggleStackDirectionButton.styl create mode 100644 resources/icon/icon-panel-split-horizontal.svg create mode 100644 resources/icon/icon-panel-split-vertical.svg diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index 6ad294ed..556e2f7b 100644 --- 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={ diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index a6819ce9..b3ece56a 100755 --- 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') { diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index 4477288a..0d71ab93 100644 --- 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,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 (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 - const previewStyle = {} - previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%' + 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 (
this.handleMouseMove(e)} @@ -152,19 +196,20 @@ class MarkdownSplitEditor extends React.Component { -
this.handleMouseDown(e)} > +
this.handleMouseDown(e)} >
{ + 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 this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
+ {editorType === 'SPLIT' + ? this.handleSwitchStackDirection(e)} isStacking={isStacking} /> + : null + } + this.handleSwitchMode(e)} editorType={editorType} /> this.handleStarButtonClick(e)} diff --git a/browser/main/Detail/ToggleStackDirectionButton.js b/browser/main/Detail/ToggleStackDirectionButton.js new file mode 100644 index 00000000..c16e92e0 --- /dev/null +++ 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 +}) => ( + +) + +ToggleStackDirectionButton.propTypes = { + onClick: PropTypes.func.isRequired, + isStacking: PropTypes.bool.isRequired +} + +export default CSSModules(ToggleStackDirectionButton, styles) diff --git a/browser/main/Detail/ToggleStackDirectionButton.styl b/browser/main/Detail/ToggleStackDirectionButton.styl new file mode 100644 index 00000000..9d8274f3 --- /dev/null +++ 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() \ No newline at end of file diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 5558b3bd..bdb55895 100644 --- 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, diff --git a/resources/icon/icon-panel-split-horizontal.svg b/resources/icon/icon-panel-split-horizontal.svg new file mode 100644 index 00000000..c212cfd3 --- /dev/null +++ b/resources/icon/icon-panel-split-horizontal.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + +icon-mode-split-on +Created with Sketch. + + + + + + + + + + + + + + diff --git a/resources/icon/icon-panel-split-vertical.svg b/resources/icon/icon-panel-split-vertical.svg new file mode 100644 index 00000000..ba7f740a --- /dev/null +++ b/resources/icon/icon-panel-split-vertical.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + +icon-mode-split-on +Created with Sketch. + + + + + + + + + + + + + +