diff --git a/browser/main/HomePage/SideNav/RepositorySection.js b/browser/main/HomePage/SideNav/RepositorySection.js
index e0ccc29c..9b66ea40 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.js
+++ b/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 {
-
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index c59997d2..f509a31d 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/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
- width 48px
+ right 5px
+ 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
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl
index b54462f5..2b881bf1 100644
--- a/browser/main/HomePage/SideNav/SideNav.styl
+++ b/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
- margin-top 30px
- margin-bottom 15px
+.top
+ height 60px
+ border-bottom solid 1px $nav-border-color
-.menu-button
- height 33px
+.top-menu
+ 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
- border-top solid 1px $nav-border-color
+ top 167px
+ 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
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
index 3d26e1df..dd85e3a0 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/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) {
- super(props)
- this.newFolderHandler = (e) => {
- if (isModalOpen()) return true
- this.handleNewFolderButton(e)
- }
- }
-
- componentDidMount () {
- ipc.on('nav-new-folder', this.newFolderHandler)
- }
-
- componentWillUnmount () {
- 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
+ // TODO: should not use electron stuff v0.7
+ handleMenuButtonClick (e) {
+ var menu = new Menu()
+ menu.append(new MenuItem({
+ label: 'Preferences',
+ click: (e) => this.handlePreferencesButtonClick(e)
+ }))
+ menu.append(new MenuItem({ type: 'separator' }))
+ menu.append(new MenuItem({
+ label: 'Mount Repository',
+ click: (e) => this.handleNewRepositoryButtonClick(e)
+ }))
+ menu.popup(remote.getCurrentWindow())
}
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'
>
+
+
+
+
-
{repositories.length > 0 ? repositorieElements : (
-
Empty
+
No repository mount
)}
-
-
-
-
+
)
}