mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
add ModalBase, LaunchModal & install Reflux
This commit is contained in:
@@ -28,11 +28,11 @@ module.exports = React.createClass({
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<label>E-mail</label>
|
||||
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
|
||||
<input className='block-input' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<label>Password</label>
|
||||
<input valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
|
||||
<input className='block-input' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Login</button>
|
||||
|
||||
@@ -2,6 +2,8 @@ var React = require('react/addons')
|
||||
var RouteHandler = require('react-router').RouteHandler
|
||||
var ReactRouter = require('react-router')
|
||||
var Link = ReactRouter.Link
|
||||
var ModalBase = require('../Components/ModalBase')
|
||||
var LaunchModal = require('../Components/LaunchModal')
|
||||
|
||||
var userPlanets = [
|
||||
{
|
||||
@@ -62,6 +64,22 @@ var SideNavigator = React.createClass({
|
||||
name: React.PropTypes.string
|
||||
})
|
||||
},
|
||||
getInitialState: function () {
|
||||
return {
|
||||
isLaunchModalOpen: false
|
||||
}
|
||||
},
|
||||
openLaunchModal: function () {
|
||||
console.log('and...OPEN!!')
|
||||
this.setState({isLaunchModalOpen: true})
|
||||
},
|
||||
closeLaunchModal: function () {
|
||||
this.setState({isLaunchModalOpen: false})
|
||||
},
|
||||
submitLaunchModal: function (ret) {
|
||||
console.log(ret)
|
||||
this.setState({isLaunchModalOpen: false})
|
||||
},
|
||||
render: function () {
|
||||
var currentPlanetName = this.props.currentPlanet.name
|
||||
|
||||
@@ -73,9 +91,12 @@ var SideNavigator = React.createClass({
|
||||
<i className='fa fa-chevron-down'></i>
|
||||
</button>
|
||||
</div>
|
||||
<button className='btn-primary btn-block'>
|
||||
<button onClick={this.openLaunchModal} className='btn-primary btn-block'>
|
||||
<i className='fa fa-rocket fa-fw'/> Launch
|
||||
</button>
|
||||
<ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
|
||||
<LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
|
||||
</ModalBase>
|
||||
<nav>
|
||||
<Link to='dashboard' params={{planetName: currentPlanetName}}>
|
||||
<i className='fa fa-home fa-fw'/> Home
|
||||
|
||||
@@ -30,20 +30,20 @@ module.exports = React.createClass({
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<label>E-mail</label>
|
||||
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
|
||||
<input className='block-input' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<label>Password</label>
|
||||
<input valueLink={this.linkState('password')} type='password' placeholder='Password'/>
|
||||
<input className='block-input' valueLink={this.linkState('password')} type='password' placeholder='Password'/>
|
||||
</div>
|
||||
<hr></hr>
|
||||
<div className='form-group'>
|
||||
<label>User name</label>
|
||||
<input valueLink={this.linkState('name')} type='text' placeholder='name'/>
|
||||
<input className='block-input' valueLink={this.linkState('name')} type='text' placeholder='name'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<label>Profile name</label>
|
||||
<input valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
|
||||
<input className='block-input' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Register</button>
|
||||
|
||||
@@ -32,7 +32,7 @@ var SnippetList = React.createClass({
|
||||
|
||||
return (
|
||||
<div className='SnippetList'>
|
||||
<div className='search form-group'><input type='text' placeholder='Search...'/></div>
|
||||
<div className='search'><input className='block-input' type='text' placeholder='Search...'/></div>
|
||||
<ul>
|
||||
{snippets}
|
||||
</ul>
|
||||
@@ -106,10 +106,58 @@ var SnippetContainer = React.createClass({
|
||||
selectSnippet: function (snippet) {
|
||||
this.setState({currentSnippet: snippet})
|
||||
},
|
||||
updateSnippet: function (snippet) {
|
||||
var snippets = this.state.snippets.map(function (_snippet) {
|
||||
if (snippet.id === _snippet.id) {
|
||||
return snippet
|
||||
}
|
||||
return _snippet
|
||||
})
|
||||
var currentSnippet = this.state.currentSnippet.id === snippet.id ? snippet : this.state.currentSnippet
|
||||
|
||||
this.setState({snippets: snippets, currentSnippet: currentSnippet})
|
||||
},
|
||||
destroySnippet: function (snippet) {
|
||||
var snippets = this.state.snippets
|
||||
var currentSnippet = this.state.currentSnippet
|
||||
if (currentSnippet.id === snippet.id) {
|
||||
var index
|
||||
snippets.some(function (_snippet, _index) {
|
||||
if (snippet.id === _snippet.id) {
|
||||
index = _index
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
if (index == null) {
|
||||
index = 0
|
||||
} else if (index > snippet.length - 1) {
|
||||
index--
|
||||
} else {
|
||||
index++
|
||||
}
|
||||
|
||||
if (snippets.length > 0) {
|
||||
currentSnippet = snippets[index]
|
||||
} else {
|
||||
currentSnippet = {}
|
||||
}
|
||||
}
|
||||
|
||||
snippets = snippets.filter(function (_snippet, index) {
|
||||
if (snippet.id === _snippet.id) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
this.setState({snippets: snippets, currentSnippet: currentSnippet})
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='SnippetContainer'>
|
||||
<SnippetList selectSnippet={this.selectSnippet} snippets={this.state.snippets}/>
|
||||
<SnippetList selectSnippet={this.selectSnippet} snippets={this.state.snippets} currentSnippet={this.state.currentSnippet}/>
|
||||
<SnippetViewer snippet={this.state.currentSnippet}/>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user