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 {
-
@@ -55,15 +78,12 @@ 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
)}
-
- - -
+
) }