Fix: Personal Settingボターンを右にする。写真からまっすぐProfile pageに入れるようにする

browser/main/Components/PlanetHeader.jsx

@@ -9,7 +9,8 @@ var PlanetHeader = React.createClass({
     openSettingModal: React.PropTypes.func,
     currentPlanet: React.PropTypes.object,
     onSearchChange: React.PropTypes.func,
-    search: React.PropTypes.string
+    search: React.PropTypes.string,
+    openPersonalSettingModal: React.PropTypes.func
   },
   getInitialState: function () {
     return {
@@ -45,7 +46,7 @@ var PlanetHeader = React.createClass({
             <input onChange={this.props.onSearchChange} value={this.props.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
           </div>
           <button onClick={this.refreshPlanet} className='refreshButton'><i className='fa fa-refresh'/></button>
-          <button className='settingButton'><i className='fa fa-gears'/></button>
+          <button onClick={this.props.openPersonalSettingModal} className='settingButton'><i className='fa fa-gears'/></button>
         </div>
       </div>
     )

browser/main/Components/UserNavigator.jsx

@@ -3,14 +3,13 @@ var ReactRouter = require('react-router')
 var Link = ReactRouter.Link
 
 var ModalBase = require('./ModalBase')
-var PersonalSettingModal = require('./PersonalSettingModal')
 var PlanetCreateModal = require('./PlanetCreateModal')
 var ProfileImage = require('./ProfileImage')
 
 var AuthStore = require('../Stores/AuthStore')
 
 module.exports = React.createClass({
-  mixins: [ReactRouter.Navigation],
+  mixins: [ReactRouter.Navigation, ReactRouter.State],
   propTypes: {
     currentPlanet: React.PropTypes.object,
     currentUser: React.PropTypes.object
@@ -73,18 +72,14 @@ module.exports = React.createClass({
 
     return (
       <div tabIndex='2' className='UserNavigator'>
-        <button onClick={this.openPersonalSettingModal} className='userButton'>
+        <Link to='userHome' params={{userName: this.props.currentUser.name}} className='userProfile'>
           <ProfileImage size='55' email={this.props.currentUser.email}/>
-        </button>
+        </Link>
         <ul className='planetList'>
           {planets}
         </ul>
         <button onClick={this.openPlanetCreateModal} className='newPlanet'><i className='fa fa-plus'/></button>
 
-        <ModalBase isOpen={this.state.isPersonalSettingModalOpen} close={this.closePersonalSettingModal}>
-          <PersonalSettingModal currentUser={this.props.currentUser} close={this.closePersonalSettingModal}/>
-        </ModalBase>
-
         <ModalBase isOpen={this.state.isPlanetCreateModalOpen} close={this.closePlanetCreateModal}>
           <PlanetCreateModal close={this.closePlanetCreateModal}/>
         </ModalBase>

browser/main/Containers/PlanetContainer.jsx

@@ -13,6 +13,7 @@ var BlueprintEditModal = require('../Components/BlueprintEditModal')
 var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
 var PlanetAddUserModal = require('../Components/PlanetAddUserModal')
 var PlanetSettingModal = require('../Components/PlanetSettingModal')
+var PersonalSettingModal = require('../Components/PersonalSettingModal')
 
 var PlanetActions = require('../Actions/PlanetActions')
 
@@ -99,7 +100,13 @@ module.exports = React.createClass({
       currentUser: AuthStore.getUser(),
       currentPlanet: null,
       search: '',
-      isFetched: false
+      isFetched: false,
+      isLaunchModalOpen: false,
+      isEditModalOpen: false,
+      isDeleteModalOpen: false,
+      isAddUserModalOpen: false,
+      isSettingModalOpen: false,
+      isPersonalSettingModalOpen: false
     }
   },
   componentDidMount: function () {
@@ -448,6 +455,14 @@ module.exports = React.createClass({
       this.focus()
     })
   },
+  openPersonalSettingModal: function () {
+    this.setState({isPersonalSettingModalOpen: true})
+  },
+  closePersonalSettingModal: function () {
+    this.setState({isPersonalSettingModalOpen: false}, function () {
+      this.focus()
+    })
+  },
   focus: function () {
     React.findDOMNode(this).focus()
   },
@@ -484,6 +499,13 @@ module.exports = React.createClass({
       return
     }
 
+    if (this.state.isPersonalSettingModalOpen) {
+      if (e.keyCode === 27) {
+        this.closePersonalSettingModal()
+      }
+      return
+    }
+
     // LaunchModal
     if ((e.keyCode === 13 && e.metaKey)) {
       e.preventDefault()
@@ -604,8 +626,13 @@ module.exports = React.createClass({
           <PlanetSettingModal currentPlanet={this.state.currentPlanet} close={this.closeSettingModal}/>
         </ModalBase>
 
+        <ModalBase isOpen={this.state.isPersonalSettingModalOpen} close={this.closePersonalSettingModal}>
+          <PersonalSettingModal currentUser={this.state.currentUser} close={this.closePersonalSettingModal}/>
+        </ModalBase>
+
         <PlanetHeader search={this.state.search}
-          openSettingModal={this.openSettingModal} onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet}/>
+          openSettingModal={this.openSettingModal}
+          openPersonalSettingModal={this.openPersonalSettingModal} onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet}/>
 
         <PlanetNavigator openLaunchModal={this.openLaunchModal} openAddUserModal={this.openAddUserModal}
           search={this.state.search}

browser/styles/main/containers/UserContainer.styl

@@ -5,20 +5,22 @@
     width 55px
     text-align center
     box-sizing border-box
-    .userButton
+    border-right solid 1px borderColor
+    .userProfile
       display block
       width 55px
       height 55px
+      border-bottom solid 1px borderColor
+      overflow hidden
       background-color black
       margin 0
       padding 0
-      border none
       cursor pointer
       box-sizing border-box
       img
         transition 0.1s
         opacity 0.9
-      &.active, &:active, &.focus, &:focus, &.hover, &:hover
+      &.vivid.active, &.focus, &:focus, &.hover, &:hover
         img
           opacity 1
     ul.planetList>li

browser/styles/shared/modal.styl

@@ -231,6 +231,7 @@
           li
             margin 15px
       .logout
+        text-align center
         .logoutLabel
           margin 100px 0 25px
           font-size 1.4em