diff options
Diffstat (limited to 'app/assets/javascripts/components')
4 files changed, 40 insertions, 6 deletions
diff --git a/app/assets/javascripts/components/actions/interactions.jsx b/app/assets/javascripts/components/actions/interactions.jsx index 281d3be87..964655530 100644 --- a/app/assets/javascripts/components/actions/interactions.jsx +++ b/app/assets/javascripts/components/actions/interactions.jsx @@ -15,7 +15,9 @@ export function reblog(status) { dispatch(reblogRequest(status)); 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) { dispatch(reblogFail(status, error)); }); diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx new file mode 100644 index 000000000..1d579731b --- /dev/null +++ b/app/assets/javascripts/components/components/display_name.jsx @@ -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; diff --git a/app/assets/javascripts/components/components/reply_indicator.jsx b/app/assets/javascripts/components/components/reply_indicator.jsx index 2531b7f43..9598a5874 100644 --- a/app/assets/javascripts/components/components/reply_indicator.jsx +++ b/app/assets/javascripts/components/components/reply_indicator.jsx @@ -2,6 +2,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Avatar from './avatar'; import IconButton from './icon_button'; +import DisplayName from './display_name'; 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' }}> <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> </div> diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 7885360e6..fabe85bab 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -3,6 +3,7 @@ import Avatar from './avatar'; import RelativeTimestamp from './relative_timestamp'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from './icon_button'; +import DisplayName from './display_name'; const Status = React.createClass({ @@ -29,7 +30,20 @@ const Status = React.createClass({ render () { 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 ( <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} /> </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> </div> |