change planet body layout

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,20 +31,52 @@ 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>
     )
   }
@@ -46,13 +84,15 @@ var PlanetNavigator = React.createClass({
 
 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}/>
+        <PlanetHeader currentPlanet={this.props.currentPlanet} currentUser={this.props.currentUser}/>
-        <Screen currentPlanet={this.props.currentPlanet}/>
+        <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,15 +125,10 @@ 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>
@@ -98,13 +136,13 @@ var SideNavigator = React.createClass({
           <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}/>
+        <PlanetNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>
-        <PlanetMain currentPlanet={currentPlanet}/>
+        <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 brandColor
-        color white

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
+      absolute top bottom left right
-      top 44px
       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

browser/styles/main/index.styl

@@ -20,15 +20,20 @@ h4
   font-size 1.15em
 a
   color brandColor
-  &:visited{
+  &:hover
+    color darken(brandColor, 15%)
+  &:visited
     color brandColor
-  }
 
 hr
   border-top none
   border-bottom solid 1px borderColor
   margin 25px 0
 
+button
+  &:focus, &.focus
+    outline none
+
 .text-center
   text-align center
 
@@ -38,6 +43,7 @@ hr
     display block
     margin-bottom 5px
 
+
 .block-input, .inline-input
   border solid 1px borderColor
   padding 0 15px
@@ -45,6 +51,11 @@ hr
   height 33px
   border-radius 5px
   box-sizing border-box
+  &:focus, &.focus
+    border solid 1px brandBorderColor
+    outline none
+  &.circleInput
+    border-radius 16.5px
 
 .block-input
   display block
@@ -60,7 +71,6 @@ textarea.block-input
   border-radius 5px
   padding 5px
 
-
 #content
   fullsize()
 
@@ -73,26 +83,41 @@ textarea.block-input
     margin 5px auto 25px
 
 .PlanetNavigator
-  background-color #032B35
+  background-color planetNavBgColor
-  color white
   absolute left top bottom
   width 50px
   text-align center
   box-sizing border-box
+  a.userConfig
+    display block
+    width 50px
+    height 50px
+    background-color black
+    img
+      transition 0.1s
+      opacity 0.6
+    box-sizing border-box
+    &.active, &:active, &.focus, &:focus, &.hover, &:hover
+      img
+        opacity 1
+
   ul>li
     padding 10px 3px
-    border-bottom solid 1px invBorderColor
+    .shortCut
+      margin-top 5px
+      color lighten(textColor, 5%)
+      font-size 0.8em
     &.active
-      background-color brandColor
       a
-        background-color white
+        background-color planetAnchorActiveBgColor
+        color planetAnchorActiveColor
     a
       display block
       width 44px
       height 44px
       text-align center
-      background-color #4D4D4D
+      background-color planetAnchorBgColor
-      color black
+      color planetAnchorColor
       line-height 44px
       font-size 1.1em
       cursor pointer
@@ -104,6 +129,28 @@ textarea.block-input
       circle()
       width 44px
       height 44px
+  button.newPlanet
+    display block
+    margin 0 auto
+    width 30px
+    height 30px
+    circle()
+    border solid 2px lightButtonColor
+    color lightButtonColor
+    text-align center
+    font-size 1
+    background-image none
+    background-color transparent
+    box-sizing border-box
+    absolute left bottom right
+    bottom 15px
+    &:hover, &.hover, &:focus, &.focus
+      border-color darken(lightButtonColor, 25%)
+      color darken(lightButtonColor, 25%)
+    &:active, &.active
+      border-color darken(brandBorderColor, 10%)
+      background-color brandColor
+      color white
 
 .PlanetContainer
   fullsize()
@@ -111,7 +158,68 @@ textarea.block-input
   absolute top bottom right
   left 50px
 
+.PlanetHeader
+  absolute left right top
+  overflow-y hidden
+  height 65px
+  background-color white
+  border-bottom solid 1px borderColor
+  box-sizing border-box
+  padding 5px 15px
+  clearfix()
+  .planetName
+    line-height 30px
+    font-size 2em
+    color brandColor
+    line-height 55px
+    padding 0 20px
+  .menuBtn
+    display inline-block
+    position relative
+    top -5px
+    font-size 0.8em
+    color lightButtonColor
+    border solid 1px lightButtonColor
+    box-sizing border-box
+    circle()
+    background-image none
+    background-color transparent
+    width 30px
+    height 30px
+    text-align center
+    cursor pointer
+    transition 0.1s
+    transform scale(0.8)
+    &:focus, &.focus
+      outline none
+    &:hover, &.hover, &:focus, &.focus
+      border-color darken(lightButtonColor, 25%)
+      color darken(lightButtonColor, 25%)
+    &:active, &.active
+      border-color darken(brandBorderColor, 10%)
+      background-color brandColor
+      color white
+  .searchInput
+    display inline-block
+    position relative
+    top -3px
+    margin-left 15px
+    input
+      padding-left 32px
+    .fa
+      position absolute
+      top 7px
+      left 10px
+  .downloadBtn
+    position relative
+    float right
+    top 5px
+    padding 7px 25px
+    box-sizing border-box
+    line-height 30px
 
-.Screen
+
-  absolute top bottom right
+.PlanetBody
+  absolute bottom right
   left 200px
+  top 65px

browser/styles/shared/btn.styl

@@ -7,7 +7,6 @@
   border-radius 22px
   box-sizing border-box
   font-size 1.1em
-  font-weight 600
   transition 0.1s
   cursor pointer
   margin 0 5px
@@ -21,6 +20,7 @@
   display inline-block
   width 44px
   padding 0
+  border-width 1px
 
 .btn-sm
   height 32px
@@ -32,13 +32,22 @@
   border-color brandBorderColor
   background-color transparent
   color brandColor
-  &:hover, &.hover, &:active, &.active
+  &:hover, &.hover, &:focus, &.focus
-    color white
+    border-color darken(brandBorderColor, 10%)
+    color darken(brandColor, 10%)
+  &:active, &.active
     background-color brandColor
+    color white
 
 .btn-default
   border-color lightButtonColor
   background-color transparent
   color lightButtonColor
-  &:hover, &.hover, &:active, &.active
+
-    background-color lighten(lightButtonColor, 75%)
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(lightButtonColor, 25%)
+    color darken(lightButtonColor, 25%)
+  &:active, &.active
+    border-color darken(brandBorderColor, 10%)
+    background-color brandColor
+    color white

browser/styles/vars.styl

@@ -7,9 +7,19 @@ buttonBorderColor = #4C4C4C
 
 lightButtonColor = #898989
 
+
+
+hoverBackgroundColor= transparentify(#444, 3%)
+
+
+// v0.2.0
+textColor = #4D4D4D
+backgroundColor= white
+
 brandColor = #2BAC8F
 
-textColor = #434343
+planetNavBgColor = #ECECEC
-
+planetAnchorColor = #979797
-backgroundColor= white
+planetAnchorBgColor = #BEBEBE
-hoverBackgroundColor= transparentify(#444, 7%)
+planetAnchorActiveColor = textColor
+planetAnchorActiveBgColor = white