Skip to content

Commit 472d79c

Browse files
Rokt33rRokt33r
committed
add ModalBase, LaunchModal & install Reflux
1 parent 27701bb commit 472d79c

18 files changed

Lines changed: 415 additions & 24 deletions

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"dependencies": {
44
"react": "~0.13.3",
55
"fontawesome": "~4.3.0",
6-
"react-router": "~0.13.3"
6+
"react-router": "~0.13.3",
7+
"reflux": "~0.2.8"
78
}
89
}

‎browser/main/Components/CodeEditor.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
var React = require('react/addons')
2+
3+
var ace = require('ace')
4+
var CodeEditor = React.createClass({
5+
propTypes: {
6+
code: React.PropTypes.string,
7+
mode: React.PropTypes.string,
8+
onChange: React.PropTypes.func
9+
},
10+
componentDidMount: function () {
11+
var el = React.findDOMNode(this.refs.target)
12+
var editor = ace.edit(el)
13+
editor.setValue(this.props.code)
14+
editor.$blockScrolling = Infinity
15+
editor.renderer.setShowGutter(true)
16+
editor.setTheme('ace/theme/xcode')
17+
18+
var session = editor.getSession()
19+
session.setMode('ace/mode/' + this.props.mode)
20+
session.setUseSoftTabs(true)
21+
session.setOption('useWorker', false)
22+
23+
session.on('change', function (e) {
24+
if (this.props.onChange != null) {
25+
var value = editor.getValue()
26+
this.props.onChange(e, value)
27+
}
28+
}.bind(this))
29+
30+
this.setState({editor: editor})
31+
},
32+
componentDidUpdate: function (prevProps) {
33+
if (this.state.editor.getValue() !== this.props.code) {
34+
this.state.editor.setValue(this.props.code)
35+
this.state.editor.clearSelection()
36+
}
37+
if (prevProps.mode !== this.props.mode) {
38+
this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
39+
}
40+
},
41+
render: function () {
42+
return (
43+
<div ref='target'></div>
44+
)
45+
}
46+
})
47+
48+
module.exports = CodeEditor

‎browser/main/Components/CodeViewer.jsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,24 @@ var CodeViewer = React.createClass({
1313
editor.$blockScrolling = Infinity
1414
editor.renderer.setShowGutter(false)
1515
editor.setReadOnly(true)
16+
editor.setTheme('ace/theme/xcode')
17+
editor.setHighlightActiveLine(false)
1618

1719
var session = editor.getSession()
1820
session.setMode('ace/mode/' + this.props.mode)
1921
session.setUseSoftTabs(true)
22+
session.setOption('useWorker', false)
2023

2124
this.setState({editor: editor})
2225
},
23-
componentDidUpdate: function () {
24-
this.state.editor.setValue(this.props.code)
25-
this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
26+
componentDidUpdate: function (prevProps) {
27+
if (this.state.editor.getValue() !== this.props.code) {
28+
this.state.editor.setValue(this.props.code)
29+
this.state.editor.clearSelection()
30+
}
31+
if (prevProps.mode !== this.props.mode) {
32+
this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
33+
}
2634
},
2735
render: function () {
2836
return (

‎browser/main/Components/LaunchModal.jsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
var React = require('react/addons')
2+
var CodeEditor = require('./CodeEditor')
3+
var Catalyst = require('../Mixins/Catalyst')
4+
5+
var Select = require('react-select')
6+
7+
// TODO: remove
8+
var options = [
9+
{ value: 'one', label: 'One' },
10+
{ value: 'two', label: 'Two' }
11+
]
12+
13+
var LaunchModal = React.createClass({
14+
mixins: [Catalyst.LinkedStateMixin],
15+
propTypes: {
16+
submit: React.PropTypes.func,
17+
close: React.PropTypes.func
18+
},
19+
getInitialState: function () {
20+
return {
21+
snippet: {
22+
description: '',
23+
mode: 'javascript',
24+
content: '',
25+
callSign: '',
26+
tags: []
27+
},
28+
blueprint: {
29+
title: '',
30+
content: '',
31+
tags: []
32+
},
33+
currentTab: 'snippet'
34+
}
35+
},
36+
handleClick: function (e) {
37+
e.stopPropagation()
38+
},
39+
selectSnippetTab: function () {
40+
this.setState({currentTab: 'snippet'})
41+
},
42+
selectBlueprintTab: function () {
43+
this.setState({currentTab: 'blueprint'})
44+
},
45+
handleSnippetTagsChange: function (selected, all) {
46+
var snippet = this.state.snippet
47+
snippet.tags = all
48+
this.setState({snippet: snippet})
49+
},
50+
handleSnippetContentChange: function (e, value) {
51+
var snippet = this.state.snippet
52+
snippet.content = value
53+
this.setState({snippet: snippet})
54+
},
55+
handleBlueprintTagsChange: function (selected, all) {
56+
var blueprint = this.state.blueprint
57+
blueprint.tags = all
58+
this.setState({blueprint: blueprint})
59+
},
60+
handleBlueprintContentChange: function (e, value) {
61+
var blueprint = this.state.blueprint
62+
blueprint.content = value
63+
this.setState({blueprint: blueprint})
64+
},
65+
submit: function () {
66+
// this.props.submit('yolo')
67+
if (this.state.currentTab === 'snippet') {
68+
console.log(this.state.snippet)
69+
} else {
70+
console.log(this.state.blueprint)
71+
}
72+
},
73+
render: function () {
74+
var form
75+
if (this.state.currentTab === 'snippet') {
76+
form = (
77+
<div>
78+
<div className='form-group'>
79+
<textarea className='block-input' valueLink={this.linkState('snippet.description')} placeholder='Description'/>
80+
</div>
81+
<div className='form-group'>
82+
<input className='inline-input' valueLink={this.linkState('snippet.callSign')} type='text' placeholder='Callsign'/>
83+
<select className='inline-input' valueLink={this.linkState('snippet.mode')}>
84+
<option value='javascript'>Javascript</option>
85+
<option value='html'>HTML</option>
86+
<option value='css'>CSS</option>
87+
</select>
88+
</div>
89+
<div className='form-group'>
90+
<CodeEditor onChange={this.handleSnippetContentChange} code={this.state.snippet.content} mode={this.state.snippet.mode}/>
91+
</div>
92+
<div className='form-group'>
93+
<Select
94+
name='tags'
95+
multi={true}
96+
allowCreate={true}
97+
value={this.state.snippet.tags}
98+
placeholder='Tags...'
99+
options={options}
100+
onChange={this.handleSnippetTagsChange}
101+
/>
102+
</div>
103+
</div>
104+
)
105+
} else {
106+
form = (
107+
<div>
108+
<div className='form-group'>
109+
<input className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
110+
</div>
111+
<div className='form-group'>
112+
<CodeEditor onChange={this.handleBlueprintContentChange} code={this.state.blueprint.content} mode={'markdown'}/>
113+
</div>
114+
<div className='form-group'>
115+
<Select
116+
name='tags'
117+
multi={true}
118+
allowCreate={true}
119+
value={this.state.blueprint.tags}
120+
placeholder='Tags...'
121+
options={options}
122+
onChange={this.handleBlueprintTagsChange}
123+
/>
124+
</div>
125+
</div>
126+
)
127+
}
128+
129+
return (
130+
<div onClick={this.handleClick} className='modal launch-modal'>
131+
<div className='modal-body'>
132+
<div className='modal-tab form-group'>
133+
<button className={this.state.currentTab === 'snippet' ? 'btn-primary active' : 'btn-default'} onClick={this.selectSnippetTab}>Snippet</button> <button className={this.state.currentTab === 'blueprint' ? 'btn-primary active' : 'btn-default'} onClick={this.selectBlueprintTab}>Blueprint</button>
134+
</div>
135+
{form}
136+
</div>
137+
<div className='modal-footer'>
138+
<div className='modal-control'>
139+
<button onClick={this.props.close} className='btn-default'>Cancle</button>
140+
<button onClick={this.submit} className='btn-primary'>Launch</button>
141+
</div>
142+
</div>
143+
</div>
144+
)
145+
}
146+
})
147+
148+
module.exports = LaunchModal

‎browser/main/Components/ModalBase.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
var React = require('react/addons')
2+
3+
var ModalBase = React.createClass({
4+
propTypes: {
5+
isOpen: React.PropTypes.bool,
6+
children: React.PropTypes.element,
7+
close: React.PropTypes.func
8+
},
9+
render: function () {
10+
if (this.props.isOpen) {
11+
return (
12+
<div onClick={this.props.close} className='ModalBase'>
13+
{this.props.children}
14+
</div>
15+
)
16+
}
17+
return (
18+
<div className='Modal hide'></div>
19+
)
20+
}
21+
})
22+
23+
module.exports = ModalBase

‎browser/main/Components/ModeSelect.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var React = require('react/addons')
2+
3+
var ModeSelect = React.createClass({
4+
5+
})
6+
7+
module.exports = ModeSelect

‎browser/main/Containers/LoginContainer.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ module.exports = React.createClass({
2828
<form onSubmit={this.handleSubmit}>
2929
<div className='form-group'>
3030
<label>E-mail</label>
31-
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
31+
<input className='block-input' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
3232
</div>
3333
<div className='form-group'>
3434
<label>Password</label>
35-
<input valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
35+
<input className='block-input' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
3636
</div>
3737
<div className='form-group'>
3838
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Login</button>

‎browser/main/Containers/PlanetContainer.jsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ var React = require('react/addons')
22
var RouteHandler = require('react-router').RouteHandler
33
var ReactRouter = require('react-router')
44
var Link = ReactRouter.Link
5+
var ModalBase = require('../Components/ModalBase')
6+
var LaunchModal = require('../Components/LaunchModal')
57

68
var userPlanets = [
79
{
@@ -62,6 +64,22 @@ var SideNavigator = React.createClass({
6264
name: React.PropTypes.string
6365
})
6466
},
67+
getInitialState: function () {
68+
return {
69+
isLaunchModalOpen: false
70+
}
71+
},
72+
openLaunchModal: function () {
73+
console.log('and...OPEN!!')
74+
this.setState({isLaunchModalOpen: true})
75+
},
76+
closeLaunchModal: function () {
77+
this.setState({isLaunchModalOpen: false})
78+
},
79+
submitLaunchModal: function (ret) {
80+
console.log(ret)
81+
this.setState({isLaunchModalOpen: false})
82+
},
6583
render: function () {
6684
var currentPlanetName = this.props.currentPlanet.name
6785

@@ -73,9 +91,12 @@ var SideNavigator = React.createClass({
7391
<i className='fa fa-chevron-down'></i>
7492
</button>
7593
</div>
76-
<button className='btn-primary btn-block'>
94+
<button onClick={this.openLaunchModal} className='btn-primary btn-block'>
7795
<i className='fa fa-rocket fa-fw'/> Launch
7896
</button>
97+
<ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
98+
<LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
99+
</ModalBase>
79100
<nav>
80101
<Link to='dashboard' params={{planetName: currentPlanetName}}>
81102
<i className='fa fa-home fa-fw'/> Home

‎browser/main/Containers/RegisterContainer.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,20 @@ module.exports = React.createClass({
3030
<form onSubmit={this.handleSubmit}>
3131
<div className='form-group'>
3232
<label>E-mail</label>
33-
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
33+
<input className='block-input' valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
3434
</div>
3535
<div className='form-group'>
3636
<label>Password</label>
37-
<input valueLink={this.linkState('password')} type='password' placeholder='Password'/>
37+
<input className='block-input' valueLink={this.linkState('password')} type='password' placeholder='Password'/>
3838
</div>
3939
<hr></hr>
4040
<div className='form-group'>
4141
<label>User name</label>
42-
<input valueLink={this.linkState('name')} type='text' placeholder='name'/>
42+
<input className='block-input' valueLink={this.linkState('name')} type='text' placeholder='name'/>
4343
</div>
4444
<div className='form-group'>
4545
<label>Profile name</label>
46-
<input valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
46+
<input className='block-input' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
4747
</div>
4848
<div className='form-group'>
4949
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Register</button>

0 commit comments

Comments
 (0)