foldable SideNav

2025-12-13 17:56:25 +00:00 · 2016-05-12 19:53:21 +09:00
parent a3d5f23861
commit 365d7a1afd
8 changed files with 361 additions and 58 deletions
--- a/browser/main/HomePage/SideNav/FolderItem.js
+++ b/browser/main/HomePage/SideNav/FolderItem.js
@@ -54,6 +54,7 @@ class FolderItem extends React.Component {
  }

  handleContextButtonClick (e) {
+    e.stopPropagation()
    if (this.state.isUpdating) {
      return
    }
@@ -84,7 +85,7 @@ class FolderItem extends React.Component {
      click: () => this.handleDeleteButtonClick(e)
    }))

-    menu.popup(remote.getCurrentWindow())
+    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
  }

  handleRenameButtonClick (e) {
@@ -124,16 +125,33 @@ class FolderItem extends React.Component {
    })
  }

+  handleClick (e) {
+    let { folder, repository } = this.props
+    let { router } = this.context
+
+    router.push('/repositories/' + repository.key + '/folders/' + folder.key)
+  }
+
  renderIdle () {
-    let { folder } = this.props
+    let { folder, repository, isFolded } = this.props
+    let { router } = this.context
+
+    let isActive = router.isActive('/repositories/' + repository.key + '/folders/' + folder.key)

    return (
-      <div className='FolderItem'
-        styleName='root'
+      <div styleName={isFolded
+          ? isActive ? 'root--folded--active' : 'root--folded'
+          : isActive ? 'root--active' : 'root'
+        }
+        onClick={(e) => this.handleClick(e)}
        onContextMenu={(e) => this.handleContextButtonClick(e)}
      >
        <div styleName='label'>
-          <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
+          <i styleName='label-icon'
+            className='fa fa-cube'
+            style={{color: folder.color}}
+          />
+          <span styleName='label-name'>{folder.name}</span>
        </div>
        <div styleName='control'>
          <button styleName='control-button'
@@ -185,9 +203,12 @@ class FolderItem extends React.Component {
  }

  renderEdit () {
+    let { isFolded } = this.props
    return (
-      <div className='FolderItem'
-        styleName='root'
+      <div styleName={isFolded
+          ? 'root--edit--folded'
+          : 'root--edit'
+        }
      >
        <input styleName='nameInput'
          ref='nameInput'
@@ -205,6 +226,10 @@ class FolderItem extends React.Component {
  }
 }

+FolderItem.contextTypes = {
+  router: PropTypes.object
+}
+
 FolderItem.propTypes = {
  folder: PropTypes.shape({
    name: PropTypes.string,
@@ -212,7 +237,8 @@ FolderItem.propTypes = {
  }),
  repository: PropTypes.shape({
    key: PropTypes.string
-  })
+  }),
+  isFolded: PropTypes.bool
 }

 export default CSSModules(FolderItem, styles)
--- a/browser/main/HomePage/SideNav/FolderItem.styl
+++ b/browser/main/HomePage/SideNav/FolderItem.styl
@@ -4,14 +4,25 @@
  position relative
  cursor pointer
  transition 0.15s
+  color $nav-inactive-text-color
  &:hover
    background-color $nav-hover-background
    .control
      opacity 1
-  &:active
+  &:active, &:hover:active
    background-color $nav-active-background
    color $nav-text-color

+.root--active
+  @extend .root
+  background-color $nav-active-background
+  color $nav-text-color
+  &:hover
+    background-color $nav-active-background
+    color $nav-text-color
+  .control
+    opacity 1
+
 .label
  position absolute
  left 0
@@ -20,7 +31,10 @@
  right 48px
  padding-left 20px
  line-height 33px
-  color $nav-inactive-text-color
+  overflow-x hidden
+
+.label-name
+  margin-left 5px

 .control
  opacity 0
@@ -29,7 +43,7 @@
  bottom 0
  right 5px
  width 24px
-  transition 0.15s
+  transition opacity 0.15s

 .control-button
  width 24px
@@ -39,12 +53,14 @@
  border-radius 5px
  background-color transparent
  color $nav-inactive-text-color
-  transition 0.15s
+  transition color background-color 0.15s
  &:hover
    background-color $nav-hover-background
  &:active
    background-color $nav-active-background
    color $nav-text-color
+.root--edit
+  @extend .root

 .nameInput
  absolute top bottom
@@ -59,3 +75,48 @@
    border-color $focus-border-color
  &:disabled
    background-color $disabled-input-background
+
+.root--folded
+  @extend .root
+  width 44px
+  &:hover .label-name
+    width 100px
+  .label
+    padding-left 0
+    text-align center
+    right 0
+  .label-icon
+    width 44px
+  .label-name
+    position fixed
+    height 34px
+    left 44px
+    width 0
+    box-sizing border-box
+    margin-left 0
+    overflow ellipsis
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
+  .control
+    display none
+
+.root--folded--active
+  @extend .root--folded
+  background-color $nav-active-background
+  color $nav-text-color
+  &:hover
+    background-color $nav-active-background
+    color $nav-text-color
+
+.root--edit--folded
+  @extend .root--edit
+  .nameInput
+    position fixed
+    top inherit
+    bottom inherit
+    width 100px
--- a/browser/main/HomePage/SideNav/RepositorySection.js
+++ b/browser/main/HomePage/SideNav/RepositorySection.js
@@ -43,12 +43,20 @@ class RepositorySection extends React.Component {
  }

  handleToggleButtonClick (e) {
+    e.stopPropagation()
    this.setState({
      isOpen: !this.state.isOpen
    })
  }

+  handleHeaderClick (e) {
+    let { repository } = this.props
+    let { router } = this.context
+    router.push('/repositories/' + repository.key)
+  }
+
  handleContextButtonClick (e) {
+    e.stopPropagation()
    var menu = new Menu()
    menu.append(new MenuItem({
      label: 'New Folder',
@@ -60,7 +68,7 @@ class RepositorySection extends React.Component {
      click: () => this.handleUnlinkButtonClick()
    }))

-    menu.popup(remote.getCurrentWindow())
+    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
  }

  handleNewFolderButtonClick (e) {
@@ -120,7 +128,10 @@ class RepositorySection extends React.Component {
  }

  render () {
-    let { repository } = this.props
+    let { repository, isFolded } = this.props
+    let { router } = this.context
+
+    let isActive = router.isActive('/repositories/' + repository.key, true)

    let folderElements = repository.folders.map((folder) => {
      return (
@@ -128,6 +139,7 @@ class RepositorySection extends React.Component {
          key={folder.key}
          folder={folder}
          repository={repository}
+          isFolded={isFolded}
        />
      )
    })
@@ -139,20 +151,22 @@ class RepositorySection extends React.Component {
    return (
      <div
        className='RepositorySection'
-        styleName='root'
+        styleName={isFolded ? 'root-folded' : 'root'}
      >
-        <div styleName='header'
+        <div styleName={isActive ? 'header--active' : 'header'}
+          onClick={(e) => this.handleHeaderClick(e)}
          onContextMenu={(e) => this.handleContextButtonClick(e)}
        >
          <div styleName='header-name'>
-            <i className='fa fa-archive'/> {repository.name}
+            <i styleName='header-name-icon' className='fa fa-archive fa-fw'/>
+            <span styleName='header-name-label'>{repository.name}</span>
          </div>

          <div styleName='header-control'>
            <button styleName='header-control-button'
              onClick={(e) => this.handleContextButtonClick(e)}
            >
-              <i className='fa fa-ellipsis-v'/>
+              <i className='fa fa-ellipsis-v fa-fw'/>
            </button>
            <button styleName='header-control-button--show'
              onClick={(e) => this.handleToggleButtonClick(e)}
@@ -177,7 +191,8 @@ class RepositorySection extends React.Component {
            : <button styleName='newFolderButton'
              onClick={(e) => this.handleNewFolderButtonClick(e)}
            >
-              <i className='fa fa-plus'/> New Folder
+              <i styleName='newFolderButton-icon' className='fa fa-plus fa-fw'/>
+              <span styleName='newFolderButton-label'>New Folder</span>
            </button>
          }
        </div>}
@@ -186,6 +201,10 @@ class RepositorySection extends React.Component {
  }
 }

+RepositorySection.contextTypes = {
+  router: PropTypes.object
+}
+
 RepositorySection.propTypes = {
  repository: PropTypes.shape({
    name: PropTypes.string,
@@ -193,7 +212,8 @@ RepositorySection.propTypes = {
      name: PropTypes.string
    }))
  }),
-  dispatch: PropTypes.func
+  dispatch: PropTypes.func,
+  isFolded: PropTypes.bool
 }

 export default CSSModules(RepositorySection, styles)
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -8,10 +8,28 @@
  cursor pointer
  color $nav-inactive-text-color
  transition 0.15s
+  border none
+  width 100%
+  text-align left
+  background-color transparent
+  font-size 14px
  &:hover
    background-color $nav-hover-background
    .header-control-button
      opacity 1
+  &:active, &:active:hover
+    background-color $nav-active-background
+    color $nav-text-color
+
+.header--active
+  @extend .header
+  background-color $nav-active-background
+  color $nav-text-color
+  .header-control-button
+    opacity 1
+  &:hover
+    background-color $nav-active-background
+    color $nav-text-color

 .header-name
  position absolute
@@ -22,6 +40,9 @@
  padding-left 10px
  line-height 33px

+.header-name-label
+  margin-left 5px
+
 .header-control
  position absolute
  top 0
@@ -39,7 +60,7 @@
  background-color transparent
  color $nav-inactive-text-color
  opacity 0
-  transition 0.15s
+  transition color background-color 0.15s
  &:hover
    background-color $nav-hover-background
  &:active
@@ -75,9 +96,94 @@
  text-align left
  color $nav-inactive-text-color
  background-color transparent
-  transition 0.15s
+  transition color background-color 0.15s
  &:hover
    background-color $nav-hover-background
  &:active
    background-color $nav-active-background
    color $nav-text-color
+
+.newFolderButton
+  height 34px
+  line-height 34px
+.newFolderButton-label
+  margin-left 0
+
+.root-folded
+  @extend .root
+  width 44px
+  .header, .header--active
+    width 44px
+    text-align center
+    overflow hidden
+    &:hover
+      .header-name-label
+        width 134px
+        padding-left 34px
+      .header-control
+        width 35px
+        padding-right 5px
+  .header-name
+    width 44px
+    padding-left 0
+  .header-name-label
+    position fixed
+    display inline-block
+    height 34px
+    left 44px
+    width 0
+    box-sizing border-box
+    margin-left 0
+    overflow ellipsis
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
+  .header-control
+    position fixed
+    width 0
+    height 33px
+    top inherit
+    bottom inherit
+    left 43px
+    box-sizing border-box
+    overflow hidden
+  .header-control-button
+    display none
+  .header-control-button--show
+    float right
+    background-color $nav-tooltip-button-background
+    &:hover
+      background-color $nav-tooltip-button-background--hover
+  .newFolderButton
+    width 44px
+    padding 0
+    &:hover .newFolderButton-label
+      width 100px
+  .newFolderButton-icon
+    text-align center
+    width 44px
+  .newFolderButton-label
+    position fixed
+    display inline-block
+    height 34px
+    left 44px
+    width 0
+    box-sizing border-box
+    margin-left 0
+    overflow ellipsis
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
+    font-size 14px
+    text-align center
+  .newFolderForm-nameInput
+    position fixed
+    width 100px
--- a/browser/main/HomePage/SideNav/SideNav.styl
+++ b/browser/main/HomePage/SideNav/SideNav.styl
@@ -11,39 +11,26 @@
  border-bottom solid 1px $nav-border-color

 .top-menu
+  navButtonColor()
  height 59px
  padding 0 10px
  font-size 14px
  width 100%
  text-align left
-  border none
-  color $nav-inactive-text-color
-  background-color transparent
-  transition 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
+
+.top-menu-label
+  margin-left 5px

 .menu
  margin-top 15px

 .menu-button
+  navButtonColor()
  height 44px
  padding 0 10px
  font-size 14px
  width 100%
  text-align left
-  border none
-  color $nav-inactive-text-color
-  background-color transparent
-  transition 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color

 .menu-button--active
  @extend .menu-button
@@ -52,6 +39,9 @@
  &:hover
    background-color $nav-active-background

+.menu-button-label
+  margin-left 5px
+
 .repositoryList
  absolute left right bottom
  top 178px
@@ -74,10 +64,57 @@
  color $nav-inactive-text-color
  border none
  background-color transparent
-  transition 0.15s
+  transition color background-color 0.15s
  &:hover
    background-color $nav-hover-background
    color $nav-inactive-text-color
  &:active
    background-color $nav-active-background
    color $nav-text-color
+
+.root-folded
+  @extend .root
+  width 44px
+  .top-menu
+    width 44px
+    text-align center
+    &:hover .top-menu-label
+      width 100px
+  .top-menu-label
+    position fixed
+    display inline-block
+    height 34px
+    left 44px
+    width 0
+    margin-top -5px
+    margin-left 0
+    overflow hidden
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
+  .menu-button, .menu-button--active
+    width 44px
+    text-align center
+    &:hover .menu-button-label
+      width 100px
+  .menu-button-label
+    position fixed
+    display inline-block
+    height 34px
+    left 44px
+    width 0
+    padding-left 0
+    margin-top -9px
+    margin-left 0
+    overflow ellipsis
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/HomePage/SideNav/index.js
@@ -24,7 +24,7 @@ class SideNav extends React.Component {
      label: 'Mount Repository',
      click: (e) => this.handleNewRepositoryButtonClick(e)
    }))
-    menu.popup(remote.getCurrentWindow())
+    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
  }

  handleNewRepositoryButtonClick (e) {
@@ -45,29 +45,43 @@ class SideNav extends React.Component {
    router.push('/starred')
  }

+  handleToggleButtonClick (e) {
+    let { dispatch } = this.props
+
+    dispatch({
+      type: 'TOGGLE_SIDENAV'
+    })
+  }
+
  render () {
-    let { repositories, dispatch, location } = this.props
-    let repositorieElements = repositories.map((repo) => {
+    let { repositories, dispatch, location, status } = this.props
+
+    let isFolded = !status.sideNavExpand
+    let isHomeActive = location.pathname.match(/^\/home$/)
+    let isStarredActive = location.pathname.match(/^\/starred$/)
+
+    let repositorieElements = repositories
+      .map((repo) => {
        return <RepositorySection
          key={repo.key}
          repository={repo}
          dispatch={dispatch}
+          isFolded={isFolded}
        />
      })
-    let isHomeActive = location.pathname.match(/^\/home$/)
-    let isStarredActive = location.pathname.match(/^\/starred$/)

    return (
      <div
        className='SideNav'
-        styleName='root'
+        styleName={isFolded ? 'root-folded' : 'root'}
        tabIndex='1'
      >
        <div styleName='top'>
          <button styleName='top-menu'
            onClick={(e) => this.handleMenuButtonClick(e)}
          >
-            <i className='fa fa-navicon'/> Menu
+            <i styleName='top-menu-icon' className='fa fa-navicon fa-fw'/>
+            <span styleName='top-menu-label'>Menu</span>
          </button>
        </div>

@@ -75,12 +89,18 @@ class SideNav extends React.Component {
          <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
            onClick={(e) => this.handleHomeButtonClick(e)}
          >
-            <i className='fa fa-home'/> Home
+            <i styleName='menu-button-icon'
+              className='fa fa-home fa-fw'
+            />
+            <span styleName='menu-button-label'>Home</span>
          </button>
          <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
            onClick={(e) => this.handleStarredButtonClick(e)}
          >
-            <i className='fa fa-star'/> Starred
+            <i styleName='menu-button-icon'
+              className='fa fa-star fa-fw'
+            />
+            <span styleName='menu-button-label'>Starred</span>
          </button>
        </div>

@@ -90,8 +110,13 @@ class SideNav extends React.Component {
          )}
        </div>

-        <button styleName='navToggle'>
-          <i className='fa fa-angle-double-left'/>
+        <button styleName='navToggle'
+          onClick={(e) => this.handleToggleButtonClick(e)}
+        >
+          {isFolded
+            ? <i className='fa fa-angle-double-right'/>
+            : <i className='fa fa-angle-double-left'/>
+          }
        </button>
      </div>
    )
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -110,8 +110,22 @@ function repositories (state = initialRepositories, action) {
  return state
 }

+const defaultStatus = {
+  sideNavExpand: false
+}
+
+function status (state = defaultStatus, action) {
+  switch (action.type) {
+    case 'TOGGLE_SIDENAV':
+      state.sideNavExpand = !state.sideNavExpand
+      return Object.assign({}, state)
+  }
+  return state
+}
+
 let reducer = combineReducers({
  repositories,
+  status,
  routing: routerReducer
 })

--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -59,9 +59,23 @@ $disabled-input-background = #DDD
 $nav-text-color = #515151
 $nav-inactive-text-color = #939395
 $nav-hover-background = rgba(126, 127, 129, 0.08)
-$nav-active-background = #E7E7E7
-$nav-border-color = #D1D1D2
+$nav-active-background = alpha(#E0E0E0, 90%)
+$nav-border-color = #D1D1D1
 $nav-background-color = #FAFAFA
+$nav-tooltip-background-color = alpha(#444, 70%)
+$nav-tooltip-button-background = #D1D1D1
+$nav-tooltip-button-background--hover = lighten(#D1D1D1, 30%)
+
+navButtonColor()
+  border none
+  color $nav-inactive-text-color
+  background-color transparent
+  transition color background-color  0.15s
+  &:hover
+    background-color $nav-hover-background
+  &:active
+    background-color $nav-active-background
+    color $nav-text-color

 /**
 * # Modal Stuff