Skip to content

Commit 863de33

Browse files
Rokt33rRokt33r
committed
extract SnippetForm component & add focsuing after form loaded & enhance CSS of Article focusing effect in
1 parent f56dd10 commit 863de33

5 files changed

Lines changed: 130 additions & 104 deletions

File tree

‎browser/main/Components/LaunchModal.jsx‎

Lines changed: 6 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -5,92 +5,15 @@ var Catalyst = require('../Mixins/Catalyst')
55

66
var Select = require('react-select')
77

8-
var PlanetActions = require('../Actions/PlanetActions')
98
var PlanetStore = require('../Stores/PlanetStore')
109

11-
// TODO: remove
10+
var SnippetForm = require('./SnippetForm')
11+
1212
var options = [
1313
{ value: 'one', label: 'One' },
1414
{ value: 'two', label: 'Two' }
1515
]
1616

17-
var SnippetForm = React.createClass({
18-
mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
19-
propTypes: {
20-
close: React.PropTypes.func
21-
},
22-
getInitialState: function () {
23-
return {
24-
snippet: {
25-
description: '',
26-
mode: 'javascript',
27-
content: '',
28-
callSign: '',
29-
Tags: []
30-
}
31-
}
32-
},
33-
handleSnippetTagsChange: function (selected, all) {
34-
var snippet = this.state.snippet
35-
snippet.Tags = all
36-
this.setState({snippet: snippet})
37-
},
38-
handleSnippetContentChange: function (e, value) {
39-
var snippet = this.state.snippet
40-
snippet.content = value
41-
this.setState({snippet: snippet})
42-
},
43-
submit: function () {
44-
var params = this.getParams()
45-
var userName = params.userName
46-
var planetName = params.planetName
47-
var snippet = Object.assign({}, this.state.snippet)
48-
snippet.Tags = snippet.Tags.map(function (tag) {
49-
return tag.value
50-
})
51-
PlanetActions.createSnippet(userName + '/' + planetName, snippet)
52-
},
53-
render: function () {
54-
return (
55-
<div className='SnippetForm'>
56-
<div className='modal-body'>
57-
<div className='form-group'>
58-
<textarea className='snippetDescription block-input' valueLink={this.linkState('snippet.description')} placeholder='Description'/>
59-
</div>
60-
<div className='form-group'>
61-
<input className='inline-input' valueLink={this.linkState('snippet.callSign')} type='text' placeholder='Callsign'/>
62-
<select className='inline-input' valueLink={this.linkState('snippet.mode')}>
63-
<option value='javascript'>Javascript</option>
64-
<option value='html'>HTML</option>
65-
<option value='css'>CSS</option>
66-
</select>
67-
</div>
68-
<div className='form-group'>
69-
<CodeEditor onChange={this.handleSnippetContentChange} code={this.state.snippet.content} mode={this.state.snippet.mode}/>
70-
</div>
71-
<div className='form-group'>
72-
<Select
73-
name='Tags'
74-
multi={true}
75-
allowCreate={true}
76-
value={this.state.snippet.Tags}
77-
placeholder='Tags...'
78-
options={options}
79-
onChange={this.handleSnippetTagsChange}
80-
/>
81-
</div>
82-
</div>
83-
<div className='modal-footer'>
84-
<div className='modal-control'>
85-
<button onClick={this.props.close} className='btn-default'>Cancle</button>
86-
<button onClick={this.submit} className='btn-primary'>Launch</button>
87-
</div>
88-
</div>
89-
</div>
90-
)
91-
}
92-
})
93-
9417
var BlueprintForm = React.createClass({
9518
mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
9619
propTypes: {
@@ -105,6 +28,9 @@ var BlueprintForm = React.createClass({
10528
}
10629
}
10730
},
31+
componentDidMount: function () {
32+
React.findDOMNode(this.refs.title).focus()
33+
},
10834
handleBlueprintTagsChange: function (selected, all) {
10935
var blueprint = this.state.blueprint
11036
blueprint.Tags = all
@@ -123,7 +49,7 @@ var BlueprintForm = React.createClass({
12349
<div className='BlueprintForm'>
12450
<div className='modal-body'>
12551
<div className='form-group'>
126-
<input className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
52+
<input ref='title' className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
12753
</div>
12854
<div className='form-group'>
12955
<CodeEditor onChange={this.handleBlueprintContentChange} code={this.state.blueprint.content} mode={'markdown'}/>

‎browser/main/Components/SnippetForm.jsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
var React = require('react/addons')
2+
var ReactRouter = require('react-router')
3+
var CodeEditor = require('./CodeEditor')
4+
var Catalyst = require('../Mixins/Catalyst')
5+
6+
var Select = require('react-select')
7+
8+
var PlanetActions = require('../Actions/PlanetActions')
9+
10+
var options = [
11+
{ value: 'one', label: 'One' },
12+
{ value: 'two', label: 'Two' }
13+
]
14+
15+
var SnippetForm = React.createClass({
16+
mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
17+
propTypes: {
18+
close: React.PropTypes.func
19+
},
20+
getInitialState: function () {
21+
return {
22+
snippet: {
23+
description: '',
24+
mode: 'javascript',
25+
content: '',
26+
callSign: '',
27+
Tags: []
28+
}
29+
}
30+
},
31+
componentDidMount: function () {
32+
React.findDOMNode(this.refs.description).focus()
33+
},
34+
handleSnippetTagsChange: function (selected, all) {
35+
var snippet = this.state.snippet
36+
snippet.Tags = all
37+
this.setState({snippet: snippet})
38+
},
39+
handleSnippetContentChange: function (e, value) {
40+
var snippet = this.state.snippet
41+
snippet.content = value
42+
this.setState({snippet: snippet})
43+
},
44+
submit: function () {
45+
var params = this.getParams()
46+
var userName = params.userName
47+
var planetName = params.planetName
48+
var snippet = Object.assign({}, this.state.snippet)
49+
snippet.Tags = snippet.Tags.map(function (tag) {
50+
return tag.value
51+
})
52+
PlanetActions.createSnippet(userName + '/' + planetName, snippet)
53+
},
54+
render: function () {
55+
return (
56+
<div className='SnippetForm'>
57+
<div className='modal-body'>
58+
<div className='form-group'>
59+
<textarea ref='description' className='snippetDescription block-input' valueLink={this.linkState('snippet.description')} placeholder='Description'/>
60+
</div>
61+
<div className='form-group'>
62+
<input className='inline-input' valueLink={this.linkState('snippet.callSign')} type='text' placeholder='Callsign'/>
63+
<select className='inline-input' valueLink={this.linkState('snippet.mode')}>
64+
<option value='javascript'>Javascript</option>
65+
<option value='html'>HTML</option>
66+
<option value='css'>CSS</option>
67+
</select>
68+
</div>
69+
<div className='form-group'>
70+
<CodeEditor onChange={this.handleSnippetContentChange} code={this.state.snippet.content} mode={this.state.snippet.mode}/>
71+
</div>
72+
<div className='form-group'>
73+
<Select
74+
name='Tags'
75+
multi={true}
76+
allowCreate={true}
77+
value={this.state.snippet.Tags}
78+
placeholder='Tags...'
79+
options={options}
80+
onChange={this.handleSnippetTagsChange}
81+
/>
82+
</div>
83+
</div>
84+
<div className='modal-footer'>
85+
<div className='modal-control'>
86+
<button onClick={this.props.close} className='btn-default'>Cancle</button>
87+
<button onClick={this.submit} className='btn-primary'>Launch</button>
88+
</div>
89+
</div>
90+
</div>
91+
)
92+
}
93+
})
94+
95+
module.exports = SnippetForm

‎browser/main/Containers/PlanetContainer.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,14 @@ var PlanetArticleList = React.createClass({
134134
}.bind(this)
135135

136136
return (
137-
<li onClick={handleClick} className={isActive ? 'active' : ''} key={snippet.id}>
138-
<div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
139-
<div className='description'>{snippet.description}</div>
140-
<div className='updatedAt'>{snippet.updatedAt}</div>
141-
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
137+
<li onClick={handleClick} key={snippet.id}>
138+
<div className={isActive ? 'snippetItem active' : 'snippetItem'}>
139+
<div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
140+
<div className='description'>{snippet.description}</div>
141+
<div className='updatedAt'>{snippet.updatedAt}</div>
142+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
143+
</div>
144+
<div className='divider'></div>
142145
</li>
143146
)
144147
}.bind(this))

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

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -128,25 +128,28 @@
128128
absolute top bottom left right
129129
overflow-y auto
130130
li
131-
border-bottom solid 1px borderColor
132-
padding 10px
133-
cursor pointer
134-
.callSign
135-
margin-bottom 5px
136-
font-weight 600
137-
.description
138-
margin-bottom 5px
139-
.updatedAt
140-
margin-bottom 5px
141-
color lighten(textColor, 25%)
142-
font-size 0.8em
143-
&:hover, &.hover
144-
background-color hoverBackgroundColor
131+
.snippetItem
132+
border solid 2px transparent
133+
padding 10px
134+
cursor pointer
135+
transition 0.1s
136+
.callSign
137+
margin-bottom 5px
138+
font-weight 600
139+
.description
140+
margin-bottom 5px
141+
.updatedAt
142+
margin-bottom 5px
143+
color lighten(textColor, 25%)
144+
font-size 0.8em
145+
&:hover, &.hover
146+
background-color hoverBackgroundColor
147+
&:active, &.active
148+
background-color white
145149
&:active, &.active
146-
background-color white
147-
&:active, &.active
148-
border solid 2px brandBorderColor
149-
padding 9px 9px 8px
150+
border-color brandBorderColor
151+
.divider
152+
border-bottom solid 1px borderColor
150153

151154
.PlanetArticleDetail
152155
absolute right bottom

‎main.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ var mainWindow = null
1212
// if (process.platform !== 'darwin') app.quit()
1313
// })
1414

15-
1615
app.on('ready', function () {
1716
makeNewMainWindow()
1817

0 commit comments

Comments
 (0)