foldable SideNav

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'
+      <div styleName={isFolded
-        styleName='root'
+          ? 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'
+      <div styleName={isFolded
-        styleName='root'
+          ? '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)

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

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)

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

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
+.top-menu-label
-  background-color transparent
+  margin-left 5px
-  transition 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
 
 .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

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')
   }
 
-  render () {
+  handleToggleButtonClick (e) {
-    let { repositories, dispatch, location } = this.props
+    let { dispatch } = this.props
-    let repositorieElements = repositories.map((repo) => {
+
-      return <RepositorySection
+    dispatch({
-        key={repo.key}
+      type: 'TOGGLE_SIDENAV'
-        repository={repo}
-        dispatch={dispatch}
-      />
     })
+  }
+
+  render () {
+    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}
+        />
+      })
+
     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'>
+        <button styleName='navToggle'
-          <i className='fa fa-angle-double-left'/>
+          onClick={(e) => this.handleToggleButtonClick(e)}
+        >
+          {isFolded
+            ? <i className='fa fa-angle-double-right'/>
+            : <i className='fa fa-angle-double-left'/>
+          }
         </button>
       </div>
     )

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
 })
 

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-active-background = alpha(#E0E0E0, 90%)
-$nav-border-color = #D1D1D2
+$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