change planet body layout

Author: Rokt33r

browser/main/Containers/LoginContainer.jsx

@@ -16,7 +16,7 @@ module.exports = React.createClass({
     Auth.attempt()
     // TODO: request user data
       .then(function (user) {
-        this.transitionTo('dashboard', {planetName: user.name})
+        this.transitionTo('dashboard', {userName: user.name, planetName: user.name})
       }.bind(this))
     e.preventDefault()
   },

browser/main/Containers/PlanetContainer.jsx

@@ -5,6 +5,12 @@ var Link = ReactRouter.Link
 var ModalBase = require('../Components/ModalBase')
 var LaunchModal = require('../Components/LaunchModal')
 
+var currentUser = {
+  name: 'testcat',
+  email: 'testcat@example.com',
+  profileName: 'Test Cat'
+}
+
 var userPlanets = [
   {
     id: 1,
@@ -25,34 +31,68 @@ var userPlanets = [
 
 var PlanetNavigator = React.createClass({
   propTypes: {
-    currentPlanet: React.PropTypes.object
+    currentPlanet: React.PropTypes.object,
+    currentUser: React.PropTypes.object
   },
   render: function () {
-    var planets = userPlanets.map(function (planet) {
+    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></li>
+        <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
+  },
+  render: function () {
+    var currentPlanetName = this.props.currentPlanet.name
+
+    return (
+      <div className='PlanetHeader'>
+        <span className='planetName'>{currentPlanetName}</span>
+        <button className='menuBtn'>
+          <i className='fa fa-chevron-down'></i>
+        </button>
+        <span className='searchInput'>
+          <i className='fa fa-search'/>
+          <input type='text' className='inline-input circleInput' placeholder='Search...'/>
+        </span>
+        <a className='downloadBtn btn-primary'>Download Mac app</a>
       </div>
     )
   }
 })
 
 var PlanetMain = React.createClass({
   propTypes: {
-    currentPlanet: React.PropTypes.object
+    currentPlanet: React.PropTypes.object,
+    currentUser: React.PropTypes.object
   },
   render: function () {
     return (
       <div className='PlanetMain'>
-        <SideNavigator currentPlanet={this.props.currentPlanet}/>
-        <Screen currentPlanet={this.props.currentPlanet}/>
+        <PlanetHeader currentPlanet={this.props.currentPlanet} currentUser={this.props.currentUser}/>
+        <SideNavigator currentPlanet={this.props.currentPlanet} currentUser={this.props.currentUser}/>
+        <PlanetBody currentPlanet={this.props.currentPlanet}/>
       </div>
     )
   }
@@ -62,6 +102,9 @@ var SideNavigator = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.shape({
       name: React.PropTypes.string
+    }),
+    currentUser: React.PropTypes.shape({
+      name: React.PropTypes.string
     })
   },
   getInitialState: function () {
@@ -82,29 +125,24 @@ var SideNavigator = React.createClass({
   },
   render: function () {
     var currentPlanetName = this.props.currentPlanet.name
+    var currentUserName = this.props.currentUser.name
 
     return (
       <div className='SideNavigator'>
-        <div className='nav-header'>
-          <p className='planet-name'>{currentPlanetName}</p>
-          <button className='menu-btn'>
-            <i className='fa fa-chevron-down'></i>
-          </button>
-        </div>
         <button onClick={this.openLaunchModal} className='btn-primary btn-block'>
           <i className='fa fa-rocket fa-fw'/> Launch
         </button>
         <ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
           <LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
         </ModalBase>
         <nav>
-          <Link to='dashboard' params={{planetName: currentPlanetName}}>
+          <Link to='dashboard' params={{userName: currentUserName, planetName: currentPlanetName}}>
             <i className='fa fa-home fa-fw'/> Home
           </Link>
-          <Link to='snippets' params={{planetName: currentPlanetName}}>
+          <Link to='snippets' params={{userName: currentUserName, planetName: currentPlanetName}}>
             <i className='fa fa-code fa-fw'/> Snippets
           </Link>
-          <Link to='blueprint' params={{planetName: currentPlanetName}}>
+          <Link to='blueprint' params={{userName: currentUserName, planetName: currentPlanetName}}>
             <i className='fa fa-wrench fa-fw'/> Blueprints
           </Link>
         </nav>
@@ -113,10 +151,10 @@ var SideNavigator = React.createClass({
   }
 })
 
-var Screen = React.createClass({
+var PlanetBody = React.createClass({
   render: function () {
     return (
-      <div className='Screen'>
+      <div className='PlanetBody'>
         <RouteHandler/>
       </div>
     )
@@ -151,8 +189,8 @@ module.exports = React.createClass({
 
     return (
       <div className='PlanetContainer'>
-        <PlanetNavigator currentPlanet={currentPlanet}/>
-        <PlanetMain currentPlanet={currentPlanet}/>
+        <PlanetNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>
+        <PlanetMain currentPlanet={currentPlanet} currentUser={currentUser}/>
       </div>
     )
   }

browser/main/Containers/RegisterContainer.jsx

@@ -17,7 +17,7 @@ module.exports = React.createClass({
     Auth.register()
     // TODO: request user data
       .then(function (user) {
-        this.transitionTo('dashboard', {planetName: user.name})
+        this.transitionTo('dashboard', {userName: user.name, planetName: user.name})
       }.bind(this))
 
     e.preventDefault()

browser/main/Containers/SnippetContainer.jsx

@@ -32,7 +32,6 @@ var SnippetList = React.createClass({
 
     return (
       <div className='SnippetList'>
-        <div className='search'><input className='block-input' type='text' placeholder='Search...'/></div>
         <ul>
           {snippets}
         </ul>

browser/main/index.jsx

@@ -20,7 +20,7 @@ var BlueprintContainer = require('./Containers/BlueprintContainer.jsx')
 
 var routes = (
   <Route path='/' handler={MainContainer}>
-    <Route name='planet' path='planet/:planetName' handler={PlanetContainer}>
+    <Route name='planet' path=':userName/:planetName' handler={PlanetContainer}>
       <DefaultRoute name='dashboard' handler={Dashboard}/>
       <Route name='snippets' handler={SnippetContainer}/>
       <Route name='blueprint' handler={BlueprintContainer}/>

browser/styles/main/components/SideNavigator.styl

@@ -1,50 +1,22 @@
 .SideNavigator
-  absolute top bottom left
+  absolute bottom left
+  top 65px
   width 200px
   border-right solid 1px highlightenBorderColor
   padding 10px
   box-sizing border-box
-  .nav-header
-    clearfix()
-    margin-bottom 15px
-    .planet-name
-      float left
-      line-height 30px
-      font-size 1.1em
-    .menu-btn
-      float right
-      display block
-      font-size 0.8em
-      color lightButtonColor
-      border solid 2px lightButtonColor
-      box-sizing border-box
-      circle()
-      background-image none
-      background-color transparent
-      width 30px
-      height 30px
-      text-align center
-      cursor pointer
-      transform scale(0.8)
-      &:active, &.active, &:hover, &.hover
-        background-color lightButtonColor
-        color white
   nav
     a
       display block
-      position relative
-      right 0px
       box-sizing border-box
-      width 190px
       padding 15px 15px
       margin 10px 0
+      border-radius 10px
       text-decoration none
-      border-radius left 10px
       background-color transparent
       color textColor
       transition 0.1s
       &:hover, &.hover
         background-color hoverBackgroundColor
       &:active, &.active
-        background-color brandColor
-        color white
+        color brandColor

browser/styles/main/containers/SnippetContainer.styl

@@ -7,14 +7,9 @@
     absolute top bottom left
     width 250px
     border-right solid 1px highlightenBorderColor
-    .search
-      border-bottom solid 1px borderColor
-      padding 5px
-      margin 0
 
     &>ul
-      absolute bottom left right
-      top 44px
+      absolute top bottom left right
       overflow-y auto
       li
         border-bottom solid 1px borderColor
@@ -31,6 +26,8 @@
           font-size 0.8em
         &:hover, &.hover
           background-color hoverBackgroundColor
+          &:active, &.active
+            background-color white
         &:active, &.active
           border solid 2px brandBorderColor
           padding 9px 9px 8px