add PlanetSettingModal(Only visible things)

browser/main/Components/BlueprintForm.jsx

@@ -132,7 +132,7 @@ var BlueprintForm = React.createClass({
         <div className='modal-footer'>
             <button onClick={this.togglePreview} className='btn-default'>Toggle Preview</button>
           <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancle</button>
+            <button onClick={this.props.close} className='btn-default'>Cancel</button>
             <button onClick={this.submit} className='btn-primary'>Launch</button>
           </div>
         </div>

browser/main/Components/LaunchModal.jsx

@@ -9,7 +9,6 @@ var BlueprintForm = require('./BlueprintForm')
 var LaunchModal = React.createClass({
   mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
   propTypes: {
-    submit: React.PropTypes.func,
     close: React.PropTypes.func
   },
   getInitialState: function () {
@@ -39,13 +38,6 @@ var LaunchModal = React.createClass({
   selectBlueprintTab: function () {
     this.setState({currentTab: 'blueprint'})
   },
-  submit: function () {
-    if (this.state.currentTab === 'snippet') {
-      console.log(this.state.snippet)
-    } else {
-      console.log(this.state.blueprint)
-    }
-  },
   handleKeyDown: function (e) {
     if (e.keyCode === 37 && e.metaKey) {
       this.selectSnippetTab()

browser/main/Components/PlanetHeader.jsx

@@ -2,8 +2,8 @@ var React = require('react/addons')
 
 var PlanetHeader = React.createClass({
   propTypes: {
+    openSettingModal: React.PropTypes.func,
     currentPlanet: React.PropTypes.object,
-    currentUser: React.PropTypes.object,
     onSearchChange: React.PropTypes.func,
     search: React.PropTypes.string
   },
@@ -27,7 +27,7 @@ var PlanetHeader = React.createClass({
         <div className='headerLabel'>
           <span className='userName'>{currentUserName}</span><br/>
           <span className='planetName'>{currentPlanetName}</span>
-          <button className={'menuBtn'}>
+          <button onClick={this.props.openSettingModal} className={'menuBtn'}>
             <i className='fa fa-gears'></i>
           </button>
         </div>

browser/main/Components/PlanetNavigator.jsx

@@ -6,9 +6,6 @@ var PlanetNavigator = React.createClass({
       name: React.PropTypes.string,
       Users: React.PropTypes.array
     }),
-    currentUser: React.PropTypes.shape({
-      name: React.PropTypes.string
-    }),
     openLaunchModal: React.PropTypes.func,
     openAddUserModal: React.PropTypes.func
   },

browser/main/Components/PlanetSettingModal.jsx

@@ -0,0 +1,106 @@
+var React = require('react/addons')
+var Select = require('react-select')
+var Catalyst = require('../Mixins/Catalyst')
+
+module.exports = React.createClass({
+  mixins: [Catalyst.LinkedStateMixin],
+  propTypes: {
+    close: React.PropTypes.func,
+    currentPlanet: React.PropTypes.object
+  },
+  getInitialState: function () {
+    return {
+      currentTab: 'planetProfile',
+      planetName: this.props.currentPlanet.name,
+      isDeletePlanetChecked: false
+    }
+  },
+  activePlanetProfile: function () {
+    this.setState({currentTab: 'planetProfile'})
+
+  },
+  activeManageMember: function () {
+    this.setState({currentTab: 'manageMember'})
+  },
+  doubleCheckDeletePlanet: function () {
+    if (this.state.isDeletePlanetChecked) {
+      console.log('delete it')
+      return
+    }
+    this.setState({isDeletePlanetChecked: true})
+    React.findDOMNode(this.refs.deleteCancelButton).focus()
+  },
+  cancelDeletePlanet: function () {
+    this.setState({isDeletePlanetChecked: false})
+  },
+  interceptClick: function (e) {
+    e.stopPropagation()
+  },
+  render: function () {
+    var content
+    if (this.state.currentTab === 'planetProfile') {
+      content = (
+        <div className='planetProfile'>
+          <div className='planetProfileForm'>
+            <label>Planet name </label>
+            <input valueLink={this.linkState('planetName')} className='inline-input'/>
+            <button className='saveButton btn-primary'>Save</button>
+          </div>
+
+          <div className='planetDeleteForm'>
+            <div className='planetDeleteControl'>
+              <div className={'toggle' + (this.state.isDeletePlanetChecked ? '' : ' hide')}>
+                <div className='planetDeleteLabel'>Are you sure to delete this planet?</div>
+                <button ref='deleteCancelButton' onClick={this.cancelDeletePlanet} className='cancelButton btn-default'>Cancel</button>
+              </div>
+              <button onClick={this.doubleCheckDeletePlanet} className='deleteButton btn-primary'>{!this.state.isDeletePlanetChecked ? 'Delete Planet' : 'Confirm'}</button>
+            </div>
+          </div>
+        </div>
+      )
+    } else {
+      var members = this.props.currentPlanet.Users.map(function (user) {
+        return (
+          <li key={'user-' + user.id}>
+            <img className='userPhoto' width='44' height='44' src='../vendor/dummy.jpg'/>
+            <div className='userName'>{user.name}</div>
+            <div className='userControl'>
+              {this.props.currentPlanet.OwnerId !== user.id ? <button className='btn-default'>Delete</button> : <span className='ownerLabel'>Owner</span>}
+            </div>
+          </li>
+        )
+      }.bind(this))
+
+      content = (
+        <div className='manageMember'>
+          <ul className='userList'>
+            {members}
+          </ul>
+          <div className='addUserForm'>
+            <div className='addUserLabel'>Invite user</div>
+            <div className='addUserControl'>
+              <Select className='addUserSelect'/>
+              <button className='addUserSubmit btn-primary'>Invite</button>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div onClick={this.interceptClick} className='PlanetSettingModal modal'>
+        <div className='settingNav'>
+          <h1>Planet setting</h1>
+          <nav>
+            <button className={this.state.currentTab === 'planetProfile' ? 'active' : ''} onClick={this.activePlanetProfile}><i className='fa fa-globe'/> Planet profile</button>
+            <button className={this.state.currentTab === 'manageMember' ? 'active' : ''} onClick={this.activeManageMember}><i className='fa fa-group'/> Manage member</button>
+          </nav>
+        </div>
+
+        <div className='settingBody'>
+          {content}
+        </div>
+      </div>
+    )
+  }
+})

browser/main/Components/SnippetForm.jsx

@@ -121,7 +121,7 @@ var SnippetForm = React.createClass({
         </div>
         <div className='modal-footer'>
           <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancle</button>
+            <button onClick={this.props.close} className='btn-default'>Cancel</button>
             <button onClick={this.submit} className='btn-primary'>{this.props.snippet == null ? 'Launch' : 'Relaunch'}</button>
           </div>
         </div>

browser/main/Containers/PlanetContainer.jsx

@@ -12,6 +12,7 @@ var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
 var BlueprintEditModal = require('../Components/BlueprintEditModal')
 var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
 var PlanetAddUserModal = require('../Components/PlanetAddUserModal')
+var PlanetSettingModal = require('../Components/PlanetSettingModal')
 
 var PlanetActions = require('../Actions/PlanetActions')
 
@@ -248,9 +249,6 @@ module.exports = React.createClass({
   closeAddUserModal: function () {
     this.setState({isAddUserModalOpen: false})
   },
-  submitAddUserModal: function () {
-    this.setState({isAddUserModalOpen: false})
-  },
   openEditModal: function () {
     if (this.refs.detail.props.article == null) {return}
     this.setState({isEditModalOpen: true})
@@ -271,6 +269,12 @@ module.exports = React.createClass({
   submitDeleteModal: function () {
     this.setState({isDeleteModalOpen: false})
   },
+  openSettingModal: function () {
+    this.setState({isSettingModalOpen: true})
+  },
+  closeSettingModal: function () {
+    this.setState({isSettingModalOpen: false})
+  },
   focus: function () {
     React.findDOMNode(this).focus()
   },
@@ -407,7 +411,7 @@ module.exports = React.createClass({
     return (
       <div tabIndex='1' onKeyDown={this.handleKeyDown} className='PlanetContainer'>
         <ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
-          <LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
+          <LaunchModal close={this.closeLaunchModal}/>
         </ModalBase>
 
         <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
@@ -419,12 +423,17 @@ module.exports = React.createClass({
         </ModalBase>
 
         <ModalBase isOpen={this.state.isAddUserModalOpen} close={this.closeAddUserModal}>
-          <PlanetAddUserModal submit={this.submitAddUserModal} close={this.closeAddUserModal}/>
+          <PlanetAddUserModal close={this.closeAddUserModal}/>
         </ModalBase>
 
-        <PlanetHeader search={this.state.search} onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet} currentUser={user}/>
+        <ModalBase isOpen={this.state.isSettingModalOpen} close={this.closeSettingModal}>
+          <PlanetSettingModal currentPlanet={this.state.currentPlanet} close={this.closeSettingModal}/>
+        </ModalBase>
 
-        <PlanetNavigator openLaunchModal={this.openLaunchModal} openAddUserModal={this.openAddUserModal} currentPlanet={this.state.currentPlanet} currentUser={user}/>
+        <PlanetHeader search={this.state.search}
+          openSettingModal={this.openSettingModal} onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet}/>
+
+        <PlanetNavigator openLaunchModal={this.openLaunchModal} openAddUserModal={this.openAddUserModal} currentPlanet={this.state.currentPlanet}/>
 
         <PlanetArticleList ref='list' articles={filteredArticles}/>
 

browser/styles/mixins/btnStyle.styl

@@ -0,0 +1,25 @@
+btnDefault()
+  border-style solid
+  border-width 1px
+  border-color brandBorderColor
+  background-color transparent
+  color brandColor
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(brandBorderColor, 30%)
+    color darken(brandColor, 30%)
+  &:active, &.active
+    background-color brandColor
+    color white
+    
+btnPrimary()
+  border-style solid
+  border-width 1px
+  border-color brandBorderColor
+  background-color transparent
+  color brandColor
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(brandBorderColor, 30%)
+    color darken(brandColor, 30%)
+  &:active, &.active
+    background-color brandColor
+    color white

browser/styles/shared/modal.styl

@@ -105,15 +105,116 @@
       box-sizing border-box
       width 55px
       height 55px
-      border-style solid
-      border-width 1px
       circle()
-      border-color brandBorderColor
+      btnPrimary()
-      background-color transparent
+  .PlanetSettingModal.modal
-      color brandColor
+    width 720px
-      &:hover, &.hover, &:focus, &.focus
+    height 500px
-        border-color darken(brandBorderColor, 30%)
+    .settingNav
-        color darken(brandColor, 30%)
+      absolute top bottom left
-      &:active, &.active
+      width 200px
-        background-color brandColor
+      box-sizing border-box
-        color white
+      padding 10px
+      border-right solid 1px borderColor
+      h1
+        margin 40px 15px
+        font-size 1.5em
+        color brandColor
+      nav
+        button
+          font-size 1em
+          display block
+          box-sizing border-box
+          padding 15px 15px
+          margin 10px 0
+          border none
+          border-radius 10px
+          width 100%
+          text-align left
+          background-color transparent
+          color textColor
+          cursor pointer
+          transition 0.1s
+          &:hover, &.hover
+            background-color hoverBackgroundColor
+          &:active, &.active
+            color brandColor
+
+    .settingBody
+      absolute top bottom right
+      left 200px
+      padding 15px
+      .planetProfile
+        height 500px
+        padding-top 50px
+        .planetProfileForm
+          height 275px
+          box-sizing border-box
+          border-bottom solid 1px borderColor
+        .planetDeleteForm
+          height 225px
+          .planetDeleteControl
+            margin-top 15px
+            clearfix()
+            .toggle
+              float left
+              transition width 0.3s, color 0.1s, border-color 0.1s
+              overflow hidden
+              white-space nowrap
+              width 345px
+              height 44px
+              &.hide
+                width 0
+              .planetDeleteLabel
+                display inline-block
+                line-height 44px
+              .cancelButton
+                display inline-block
+                margin-left 15px
+                margin-right 0
+            .deleteButton
+              float left
+      .manageMember
+        height 500px
+        box-sizing border-box
+        padding-top 50px
+        .userList
+          height 275px
+          box-sizing border-box
+          border-bottom solid 1px borderColor
+          li
+            clearfix()
+            margin-bottom 10px
+            img.userPhoto
+              float left
+              width 44px
+              height 44px
+              circle()
+            .userName
+              float left
+              height 44px
+              font-size 1.3em
+              line-height 44px
+              margin-left 15px
+            .userControl
+              float right
+              height 44px
+              .ownerLabel
+                height 44px
+                padding 0 15px
+                line-height 44px
+        .addUserForm
+          height 225px
+          .addUserLabel
+            margin-top 15px
+            font-size 1.3em
+          .addUserControl
+            clearfix()
+            margin-top 15px
+            .addUserSelect
+              float left
+              height 44px
+              width 350px
+              margin-top 5px
+            .addUserSubmit
+              float right