renew SideNav

2025-12-13 17:56:25 +00:00 · 2016-05-03 17:54:09 +09:00
parent 6ea66b85e0
commit df51e6d429
4 changed files with 138 additions and 101 deletions
--- 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 {
          </div>
          <div styleName='folder-control'>
            <button styleName='folder-control-button'>
-              <i className='fa fa-pencil'/>
-            </button>
-            <button styleName='folder-control-button'>
-              <i className='fa fa-trash'/>
+              <i className='fa fa-ellipsis-v'/>
            </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'/>
-            </button>
-            <button styleName='header-control-button'
-            >
-              <i className='fa fa-pencil'/>
+              <i className='fa fa-ellipsis-v'/>
            </button>
            <button styleName='header-control-button'
+              onClick={(e) => this.handleToggleButtonClick(e)}
            >
              <i className='fa fa-angle-down'/>
            </button>
--- 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
--- 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
--- 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'
      >
+        <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='control-newRepositoryButton'
-            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>
+        <button styleName='navToggle'>
+          <i className='fa fa-angle-double-left'/>
+        </button>
      </div>
    )
  }