diff options
4 files changed, 37 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/drawer.jsx b/app/assets/javascripts/components/components/drawer.jsx index 8e2201ebe..cd43440f5 100644 --- a/app/assets/javascripts/components/components/drawer.jsx +++ b/app/assets/javascripts/components/components/drawer.jsx @@ -6,7 +6,7 @@ const Drawer = React.createClass({ render () { return ( - <div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '0', display: 'flex', flexDirection: 'column' }}> + <div style={{ width: '280px', flex: '0', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '0', display: 'flex', flexDirection: 'column' }}> {this.props.children} </div> ); diff --git a/app/assets/javascripts/components/components/media_gallery.jsx b/app/assets/javascripts/components/components/media_gallery.jsx new file mode 100644 index 000000000..403c68202 --- /dev/null +++ b/app/assets/javascripts/components/components/media_gallery.jsx @@ -0,0 +1,26 @@ +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; + +const MediaGallery = React.createClass({ + + propTypes: { + media: ImmutablePropTypes.list.isRequired + }, + + mixins: [PureRenderMixin], + + render () { + var children = this.props.media.take(4).map((attachment, i) => { + return <a key={attachment.get('id')} href={attachment.get('url')} style={{ float: 'left', marginRight: (i % 2 == 0 ? '5px' : '0'), marginBottom: '5px', textDecoration: 'none', border: 'none', display: 'block', width: '142px', height: '110px', background: `url(${attachment.get('preview_url')}) no-repeat`, backgroundSize: 'cover', cursor: 'zoom-in' }} />; + }); + + return ( + <div style={{ marginTop: '8px', overflow: 'hidden', marginBottom: '-5px' }}> + {children} + </div> + ); + } + +}); + +export default MediaGallery; diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 9f46e0e76..b72198b09 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -4,6 +4,7 @@ import RelativeTimestamp from './relative_timestamp'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import IconButton from './icon_button'; import DisplayName from './display_name'; +import MediaGallery from './media_gallery'; const Status = React.createClass({ @@ -30,6 +31,8 @@ const Status = React.createClass({ render () { var content = { __html: this.props.status.get('content') }; + var media = ''; + var { status, ...other } = this.props; if (status.get('reblog') !== null) { @@ -45,6 +48,10 @@ const Status = React.createClass({ ); } + if (status.get('media_attachments').size > 0) { + media = <MediaGallery media={status.get('media_attachments')} />; + } + return ( <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}> <div style={{ fontSize: '15px' }}> @@ -63,6 +70,8 @@ const Status = React.createClass({ <div className='status__content' dangerouslySetInnerHTML={content} /> + {media} + <div style={{ marginTop: '10px', overflow: 'hidden' }}> <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div> <div style={{ float: 'left', marginRight: '10px'}}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div> diff --git a/app/views/api/statuses/show.rabl b/app/views/api/statuses/show.rabl index 21e054453..c7d028e14 100644 --- a/app/views/api/statuses/show.rabl +++ b/app/views/api/statuses/show.rabl @@ -18,7 +18,7 @@ child :account do end child :media_attachments, object_root: false do - attribute :remote_url + attributes :id, :remote_url node(:url) { |media| full_asset_url(media.file.url) } node(:preview_url) { |media| full_asset_url(media.file.url(:small)) } |