change planet body layout

2025-12-13 01:36:22 +00:00 · 2015-07-09 23:05:07 +09:00
parent 6b03ea2fe5
commit e467862c29
10 changed files with 215 additions and 82 deletions
--- a/browser/main/Containers/LoginContainer.jsx
+++ b/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()
  },
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/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}/>
-        <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,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}/>
-        <PlanetMain currentPlanet={currentPlanet}/>
+        <PlanetNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>
+        <PlanetMain currentPlanet={currentPlanet} currentUser={currentUser}/>
      </div>
    )
  }
--- a/browser/main/Containers/RegisterContainer.jsx
+++ b/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()
--- a/browser/main/Containers/SnippetContainer.jsx
+++ b/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>
--- a/browser/main/index.jsx
+++ b/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}/>
--- a/browser/styles/main/components/SideNavigator.styl
+++ b/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
--- a/browser/styles/main/containers/SnippetContainer.styl
+++ b/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
--- a/browser/styles/main/index.styl
+++ b/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
-  color white
+  background-color planetNavBgColor
  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
-      color black
+      background-color planetAnchorBgColor
+      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
--- a/browser/styles/shared/btn.styl
+++ b/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
-    color white
+  &:hover, &.hover, &:focus, &.focus
+    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
--- a/browser/styles/vars.styl
+++ b/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
-
-backgroundColor= white
-hoverBackgroundColor= transparentify(#444, 7%)
+planetNavBgColor = #ECECEC
+planetAnchorColor = #979797
+planetAnchorBgColor = #BEBEBE
+planetAnchorActiveColor = textColor
+planetAnchorActiveBgColor = white