resizable SideNav

Author: Rokt33r

browser/main/Main.js

@@ -20,8 +20,10 @@ class Main extends React.Component {
     let { config } = props
 
     this.state = {
-      isSliderFocused: false,
-      listWidth: config.listWidth
+      isRightSliderFocused: false,
+      listWidth: config.listWidth,
+      navWidth: config.listWidth,
+      isLeftSliderFocused: false
     }
   }
 
@@ -49,17 +51,24 @@ class Main extends React.Component {
       })
   }
 
-  handleSlideMouseDown (e) {
+  handleLeftSlideMouseDown (e) {
     e.preventDefault()
     this.setState({
-      isSliderFocused: true
+      isLeftSliderFocused: true
+    })
+  }
+
+  handleRightSlideMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isRightSliderFocused: true
     })
   }
 
   handleMouseUp (e) {
-    if (this.state.isSliderFocused) {
+    if (this.state.isRightSliderFocused) {
       this.setState({
-        isSliderFocused: false
+        isRightSliderFocused: false
       }, () => {
         let { dispatch } = this.props
         let newListWidth = this.state.listWidth
@@ -71,10 +80,24 @@ class Main extends React.Component {
         })
       })
     }
+    if (this.state.isLeftSliderFocused) {
+      this.setState({
+        isLeftSliderFocused: false
+      }, () => {
+        let { dispatch } = this.props
+        let navWidth = this.state.navWidth
+        // TODO: ConfigManager should dispatch itself.
+        ConfigManager.set({listWidth: navWidth})
+        dispatch({
+          type: 'SET_NAV_WIDTH',
+          listWidth: navWidth
+        })
+      })
+    }
   }
 
   handleMouseMove (e) {
-    if (this.state.isSliderFocused) {
+    if (this.state.isRightSliderFocused) {
       let offset = this.refs.body.getBoundingClientRect().left
       let newListWidth = e.pageX - offset
       if (newListWidth < 10) {
@@ -86,6 +109,17 @@ class Main extends React.Component {
         listWidth: newListWidth
       })
     }
+    if (this.state.isLeftSliderFocused) {
+      let navWidth = e.pageX
+      if (navWidth < 80) {
+        navWidth = 80
+      } else if (navWidth > 600) {
+        navWidth = 600
+      }
+      this.setState({
+        navWidth: navWidth
+      })
+    }
   }
 
   render () {
@@ -105,9 +139,20 @@ class Main extends React.Component {
             'config',
             'location'
           ])}
+          width={this.state.navWidth}
         />
+        {!config.isSideNavFolded &&
+          <div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
+            style={{left: this.state.navWidth - 1}}
+            onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
+            draggable='false'
+          >
+            <div styleName='slider-hitbox'/>
+          </div>
+        }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           ref='body'
+          style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
         >
           <TopBar style={{width: this.state.listWidth}}
             {..._.pick(this.props, [
@@ -127,9 +172,9 @@ class Main extends React.Component {
               'location'
             ])}
           />
-          <div styleName={this.state.isSliderFocused ? 'slider--active' : 'slider'}
+          <div styleName={this.state.isRightSliderFocused ? 'slider--active' : 'slider'}
             style={{left: this.state.listWidth}}
-            onMouseDown={(e) => this.handleSlideMouseDown(e)}
+            onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
             draggable='false'
           >
             <div styleName='slider-hitbox'/>
@@ -143,7 +188,7 @@ class Main extends React.Component {
               'params',
               'location'
             ])}
-            ignorePreviewPointerEvents={this.state.isSliderFocused}
+            ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
         <StatusBar

browser/main/SideNav/SideNav.styl

@@ -22,6 +22,7 @@
 
 .top-menu-label
   margin-left 5px
+  overflow ellipsis
 
 .menu
   margin-top 15px
@@ -33,6 +34,7 @@
   font-size 14px
   width 100%
   text-align left
+  overflow ellipsis
 
 .menu-button--active
   @extend .menu-button

browser/main/SideNav/StorageItem.styl

@@ -65,6 +65,7 @@
   margin 2px 0
   text-align left
   border none
+  overflow ellipsis
   font-size 14px
   &:first-child
     margin-top 0

browser/main/SideNav/index.js

@@ -50,11 +50,13 @@ class SideNav extends React.Component {
         isFolded={isFolded}
       />
     })
-
+    let style = {}
+    if (!isFolded) style.width = this.props.width
     return (
       <div className='SideNav'
         styleName={isFolded ? 'root--folded' : 'root'}
         tabIndex='1'
+        style={style}
       >
         <div styleName='top'>
           <button styleName='top-menu'

browser/main/lib/ConfigManager.js

@@ -8,6 +8,7 @@ const defaultConfig = {
   zoom: 1,
   isSideNavFolded: false,
   listWidth: 250,
+  navWidth: 200,
   hotkey: {
     toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
     toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'

browser/main/store.js

@@ -461,6 +461,9 @@ function config (state = defaultConfig, action) {
     case 'SET_LIST_WIDTH':
       state.listWidth = action.listWidth
       return Object.assign({}, state)
+    case 'SET_NAV_WIDTH':
+      state.navWidth = action.navWidth
+      return Object.assign({}, state)
     case 'SET_CONFIG':
       return Object.assign({}, state, action.config)
     case 'SET_UI':