Skip to content

Commit 6140e93

Browse files
Rokt33rRokt33r
committed
add Logout modal & update PlanetHeader
1 parent 0f8eaaf commit 6140e93

4 files changed

Lines changed: 150 additions & 109 deletions

File tree

‎browser/main/Components/PlanetHeader.jsx‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,12 @@ var PlanetHeader = React.createClass({
88
},
99
getInitialState: function () {
1010
return {
11-
isMenuDropDownOpen: false,
1211
search: ''
1312
}
1413
},
1514
componentDidMount: function () {
1615
React.findDOMNode(this.refs.search).focus()
1716
},
18-
toggleMenuDropDown: function () {
19-
this.setState({isMenuDropDownOpen: !this.state.isMenuDropDownOpen}, function () {
20-
if (this.state.isMenuDropDownOpen) {
21-
document.body.onclick = function () {
22-
this.setState({isMenuDropDownOpen: false}, function () {
23-
document.body.onclick = null
24-
})
25-
}.bind(this)
26-
}
27-
})
28-
},
2917
interceptClick: function (e) {
3018
e.stopPropagation()
3119
},
@@ -40,23 +28,25 @@ var PlanetHeader = React.createClass({
4028
},
4129
render: function () {
4230
var currentPlanetName = this.props.currentPlanet.name
31+
var currentUserName = this.props.currentUser.name
4332

4433
return (
4534
<div onClick={this.interceptClick} className='PlanetHeader'>
46-
<span className='planetName'>{currentPlanetName}</span>
47-
<button onClick={this.toggleMenuDropDown} className={this.state.isMenuDropDownOpen ? 'menuBtn active' : 'menuBtn'}>
48-
<i className='fa fa-chevron-down'></i>
49-
</button>
50-
<div className={this.state.isMenuDropDownOpen ? 'dropDown' : 'dropDown hide'} ref='menuDropDown'>
51-
<a href='#'><i className='fa fa-wrench fa-fw'/> Planet Setting</a>
52-
<a href='#'><i className='fa fa-group fa-fw'/> Manage member</a>
53-
<a href='#'><i className='fa fa-trash fa-fw'/> Delete Planet</a>
35+
<div className='headerLabel'>
36+
<span className='userName'>{currentUserName}</span><br/>
37+
<span className='divider'>/</span>
38+
<span className='planetName'>{currentPlanetName}</span>
39+
<button className={'menuBtn'}>
40+
<i className='fa fa-gears'></i>
41+
</button>
42+
</div>
43+
<div className='headerControl'>
44+
<span className='searchInput'>
45+
<i className='fa fa-search'/>
46+
<input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
47+
</span>
48+
<a className='downloadButtton btn-primary'>Download Mac app</a>
5449
</div>
55-
<span className='searchInput'>
56-
<i className='fa fa-search'/>
57-
<input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
58-
</span>
59-
<a className='downloadButtton btn-primary'>Download Mac app</a>
6050
</div>
6151
)
6252
}

‎browser/main/Containers/PlanetContainer.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ module.exports = React.createClass({
250250
this.setState({isDeleteModalOpen: false})
251251
},
252252
handleKeyDown: function (e) {
253-
console.log(e.keyCode)
253+
// Bypath for modal open state
254254
if (this.state.isLaunchModalOpen) {
255255
if (e.keyCode === 27) this.closeLaunchModal()
256256
return
@@ -264,10 +264,13 @@ module.exports = React.createClass({
264264
return
265265
}
266266

267+
// LaunchModal
267268
if ((e.keyCode === 13 && e.metaKey)) {
268269
e.preventDefault()
269270
this.openLaunchModal()
270271
}
272+
273+
// Focus(blur) search input
271274
var searchInput = React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input')
272275

273276
if (document.activeElement === searchInput) {
@@ -287,6 +290,7 @@ module.exports = React.createClass({
287290
return
288291
}
289292

293+
// Article indexing
290294
if (document.activeElement !== searchInput) {
291295
switch (e.keyCode) {
292296
case 38:
@@ -302,6 +306,7 @@ module.exports = React.createClass({
302306
break
303307
}
304308

309+
// Other hotkeys
305310
switch (e.keyCode) {
306311
case 65:
307312
e.preventDefault()

‎browser/main/Containers/UserSettingContainer.jsx‎

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,51 @@
11
var React = require('react/addons')
22
var ReactRouter = require('react-router')
33

4+
var ModalBase = require('../Components/ModalBase')
5+
46
var AuthActions = require('../Actions/AuthActions')
57

6-
var currentUser = {
7-
name: 'testcat',
8-
email: 'testcat@example.com',
9-
profileName: 'Test Cat'
10-
}
8+
var AuthStore = require('../Stores/AuthStore')
9+
10+
var LogOutModal = React.createClass({
11+
propTypes: {
12+
close: React.PropTypes.func
13+
},
14+
componentDidMount: function () {
15+
React.findDOMNode(this.refs.cancel).focus()
16+
},
17+
submit: function () {
18+
AuthActions.logout()
19+
},
20+
handleKeyDown: function (e) {
21+
if (e.keyCode === 13 && e.metaKey) {
22+
this.submit()
23+
return
24+
}
25+
if (e.keyCode === 27) {
26+
this.props.close()
27+
return
28+
}
29+
},
30+
render: function () {
31+
return (
32+
<div onKeyDown={this.handleKeyDown} className='logOutModal modal'>
33+
<div className='modal-header'>
34+
<h1>Logout</h1>
35+
</div>
36+
<div className='modal-body'>
37+
<p>Are you sure to log out?</p>
38+
</div>
39+
<div className='modal-footer'>
40+
<div className='modal-control'>
41+
<button ref='cancel' onClick={this.props.close} className='btn-default'>Cancel</button>
42+
<button onClick={this.submit} className='btn-primary'>Logout</button>
43+
</div>
44+
</div>
45+
</div>
46+
)
47+
}
48+
})
1149

1250
var UserSettingNavigation = React.createClass({
1351
propTypes: {
@@ -17,13 +55,21 @@ var UserSettingNavigation = React.createClass({
1755
current: React.PropTypes.string,
1856
changeCurrent: React.PropTypes.func
1957
},
58+
getInitialState: function () {
59+
return {
60+
isLogOutModalOpen: false
61+
}
62+
},
2063
changeFactory: function (current) {
2164
return function () {
2265
this.props.changeCurrent(current)
2366
}.bind(this)
2467
},
25-
logOut: function () {
26-
AuthActions.logout()
68+
openLogOutModal: function () {
69+
this.setState({isLogOutModalOpen: true})
70+
},
71+
closeLogOutModal: function () {
72+
this.setState({isLogOutModalOpen: false})
2773
},
2874
render: function () {
2975
return (
@@ -34,8 +80,11 @@ var UserSettingNavigation = React.createClass({
3480
<a className={this.props.current === 'setting' ? 'active' : ''} onClick={this.changeFactory('setting')}><i className='fa fa-gears fa-fw'/> Setting</a>
3581
<a className={this.props.current === 'integration' ? 'active' : ''} onClick={this.changeFactory('integration')}><i className='fa fa-share-alt fa-fw'/> Integration</a>
3682
<a className={this.props.current === 'help' ? 'active' : ''} onClick={this.changeFactory('help')}><i className='fa fa-info-circle fa-fw'/> Help</a>
37-
<a onClick={this.logOut}><i className='fa fa-sign-out fa-fw'/> Logout</a>
83+
<a onClick={this.openLogOutModal}><i className='fa fa-sign-out fa-fw'/> Logout</a>
3884
</nav>
85+
<ModalBase close={this.closeLogOutModal} isOpen={this.state.isLogOutModalOpen}>
86+
<LogOutModal close={this.closeLogOutModal}/>
87+
</ModalBase>
3988
</div>
4089
)
4190
}
@@ -112,6 +161,8 @@ module.exports = React.createClass({
112161
})
113162
},
114163
render: function () {
164+
var currentUser = AuthStore.getUser()
165+
115166
return (
116167
<div className='UserSettingContainer'>
117168
<UserSettingNavigation currentUser={currentUser} current={this.state.current} changeCurrent={this.changeCurrent}/>

‎browser/styles/main/containers/PlanetContainer.styl‎

Lines changed: 70 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -20,86 +20,81 @@
2020
box-sizing border-box
2121
padding 5px 15px
2222
clearfix()
23-
.planetName
24-
line-height 30px
25-
font-size 2em
26-
color brandColor
27-
line-height 55px
28-
padding 0 20px
29-
.menuBtn
23+
.headerLabel
24+
absolute top left bottom
25+
overflow hidden
3026
display inline-block
31-
position relative
32-
top -5px
33-
font-size 0.8em
34-
color lightButtonColor
35-
border solid 1px lightButtonColor
36-
box-sizing border-box
37-
circle()
38-
background-image none
39-
background-color transparent
40-
width 30px
41-
height 30px
42-
text-align center
43-
cursor pointer
44-
transition 0.1s
45-
transform scale(0.8)
46-
&:focus, &.focus
47-
outline none
48-
&:hover, &.hover, &:focus, &.focus
49-
border-color darken(lightButtonColor, 50%)
50-
color darken(lightButtonColor, 50%)
51-
&:active, &.active
52-
border-color darken(brandBorderColor, 10%)
53-
background-color brandColor
54-
color white
55-
.searchInput
56-
display inline-block
57-
position relative
58-
top -3px
59-
margin-left 15px
60-
input
61-
padding-left 32px
62-
.fa
63-
position absolute
64-
top 7px
65-
left 10px
66-
.downloadButtton
67-
position relative
68-
float right
69-
top 5px
70-
padding 7px 25px
71-
box-sizing border-box
72-
line-height 30px
73-
font-size 1em
74-
border-radius 22px
75-
.dropDown
76-
z-index 500
77-
position fixed
78-
background white
7927
width 200px
80-
border solid 1px borderColor
81-
box-sizing border-box
82-
margin-top -5px
83-
margin-left 125px
84-
box-shadow popupShadow
85-
&.hide
86-
visibility hidden
87-
a
88-
color textColor
89-
display block
90-
width 100%
91-
padding 15px
28+
.userName
29+
position absolute
30+
left 15px
31+
top 5px
32+
font-size 1.2em
33+
color brandColor
34+
.divider
35+
position absolute
36+
top 25px
37+
left 15px
38+
font-size 2em
39+
.planetName
40+
position absolute
41+
top 28px
42+
left 30px
43+
width 130px
44+
font-size 1.5em
45+
color brandColor
46+
overflow-x hidden
47+
text-overflow ellipsis
48+
white-space nowrap
49+
.menuBtn
50+
position absolute
51+
top 10px
52+
right 0
53+
font-size 1em
54+
color lightButtonColor
55+
border none
9256
box-sizing border-box
93-
border-bottom solid 1px borderColor
94-
text-decoration none
95-
&:hover, &.hover
96-
background-color hoverBackgroundColor
57+
circle()
58+
background-image none
59+
background-color transparent
60+
width 44px
61+
height 44px
62+
text-align center
63+
cursor pointer
64+
transition 0.1s
65+
transform scale(0.8)
9766
&:focus, &.focus
98-
color black
67+
outline none
68+
&:hover, &.hover, &:focus, &.focus
69+
border-color darken(lightButtonColor, 50%)
70+
color darken(lightButtonColor, 50%)
9971
&:active, &.active
100-
color brandColor
101-
&:last-child
102-
border-bottom none
72+
border-color darken(brandBorderColor, 10%)
73+
background-color brandColor
74+
color white
75+
.headerControl
76+
absolute top bottom right
77+
left 200px
78+
.searchInput
79+
display block
80+
position absolute
81+
top 14px
82+
left 0
83+
input
84+
padding-left 32px
85+
.fa
86+
position absolute
87+
top 8px
88+
left 12px
89+
.downloadButtton
90+
position absolute
91+
right 5px
92+
top 10px
93+
padding 7px 25px
94+
box-sizing border-box
95+
line-height 25px
96+
font-size 1em
97+
border-radius 22px
10398

10499
.PlanetNavigator
105100
absolute bottom left

0 commit comments

Comments
 (0)