From 26ebfc587356f96343aaad16aab4085b97a3fadf Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Sat, 27 May 2017 20:22:51 -0500 Subject: [PATCH 01/13] added fullscreen button for notes and snippets allows user to hide the sidebars for fullscreen editing --- browser/main/Detail/MarkdownNoteDetail.js | 42 +++++++++++++++++++- browser/main/Detail/MarkdownNoteDetail.styl | 7 ++++ browser/main/Detail/SnippetNoteDetail.js | 43 ++++++++++++++++++++- browser/main/Detail/SnippetNoteDetail.styl | 7 ++++ 4 files changed, 97 insertions(+), 2 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 6113264e2..f4bc3dbe6 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -29,7 +29,14 @@ class MarkdownNoteDetail extends React.Component { content: '' }, props.note), isLockButtonShown: false, - isLocked: false + isLocked: false, + fullScreen: { + status: false, + oldState: { + nd : 0, + mb : 0 + } + } } this.dispatchTimer = null @@ -193,6 +200,34 @@ class MarkdownNoteDetail extends React.Component { } } + handleFullScreenButton (e) { + + this.state.fullScreen.status = !this.state.fullScreen.status + const noteDetail = document.querySelector(".NoteDetail") + const mainBody = document.querySelector(".Main__body___browser-main-") + const sliderRight = document.querySelector(".Main__slider-right___browser-main-") + const slider = document.querySelector(".Main__slider___browser-main-") + + if(this.state.fullScreen.status) { + + this.state.fullScreen.oldState.nd = noteDetail.style.left + this.state.fullScreen.oldState.mb = mainBody.style.left + noteDetail.style.left = "0px" + mainBody.style.left = "0px" + sliderRight.style.display = 'none' + slider.style.display = 'none' + + }else { + + noteDetail.style.left = this.state.fullScreen.oldState.nd + mainBody.style.left = this.state.fullScreen.oldState.mb + sliderRight.style.display = 'block' + slider.style.display = 'block' + + } + + } + handleLockButtonMouseDown (e) { e.preventDefault() ee.emit('editor:lock') @@ -284,6 +319,11 @@ class MarkdownNoteDetail extends React.Component { + diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index 53a6a4e9c..17aedc354 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -31,6 +31,10 @@ float right topBarButtonLight() +.control-fullScreenButton + float right + topBarButtonLight() + .body absolute left right left $note-detail-left-margin @@ -55,3 +59,6 @@ body[data-theme="dark"] .control-trashButton topBarButtonDark() + + .control-fullScreenButton + topBarButtonDark() diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 5e6a3278d..5f95bad9c 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -47,7 +47,15 @@ class SnippetNoteDetail extends React.Component { description: '' }, props.note, { snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet)) - }) + }), + fullScreen: { + status: false, + oldState: { + nd : 0, + mb : 0 + } + } + } } @@ -187,6 +195,34 @@ class SnippetNoteDetail extends React.Component { } } + handleFullScreenButton (e) { + + this.state.fullScreen.status = !this.state.fullScreen.status + const noteDetail = document.querySelector(".NoteDetail") + const mainBody = document.querySelector(".Main__body___browser-main-") + const sliderRight = document.querySelector(".Main__slider-right___browser-main-") + const slider = document.querySelector(".Main__slider___browser-main-") + + if(this.state.fullScreen.status) { + + this.state.fullScreen.oldState.nd = noteDetail.style.left + this.state.fullScreen.oldState.mb = mainBody.style.left + noteDetail.style.left = "0px" + mainBody.style.left = "0px" + sliderRight.style.display = 'none' + slider.style.display = 'none' + + }else { + + noteDetail.style.left = this.state.fullScreen.oldState.nd + mainBody.style.left = this.state.fullScreen.oldState.mb + sliderRight.style.display = 'block' + slider.style.display = 'block' + + } + + } + handleTabPlusButtonClick (e) { this.addSnippet() } @@ -524,6 +560,11 @@ class SnippetNoteDetail extends React.Component { + diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 2edf84795..eea20d90e 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -70,6 +70,10 @@ float right topBarButtonLight() +.control-fullScreenButton + float right + topBarButtonLight() + body[data-theme="dark"] .root border-color $ui-dark-borderColor @@ -102,3 +106,6 @@ body[data-theme="dark"] .control-trashButton topBarButtonDark() + + .control-fullScreenButton + topBarButtonDark() From fbd8a23b4a02acd6d5f4eadd73a037cf6fa377a0 Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Sun, 28 May 2017 01:10:32 -0500 Subject: [PATCH 02/13] fixing some code from the comments --- browser/main/Detail/MarkdownNoteDetail.js | 50 ++++++++++------------- browser/main/Detail/SnippetNoteDetail.js | 50 ++++++++++------------- browser/main/Main.js | 3 ++ 3 files changed, 45 insertions(+), 58 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index f4bc3dbe6..4eeb0d3d6 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -30,13 +30,9 @@ class MarkdownNoteDetail extends React.Component { }, props.note), isLockButtonShown: false, isLocked: false, - fullScreen: { - status: false, - oldState: { - nd : 0, - mb : 0 - } - } + fullScreen: false, + widthOfNoteDetail: 0, + widthOfMainBody: 0 } this.dispatchTimer = null @@ -201,31 +197,27 @@ class MarkdownNoteDetail extends React.Component { } handleFullScreenButton (e) { - - this.state.fullScreen.status = !this.state.fullScreen.status - const noteDetail = document.querySelector(".NoteDetail") - const mainBody = document.querySelector(".Main__body___browser-main-") - const sliderRight = document.querySelector(".Main__slider-right___browser-main-") - const slider = document.querySelector(".Main__slider___browser-main-") - - if(this.state.fullScreen.status) { - - this.state.fullScreen.oldState.nd = noteDetail.style.left - this.state.fullScreen.oldState.mb = mainBody.style.left - noteDetail.style.left = "0px" - mainBody.style.left = "0px" + const currentScreenState = !Object.assign({}, this.state).fullScreen + this.setState({ fullScreen: currentScreenState }) + + const noteDetail = document.querySelector('.NoteDetail') + const mainBody = document.querySelector('#main-body') + const sliderRight = document.querySelector('#slider-right') + const sliderLeft = document.querySelector('#slider-left') + + if (currentScreenState) { + this.state.widthOfNoteDetail = noteDetail.style.left + this.state.widthOfMainBody = mainBody.style.left + noteDetail.style.left = '0px' + mainBody.style.left = '0px' sliderRight.style.display = 'none' - slider.style.display = 'none' - - }else { - - noteDetail.style.left = this.state.fullScreen.oldState.nd - mainBody.style.left = this.state.fullScreen.oldState.mb + sliderLeft.style.display = 'none' + } else { + noteDetail.style.left = this.state.widthOfNoteDetail + mainBody.style.left = this.state.widthOfMainBody sliderRight.style.display = 'block' - slider.style.display = 'block' - + sliderLeft.style.display = 'block' } - } handleLockButtonMouseDown (e) { diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 5f95bad9c..3971ba70b 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -48,13 +48,9 @@ class SnippetNoteDetail extends React.Component { }, props.note, { snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet)) }), - fullScreen: { - status: false, - oldState: { - nd : 0, - mb : 0 - } - } + fullScreen: false, + widthOfNoteDetail: 0, + widthOfMainBody: 0 } } @@ -196,31 +192,27 @@ class SnippetNoteDetail extends React.Component { } handleFullScreenButton (e) { - - this.state.fullScreen.status = !this.state.fullScreen.status - const noteDetail = document.querySelector(".NoteDetail") - const mainBody = document.querySelector(".Main__body___browser-main-") - const sliderRight = document.querySelector(".Main__slider-right___browser-main-") - const slider = document.querySelector(".Main__slider___browser-main-") - - if(this.state.fullScreen.status) { - - this.state.fullScreen.oldState.nd = noteDetail.style.left - this.state.fullScreen.oldState.mb = mainBody.style.left - noteDetail.style.left = "0px" - mainBody.style.left = "0px" + const currentScreenState = !Object.assign({}, this.state).fullScreen + this.setState({ fullScreen: currentScreenState }) + + const noteDetail = document.querySelector('.NoteDetail') + const mainBody = document.querySelector('#main-body') + const sliderRight = document.querySelector('#slider-right') + const sliderLeft = document.querySelector('#slider-left') + + if (currentScreenState) { + this.state.widthOfNoteDetail = noteDetail.style.left + this.state.widthOfMainBody = mainBody.style.left + noteDetail.style.left = '0px' + mainBody.style.left = '0px' sliderRight.style.display = 'none' - slider.style.display = 'none' - - }else { - - noteDetail.style.left = this.state.fullScreen.oldState.nd - mainBody.style.left = this.state.fullScreen.oldState.mb + sliderLeft.style.display = 'none' + } else { + noteDetail.style.left = this.state.widthOfNoteDetail + mainBody.style.left = this.state.widthOfMainBody sliderRight.style.display = 'block' - slider.style.display = 'block' - + sliderLeft.style.display = 'block' } - } handleTabPlusButtonClick (e) { diff --git a/browser/main/Main.js b/browser/main/Main.js index d2d1508d8..8201edd35 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -165,6 +165,7 @@ class Main extends React.Component { /> {!config.isSideNavFolded &&
this.handleLeftSlideMouseDown(e)} draggable='false' @@ -173,6 +174,7 @@ class Main extends React.Component {
}
@@ -195,6 +197,7 @@ class Main extends React.Component { ])} />
this.handleRightSlideMouseDown(e)} draggable='false' From 023364338d0daa00f02504e022057059546845af Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Sun, 28 May 2017 02:08:11 -0500 Subject: [PATCH 03/13] fixed the state change and cleaned up code for eslint --- browser/main/Detail/MarkdownNoteDetail.js | 42 +++++++++++----------- browser/main/Detail/SnippetNoteDetail.js | 43 +++++++++++------------ 2 files changed, 40 insertions(+), 45 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 4eeb0d3d6..6139e2b81 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -197,27 +197,25 @@ class MarkdownNoteDetail extends React.Component { } handleFullScreenButton (e) { - const currentScreenState = !Object.assign({}, this.state).fullScreen - this.setState({ fullScreen: currentScreenState }) - - const noteDetail = document.querySelector('.NoteDetail') - const mainBody = document.querySelector('#main-body') - const sliderRight = document.querySelector('#slider-right') - const sliderLeft = document.querySelector('#slider-left') - - if (currentScreenState) { - this.state.widthOfNoteDetail = noteDetail.style.left - this.state.widthOfMainBody = mainBody.style.left - noteDetail.style.left = '0px' - mainBody.style.left = '0px' - sliderRight.style.display = 'none' - sliderLeft.style.display = 'none' - } else { - noteDetail.style.left = this.state.widthOfNoteDetail - mainBody.style.left = this.state.widthOfMainBody - sliderRight.style.display = 'block' - sliderLeft.style.display = 'block' - } + this.setState({ fullScreen: !this.state.fullScreen }, () => { + const noteDetail = document.querySelector('.NoteDetail') + const mainBody = document.querySelector('#main-body') + const sliderRight = document.querySelector('#slider-right') + const sliderLeft = document.querySelector('#slider-left') + if (this.state.fullScreen) { + this.state.widthOfNoteDetail = noteDetail.style.left + this.state.widthOfMainBody = mainBody.style.left + noteDetail.style.left = '0px' + mainBody.style.left = '0px' + sliderRight.style.display = 'none' + sliderLeft.style.display = 'none' + } else { + noteDetail.style.left = this.state.widthOfNoteDetail + mainBody.style.left = this.state.widthOfMainBody + sliderRight.style.display = 'block' + sliderLeft.style.display = 'block' + } + }) } handleLockButtonMouseDown (e) { @@ -314,7 +312,7 @@ class MarkdownNoteDetail extends React.Component {
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 3971ba70b..d7adb5efd 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -51,7 +51,6 @@ class SnippetNoteDetail extends React.Component { fullScreen: false, widthOfNoteDetail: 0, widthOfMainBody: 0 - } } @@ -192,27 +191,25 @@ class SnippetNoteDetail extends React.Component { } handleFullScreenButton (e) { - const currentScreenState = !Object.assign({}, this.state).fullScreen - this.setState({ fullScreen: currentScreenState }) - - const noteDetail = document.querySelector('.NoteDetail') - const mainBody = document.querySelector('#main-body') - const sliderRight = document.querySelector('#slider-right') - const sliderLeft = document.querySelector('#slider-left') - - if (currentScreenState) { - this.state.widthOfNoteDetail = noteDetail.style.left - this.state.widthOfMainBody = mainBody.style.left - noteDetail.style.left = '0px' - mainBody.style.left = '0px' - sliderRight.style.display = 'none' - sliderLeft.style.display = 'none' - } else { - noteDetail.style.left = this.state.widthOfNoteDetail - mainBody.style.left = this.state.widthOfMainBody - sliderRight.style.display = 'block' - sliderLeft.style.display = 'block' - } + this.setState({ fullScreen: !this.state.fullScreen }, () => { + const noteDetail = document.querySelector('.NoteDetail') + const mainBody = document.querySelector('#main-body') + const sliderRight = document.querySelector('#slider-right') + const sliderLeft = document.querySelector('#slider-left') + if (this.state.fullScreen) { + this.state.widthOfNoteDetail = noteDetail.style.left + this.state.widthOfMainBody = mainBody.style.left + noteDetail.style.left = '0px' + mainBody.style.left = '0px' + sliderRight.style.display = 'none' + sliderLeft.style.display = 'none' + } else { + noteDetail.style.left = this.state.widthOfNoteDetail + mainBody.style.left = this.state.widthOfMainBody + sliderRight.style.display = 'block' + sliderLeft.style.display = 'block' + } + }) } handleTabPlusButtonClick (e) { @@ -555,7 +552,7 @@ class SnippetNoteDetail extends React.Component { From a1f4e32173196f3336697b643fbe107821ba511b Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Mon, 29 May 2017 00:30:41 -0500 Subject: [PATCH 04/13] reworking architecture of code --- browser/main/Detail/MarkdownNoteDetail.js | 25 ++-------------------- browser/main/Detail/SnippetNoteDetail.js | 25 ++-------------------- browser/main/Main.js | 26 ++++++++++++++++++++++- 3 files changed, 29 insertions(+), 47 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 6139e2b81..4fa1f5976 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -29,10 +29,7 @@ class MarkdownNoteDetail extends React.Component { content: '' }, props.note), isLockButtonShown: false, - isLocked: false, - fullScreen: false, - widthOfNoteDetail: 0, - widthOfMainBody: 0 + isLocked: false } this.dispatchTimer = null @@ -197,25 +194,7 @@ class MarkdownNoteDetail extends React.Component { } handleFullScreenButton (e) { - this.setState({ fullScreen: !this.state.fullScreen }, () => { - const noteDetail = document.querySelector('.NoteDetail') - const mainBody = document.querySelector('#main-body') - const sliderRight = document.querySelector('#slider-right') - const sliderLeft = document.querySelector('#slider-left') - if (this.state.fullScreen) { - this.state.widthOfNoteDetail = noteDetail.style.left - this.state.widthOfMainBody = mainBody.style.left - noteDetail.style.left = '0px' - mainBody.style.left = '0px' - sliderRight.style.display = 'none' - sliderLeft.style.display = 'none' - } else { - noteDetail.style.left = this.state.widthOfNoteDetail - mainBody.style.left = this.state.widthOfMainBody - sliderRight.style.display = 'block' - sliderLeft.style.display = 'block' - } - }) + ee.emit('editor:fullscreen') } handleLockButtonMouseDown (e) { diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index d7adb5efd..8cb54f9ae 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -47,10 +47,7 @@ class SnippetNoteDetail extends React.Component { description: '' }, props.note, { snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet)) - }), - fullScreen: false, - widthOfNoteDetail: 0, - widthOfMainBody: 0 + }) } } @@ -191,25 +188,7 @@ class SnippetNoteDetail extends React.Component { } handleFullScreenButton (e) { - this.setState({ fullScreen: !this.state.fullScreen }, () => { - const noteDetail = document.querySelector('.NoteDetail') - const mainBody = document.querySelector('#main-body') - const sliderRight = document.querySelector('#slider-right') - const sliderLeft = document.querySelector('#slider-left') - if (this.state.fullScreen) { - this.state.widthOfNoteDetail = noteDetail.style.left - this.state.widthOfMainBody = mainBody.style.left - noteDetail.style.left = '0px' - mainBody.style.left = '0px' - sliderRight.style.display = 'none' - sliderLeft.style.display = 'none' - } else { - noteDetail.style.left = this.state.widthOfNoteDetail - mainBody.style.left = this.state.widthOfMainBody - sliderRight.style.display = 'block' - sliderLeft.style.display = 'block' - } - }) + ee.emit('editor:fullscreen') } handleTabPlusButtonClick (e) { diff --git a/browser/main/Main.js b/browser/main/Main.js index 8201edd35..d07267987 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -12,6 +12,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager' import modal from 'browser/main/lib/modal' import InitModal from 'browser/main/modals/InitModal' import mixpanel from 'browser/main/lib/mixpanel' +import eventEmitter from 'browser/main/lib/eventEmitter' function focused () { mixpanel.track('MAIN_FOCUSED') @@ -27,8 +28,11 @@ class Main extends React.Component { isRightSliderFocused: false, listWidth: config.listWidth, navWidth: config.navWidth, - isLeftSliderFocused: false + isLeftSliderFocused: false, + fullScreen: false, } + + this.fullScreenEditorCode = () => this.handleFullScreenButton() } getChildContext () { @@ -63,11 +67,13 @@ class Main extends React.Component { } }) + eventEmitter.on('editor:fullscreen', this.fullScreenEditorCode) window.addEventListener('focus', focused) } componentWillUnmount () { window.removeEventListener('focus', focused) + eventEmitter.off('editor:fullscreen', this.fullScreenEditorCode) } handleLeftSlideMouseDown (e) { @@ -144,6 +150,24 @@ class Main extends React.Component { } } + handleFullScreenButton (e) { + this.setState({ fullScreen: !this.state.fullScreen }, () => { + const noteDetail = document.querySelector('.NoteDetail') + const mainBody = document.querySelector('#main-body') + const sliderRight = document.querySelector('#slider-right') + const sliderLeft = document.querySelector('#slider-left') + if (this.state.fullScreen) { + noteDetail.style.left = '0px' + mainBody.style.left = '0px' + sliderRight.style.display = 'none' + sliderLeft.style.display = 'none' + } else { + sliderRight.style.display = 'block' + sliderLeft.style.display = 'block' + } + }) + } + render () { let { config } = this.props From 780712b772f14da13ed231e5e4b680b7875693ef Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Mon, 29 May 2017 00:30:57 -0500 Subject: [PATCH 05/13] forgot this in last commit --- browser/main/Main.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/browser/main/Main.js b/browser/main/Main.js index d07267987..fd2d6df6c 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -30,6 +30,8 @@ class Main extends React.Component { navWidth: config.navWidth, isLeftSliderFocused: false, fullScreen: false, + noteDetailWidth: 0, + mainBodyWidth: 0 } this.fullScreenEditorCode = () => this.handleFullScreenButton() @@ -157,11 +159,15 @@ class Main extends React.Component { const sliderRight = document.querySelector('#slider-right') const sliderLeft = document.querySelector('#slider-left') if (this.state.fullScreen) { + this.state.noteDetailWidth = noteDetail.style.left + this.state.mainBodyWidth = mainBody.style.left noteDetail.style.left = '0px' mainBody.style.left = '0px' sliderRight.style.display = 'none' sliderLeft.style.display = 'none' } else { + noteDetail.style.left = this.state.noteDetailWidth + mainBody.style.left = this.state.mainBodyWidth sliderRight.style.display = 'block' sliderLeft.style.display = 'block' } From 90c0aab332e4b5e4fb5974c7877207c40202dc5f Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Fri, 2 Jun 2017 23:19:44 -0500 Subject: [PATCH 06/13] cleaning up code and fixing slider bug on fullscreen mode --- browser/main/Main.js | 35 ++++++++++++++++++----------------- browser/main/Main.styl | 2 ++ 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/browser/main/Main.js b/browser/main/Main.js index fd2d6df6c..1b15d3df0 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -34,7 +34,7 @@ class Main extends React.Component { mainBodyWidth: 0 } - this.fullScreenEditorCode = () => this.handleFullScreenButton() + this.toggleFullScreen = () => this.handleFullScreenButton() } getChildContext () { @@ -69,13 +69,13 @@ class Main extends React.Component { } }) - eventEmitter.on('editor:fullscreen', this.fullScreenEditorCode) + eventEmitter.on('editor:fullscreen', this.toggleFullScreen) window.addEventListener('focus', focused) } componentWillUnmount () { window.removeEventListener('focus', focused) - eventEmitter.off('editor:fullscreen', this.fullScreenEditorCode) + eventEmitter.off('editor:fullscreen', this.toggleFullScreen) } handleLeftSlideMouseDown (e) { @@ -156,24 +156,27 @@ class Main extends React.Component { this.setState({ fullScreen: !this.state.fullScreen }, () => { const noteDetail = document.querySelector('.NoteDetail') const mainBody = document.querySelector('#main-body') - const sliderRight = document.querySelector('#slider-right') - const sliderLeft = document.querySelector('#slider-left') + if (this.state.fullScreen) { - this.state.noteDetailWidth = noteDetail.style.left - this.state.mainBodyWidth = mainBody.style.left - noteDetail.style.left = '0px' - mainBody.style.left = '0px' - sliderRight.style.display = 'none' - sliderLeft.style.display = 'none' + this.hideLeftLists(noteDetail, mainBody) } else { - noteDetail.style.left = this.state.noteDetailWidth - mainBody.style.left = this.state.mainBodyWidth - sliderRight.style.display = 'block' - sliderLeft.style.display = 'block' + this.showLeftLists(noteDetail, mainBody) } }) } + hideLeftLists(noteDetail, mainBody) { + this.state.noteDetailWidth = noteDetail.style.left + this.state.mainBodyWidth = mainBody.style.left + noteDetail.style.left = '0px' + mainBody.style.left = '0px' + } + + showLeftLists(noteDetail, mainBody) { + noteDetail.style.left = this.state.noteDetailWidth + mainBody.style.left = this.state.mainBodyWidth + } + render () { let { config } = this.props @@ -195,7 +198,6 @@ class Main extends React.Component { /> {!config.isSideNavFolded &&
this.handleLeftSlideMouseDown(e)} draggable='false' @@ -227,7 +229,6 @@ class Main extends React.Component { ])} />
this.handleRightSlideMouseDown(e)} draggable='false' diff --git a/browser/main/Main.styl b/browser/main/Main.styl index 29f21f04b..565059501 100644 --- a/browser/main/Main.styl +++ b/browser/main/Main.styl @@ -13,10 +13,12 @@ absolute top bottom top -2px width 0 + z-index 0 .slider-right @extend .slider width 1px + z-index 0 .slider--active @extend .slider From 90bff90b6a5a19f37f9f791ffb93d8c4ef2b0042 Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Fri, 2 Jun 2017 23:21:13 -0500 Subject: [PATCH 07/13] for got run eslint --- browser/main/Main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/browser/main/Main.js b/browser/main/Main.js index 1b15d3df0..914af7b1c 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -165,14 +165,14 @@ class Main extends React.Component { }) } - hideLeftLists(noteDetail, mainBody) { + hideLeftLists (noteDetail, mainBody) { this.state.noteDetailWidth = noteDetail.style.left this.state.mainBodyWidth = mainBody.style.left noteDetail.style.left = '0px' mainBody.style.left = '0px' } - showLeftLists(noteDetail, mainBody) { + showLeftLists (noteDetail, mainBody) { noteDetail.style.left = this.state.noteDetailWidth mainBody.style.left = this.state.mainBodyWidth } From d1e22e736c16e2bf5f6fed3472004e2f1bebf263 Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Sat, 27 May 2017 20:22:51 -0500 Subject: [PATCH 08/13] added fullscreen button for notes and snippets allows user to hide the sidebars for fullscreen editing --- browser/main/Detail/MarkdownNoteDetail.js | 9 ++++++++- browser/main/Detail/SnippetNoteDetail.js | 10 +++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 4fa1f5976..2a2f4fa13 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -29,7 +29,14 @@ class MarkdownNoteDetail extends React.Component { content: '' }, props.note), isLockButtonShown: false, - isLocked: false + isLocked: false, + fullScreen: { + status: false, + oldState: { + nd : 0, + mb : 0 + } + } } this.dispatchTimer = null diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 8cb54f9ae..6e72d2cc3 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -47,7 +47,15 @@ class SnippetNoteDetail extends React.Component { description: '' }, props.note, { snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet)) - }) + }), + fullScreen: { + status: false, + oldState: { + nd : 0, + mb : 0 + } + } + } } From 5325914fe4cd01f0438c85a33b349a6b5caa69ab Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Sun, 28 May 2017 01:10:32 -0500 Subject: [PATCH 09/13] fixing some code from the comments --- browser/main/Detail/MarkdownNoteDetail.js | 10 +++------- browser/main/Detail/SnippetNoteDetail.js | 10 +++------- browser/main/Main.js | 2 ++ 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 2a2f4fa13..289a09401 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -30,13 +30,9 @@ class MarkdownNoteDetail extends React.Component { }, props.note), isLockButtonShown: false, isLocked: false, - fullScreen: { - status: false, - oldState: { - nd : 0, - mb : 0 - } - } + fullScreen: false, + widthOfNoteDetail: 0, + widthOfMainBody: 0 } this.dispatchTimer = null diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 6e72d2cc3..f2e0d82a8 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -48,13 +48,9 @@ class SnippetNoteDetail extends React.Component { }, props.note, { snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet)) }), - fullScreen: { - status: false, - oldState: { - nd : 0, - mb : 0 - } - } + fullScreen: false, + widthOfNoteDetail: 0, + widthOfMainBody: 0 } } diff --git a/browser/main/Main.js b/browser/main/Main.js index 914af7b1c..042b773c9 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -198,6 +198,7 @@ class Main extends React.Component { /> {!config.isSideNavFolded &&
this.handleLeftSlideMouseDown(e)} draggable='false' @@ -229,6 +230,7 @@ class Main extends React.Component { ])} />
this.handleRightSlideMouseDown(e)} draggable='false' From 9816393b55df699cda0bf256ce71d761b9677e41 Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Sun, 28 May 2017 02:08:11 -0500 Subject: [PATCH 10/13] fixed the state change and cleaned up code for eslint --- browser/main/Detail/SnippetNoteDetail.js | 1 - 1 file changed, 1 deletion(-) diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index f2e0d82a8..e72a6d7c8 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -51,7 +51,6 @@ class SnippetNoteDetail extends React.Component { fullScreen: false, widthOfNoteDetail: 0, widthOfMainBody: 0 - } } From e2a717222e2efa3ec1b6e4a33004749058313c57 Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Mon, 29 May 2017 00:30:41 -0500 Subject: [PATCH 11/13] reworking architecture of code --- browser/main/Detail/MarkdownNoteDetail.js | 5 +---- browser/main/Detail/SnippetNoteDetail.js | 5 +---- browser/main/Main.js | 1 + 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 289a09401..4fa1f5976 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -29,10 +29,7 @@ class MarkdownNoteDetail extends React.Component { content: '' }, props.note), isLockButtonShown: false, - isLocked: false, - fullScreen: false, - widthOfNoteDetail: 0, - widthOfMainBody: 0 + isLocked: false } this.dispatchTimer = null diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index e72a6d7c8..8cb54f9ae 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -47,10 +47,7 @@ class SnippetNoteDetail extends React.Component { description: '' }, props.note, { snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet)) - }), - fullScreen: false, - widthOfNoteDetail: 0, - widthOfMainBody: 0 + }) } } diff --git a/browser/main/Main.js b/browser/main/Main.js index 042b773c9..ed9bef66c 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -35,6 +35,7 @@ class Main extends React.Component { } this.toggleFullScreen = () => this.handleFullScreenButton() + } getChildContext () { From 3dbbdc6d30cdbcbebcdaa24630e670d68f6d14e5 Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Fri, 2 Jun 2017 23:19:44 -0500 Subject: [PATCH 12/13] cleaning up code and fixing slider bug on fullscreen mode --- browser/main/Main.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/browser/main/Main.js b/browser/main/Main.js index ed9bef66c..7d606f12f 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -35,7 +35,6 @@ class Main extends React.Component { } this.toggleFullScreen = () => this.handleFullScreenButton() - } getChildContext () { @@ -166,7 +165,7 @@ class Main extends React.Component { }) } - hideLeftLists (noteDetail, mainBody) { + hideLeftLists(noteDetail, mainBody) { this.state.noteDetailWidth = noteDetail.style.left this.state.mainBodyWidth = mainBody.style.left noteDetail.style.left = '0px' @@ -199,7 +198,6 @@ class Main extends React.Component { /> {!config.isSideNavFolded &&
this.handleLeftSlideMouseDown(e)} draggable='false' @@ -231,7 +229,6 @@ class Main extends React.Component { ])} />
this.handleRightSlideMouseDown(e)} draggable='false' From 27c1d657fac1a6f57468e2baf9c85381dd0e8d6b Mon Sep 17 00:00:00 2001 From: Kevin Nadro Date: Fri, 2 Jun 2017 23:21:13 -0500 Subject: [PATCH 13/13] for got run eslint --- browser/main/Main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/main/Main.js b/browser/main/Main.js index 7d606f12f..914af7b1c 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -165,7 +165,7 @@ class Main extends React.Component { }) } - hideLeftLists(noteDetail, mainBody) { + hideLeftLists (noteDetail, mainBody) { this.state.noteDetailWidth = noteDetail.style.left this.state.mainBodyWidth = mainBody.style.left noteDetail.style.left = '0px'