diff options
Diffstat (limited to 'app/assets/javascripts/components/components/status.jsx')
-rw-r--r-- | app/assets/javascripts/components/components/status.jsx | 23 |
1 files changed, 19 insertions, 4 deletions
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 68c1efaad..e54bc8c04 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -1,17 +1,32 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; +import Avatar from './avatar'; +import DisplayName from './display_name'; +import RelativeTimestamp from './relative_timestamp'; const Status = React.createClass({ propTypes: { status: ImmutablePropTypes.map.isRequired }, - render: function() { + render () { var content = { __html: this.props.status.get('content') }; + var status = this.props.status; return ( - <div style={{ padding: '5px' }}> - <div><strong>{this.props.status.getIn(['account', 'username'])}</strong></div> - <div dangerouslySetInnerHTML={content} /> + <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b' }}> + <Avatar src={status.getIn(['account', 'avatar'])} /> + + <div style={{ flex: '1 1 auto', marginLeft: '10px' }}> + <div style={{ overflow: 'hidden' }}> + <div style={{ float: 'right' }}> + <a href={status.get('url')} style={{ textDecoration: 'none' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a> + </div> + + <DisplayName account={status.get('account')} /> + </div> + + <div className='status__content' dangerouslySetInnerHTML={content} style={{ fontSize: '14px' }} /> + </div> </div> ); } |