added fullscreen button for notes and snippets

allows user to hide the sidebars for fullscreen editing

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>
 

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()

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>
 

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()