From 5d0cb0302e918e5cbce0b2441f3eb57adf521ec8 Mon Sep 17 00:00:00 2001
From: Kevin Nadro <khomer8@yahoo.com>
Date: Sat, 27 May 2017 20:22:51 -0500
Subject: [PATCH] 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 {
                 </g>
               </svg>
             </button>
+            <button styleName='control-fullScreenButton'
+              onMouseDown={(e) => this.handleFullScreenButton(e)}
+            >
+              <i className={'fa fa-arrows-alt'} styleName='fullScreen-button' />
+            </button>
           </div>
         </div>
 
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 {
                 </g>
               </svg>
             </button>
+            <button styleName='control-fullScreenButton'
+              onMouseDown={(e) => this.handleFullScreenButton(e)}
+            >
+              <i className={'fa fa-arrows-alt'} styleName='fullScreen-button' />
+            </button>
           </div>
         </div>
 
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()