public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-15 18:56:22 +00:00
Code Issues Releases Wiki Activity

add Logout modal & update PlanetHeader

Browse Source
This commit is contained in:
Rokt33r
2015-07-20 01:12:45 +09:00
parent 0f8eaaf750
commit 6140e93cc8
4 changed files with 150 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
browser/main/Components/PlanetHeader.jsx
View File

@@ -8,24 +8,12 @@ var PlanetHeader = React.createClass({
},
getInitialState: function () {
return {
isMenuDropDownOpen: false,
search: ''
}
},
componentDidMount: function () {
React.findDOMNode(this.refs.search).focus()
},
toggleMenuDropDown: function () {
this.setState({isMenuDropDownOpen: !this.state.isMenuDropDownOpen}, function () {
if (this.state.isMenuDropDownOpen) {
document.body.onclick = function () {
this.setState({isMenuDropDownOpen: false}, function () {
document.body.onclick = null
})
}.bind(this)
}
})
},
interceptClick: function (e) {
e.stopPropagation()
},
@@ -40,23 +28,25 @@ var PlanetHeader = React.createClass({
},
render: function () {
var currentPlanetName = this.props.currentPlanet.name
var currentUserName = this.props.currentUser.name
return (
<div onClick={this.interceptClick} className='PlanetHeader'>
<span className='planetName'>{currentPlanetName}</span>
<button onClick={this.toggleMenuDropDown} className={this.state.isMenuDropDownOpen ? 'menuBtn active' : 'menuBtn'}>
<i className='fa fa-chevron-down'></i>
</button>
<div className={this.state.isMenuDropDownOpen ? 'dropDown' : 'dropDown hide'} ref='menuDropDown'>
<a href='#'><i className='fa fa-wrench fa-fw'/> Planet Setting</a>
<a href='#'><i className='fa fa-group fa-fw'/> Manage member</a>
<a href='#'><i className='fa fa-trash fa-fw'/> Delete Planet</a>
<div className='headerLabel'>
<span className='userName'>{currentUserName}</span><br/>
<span className='divider'>/</span>
<span className='planetName'>{currentPlanetName}</span>
<button className={'menuBtn'}>
<i className='fa fa-gears'></i>
</button>
</div>
<div className='headerControl'>
<span className='searchInput'>
<i className='fa fa-search'/>
<input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
</span>
<a className='downloadButtton btn-primary'>Download Mac app</a>
</div>
<span className='searchInput'>
<i className='fa fa-search'/>
<input onKeyDown={this.handleKeyDown} onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
</span>
<a className='downloadButtton btn-primary'>Download Mac app</a>
</div>
)
}