Skip to content

Commit 657ebc9

Browse files
Rokt33rRokt33r
committed
改善 - PlanetArticleList, PlanetArticleDetail
1 parent 9500f9a commit 657ebc9

6 files changed

Lines changed: 156 additions & 100 deletions

File tree

‎browser/main/Components/PlanetArticleDetail.jsx‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
var React = require('react/addons')
22
var moment = require('moment')
33

4-
var CodeViewer = require('../Components/CodeViewer')
5-
6-
var CodeEditModal = require('../Components/CodeEditModal')
7-
var CodeDeleteModal = require('../Components/CodeDeleteModal')
8-
var NoteEditModal = require('../Components/NoteEditModal')
9-
var NoteDeleteModal = require('../Components/NoteDeleteModal')
10-
var MarkdownPreview = require('../Components/MarkdownPreview')
4+
var CodeViewer = require('./CodeViewer')
5+
var CodeEditModal = require('./CodeEditModal')
6+
var CodeDeleteModal = require('./CodeDeleteModal')
7+
var NoteEditModal = require('./NoteEditModal')
8+
var NoteDeleteModal = require('./NoteDeleteModal')
9+
var MarkdownPreview = require('./MarkdownPreview')
10+
var ProfileImage = require('./ProfileImage')
1111

1212
var Modal = require('../Mixins/Modal')
1313
var ForceUpdate = require('../Mixins/ForceUpdate')
@@ -61,18 +61,24 @@ module.exports = React.createClass({
6161
if (article.type === 'code') {
6262
return (
6363
<div className='PlanetArticleDetail codeDetail'>
64-
<div className='viewer-header'>
65-
<i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
66-
<span className='control-group'>
64+
<div className='detailHeader'>
65+
<div className='itemLeft'>
66+
<ProfileImage className='profileImage' size='25' email={article.User.email}/>
67+
<i className='fa fa-file-text-o fa-fw'></i>
68+
</div>
69+
70+
<div className='itemRight'>
71+
<div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
72+
<div className='description'>{article.description}</div>
73+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
74+
</div>
75+
76+
<span className='itemControl'>
6777
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
6878
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
6979
</span>
7080
</div>
71-
<div className='viewer-body'>
72-
<div className='viewer-detail'>
73-
<div className='description'>{article.description}</div>
74-
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
75-
</div>
81+
<div className='detailBody'>
7682
<div className='content'>
7783
<CodeViewer code={article.content} mode={article.mode}/>
7884
</div>
@@ -82,15 +88,24 @@ module.exports = React.createClass({
8288
}
8389
return (
8490
<div className='PlanetArticleDetail noteDetail'>
85-
<div className='viewer-header'>
86-
<i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
87-
<span className='control-group'>
91+
<div className='detailHeader'>
92+
<div className='itemLeft'>
93+
<ProfileImage className='profileImage' size='25' email={article.User.email}/>
94+
<i className='fa fa-file-text-o fa-fw'></i>
95+
</div>
96+
97+
<div className='itemRight'>
98+
<div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
99+
<div className='description'>{article.title}</div>
100+
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
101+
</div>
102+
103+
<span className='itemControl'>
88104
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
89105
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
90106
</span>
91107
</div>
92-
<div className='viewer-body'>
93-
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
108+
<div className='detailBody'>
94109
<MarkdownPreview className='content' content={article.content}/>
95110
</div>
96111
</div>

‎browser/main/Components/PlanetArticleList.jsx‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
var React = require('react/addons')
22
var ReactRouter = require('react-router')
3+
var Link = ReactRouter.Link
34
var moment = require('moment')
45

56
var ForceUpdate = require('../Mixins/ForceUpdate')
@@ -13,6 +14,31 @@ module.exports = React.createClass({
1314
articles: React.PropTypes.array,
1415
showOnlyWithTag: React.PropTypes.func
1516
},
17+
handleArticleClikck: function (article) {
18+
if (article.type === 'code') {
19+
return function () {
20+
var params = this.getParams()
21+
22+
this.transitionTo('codes', {
23+
userName: params.userName,
24+
planetName: params.planetName,
25+
localId: article.localId
26+
})
27+
}.bind(this)
28+
}
29+
30+
if (article.type === 'note') {
31+
return function () {
32+
var params = this.getParams()
33+
34+
this.transitionTo('notes', {
35+
userName: params.userName,
36+
planetName: params.planetName,
37+
localId: article.localId
38+
})
39+
}.bind(this)
40+
}
41+
},
1642
render: function () {
1743
var articles = this.props.articles.map(function (article) {
1844
var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
@@ -28,24 +54,15 @@ module.exports = React.createClass({
2854
var handleClick
2955

3056
if (article.type === 'code') {
31-
32-
handleClick = function () {
33-
this.transitionTo('codes', {
34-
userName: params.userName,
35-
planetName: params.planetName,
36-
localId: article.localId
37-
})
38-
}.bind(this)
39-
4057
return (
41-
<li onClick={handleClick} key={'code-' + article.id}>
58+
<li onClick={this.handleArticleClikck(article)} key={'code-' + article.id}>
4259
<div className={'articleItem' + (isActive ? ' active' : '')}>
4360
<div className='itemLeft'>
4461
<ProfileImage className='profileImage' size='25' email={article.User.email}/>
4562
<i className='fa fa-code fa-fw'></i>
4663
</div>
4764
<div className='itemRight'>
48-
<div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
65+
<div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
4966
<div className='description'>{article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}</div>
5067
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
5168
</div>
@@ -55,24 +72,16 @@ module.exports = React.createClass({
5572
)
5673
}
5774

58-
handleClick = function () {
59-
this.transitionTo('notes', {
60-
userName: params.userName,
61-
planetName: params.planetName,
62-
localId: article.localId
63-
})
64-
}.bind(this)
65-
6675
return (
67-
<li onClick={handleClick} key={'note-' + article.id}>
76+
<li onClick={this.handleArticleClikck(article)} key={'note-' + article.id}>
6877
<div className={'articleItem blueprintItem' + (isActive ? ' active' : '')}>
6978
<div className='itemLeft'>
7079
<ProfileImage className='profileImage' size='25' email={article.User.email}/>
7180
<i className='fa fa-file-text-o fa-fw'></i>
7281
</div>
7382

7483
<div className='itemRight'>
75-
<div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
84+
<div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
7685
<div className='description'>{article.title}</div>
7786
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
7887
</div>

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

Lines changed: 85 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ articleListWidth= 275px
1010
margin 0 2px
1111
text-decoration underline
1212
cursor pointer
13-
font-size 0.9em
13+
font-size 0.95em
1414
&.noTag
1515
color inactiveTextColor
1616
font-size 0.8em
@@ -178,34 +178,50 @@ articleListWidth= 275px
178178
overflow-y auto
179179
li
180180
.articleItem
181-
user-select none
182181
border solid 2px transparent
183-
padding 10px
182+
position relative
183+
height 94px
184+
width 100%
184185
cursor pointer
185186
transition 0.1s
186-
clearfix()
187187
.itemLeft
188-
float left
189-
width 25px
188+
position absolute
189+
top 4px
190+
bottom 4px
191+
width 38px
192+
padding 3px 0 3px 3px
190193
text-align center
191194
.profileImage
192195
margin-bottom 5px
193196
circle()
194197
.fa
195198
line-height 25px
196199
.itemRight
197-
float left
198-
width 225px
200+
position absolute
201+
top 4px
202+
bottom 4px
203+
right 2px
204+
left 40px
199205
overflow-x hidden
200-
padding-left 10px
201-
.updatedAt
202-
margin-bottom 10px
206+
padding 3px 10px 3px 3px
207+
.itemInfo
208+
margin 5px 0 13px
203209
color lighten(textColor, 25%)
204210
font-size 0.7em
211+
.userProfileName
212+
color brandColor
213+
font-size 1.2em
205214
.description
206215
line-height 120%
207-
margin-bottom 15px
216+
margin-bottom 10px
208217
font-size 1em
218+
overflow-x hidden
219+
white-space nowrap
220+
text-overflow ellipsis
221+
.tags
222+
position absolute
223+
bottom 5px
224+
font-size 0.9em
209225
&:hover, &.hover
210226
background-color hoverBackgroundColor
211227
&:active, &.active
@@ -219,57 +235,71 @@ articleListWidth= 275px
219235
absolute right bottom
220236
top 55px
221237
left navigationWidth + articleListWidth
222-
&>.viewer-header
223-
height 44px
224-
line-height 44px
225-
padding 0 15px
226-
box-sizing border-box
227-
font-size 1.2em
228-
small
229-
font-size 0.8em
230-
color lighten(textColor, 25%)
231-
.control-group
232-
float right
233-
button
234-
margin 10px 3px
235-
.viewer-body
236-
absolute bottom right
237-
left 1px
238-
top 44px
239-
&.codeDetail>.viewer-body
240-
.viewer-detail
241-
border-bottom solid 1px borderColor
242-
height 150px
243-
box-sizing border-box
244-
padding 10px
238+
.detailHeader
239+
border solid 2px transparent
240+
position relative
241+
height 105px
242+
width 100%
243+
transition 0.1s
244+
.itemLeft
245+
position absolute
246+
top 7px
247+
bottom 4px
248+
width 38px
249+
padding 3px 0 3px 3px
250+
text-align center
251+
.profileImage
252+
margin-bottom 5px
253+
circle()
254+
.fa
255+
line-height 25px
256+
.itemRight
257+
position absolute
258+
top 7px
259+
bottom 4px
260+
right 2px
261+
left 40px
262+
overflow-x hidden
263+
padding 3px 10px 3px 3px
264+
.itemInfo
265+
margin 5px 0 13px
266+
color lighten(textColor, 25%)
267+
font-size 0.7em
268+
.userProfileName
269+
color brandColor
270+
font-size 1.2em
245271
.description
246-
height 100px
247-
line-height 1.4em
248-
overflow-y auto
272+
line-height 120%
273+
margin-bottom 10px
274+
font-size 1em
275+
overflow-x auto
276+
white-space nowrap
249277
.tags
250278
position absolute
251-
left 15px
252-
right 15px
253-
top 120px
254-
.content
255-
.ace_editor
256-
absolute left right
257-
top 155px
258279
bottom 5px
259-
&.noteDetail>.viewer-body
260-
.tags
261-
absolute top
262-
left 15px
263-
right 15px
264-
height 24px
265-
line-height 24px
280+
font-size 0.9em
281+
.itemControl
282+
position absolute
283+
z-index 1
284+
top 2px
285+
right 2px
286+
.detailBody
287+
absolute left right bottom
288+
top 105px
266289
.content
267-
absolute left right bottom
268-
top 30px
269290
box-sizing border-box
270291
padding 5px
271292
border-top solid 1px borderColor
272-
padding 10px
273293
overflow-x hidden
274294
overflow-y auto
295+
&.noteDetail
296+
.detailBody .content
275297
marked()
298+
&.codeDetail
299+
.detailBody .content
300+
.ace_editor
301+
position absolute
302+
top 5px
303+
bottom 5px
304+
left 2px
305+
right 2px

‎browser/styles/main/index.styl‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,14 +105,16 @@ textarea.block-input
105105
z-index 2000
106106
bottom 5px
107107
right 53px
108-
btnDefault()
108+
btnPrimary()
109109
padding 10px 15px
110110
border-radius 5px
111+
background-color backgroundColor
111112
.contactButton
112113
position fixed
113114
z-index 2000
114115
bottom 5px
115116
right 5px
116-
btnDefault()
117+
btnPrimary()
117118
padding 10px 15px
118119
border-radius 5px
120+
background-color backgroundColor

‎browser/styles/mixins/marked.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ marked()
6464
padding 5px
6565
border solid 1px borderColor
6666
border-radius 5px
67-
margin 0.5em 0
67+
margin-bottom 0.5em
6868
overflow-x auto
6969
&>code
7070
padding 0

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "boost",
3-
"version": "0.2.1",
3+
"version": "0.2.1.1",
44
"description": "Boost App",
55
"main": "main.js",
66
"scripts": {

0 commit comments

Comments
 (0)