diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js index a5bb009a..faa04e9a 100644 --- a/browser/components/CodeEditor.js +++ b/browser/components/CodeEditor.js @@ -1240,18 +1240,19 @@ export default class CodeEditor extends React.Component { } render() { - const { className, fontSize } = this.props - const fontFamily = normalizeEditorFontFamily(this.props.fontFamily) - const width = this.props.width + const { className, fontSize, fontFamily, width, height } = this.props + const normalisedFontFamily = normalizeEditorFontFamily(fontFamily) + return (
this.handleDropImage(e)} /> diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index 6db73bed..a26a819b 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 } } @@ -114,22 +115,42 @@ 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 - }) } } @@ -154,6 +175,7 @@ class MarkdownSplitEditor extends React.Component { storageKey, noteKey, linesHighlighted, + isStacking, RTL } = this.props let storage @@ -162,14 +184,62 @@ class MarkdownSplitEditor extends React.Component { } catch (e) { return
} + + 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 (
this.handleMouseDown(e)} >
diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl index 49bd927a..2722f13d 100644 --- 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 @@ -15,6 +16,14 @@ 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 + apply-theme(theme) body[data-theme={theme}] diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 7770252b..9007989e 100755 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/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} diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 81c2cbb7..a0b23fc2 100644 --- a/browser/main/lib/ConfigManager.js +++ b/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', diff --git a/lib/main-menu.js b/lib/main-menu.js index 7caef0bf..0c91cf1f 100644 --- a/lib/main-menu.js +++ b/lib/main-menu.js @@ -314,6 +314,12 @@ const view = { mainWindow.webContents.send('editor:fullscreen') } }, + { + label: 'Toggle Editor Orientation', + click() { + mainWindow.webContents.send('editor:orientation') + } + }, { type: 'separator' },