diff --git a/browser/main/Containers/LoginContainer.jsx b/browser/main/Containers/LoginContainer.jsx
index b91137bf..0d1c69dc 100644
--- 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()
},
diff --git a/browser/main/Containers/PlanetContainer.jsx b/browser/main/Containers/PlanetContainer.jsx
index 2279a9e2..235b01fd 100644
--- 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 (
-
{planet.profileName[0]}
+
+ {planet.profileName[0]}
+ ⌘{index + 1}
+
)
}.bind(this))
return (
+ )
+ }
+})
+
+var PlanetHeader = React.createClass({
+ propTypes: {
+ currentPlanet: React.PropTypes.object,
+ currentUser: React.PropTypes.object
+ },
+ render: function () {
+ var currentPlanetName = this.props.currentPlanet.name
+
+ return (
+
)
}
@@ -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 (
)
}
@@ -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 (
-
-
{currentPlanetName}
-
-
@@ -98,13 +136,13 @@ var SideNavigator = React.createClass({
@@ -113,10 +151,10 @@ var SideNavigator = React.createClass({
}
})
-var Screen = React.createClass({
+var PlanetBody = React.createClass({
render: function () {
return (
-
+
)
@@ -151,8 +189,8 @@ module.exports = React.createClass({
return (
)
}
diff --git a/browser/main/Containers/RegisterContainer.jsx b/browser/main/Containers/RegisterContainer.jsx
index a3da5965..819a17b2 100644
--- 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()
diff --git a/browser/main/Containers/SnippetContainer.jsx b/browser/main/Containers/SnippetContainer.jsx
index 02aba38e..14f6dc51 100644
--- a/browser/main/Containers/SnippetContainer.jsx
+++ b/browser/main/Containers/SnippetContainer.jsx
@@ -32,7 +32,6 @@ var SnippetList = React.createClass({
return (
-
diff --git a/browser/main/index.jsx b/browser/main/index.jsx
index 4b6e2390..47b75762 100644
--- a/browser/main/index.jsx
+++ b/browser/main/index.jsx
@@ -20,7 +20,7 @@ var BlueprintContainer = require('./Containers/BlueprintContainer.jsx')
var routes = (
-
+
diff --git a/browser/styles/main/components/SideNavigator.styl b/browser/styles/main/components/SideNavigator.styl
index 6d4c4a4a..5f782f12 100644
--- 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
diff --git a/browser/styles/main/containers/SnippetContainer.styl b/browser/styles/main/containers/SnippetContainer.styl
index d8f15b43..08891aa3 100644
--- 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
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index aac8557b..3380da6c 100644
--- 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
diff --git a/browser/styles/shared/btn.styl b/browser/styles/shared/btn.styl
index c7e4061d..92828f87 100644
--- 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
diff --git a/browser/styles/vars.styl b/browser/styles/vars.styl
index 83a41293..038981e6 100644
--- 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