From 5d0cb0302e918e5cbce0b2441f3eb57adf521ec8 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 8ea88b40..9eac8d1f 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -30,7 +30,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 @@ -196,6 +203,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') @@ -287,6 +322,11 @@ class MarkdownNoteDetail extends React.Component { + diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index 53a6a4e9..17aedc35 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 706cc299..0d836c1a 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -48,7 +48,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 + } + } + } } @@ -190,6 +198,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() } @@ -527,6 +563,11 @@ class SnippetNoteDetail extends React.Component { + diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 2edf8479..eea20d90 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 afc729b1c3b0cc0c69fdb9c03f2229b7c6b3821f 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 | 46 ++++++++++------------- browser/main/Detail/SnippetNoteDetail.js | 46 ++++++++++------------- browser/main/Main.js | 3 ++ 3 files changed, 41 insertions(+), 54 deletions(-) diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js index 9eac8d1f..6f16e9d0 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -31,13 +31,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 @@ -204,31 +200,27 @@ class MarkdownNoteDetail extends React.Component { } handleFullScreenButton (e) { + const currentScreenState = !Object.assign({}, this.state).fullScreen + this.setState({ fullScreen: currentScreenState }) - 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-") + 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.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" + 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 0d836c1a..4c288b17 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -49,13 +49,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 } } @@ -199,31 +195,27 @@ class SnippetNoteDetail extends React.Component { } handleFullScreenButton (e) { + const currentScreenState = !Object.assign({}, this.state).fullScreen + this.setState({ fullScreen: currentScreenState }) - 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-") + 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.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" + 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 abada90d..9de6b8c0 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -168,6 +168,7 @@ class Main extends React.Component { /> {!config.isSideNavFolded &&
this.handleLeftSlideMouseDown(e)} draggable='false' @@ -176,6 +177,7 @@ class Main extends React.Component {
}
@@ -198,6 +200,7 @@ class Main extends React.Component { ])} />
this.handleRightSlideMouseDown(e)} draggable='false' From cbe58b9437a591d17300c5a829f192cb8b6de2de 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 6f16e9d0..cc2a375e 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -200,27 +200,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) { @@ -317,7 +315,7 @@ class MarkdownNoteDetail extends React.Component {
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js index 4c288b17..2c3d57d7 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -52,7 +52,6 @@ class SnippetNoteDetail extends React.Component { fullScreen: false, widthOfNoteDetail: 0, widthOfMainBody: 0 - } } @@ -195,27 +194,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) { @@ -558,7 +555,7 @@ class SnippetNoteDetail extends React.Component { From 79ed55a76f14a75b1f04833fd9ca81d6d67e3ac1 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 cc2a375e..b9619c31 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -30,10 +30,7 @@ class MarkdownNoteDetail extends React.Component { content: '' }, props.note), isLockButtonShown: false, - isLocked: false, - fullScreen: false, - widthOfNoteDetail: 0, - widthOfMainBody: 0 + isLocked: false } this.dispatchTimer = null @@ -200,25 +197,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 2c3d57d7..bb2f7158 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -48,10 +48,7 @@ class SnippetNoteDetail extends React.Component { description: '' }, props.note, { snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet)) - }), - fullScreen: false, - widthOfNoteDetail: 0, - widthOfMainBody: 0 + }) } } @@ -194,25 +191,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 9de6b8c0..9647e1ef 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -13,6 +13,7 @@ import modal from 'browser/main/lib/modal' import InitModal from 'browser/main/modals/InitModal' import mixpanel from 'browser/main/lib/mixpanel' import mobileAnalytics from 'browser/main/lib/awsMobileAnalyticsConfig' +import eventEmitter from 'browser/main/lib/eventEmitter' function focused () { mixpanel.track('MAIN_FOCUSED') @@ -30,8 +31,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 () { @@ -66,11 +70,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) { @@ -147,6 +153,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 0d2e6a6a121545e7189e6f498581ec91770045d9 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 9647e1ef..52928598 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -33,6 +33,8 @@ class Main extends React.Component { navWidth: config.navWidth, isLeftSliderFocused: false, fullScreen: false, + noteDetailWidth: 0, + mainBodyWidth: 0 } this.fullScreenEditorCode = () => this.handleFullScreenButton() @@ -160,11 +162,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 df6ff1fffe36e624fe312366b9adc42cc6bdbc58 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 52928598..2ebb06b7 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -37,7 +37,7 @@ class Main extends React.Component { mainBodyWidth: 0 } - this.fullScreenEditorCode = () => this.handleFullScreenButton() + this.toggleFullScreen = () => this.handleFullScreenButton() } getChildContext () { @@ -72,13 +72,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) { @@ -159,24 +159,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 @@ -198,7 +201,6 @@ class Main extends React.Component { /> {!config.isSideNavFolded &&
this.handleLeftSlideMouseDown(e)} draggable='false' @@ -230,7 +232,6 @@ class Main extends React.Component { ])} />
this.handleRightSlideMouseDown(e)} draggable='false' diff --git a/browser/main/Main.styl b/browser/main/Main.styl index 29f21f04..56505950 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 2ee2494dc4789856db9e5104e8aa0d372941ddef 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 2ebb06b7..8075995c 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -168,14 +168,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 0c3019b52ed7501e27881534de39a1ec20e57cdf 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 b9619c31..6053c39d 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -30,7 +30,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 bb2f7158..4732e1f6 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -48,7 +48,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 063e2e02bdf05d12224d695c5b550d25e75d0ef6 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 6053c39d..3f0217af 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -31,13 +31,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 4732e1f6..7f98929c 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -49,13 +49,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 8075995c..c4773405 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -201,6 +201,7 @@ class Main extends React.Component { /> {!config.isSideNavFolded &&
this.handleLeftSlideMouseDown(e)} draggable='false' @@ -232,6 +233,7 @@ class Main extends React.Component { ])} />
this.handleRightSlideMouseDown(e)} draggable='false' From cd421c4662592c0d0fd521bd441b8bcfc2cb709c 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 7f98929c..e3f597da 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -52,7 +52,6 @@ class SnippetNoteDetail extends React.Component { fullScreen: false, widthOfNoteDetail: 0, widthOfMainBody: 0 - } } From 41a04aa3f14ef5cf641703fba0da88c44c19a75f 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 3f0217af..b9619c31 100644 --- a/browser/main/Detail/MarkdownNoteDetail.js +++ b/browser/main/Detail/MarkdownNoteDetail.js @@ -30,10 +30,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 e3f597da..bb2f7158 100644 --- a/browser/main/Detail/SnippetNoteDetail.js +++ b/browser/main/Detail/SnippetNoteDetail.js @@ -48,10 +48,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 c4773405..c0c36ff0 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -38,6 +38,7 @@ class Main extends React.Component { } this.toggleFullScreen = () => this.handleFullScreenButton() + } getChildContext () { From c9bbc61c95cc8675ef7d77f75250fea1f70be197 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 c0c36ff0..5174df96 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -38,7 +38,6 @@ class Main extends React.Component { } this.toggleFullScreen = () => this.handleFullScreenButton() - } getChildContext () { @@ -169,7 +168,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' @@ -202,7 +201,6 @@ class Main extends React.Component { /> {!config.isSideNavFolded &&
this.handleLeftSlideMouseDown(e)} draggable='false' @@ -234,7 +232,6 @@ class Main extends React.Component { ])} />
this.handleRightSlideMouseDown(e)} draggable='false' From 552653c0ed646f2719ed5096290ff8198bacb96b 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 5174df96..8075995c 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -168,7 +168,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'