From fc222dfa495a4a05dc1a216bfe4d6b079db4e320 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 5 Sep 2016 20:38:31 +0200 Subject: Displaying media attachments in timelines --- .../javascripts/components/components/drawer.jsx | 2 +- .../components/components/media_gallery.jsx | 26 ++++++++++++++++++++++ .../javascripts/components/components/status.jsx | 9 ++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/components/components/media_gallery.jsx (limited to 'app/assets') 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 ( -
+
{this.props.children}
); 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 ; + }); + + return ( +
+ {children} +
+ ); + } + +}); + +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 = ; + } + return (
@@ -63,6 +70,8 @@ const Status = React.createClass({
+ {media} +
-- cgit