public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-16 03:06:27 +00:00
Code Issues Releases Wiki Activity

改善 - PlanetArticleList, PlanetArticleDetail

Browse Source
This commit is contained in:
Rokt33r
2015-08-22 03:27:42 +09:00
parent 9500f9a8c9
commit 657ebc99df
6 changed files with 156 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
browser/main/Components/PlanetArticleDetail.jsx
View File

@@ -1,13 +1,13 @@
var React = require('react/addons')
var moment = require('moment')
var CodeViewer = require('../Components/CodeViewer')
var CodeEditModal = require('../Components/CodeEditModal')
var CodeDeleteModal = require('../Components/CodeDeleteModal')
var NoteEditModal = require('../Components/NoteEditModal')
var NoteDeleteModal = require('../Components/NoteDeleteModal')
var MarkdownPreview = require('../Components/MarkdownPreview')
var CodeViewer = require('./CodeViewer')
var CodeEditModal = require('./CodeEditModal')
var CodeDeleteModal = require('./CodeDeleteModal')
var NoteEditModal = require('./NoteEditModal')
var NoteDeleteModal = require('./NoteDeleteModal')
var MarkdownPreview = require('./MarkdownPreview')
var ProfileImage = require('./ProfileImage')
var Modal = require('../Mixins/Modal')
var ForceUpdate = require('../Mixins/ForceUpdate')
@@ -61,18 +61,24 @@ module.exports = React.createClass({
if (article.type === 'code') {
return (
<div className='PlanetArticleDetail codeDetail'>
<div className='viewer-header'>
<i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
<span className='control-group'>
<div className='detailHeader'>
<div className='itemLeft'>
<ProfileImage className='profileImage' size='25' email={article.User.email}/>
<i className='fa fa-file-text-o fa-fw'></i>
</div>
<div className='itemRight'>
<div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
<div className='description'>{article.description}</div>
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
</div>
<span className='itemControl'>
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
</span>
</div>
<div className='viewer-body'>
<div className='viewer-detail'>
<div className='description'>{article.description}</div>
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
</div>
<div className='detailBody'>
<div className='content'>
<CodeViewer code={article.content} mode={article.mode}/>
</div>
@@ -82,15 +88,24 @@ module.exports = React.createClass({
}
return (
<div className='PlanetArticleDetail noteDetail'>
<div className='viewer-header'>
<i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
<span className='control-group'>
<div className='detailHeader'>
<div className='itemLeft'>
<ProfileImage className='profileImage' size='25' email={article.User.email}/>
<i className='fa fa-file-text-o fa-fw'></i>
</div>
<div className='itemRight'>
<div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
<div className='description'>{article.title}</div>
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
</div>
<span className='itemControl'>
<button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
<button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
</span>
</div>
<div className='viewer-body'>
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
<div className='detailBody'>
<MarkdownPreview className='content' content={article.content}/>
</div>
</div>

51
browser/main/Components/PlanetArticleList.jsx
View File

@@ -1,5 +1,6 @@
var React = require('react/addons')
var ReactRouter = require('react-router')
var Link = ReactRouter.Link
var moment = require('moment')
var ForceUpdate = require('../Mixins/ForceUpdate')
@@ -13,6 +14,31 @@ module.exports = React.createClass({
articles: React.PropTypes.array,
showOnlyWithTag: React.PropTypes.func
},
handleArticleClikck: function (article) {
if (article.type === 'code') {
return function () {
var params = this.getParams()
this.transitionTo('codes', {
userName: params.userName,
planetName: params.planetName,
localId: article.localId
})
}.bind(this)
}
if (article.type === 'note') {
return function () {
var params = this.getParams()
this.transitionTo('notes', {
userName: params.userName,
planetName: params.planetName,
localId: article.localId
})
}.bind(this)
}
},
render: function () {
var articles = this.props.articles.map(function (article) {
var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
@@ -28,24 +54,15 @@ module.exports = React.createClass({
var handleClick
if (article.type === 'code') {
handleClick = function () {
this.transitionTo('codes', {
userName: params.userName,
planetName: params.planetName,
localId: article.localId
})
}.bind(this)
return (
<li onClick={handleClick} key={'code-' + article.id}>
<li onClick={this.handleArticleClikck(article)} key={'code-' + article.id}>
<div className={'articleItem' + (isActive ? ' active' : '')}>
<div className='itemLeft'>
<ProfileImage className='profileImage' size='25' email={article.User.email}/>
<i className='fa fa-code fa-fw'></i>
</div>
<div className='itemRight'>
<div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
<div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
<div className='description'>{article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}</div>
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
</div>
@@ -55,16 +72,8 @@ module.exports = React.createClass({
)
}
handleClick = function () {
this.transitionTo('notes', {
userName: params.userName,
planetName: params.planetName,
localId: article.localId
})
}.bind(this)
return (
<li onClick={handleClick} key={'note-' + article.id}>
<li onClick={this.handleArticleClikck(article)} key={'note-' + article.id}>
<div className={'articleItem blueprintItem' + (isActive ? ' active' : '')}>
<div className='itemLeft'>
<ProfileImage className='profileImage' size='25' email={article.User.email}/>
@@ -72,7 +81,7 @@ module.exports = React.createClass({
</div>
<div className='itemRight'>
<div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
<div className='itemInfo'>{moment(article.updatedAt).fromNow()} by <span className='userProfileName'>{article.User.profileName}</span></div>
<div className='description'>{article.title}</div>
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
</div>