Skip to content

Commit cdf6ed4

Browse files
Rokt33rRokt33r
committed
add PlanetSettingModal(Only visible things)
1 parent c31432f commit cdf6ed4

9 files changed

Lines changed: 263 additions & 33 deletions

File tree

‎browser/main/Components/BlueprintForm.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ var BlueprintForm = React.createClass({
132132
<div className='modal-footer'>
133133
<button onClick={this.togglePreview} className='btn-default'>Toggle Preview</button>
134134
<div className='modal-control'>
135-
<button onClick={this.props.close} className='btn-default'>Cancle</button>
135+
<button onClick={this.props.close} className='btn-default'>Cancel</button>
136136
<button onClick={this.submit} className='btn-primary'>Launch</button>
137137
</div>
138138
</div>

‎browser/main/Components/LaunchModal.jsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ var BlueprintForm = require('./BlueprintForm')
99
var LaunchModal = React.createClass({
1010
mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
1111
propTypes: {
12-
submit: React.PropTypes.func,
1312
close: React.PropTypes.func
1413
},
1514
getInitialState: function () {
@@ -39,13 +38,6 @@ var LaunchModal = React.createClass({
3938
selectBlueprintTab: function () {
4039
this.setState({currentTab: 'blueprint'})
4140
},
42-
submit: function () {
43-
if (this.state.currentTab === 'snippet') {
44-
console.log(this.state.snippet)
45-
} else {
46-
console.log(this.state.blueprint)
47-
}
48-
},
4941
handleKeyDown: function (e) {
5042
if (e.keyCode === 37 && e.metaKey) {
5143
this.selectSnippetTab()

‎browser/main/Components/PlanetHeader.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ var React = require('react/addons')
22

33
var PlanetHeader = React.createClass({
44
propTypes: {
5+
openSettingModal: React.PropTypes.func,
56
currentPlanet: React.PropTypes.object,
6-
currentUser: React.PropTypes.object,
77
onSearchChange: React.PropTypes.func,
88
search: React.PropTypes.string
99
},
@@ -27,7 +27,7 @@ var PlanetHeader = React.createClass({
2727
<div className='headerLabel'>
2828
<span className='userName'>{currentUserName}</span><br/>
2929
<span className='planetName'>{currentPlanetName}</span>
30-
<button className={'menuBtn'}>
30+
<button onClick={this.props.openSettingModal} className={'menuBtn'}>
3131
<i className='fa fa-gears'></i>
3232
</button>
3333
</div>

‎browser/main/Components/PlanetNavigator.jsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ var PlanetNavigator = React.createClass({
66
name: React.PropTypes.string,
77
Users: React.PropTypes.array
88
}),
9-
currentUser: React.PropTypes.shape({
10-
name: React.PropTypes.string
11-
}),
129
openLaunchModal: React.PropTypes.func,
1310
openAddUserModal: React.PropTypes.func
1411
},

‎browser/main/Components/PlanetSettingModal.jsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
var React = require('react/addons')
2+
var Select = require('react-select')
3+
var Catalyst = require('../Mixins/Catalyst')
4+
5+
module.exports = React.createClass({
6+
mixins: [Catalyst.LinkedStateMixin],
7+
propTypes: {
8+
close: React.PropTypes.func,
9+
currentPlanet: React.PropTypes.object
10+
},
11+
getInitialState: function () {
12+
return {
13+
currentTab: 'planetProfile',
14+
planetName: this.props.currentPlanet.name,
15+
isDeletePlanetChecked: false
16+
}
17+
},
18+
activePlanetProfile: function () {
19+
this.setState({currentTab: 'planetProfile'})
20+
21+
},
22+
activeManageMember: function () {
23+
this.setState({currentTab: 'manageMember'})
24+
},
25+
doubleCheckDeletePlanet: function () {
26+
if (this.state.isDeletePlanetChecked) {
27+
console.log('delete it')
28+
return
29+
}
30+
this.setState({isDeletePlanetChecked: true})
31+
React.findDOMNode(this.refs.deleteCancelButton).focus()
32+
},
33+
cancelDeletePlanet: function () {
34+
this.setState({isDeletePlanetChecked: false})
35+
},
36+
interceptClick: function (e) {
37+
e.stopPropagation()
38+
},
39+
render: function () {
40+
var content
41+
if (this.state.currentTab === 'planetProfile') {
42+
content = (
43+
<div className='planetProfile'>
44+
<div className='planetProfileForm'>
45+
<label>Planet name </label>
46+
<input valueLink={this.linkState('planetName')} className='inline-input'/>
47+
<button className='saveButton btn-primary'>Save</button>
48+
</div>
49+
50+
<div className='planetDeleteForm'>
51+
<div className='planetDeleteControl'>
52+
<div className={'toggle' + (this.state.isDeletePlanetChecked ? '' : ' hide')}>
53+
<div className='planetDeleteLabel'>Are you sure to delete this planet?</div>
54+
<button ref='deleteCancelButton' onClick={this.cancelDeletePlanet} className='cancelButton btn-default'>Cancel</button>
55+
</div>
56+
<button onClick={this.doubleCheckDeletePlanet} className='deleteButton btn-primary'>{!this.state.isDeletePlanetChecked ? 'Delete Planet' : 'Confirm'}</button>
57+
</div>
58+
</div>
59+
</div>
60+
)
61+
} else {
62+
var members = this.props.currentPlanet.Users.map(function (user) {
63+
return (
64+
<li key={'user-' + user.id}>
65+
<img className='userPhoto' width='44' height='44' src='../vendor/dummy.jpg'/>
66+
<div className='userName'>{user.name}</div>
67+
<div className='userControl'>
68+
{this.props.currentPlanet.OwnerId !== user.id ? <button className='btn-default'>Delete</button> : <span className='ownerLabel'>Owner</span>}
69+
</div>
70+
</li>
71+
)
72+
}.bind(this))
73+
74+
content = (
75+
<div className='manageMember'>
76+
<ul className='userList'>
77+
{members}
78+
</ul>
79+
<div className='addUserForm'>
80+
<div className='addUserLabel'>Invite user</div>
81+
<div className='addUserControl'>
82+
<Select className='addUserSelect'/>
83+
<button className='addUserSubmit btn-primary'>Invite</button>
84+
</div>
85+
</div>
86+
</div>
87+
)
88+
}
89+
90+
return (
91+
<div onClick={this.interceptClick} className='PlanetSettingModal modal'>
92+
<div className='settingNav'>
93+
<h1>Planet setting</h1>
94+
<nav>
95+
<button className={this.state.currentTab === 'planetProfile' ? 'active' : ''} onClick={this.activePlanetProfile}><i className='fa fa-globe'/> Planet profile</button>
96+
<button className={this.state.currentTab === 'manageMember' ? 'active' : ''} onClick={this.activeManageMember}><i className='fa fa-group'/> Manage member</button>
97+
</nav>
98+
</div>
99+
100+
<div className='settingBody'>
101+
{content}
102+
</div>
103+
</div>
104+
)
105+
}
106+
})

‎browser/main/Components/SnippetForm.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ var SnippetForm = React.createClass({
121121
</div>
122122
<div className='modal-footer'>
123123
<div className='modal-control'>
124-
<button onClick={this.props.close} className='btn-default'>Cancle</button>
124+
<button onClick={this.props.close} className='btn-default'>Cancel</button>
125125
<button onClick={this.submit} className='btn-primary'>{this.props.snippet == null ? 'Launch' : 'Relaunch'}</button>
126126
</div>
127127
</div>

‎browser/main/Containers/PlanetContainer.jsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
1212
var BlueprintEditModal = require('../Components/BlueprintEditModal')
1313
var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')
1414
var PlanetAddUserModal = require('../Components/PlanetAddUserModal')
15+
var PlanetSettingModal = require('../Components/PlanetSettingModal')
1516

1617
var PlanetActions = require('../Actions/PlanetActions')
1718

@@ -248,9 +249,6 @@ module.exports = React.createClass({
248249
closeAddUserModal: function () {
249250
this.setState({isAddUserModalOpen: false})
250251
},
251-
submitAddUserModal: function () {
252-
this.setState({isAddUserModalOpen: false})
253-
},
254252
openEditModal: function () {
255253
if (this.refs.detail.props.article == null) {return}
256254
this.setState({isEditModalOpen: true})
@@ -271,6 +269,12 @@ module.exports = React.createClass({
271269
submitDeleteModal: function () {
272270
this.setState({isDeleteModalOpen: false})
273271
},
272+
openSettingModal: function () {
273+
this.setState({isSettingModalOpen: true})
274+
},
275+
closeSettingModal: function () {
276+
this.setState({isSettingModalOpen: false})
277+
},
274278
focus: function () {
275279
React.findDOMNode(this).focus()
276280
},
@@ -407,7 +411,7 @@ module.exports = React.createClass({
407411
return (
408412
<div tabIndex='1' onKeyDown={this.handleKeyDown} className='PlanetContainer'>
409413
<ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
410-
<LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
414+
<LaunchModal close={this.closeLaunchModal}/>
411415
</ModalBase>
412416

413417
<ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
@@ -419,12 +423,17 @@ module.exports = React.createClass({
419423
</ModalBase>
420424

421425
<ModalBase isOpen={this.state.isAddUserModalOpen} close={this.closeAddUserModal}>
422-
<PlanetAddUserModal submit={this.submitAddUserModal} close={this.closeAddUserModal}/>
426+
<PlanetAddUserModal close={this.closeAddUserModal}/>
427+
</ModalBase>
428+
429+
<ModalBase isOpen={this.state.isSettingModalOpen} close={this.closeSettingModal}>
430+
<PlanetSettingModal currentPlanet={this.state.currentPlanet} close={this.closeSettingModal}/>
423431
</ModalBase>
424432

425-
<PlanetHeader search={this.state.search} onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet} currentUser={user}/>
433+
<PlanetHeader search={this.state.search}
434+
openSettingModal={this.openSettingModal} onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet}/>
426435

427-
<PlanetNavigator openLaunchModal={this.openLaunchModal} openAddUserModal={this.openAddUserModal} currentPlanet={this.state.currentPlanet} currentUser={user}/>
436+
<PlanetNavigator openLaunchModal={this.openLaunchModal} openAddUserModal={this.openAddUserModal} currentPlanet={this.state.currentPlanet}/>
428437

429438
<PlanetArticleList ref='list' articles={filteredArticles}/>
430439

‎browser/styles/mixins/btnStyle.styl‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
btnDefault()
2+
border-style solid
3+
border-width 1px
4+
border-color brandBorderColor
5+
background-color transparent
6+
color brandColor
7+
&:hover, &.hover, &:focus, &.focus
8+
border-color darken(brandBorderColor, 30%)
9+
color darken(brandColor, 30%)
10+
&:active, &.active
11+
background-color brandColor
12+
color white
13+
14+
btnPrimary()
15+
border-style solid
16+
border-width 1px
17+
border-color brandBorderColor
18+
background-color transparent
19+
color brandColor
20+
&:hover, &.hover, &:focus, &.focus
21+
border-color darken(brandBorderColor, 30%)
22+
color darken(brandColor, 30%)
23+
&:active, &.active
24+
background-color brandColor
25+
color white

‎browser/styles/shared/modal.styl‎

Lines changed: 112 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,116 @@
105105
box-sizing border-box
106106
width 55px
107107
height 55px
108-
border-style solid
109-
border-width 1px
110108
circle()
111-
border-color brandBorderColor
112-
background-color transparent
113-
color brandColor
114-
&:hover, &.hover, &:focus, &.focus
115-
border-color darken(brandBorderColor, 30%)
116-
color darken(brandColor, 30%)
117-
&:active, &.active
118-
background-color brandColor
119-
color white
109+
btnPrimary()
110+
.PlanetSettingModal.modal
111+
width 720px
112+
height 500px
113+
.settingNav
114+
absolute top bottom left
115+
width 200px
116+
box-sizing border-box
117+
padding 10px
118+
border-right solid 1px borderColor
119+
h1
120+
margin 40px 15px
121+
font-size 1.5em
122+
color brandColor
123+
nav
124+
button
125+
font-size 1em
126+
display block
127+
box-sizing border-box
128+
padding 15px 15px
129+
margin 10px 0
130+
border none
131+
border-radius 10px
132+
width 100%
133+
text-align left
134+
background-color transparent
135+
color textColor
136+
cursor pointer
137+
transition 0.1s
138+
&:hover, &.hover
139+
background-color hoverBackgroundColor
140+
&:active, &.active
141+
color brandColor
142+
143+
.settingBody
144+
absolute top bottom right
145+
left 200px
146+
padding 15px
147+
.planetProfile
148+
height 500px
149+
padding-top 50px
150+
.planetProfileForm
151+
height 275px
152+
box-sizing border-box
153+
border-bottom solid 1px borderColor
154+
.planetDeleteForm
155+
height 225px
156+
.planetDeleteControl
157+
margin-top 15px
158+
clearfix()
159+
.toggle
160+
float left
161+
transition width 0.3s, color 0.1s, border-color 0.1s
162+
overflow hidden
163+
white-space nowrap
164+
width 345px
165+
height 44px
166+
&.hide
167+
width 0
168+
.planetDeleteLabel
169+
display inline-block
170+
line-height 44px
171+
.cancelButton
172+
display inline-block
173+
margin-left 15px
174+
margin-right 0
175+
.deleteButton
176+
float left
177+
.manageMember
178+
height 500px
179+
box-sizing border-box
180+
padding-top 50px
181+
.userList
182+
height 275px
183+
box-sizing border-box
184+
border-bottom solid 1px borderColor
185+
li
186+
clearfix()
187+
margin-bottom 10px
188+
img.userPhoto
189+
float left
190+
width 44px
191+
height 44px
192+
circle()
193+
.userName
194+
float left
195+
height 44px
196+
font-size 1.3em
197+
line-height 44px
198+
margin-left 15px
199+
.userControl
200+
float right
201+
height 44px
202+
.ownerLabel
203+
height 44px
204+
padding 0 15px
205+
line-height 44px
206+
.addUserForm
207+
height 225px
208+
.addUserLabel
209+
margin-top 15px
210+
font-size 1.3em
211+
.addUserControl
212+
clearfix()
213+
margin-top 15px
214+
.addUserSelect
215+
float left
216+
height 44px
217+
width 350px
218+
margin-top 5px
219+
.addUserSubmit
220+
float right

0 commit comments

Comments
 (0)