renew SideNav

browser/main/HomePage/SideNav/RepositorySection.js

@@ -3,8 +3,13 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './RepositorySection.styl'
 import Repository from 'browser/lib/Repository'
 
+const electron = require('electron')
+const { remote } = electron
+const Menu = remote.Menu
+const MenuItem = remote.MenuItem
+
 class RepositorySection extends React.Component {
-  handleUnlinkButtonClick (e) {
+  handleUnlinkButtonClick () {
     let { dispatch, repository } = this.props
 
     Repository.find(repository.key)
@@ -19,6 +24,27 @@ class RepositorySection extends React.Component {
       })
   }
 
+  handleToggleButtonClick (e) {
+
+  }
+
+  handleContextButtonClick (e) {
+    var menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'New Note'
+    }))
+    menu.append(new MenuItem({
+      label: 'New Folder'
+    }))
+    menu.append(new MenuItem({ type: 'separator' }))
+    menu.append(new MenuItem({
+      label: 'Unmount',
+      click: () => this.handleUnlinkButtonClick()
+    }))
+
+    menu.popup(remote.getCurrentWindow())
+  }
+
   render () {
     let { repository } = this.props
 
@@ -33,10 +59,7 @@ class RepositorySection extends React.Component {
           </div>
           <div styleName='folder-control'>
             <button styleName='folder-control-button'>
-              <i className='fa fa-pencil'/>
+              <i className='fa fa-ellipsis-v'/>
-            </button>
-            <button styleName='folder-control-button'>
-              <i className='fa fa-trash'/>
             </button>
           </div>
         </div>
@@ -55,15 +78,12 @@ class RepositorySection extends React.Component {
 
           <div styleName='header-control'>
             <button styleName='header-control-button'
-              onClick={(e) => this.handleUnlinkButtonClick(e)}
+              onClick={(e) => this.handleContextButtonClick(e)}
             >
-              <i className='fa fa-unlink'/>
+              <i className='fa fa-ellipsis-v'/>
-            </button>
-            <button styleName='header-control-button'
-            >
-              <i className='fa fa-pencil'/>
             </button>
             <button styleName='header-control-button'
+              onClick={(e) => this.handleToggleButtonClick(e)}
             >
               <i className='fa fa-angle-down'/>
             </button>

browser/main/HomePage/SideNav/RepositorySection.styl

@@ -1,10 +1,12 @@
 .root
   margin-top 15px
   margin-bottom 15px
+  user-select none
 
 .header
   position relative
   height 33px
+  cursor pointer
   &:hover
     background-color alpha(white, 0.1)
 
@@ -23,7 +25,7 @@
   top 0
   bottom 0
   right 5px
-  width 72px
+  width 48px
 
 .header-control-button
   width 24px
@@ -33,16 +35,19 @@
   border none
   border-radius 5px
   background-color transparent
-  color white
+  color $nav-inactive-color
   &:hover
+    color white
     background-color alpha(white, 0.1)
   &:active
+    color white
     background-color $brand-color
 
 .folder
   height 33px
   width 100%
   position relative
+  cursor pointer
   &:hover
     background-color alpha(white 0.1)
 
@@ -60,8 +65,8 @@
   position absolute
   top 0
   bottom 0
-  right 0
+  right 5px
-  width 48px
+  width 24px
 
 .folder-control-button
   width 24px
@@ -70,10 +75,12 @@
   border none
   border-radius 5px
   background-color transparent
-  color white
+  color $nav-inactive-color
   &:hover
+    color white
     background-color alpha(white, 0.1)
   &:active
+    color white
     background-color $brand-color
 
 .newFolderButton
@@ -83,8 +90,10 @@
   padding-left 20px
   text-align left
   background-color transparent
-  color white
+  color $nav-inactive-color
   &:hover
     background-color alpha(white, 0.1)
+    color white
   &:active
     background-color $brand-color
+    color white

browser/main/HomePage/SideNav/SideNav.styl

@@ -1,18 +1,16 @@
-$nav-border-color = #838383
-$nav-background-color = #353535
-
 .root
   absolute top bottom left
   width 200px
   border-right solid 1px $nav-border-color
   background-color $nav-background-color
+  user-select none
 
-.menu
+.top
-  margin-top 30px
+  height 60px
-  margin-bottom 15px
+  border-bottom solid 1px $nav-border-color
 
-.menu-button
+.top-menu
-  height 33px
+  height 60px
   padding 0 10px
   font-size 14px
   width 100%
@@ -21,39 +19,60 @@ $nav-background-color = #353535
   color white
   background-color transparent
   &:hover
-    background-color alph(white, 0.1)
+    background-color alpha(white, 0.1)
+  &:active
+    background-color $brand-color
+
+.menu
+  margin-top 15px
+
+.menu-button
+  height 44px
+  padding 0 10px
+  font-size 14px
+  width 100%
+  text-align left
+  border none
+  color white
+  background-color transparent
+  &:hover
+    background-color alpha(white, 0.1)
   &:active
     background-color $brand-color
 
 .repositoryList
   absolute left right
-  top 145px
+  top 167px
-  border-top solid 1px $nav-border-color
+  bottom 33px
+  overflow-y auto
+
+.repositoryList-empty
+  padding 0 10px
+  height 44px
+  line-height 44px
+  color $nav-inactive-color
+
+.navToggle
+  display block
+  position absolute
+  right 5px
+  bottom 5px
+  border-radius 16.5px
+  height 33px
+  width 33px
+  color $nav-inactive-color
+  border none
+  background-color transparent
+  &:hover
+    background-color alpha(white, 0.1)
+    color white
+  &:active
+    background-color $brand-color
+    color white
 
 .control
   absolute bottom left right
   height 33px
-  border-top solid 1px $nav-border-color
-
-.control-newRepositoryButton
-  absolute top bottom left
-  width 167px
-  padding 0 10px
-  text-align left
-  border-width 0 1px 0 0
-  border-color $nav-border-color
-  border-style solid
-  color white
-  background-color transparent
-  &:hover
-    background-color alph(white, 0.1)
-  &:active
-    background-color $brand-color
-
-.control-toggleButton
-  absolute top bottom right
-  width 33px
-  color white
   background-color transparent
   border none
   &:hover
@@ -61,3 +80,10 @@ $nav-background-color = #353535
   &:active
     background-color $brand-color
 
+.control-newRepositoryButton
+  absolute top bottom left
+  width 167px
+  padding 0 10px
+  text-align left
+  border none
+  color white

browser/main/HomePage/SideNav/index.js

@@ -7,48 +7,35 @@ import CreateNewFolder from '../../modal/CreateNewFolder'
 import RepositorySection from './RepositorySection'
 import NewRepositoryModal from '../../modal/NewRepositoryModal'
 
-const ipc = require('electron').ipcRenderer
+const electron = require('electron')
+const { remote } = electron
+const Menu = remote.Menu
+const MenuItem = remote.MenuItem
 
 class SideNav extends React.Component {
-  constructor (props) {
+  // TODO: should not use electron stuff v0.7
-    super(props)
+  handleMenuButtonClick (e) {
-    this.newFolderHandler = (e) => {
+    var menu = new Menu()
-      if (isModalOpen()) return true
+    menu.append(new MenuItem({
-      this.handleNewFolderButton(e)
+      label: 'Preferences',
-    }
+      click: (e) => this.handlePreferencesButtonClick(e)
-  }
+    }))
-
+    menu.append(new MenuItem({ type: 'separator' }))
-  componentDidMount () {
+    menu.append(new MenuItem({
-    ipc.on('nav-new-folder', this.newFolderHandler)
+      label: 'Mount Repository',
-  }
+      click: (e) => this.handleNewRepositoryButtonClick(e)
-
+    }))
-  componentWillUnmount () {
+    menu.popup(remote.getCurrentWindow())
-    ipc.removeListener('nav-new-folder', this.newFolderHandler)
-  }
-
-  handlePreferencesButtonClick (e) {
-    openModal(Preferences)
-  }
-
-  handleNewFolderButton (e) {
-    let { user } = this.props
-    openModal(CreateNewFolder, {user: user})
-  }
-
-  handleFolderButtonClick (name) {
-    return (e) => {
-      let { dispatch } = this.props
-    }
-  }
-
-  handleAllFoldersButtonClick (e) {
-    let { dispatch } = this.props
   }
 
   handleNewRepositoryButtonClick (e) {
     openModal(NewRepositoryModal)
   }
 
+  handlePreferencesButtonClick (e) {
+    openModal(Preferences)
+  }
+
   render () {
     let { repositories, dispatch } = this.props
     let repositorieElements = repositories.map((repo) => {
@@ -65,39 +52,34 @@ class SideNav extends React.Component {
         styleName='root'
         tabIndex='1'
       >
+        <div styleName='top'>
+          <button styleName='top-menu'
+            onClick={(e) => this.handleMenuButtonClick(e)}
+          >
+            <i className='fa fa-navicon'/> Menu
+          </button>
+        </div>
+
         <div styleName='menu'>
           <button styleName='menu-button'
           >
-            <i className='fa fa-history'/> Recents
+            <i className='fa fa-home'/> Home
           </button>
           <button styleName='menu-button'
           >
             <i className='fa fa-star'/> Favorited
           </button>
-          <button styleName='menu-button'
-          >
-            <i className='fa fa-list'/> All posts
-          </button>
         </div>
 
         <div styleName='repositoryList'>
           {repositories.length > 0 ? repositorieElements : (
-            <div styleName='repositoryList-empty'>Empty</div>
+            <div styleName='repositoryList-empty'>No repository mount</div>
           )}
         </div>
 
-        <div styleName='control'>
+        <button styleName='navToggle'>
-          <button
+          <i className='fa fa-angle-double-left'/>
-            styleName='control-newRepositoryButton'
+        </button>
-            onClick={(e) => this.handleNewRepositoryButtonClick(e)}
-          >
-            <i className='fa fa-plus'/> New Repository
-          </button>
-          <button styleName='control-toggleButton'
-          >
-            <i className='fa fa-angle-double-right'/>
-          </button>
-        </div>
       </div>
     )
   }