@@ -1,3 +1,4 @@ | |||||
{ | { | ||||
"presets": ["es2015", "react"] | |||||
"presets": ["es2015", "react"], | |||||
"plugins": ["transform-object-rest-spread"] | |||||
} | } |
@@ -5,6 +5,8 @@ | |||||
"es6": true | "es6": true | ||||
}, | }, | ||||
"parser": "babel-eslint", | |||||
"plugins": [ | "plugins": [ | ||||
"react" | "react" | ||||
], | ], | ||||
@@ -15,7 +15,9 @@ export function reblog(status) { | |||||
dispatch(reblogRequest(status)); | dispatch(reblogRequest(status)); | ||||
api(getState).post(`/api/statuses/${status.get('id')}/reblog`).then(function (response) { | api(getState).post(`/api/statuses/${status.get('id')}/reblog`).then(function (response) { | ||||
dispatch(reblogSuccess(status, response.data)); | |||||
// The reblog API method returns a new status wrapped around the original. In this case we are only | |||||
// interested in how the original is modified, hence passing it skipping the wrapper | |||||
dispatch(reblogSuccess(status, response.data.reblog)); | |||||
}).catch(function (error) { | }).catch(function (error) { | ||||
dispatch(reblogFail(status, error)); | dispatch(reblogFail(status, error)); | ||||
}); | }); | ||||
@@ -0,0 +1,19 @@ | |||||
import ImmutablePropTypes from 'react-immutable-proptypes'; | |||||
const DisplayName = React.createClass({ | |||||
propTypes: { | |||||
account: ImmutablePropTypes.map.isRequired | |||||
}, | |||||
render () { | |||||
return ( | |||||
<span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}> | |||||
<strong style={{ fontWeight: 'bold' }}>{this.props.account.get('display_name')}</strong> <span style={{ fontSize: '14px' }}>@{this.props.account.get('acct')}</span> | |||||
</span> | |||||
); | |||||
} | |||||
}); | |||||
export default DisplayName; |
@@ -2,6 +2,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; | |||||
import ImmutablePropTypes from 'react-immutable-proptypes'; | import ImmutablePropTypes from 'react-immutable-proptypes'; | ||||
import Avatar from './avatar'; | import Avatar from './avatar'; | ||||
import IconButton from './icon_button'; | import IconButton from './icon_button'; | ||||
import DisplayName from './display_name'; | |||||
const ReplyIndicator = React.createClass({ | const ReplyIndicator = React.createClass({ | ||||
@@ -26,7 +27,7 @@ const ReplyIndicator = React.createClass({ | |||||
<a href={this.props.status.getIn(['account', 'url'])} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}> | <a href={this.props.status.getIn(['account', 'url'])} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}> | ||||
<div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div> | <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div> | ||||
<strong style={{ fontWeight: '500' }}>{this.props.status.getIn(['account', 'display_name'])}</strong> <span>@{this.props.status.getIn(['account', 'acct'])}</span> | |||||
<DisplayName account={this.props.status.get('account')} /> | |||||
</a> | </a> | ||||
</div> | </div> | ||||
@@ -3,6 +3,7 @@ import Avatar from './avatar'; | |||||
import RelativeTimestamp from './relative_timestamp'; | import RelativeTimestamp from './relative_timestamp'; | ||||
import PureRenderMixin from 'react-addons-pure-render-mixin'; | import PureRenderMixin from 'react-addons-pure-render-mixin'; | ||||
import IconButton from './icon_button'; | import IconButton from './icon_button'; | ||||
import DisplayName from './display_name'; | |||||
const Status = React.createClass({ | const Status = React.createClass({ | ||||
@@ -29,7 +30,20 @@ const Status = React.createClass({ | |||||
render () { | render () { | ||||
var content = { __html: this.props.status.get('content') }; | var content = { __html: this.props.status.get('content') }; | ||||
var status = this.props.status; | |||||
var { status, ...other } = this.props; | |||||
if (status.get('reblog') !== null) { | |||||
return ( | |||||
<div> | |||||
<div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}> | |||||
<div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet'></i></div> | |||||
<a href={status.getIn(['account', 'url'])} style={{ color: '#616b86' }}>{status.getIn(['account', 'display_name'])}</a> reblogged | |||||
</div> | |||||
<Status {...other} status={status.get('reblog')} /> | |||||
</div> | |||||
); | |||||
} | |||||
return ( | return ( | ||||
<div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}> | <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}> | ||||
@@ -43,9 +57,7 @@ const Status = React.createClass({ | |||||
<Avatar src={status.getIn(['account', 'avatar'])} size={48} /> | <Avatar src={status.getIn(['account', 'avatar'])} size={48} /> | ||||
</div> | </div> | ||||
<span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}> | |||||
<strong style={{ fontWeight: 'bold', color: '#fff' }}>{status.getIn(['account', 'display_name'])}</strong> <span style={{ fontSize: '14px' }}>@{status.getIn(['account', 'acct'])}</span> | |||||
</span> | |||||
<DisplayName account={status.get('account')} /> | |||||
</a> | </a> | ||||
</div> | </div> | ||||
@@ -76,6 +76,12 @@ | |||||
text-decoration: none; | text-decoration: none; | ||||
} | } | ||||
.status__display-name { | |||||
strong { | |||||
color: #fff; | |||||
} | |||||
} | |||||
.status__display-name, .reply-indicator__display-name { | .status__display-name, .reply-indicator__display-name { | ||||
&:hover { | &:hover { | ||||
strong { | strong { | ||||
@@ -2,6 +2,7 @@ | |||||
"name": "mastodon", | "name": "mastodon", | ||||
"devDependencies": { | "devDependencies": { | ||||
"babel-plugin-react-transform": "^2.0.2", | "babel-plugin-react-transform": "^2.0.2", | ||||
"babel-plugin-transform-object-rest-spread": "^6.8.0", | |||||
"babel-preset-es2015": "^6.13.2", | "babel-preset-es2015": "^6.13.2", | ||||
"babel-preset-react": "^6.11.1", | "babel-preset-react": "^6.11.1", | ||||
"babelify": "^7.3.0", | "babelify": "^7.3.0", | ||||