refactor Router & add User settings

browser/main/Components/LaunchModal.jsx

@@ -130,7 +130,7 @@ var LaunchModal = React.createClass({
       <div onClick={this.handleClick} className='modal launch-modal'>
         <div className='modal-body'>
           <div className='modal-tab form-group'>
-            <button className={this.state.currentTab === 'snippet' ? 'btn-primary active' : 'btn-default'} onClick={this.selectSnippetTab}>Snippet</button> <button className={this.state.currentTab === 'blueprint' ? 'btn-primary active' : 'btn-default'} onClick={this.selectBlueprintTab}>Blueprint</button>
+            <button className={this.state.currentTab === 'snippet' ? 'btn-primary active' : 'btn-default'} onClick={this.selectSnippetTab}>Snippet</button><button className={this.state.currentTab === 'blueprint' ? 'btn-primary active' : 'btn-default'} onClick={this.selectBlueprintTab}>Blueprint</button>
           </div>
           {form}
         </div>

browser/main/Containers/PlanetContainer.jsx

@@ -29,49 +29,44 @@ var userPlanets = [
   }
 ]
 
-var PlanetNavigator = React.createClass({
-  propTypes: {
-    currentPlanet: React.PropTypes.object,
-    currentUser: React.PropTypes.object
-  },
-  render: function () {
-    var planets = userPlanets.map(function (planet, index) {
-      return (
-        <li key={planet.id} className={this.props.currentPlanet.name === planet.name ? 'active' : ''}>
-          <a>{planet.profileName[0]}</a>
-          <div className='shortCut'>⌘{index + 1}</div>
-        </li>
-      )
-    }.bind(this))
-
-    return (
-      <div className='PlanetNavigator'>
-        <a className='userConfig'>
-          <img width='50' height='50' src='../vendor/dummy.jpg'/>
-        </a>
-        <ul>
-          {planets}
-        </ul>
-        <button className='newPlanet'><i className='fa fa-plus'/></button>
-      </div>
-    )
-  }
-})
-
 var PlanetHeader = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.object,
     currentUser: React.PropTypes.object
   },
+  getInitialState: function () {
+    return {
+      isMenuDropDownOpen: false
+    }
+  },
+  toggleMenuDropDown: function () {
+    this.setState({isMenuDropDownOpen: !this.state.isMenuDropDownOpen}, function () {
+      if (this.state.isMenuDropDownOpen) {
+        document.body.onclick = function () {
+          this.setState({isMenuDropDownOpen: false}, function () {
+            document.body.onclick = null
+          })
+        }.bind(this)
+      }
+    })
+  },
+  interceptClick: function (e) {
+    e.stopPropagation()
+  },
   render: function () {
     var currentPlanetName = this.props.currentPlanet.name
 
     return (
-      <div className='PlanetHeader'>
+      <div onClick={this.interceptClick} className='PlanetHeader'>
         <span className='planetName'>{currentPlanetName}</span>
-        <button className='menuBtn'>
+        <button onClick={this.toggleMenuDropDown} className={this.state.isMenuDropDownOpen ? 'menuBtn active' : 'menuBtn'}>
           <i className='fa fa-chevron-down'></i>
         </button>
+        <div className={this.state.isMenuDropDownOpen ? 'dropDown' : 'dropDown hide'} ref='menuDropDown'>
+          <a href='#'><i className='fa fa-wrench fa-fw'/> Planet Setting</a>
+          <a href='#'><i className='fa fa-group fa-fw'/> Manage member</a>
+          <a href='#'><i className='fa fa-trash fa-fw'/> Delete Planet</a>
+        </div>
         <span className='searchInput'>
           <i className='fa fa-search'/>
           <input type='text' className='inline-input circleInput' placeholder='Search...'/>
@@ -143,7 +138,7 @@ var SideNavigator = React.createClass({
             <i className='fa fa-code fa-fw'/> Snippets
           </Link>
           <Link to='blueprint' params={{userName: currentUserName, planetName: currentPlanetName}}>
-            <i className='fa fa-wrench fa-fw'/> Blueprints
+            <i className='fa fa-file-text-o fa-fw'/> Blueprints
           </Link>
         </nav>
       </div>
@@ -189,7 +184,6 @@ module.exports = React.createClass({
 
     return (
       <div className='PlanetContainer'>
-        <PlanetNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>
         <PlanetMain currentPlanet={currentPlanet} currentUser={currentUser}/>
       </div>
     )

browser/main/Containers/UserContainer.jsx

@@ -0,0 +1,85 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+var RouteHandler = ReactRouter.RouteHandler
+
+// Dummy
+var currentUser = {
+  name: 'testcat',
+  email: 'testcat@example.com',
+  profileName: 'Test Cat'
+}
+
+var userPlanets = [
+  {
+    id: 1,
+    name: 'testcat',
+    profileName: 'TestCat'
+  },
+  {
+    id: 2,
+    name: 'group1',
+    profileName: 'Some Group#1'
+  },
+  {
+    id: 3,
+    name: 'group2',
+    profileName: 'Some Group#1'
+  }
+]
+
+var UserNavigator = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.object,
+    currentUser: React.PropTypes.object
+  },
+  render: function () {
+    var planets = userPlanets.map(function (planet, index) {
+      return (
+        <li key={planet.id} className={this.props.currentPlanet != null && this.props.currentPlanet.name === planet.name ? 'active' : ''}>
+          <a href>{planet.profileName[0]}</a>
+          <div className='shortCut'>⌘{index + 1}</div>
+        </li>
+      )
+    }.bind(this))
+    if (this.props.currentUser == null) {
+      return (
+        <div className='UserNavigator'>
+        </div>
+      )
+    }
+
+    return (
+      <div className='UserNavigator'>
+        <Link to='userHome' params={{userName: this.props.currentUser.name}} className='userConfig'>
+          <img width='50' height='50' src='../vendor/dummy.jpg'/>
+        </Link>
+        <ul>
+          {planets}
+        </ul>
+        <button className='newPlanet'><i className='fa fa-plus'/></button>
+      </div>
+    )
+  }
+})
+
+module.exports = React.createClass({
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  render: function () {
+    var currentPlanetName = this.props.params.planetName
+    var currentPlanet = null
+    userPlanets.some(function (planet) {
+      if (planet.name === currentPlanetName) {
+        currentPlanet = planet
+        return true
+      }
+      return false
+    })
+    return (
+      <div className='UserContainer'>
+        <UserNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>
+        <RouteHandler/>
+      </div>
+    )
+  }
+})

browser/main/Containers/UserSettingContainer.jsx

@@ -0,0 +1,115 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+
+var currentUser = {
+  name: 'testcat',
+  email: 'testcat@example.com',
+  profileName: 'Test Cat'
+}
+
+var UserSettingNavigation = React.createClass({
+  propTypes: {
+    currentUser: React.PropTypes.shape({
+      name: React.PropTypes.string
+    })
+  },
+  changeFactory: function (current) {
+    return function () {
+      this.props.changeCurrent(current)
+    }.bind(this)
+  },
+  render: function () {
+    return (
+      <div className='UserSettingNavigation'>
+        <div className='userName'>{this.props.currentUser.name}</div>
+        <nav>
+          <a className={this.props.current === 'profile' ? 'active' : ''} onClick={this.changeFactory('profile')}><i className='fa fa-user fa-fw'/> Profile</a>
+          <a className={this.props.current === 'setting' ? 'active' : ''} onClick={this.changeFactory('setting')}><i className='fa fa-gears fa-fw'/> Setting</a>
+          <a className={this.props.current === 'integration' ? 'active' : ''} onClick={this.changeFactory('integration')}><i className='fa fa-share-alt fa-fw'/> Integration</a>
+          <a className={this.props.current === 'help' ? 'active' : ''} onClick={this.changeFactory('help')}><i className='fa fa-info-circle fa-fw'/> Help</a>
+          <a onClick={this.logOut}><i className='fa fa-sign-out fa-fw'/> Logout</a>
+        </nav>
+      </div>
+    )
+  }
+})
+
+var UserSettingMain = React.createClass({
+  propTypes: {
+    currentUser: React.PropTypes.shape({
+      name: React.PropTypes.string
+    })
+  },
+  render: function () {
+    var view
+
+    switch (this.props.current) {
+      case 'profile':
+        view = (
+          <div>
+            <h1>User Info</h1>
+            <form>
+              <div>
+                <label>Name</label> <input className='inline-input'/>
+              </div>
+              <div>
+                <label>Mail</label> <input className='inline-input'/>
+              </div>
+              <div>
+                <button className='btn-primary'>Save</button>
+              </div>
+            </form>
+            <hr/>
+            <h1>Password Reset</h1>
+            <form>
+              <div>
+                <label>Name</label> <input className='inline-input'/>
+              </div>
+              <div>
+                <label>Mail</label> <input className='inline-input'/>
+              </div>
+              <div>
+                <button className='btn-primary'>Save</button>
+              </div>
+            </form>
+          </div>
+        )
+        break
+      default:
+        view = (
+          <div>
+            Missing...
+          </div>
+        )
+        break
+    }
+    return (
+      <div className='UserSettingMain'>
+        {view}
+      </div>
+    )
+  }
+})
+
+module.exports = React.createClass({
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  getInitialState: function () {
+    return {
+      current: 'profile'
+    }
+  },
+  changeCurrent: function (current) {
+    this.setState({
+      current: current
+    })
+  },
+  render: function () {
+    return (
+      <div className='UserSettingContainer'>
+        <UserSettingNavigation currentUser={currentUser} current={this.state.current} changeCurrent={this.changeCurrent}/>
+        <UserSettingMain currentUser={currentUser} current={this.state.current}/>
+      </div>
+    )
+  }
+})

browser/main/index.jsx

@@ -12,21 +12,26 @@ var MainContainer = require('./Containers/MainContainer.jsx')
 var LoginContainer = require('./Containers/LoginContainer.jsx')
 var RegisterContainer = require('./Containers/RegisterContainer.jsx')
 
+var UserContainer = require('./Containers/UserContainer.jsx')
+var UserSettingContainer = require('./Containers/UserSettingContainer.jsx')
 var PlanetContainer = require('./Containers/PlanetContainer.jsx')
-
+var DashboardContainer = require('./Containers/DashboardContainer.jsx')
-var Dashboard = require('./Containers/DashboardContainer.jsx')
 var SnippetContainer = require('./Containers/SnippetContainer.jsx')
 var BlueprintContainer = require('./Containers/BlueprintContainer.jsx')
 
 var routes = (
   <Route path='/' handler={MainContainer}>
-    <Route name='planet' path=':userName/:planetName' handler={PlanetContainer}>
-      <DefaultRoute name='dashboard' handler={Dashboard}/>
-      <Route name='snippets' handler={SnippetContainer}/>
-      <Route name='blueprint' handler={BlueprintContainer}/>
-    </Route>
     <Route name='login' path='login' handler={LoginContainer}/>
     <Route name='register' path='register' handler={RegisterContainer}/>
+
+    <Route name='user' path=':userName' handler={UserContainer}>
+      <DefaultRoute name='userHome' handler={UserSettingContainer}/>
+      <Route name='planet' path=':planetName' handler={PlanetContainer}>
+        <DefaultRoute name='dashboard' handler={DashboardContainer}/>
+        <Route name='snippets' handler={SnippetContainer}/>
+        <Route name='blueprint' handler={BlueprintContainer}/>
+      </Route>
+    </Route>
   </Route>
 )
 

browser/styles/main/containers/UserSettingContainer.styl

@@ -0,0 +1,33 @@
+.UserSettingContainer
+  absolute top bottom right
+  left 50px
+  .UserSettingNavigation
+    absolute top bottom left
+    width 200px
+    padding 15px
+    box-sizing border-box
+    border-right solid 1px borderColor
+    .userName
+      font-size 2.0em
+      margin 10px 0
+      color brandColor
+    a
+      display block
+      color textColor
+      width 100%
+      padding 15px
+      margin-bottom 5px
+      border-radius 10px
+      box-sizing border-box
+      cursor pointer
+      &:hover, &.hover
+        color brandColor
+        background-color hoverBackgroundColor
+      &:active, &.active
+        color brandColor
+
+  .UserSettingMain
+    absolute top bottom right
+    left 200px
+    padding 10px
+    box-sizing border-box

browser/styles/main/index.styl

@@ -82,7 +82,7 @@ textarea.block-input
   h1, h2
     margin 5px auto 25px
 
-.PlanetNavigator
+.UserNavigator
   background-color planetNavBgColor
   absolute left top bottom
   width 50px
@@ -100,7 +100,6 @@ textarea.block-input
     &.active, &:active, &.focus, &:focus, &.hover, &:hover
       img
         opacity 1
-
   ul>li
     padding 10px 3px
     .shortCut
@@ -117,6 +116,7 @@ textarea.block-input
       height 44px
       text-align center
       background-color planetAnchorBgColor
+      text-decoration none
       color planetAnchorColor
       line-height 44px
       font-size 1.1em
@@ -153,11 +153,12 @@ textarea.block-input
       color white
 
 .PlanetContainer
-  fullsize()
-.PlanetMain
   absolute top bottom right
   left 50px
 
+.PlanetMain
+  fullsize()
+
 .PlanetHeader
   absolute left right top
   overflow-y hidden

browser/styles/shared/modal.styl

@@ -25,6 +25,18 @@
         float right
 
   .launch-modal
+    .modal-tab
+      .btn-primary, .btn-default
+        margin 0
+        border-radius 0
+        &:nth-child(1)
+          border-top-left-radius 10px
+          border-bottom-left-radius 10px
+        &:nth-child(2)
+          border-left 0
+          border-top-right-radius 10px
+          border-bottom-right-radius 10px
+
     .ace_editor
       height 300px
       border-radius 5px

browser/styles/vars.styl

@@ -7,8 +7,6 @@ buttonBorderColor = #4C4C4C
 
 lightButtonColor = #898989
 
-
-
 hoverBackgroundColor= transparentify(#444, 3%)