Skip to content

Commit 93f0d3c

Browse files
callumboothcallumbooth
committed
fixes #2903 - Rearrange layout of columns
1 parent 78c00b1 commit 93f0d3c

10 files changed

+233
-31
lines changed

‎browser/components/CodeEditor.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -747,14 +747,14 @@ export default class CodeEditor extends React.Component {
747747
}
748748

749749
incrementLines (start, linesAdded, linesRemoved, editor) {
750-
let highlightedLines = editor.options.linesHighlighted
750+
const highlightedLines = editor.options.linesHighlighted
751751

752752
const totalHighlightedLines = highlightedLines.length
753753

754-
let offset = linesAdded - linesRemoved
754+
const offset = linesAdded - linesRemoved
755755

756756
// Store new items to be added as we're changing the lines
757-
let newLines = []
757+
const newLines = []
758758

759759
let i = totalHighlightedLines
760760

@@ -1128,10 +1128,12 @@ export default class CodeEditor extends React.Component {
11281128
render () {
11291129
const {
11301130
className,
1131-
fontSize
1131+
fontSize,
1132+
width,
1133+
height
11321134
} = this.props
11331135
const fontFamily = normalizeEditorFontFamily(this.props.fontFamily)
1134-
const width = this.props.width
1136+
11351137
return (<
11361138
div className={
11371139
className == null ? 'CodeEditor' : `CodeEditor ${className}`
@@ -1142,7 +1144,8 @@ export default class CodeEditor extends React.Component {
11421144
{
11431145
fontFamily,
11441146
fontSize: fontSize,
1145-
width: width
1147+
width: width,
1148+
height: height
11461149
}
11471150
}
11481151
onDrop={

‎browser/components/MarkdownPreview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ export default class MarkdownPreview extends React.Component {
321321
allowCustomCSS,
322322
customCSS
323323
)
324-
let body = this.markdown.render(noteContent)
324+
const body = this.markdown.render(noteContent)
325325
const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
326326
files.forEach(file => {
327327
if (global.process.platform === 'win32') {

‎browser/components/MarkdownSplitEditor.js

Lines changed: 67 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ class MarkdownSplitEditor extends React.Component {
1616
this.userScroll = true
1717
this.state = {
1818
isSliderFocused: false,
19-
codeEditorWidthInPercent: 50
19+
codeEditorWidthInPercent: 50,
20+
codeEditorHeightInPercent: 50
2021
}
2122
}
2223

@@ -102,22 +103,41 @@ class MarkdownSplitEditor extends React.Component {
102103
handleMouseMove (e) {
103104
if (this.state.isSliderFocused) {
104105
const rootRect = this.refs.root.getBoundingClientRect()
105-
const rootWidth = rootRect.width
106-
const offset = rootRect.left
107-
let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
106+
if (this.props.isStacking) {
107+
const rootHeight = rootRect.height
108+
const offset = rootRect.top
109+
let newCodeEditorHeightInPercent = (e.pageY - offset) / rootHeight * 100
108110

109-
// limit minSize to 10%, maxSize to 90%
110-
if (newCodeEditorWidthInPercent <= 10) {
111-
newCodeEditorWidthInPercent = 10
112-
}
111+
// limit minSize to 10%, maxSize to 90%
112+
if (newCodeEditorHeightInPercent <= 10) {
113+
newCodeEditorHeightInPercent = 10
114+
}
113115

114-
if (newCodeEditorWidthInPercent >= 90) {
115-
newCodeEditorWidthInPercent = 90
116-
}
116+
if (newCodeEditorHeightInPercent >= 90) {
117+
newCodeEditorHeightInPercent = 90
118+
}
119+
120+
this.setState({
121+
codeEditorHeightInPercent: newCodeEditorHeightInPercent
122+
})
123+
} else {
124+
const rootWidth = rootRect.width
125+
const offset = rootRect.left
126+
let newCodeEditorWidthInPercent = (e.pageX - offset) / rootWidth * 100
127+
128+
// limit minSize to 10%, maxSize to 90%
129+
if (newCodeEditorWidthInPercent <= 10) {
130+
newCodeEditorWidthInPercent = 10
131+
}
132+
133+
if (newCodeEditorWidthInPercent >= 90) {
134+
newCodeEditorWidthInPercent = 90
135+
}
117136

118-
this.setState({
119-
codeEditorWidthInPercent: newCodeEditorWidthInPercent
120-
})
137+
this.setState({
138+
codeEditorWidthInPercent: newCodeEditorWidthInPercent
139+
})
140+
}
121141
}
122142
}
123143

@@ -136,35 +156,60 @@ class MarkdownSplitEditor extends React.Component {
136156
}
137157

138158
render () {
139-
const {config, value, storageKey, noteKey, linesHighlighted} = this.props
159+
const {config, value, storageKey, noteKey, linesHighlighted, isStacking} = this.props
140160
const storage = findStorage(storageKey)
161+
162+
const editorStyle = {}
163+
const previewStyle = {}
164+
const sliderStyle = {}
165+
141166
let editorFontSize = parseInt(config.editor.fontSize, 10)
142167
if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
168+
editorStyle.fontSize = editorFontSize
169+
143170
let editorIndentSize = parseInt(config.editor.indentSize, 10)
144-
if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
145-
const previewStyle = {}
146-
previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
171+
if (!(editorStyle.fontSize > 0 && editorStyle.fontSize < 132)) editorIndentSize = 4
172+
editorStyle.indentSize = editorIndentSize
173+
174+
if (isStacking) {
175+
editorStyle.width = 100 + '%'
176+
editorStyle.height = this.state.codeEditorHeightInPercent + '%'
177+
previewStyle.width = 100 + '%'
178+
previewStyle.height = (100 - this.state.codeEditorHeightInPercent) + '%'
179+
sliderStyle.left = 0
180+
sliderStyle.top = this.state.codeEditorHeightInPercent + '%'
181+
} else {
182+
editorStyle.width = this.state.codeEditorWidthInPercent + '%'
183+
editorStyle.height = 100 + '%'
184+
previewStyle.width = (100 - this.state.codeEditorWidthInPercent) + '%'
185+
previewStyle.height = 100 + '%'
186+
sliderStyle.left = this.state.codeEditorWidthInPercent + '%'
187+
sliderStyle.top = 0
188+
}
189+
147190
if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused) previewStyle.pointerEvents = 'none'
191+
148192
return (
149193
<div styleName='root' ref='root'
150194
onMouseMove={e => this.handleMouseMove(e)}
151195
onMouseUp={e => this.handleMouseUp(e)}>
152196
<CodeEditor
153197
styleName='codeEditor'
154198
ref='code'
155-
width={this.state.codeEditorWidthInPercent + '%'}
199+
width={editorStyle.width}
200+
height={editorStyle.height}
156201
mode='Boost Flavored Markdown'
157202
value={value}
158203
theme={config.editor.theme}
159204
keyMap={config.editor.keyMap}
160205
fontFamily={config.editor.fontFamily}
161-
fontSize={editorFontSize}
206+
fontSize={editorStyle.fontSize}
162207
displayLineNumbers={config.editor.displayLineNumbers}
163208
matchingPairs={config.editor.matchingPairs}
164209
matchingTriples={config.editor.matchingTriples}
165210
explodingPairs={config.editor.explodingPairs}
166211
indentType={config.editor.indentType}
167-
indentSize={editorIndentSize}
212+
indentSize={editorStyle.indentSize}
168213
enableRulers={config.editor.enableRulers}
169214
rulers={config.editor.rulers}
170215
scrollPastEnd={config.editor.scrollPastEnd}
@@ -180,7 +225,7 @@ class MarkdownSplitEditor extends React.Component {
180225
hotkey={config.hotkey}
181226
switchPreview={config.editor.switchPreview}
182227
/>
183-
<div styleName='slider' style={{left: this.state.codeEditorWidthInPercent + '%'}} onMouseDown={e => this.handleMouseDown(e)} >
228+
<div styleName={isStacking ? 'slider-hoz' : 'slider'} style={{left: sliderStyle.left, top: sliderStyle.top}} onMouseDown={e => this.handleMouseDown(e)} >
184229
<div styleName='slider-hitbox' />
185230
</div>
186231
<MarkdownPreview

‎browser/components/MarkdownSplitEditor.styl

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
height 100%
44
font-size 30px
55
display flex
6+
flex-wrap wrap
67
.slider
78
absolute top bottom
89
top -2px
@@ -14,3 +15,11 @@
1415
left -3px
1516
z-index 10
1617
cursor col-resize
18+
.slider-hoz
19+
absolute left right
20+
.slider-hitbox
21+
absolute left right
22+
width: 100%
23+
height 7px
24+
cursor row-resize
25+

‎browser/main/Detail/MarkdownNoteDetail.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import RestoreButton from './RestoreButton'
2323
import PermanentDeleteButton from './PermanentDeleteButton'
2424
import InfoButton from './InfoButton'
2525
import ToggleModeButton from './ToggleModeButton'
26+
import ToggleStackDirectionButton from './ToggleStackDirectionButton'
2627
import InfoPanel from './InfoPanel'
2728
import InfoPanelTrashed from './InfoPanelTrashed'
2829
import { formatDate } from 'browser/lib/date-formatter'
@@ -45,6 +46,7 @@ class MarkdownNoteDetail extends React.Component {
4546
isLockButtonShown: props.config.editor.type !== 'SPLIT',
4647
isLocked: false,
4748
editorType: props.config.editor.type,
49+
isStacking: props.config.editor.isStacking,
4850
switchPreview: props.config.editor.switchPreview
4951
}
5052

@@ -338,6 +340,15 @@ class MarkdownNoteDetail extends React.Component {
338340
})
339341
}
340342

343+
handleSwitchStackDirection (type) {
344+
this.setState({ isStacking: type }, () => {
345+
this.focus()
346+
const newConfig = Object.assign({}, this.props.config)
347+
newConfig.editor.isStacking = type
348+
ConfigManager.set(newConfig)
349+
})
350+
}
351+
341352
handleDeleteNote () {
342353
this.handleTrashButtonClick()
343354
}
@@ -363,7 +374,7 @@ class MarkdownNoteDetail extends React.Component {
363374

364375
renderEditor () {
365376
const { config, ignorePreviewPointerEvents } = this.props
366-
const { note } = this.state
377+
const { note, isStacking } = this.state
367378

368379
if (this.state.editorType === 'EDITOR_PREVIEW') {
369380
return <MarkdownEditor
@@ -385,6 +396,7 @@ class MarkdownNoteDetail extends React.Component {
385396
value={note.content}
386397
storageKey={note.storage}
387398
noteKey={note.key}
399+
isStacking={isStacking}
388400
linesHighlighted={note.linesHighlighted}
389401
onChange={this.handleUpdateContent.bind(this)}
390402
ignorePreviewPointerEvents={ignorePreviewPointerEvents}
@@ -394,7 +406,7 @@ class MarkdownNoteDetail extends React.Component {
394406

395407
render () {
396408
const { data, location, config } = this.props
397-
const { note, editorType } = this.state
409+
const { note, editorType, isStacking } = this.state
398410
const storageKey = note.storage
399411
const folderKey = note.folder
400412

@@ -453,6 +465,11 @@ class MarkdownNoteDetail extends React.Component {
453465
<TodoListPercentage onClearCheckboxClick={(e) => this.handleClearTodo(e)} percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
454466
</div>
455467
<div styleName='info-right'>
468+
{editorType === 'SPLIT'
469+
? <ToggleStackDirectionButton onClick={(e) => this.handleSwitchStackDirection(e)} isStacking={isStacking} />
470+
: null
471+
}
472+
456473
<ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
457474
<StarButton
458475
onClick={(e) => this.handleStarButtonClick(e)}

‎browser/main/Detail/ToggleStackDirectionButton.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import PropTypes from 'prop-types'
2+
import React from 'react'
3+
import CSSModules from 'browser/lib/CSSModules'
4+
import styles from './ToggleStackDirectionButton.styl'
5+
import i18n from 'browser/lib/i18n'
6+
7+
const ToggleStackDirectionButton = ({
8+
onClick, isStacking
9+
}) => (
10+
<button styleName='control-splitPanelDirection' onClick={() => onClick(!isStacking)}>
11+
<img styleName='iconInfo' src={isStacking ? '../resources/icon/icon-panel-split-vertical.svg' : '../resources/icon/icon-panel-split-horizontal.svg'} />
12+
<span lang={i18n.locale} styleName='tooltip'>{
13+
isStacking ? i18n.__('Split Panels Horizontally') : i18n.__('Split Panels Vertically')
14+
15+
}</span>
16+
</button>
17+
)
18+
19+
ToggleStackDirectionButton.propTypes = {
20+
onClick: PropTypes.func.isRequired,
21+
isStacking: PropTypes.bool.isRequired
22+
}
23+
24+
export default CSSModules(ToggleStackDirectionButton, styles)

‎browser/main/Detail/ToggleStackDirectionButton.styl

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.control-splitPanelDirection
2+
topBarButtonRight()
3+
position relative
4+
.iconInfo
5+
width 13px
6+
height 13px
7+
&:hover .tooltip
8+
opacity 1
9+
10+
.tooltip
11+
tooltip()
12+
position absolute
13+
pointer-events none
14+
top 100%
15+
left 50%
16+
transform translateX(-50%)
17+
white-space nowrap
18+
z-index 200
19+
padding 5px
20+
line-height normal
21+
border-radius 2px
22+
opacity 0
23+
transition 0.1s
24+
25+
.tooltip:lang(ja)
26+
@extend .tooltip
27+
right 35px
28+
29+
body[data-theme="dark"]
30+
.control-splitPanelDirection
31+
topBarButtonDark()

‎browser/main/lib/ConfigManager.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const DEFAULT_CONFIG = {
5454
delfaultStatus: 'PREVIEW', // 'PREVIEW', 'CODE'
5555
scrollPastEnd: false,
5656
type: 'SPLIT', // 'SPLIT', 'EDITOR_PREVIEW'
57+
isStacking: false,
5758
fetchUrlTitle: true,
5859
enableTableEditor: false,
5960
enableFrontMatterTitle: true,

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

Lines changed: 36 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)