diff options
Diffstat (limited to 'app/assets/javascripts/components/features')
4 files changed, 78 insertions, 3 deletions
diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx index ffa536ae8..9f8e9b6cc 100644 --- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx +++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx @@ -14,7 +14,8 @@ const DetailedStatus = React.createClass({ }, propTypes: { - status: ImmutablePropTypes.map.isRequired + status: ImmutablePropTypes.map.isRequired, + onOpenMedia: React.PropTypes.func.isRequired }, mixins: [PureRenderMixin], @@ -36,7 +37,7 @@ const DetailedStatus = React.createClass({ if (status.getIn(['media_attachments', 0, 'type']) === 'video') { media = <VideoPlayer media={status.getIn(['media_attachments', 0])} width={317} height={178} />; } else { - media = <MediaGallery media={status.get('media_attachments')} height={300} />; + media = <MediaGallery media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />; } } diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx index f4ca8ff92..dc29a87c7 100644 --- a/app/assets/javascripts/components/features/status/index.jsx +++ b/app/assets/javascripts/components/features/status/index.jsx @@ -22,6 +22,7 @@ import { import { ScrollContainer } from 'react-router-scroll'; import ColumnBackButton from '../../components/column_back_button'; import StatusContainer from '../../containers/status_container'; +import { openMedia } from '../../actions/modal'; const makeMapStateToProps = () => { const getStatus = makeGetStatus(); @@ -78,6 +79,10 @@ const Status = React.createClass({ this.props.dispatch(mentionCompose(account)); }, + handleOpenMedia (url) { + this.props.dispatch(openMedia(url)); + }, + renderChildren (list) { return list.map(id => <StatusContainer key={id} id={id} />); }, @@ -112,7 +117,7 @@ const Status = React.createClass({ <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'> {ancestors} - <DetailedStatus status={status} me={me} /> + <DetailedStatus status={status} me={me} onOpenMedia={this.handleOpenMedia} /> <ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} onMention={this.handleMentionClick} /> {descendants} diff --git a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx new file mode 100644 index 000000000..323125e30 --- /dev/null +++ b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx @@ -0,0 +1,67 @@ +import { connect } from 'react-redux'; +import { SkyLightStateless } from 'react-skylight'; +import { closeModal } from '../../../actions/modal'; + +const mapStateToProps = state => ({ + url: state.getIn(['modal', 'url']), + isVisible: state.getIn(['modal', 'open']) +}); + +const mapDispatchToProps = dispatch => ({ + onCloseClicked () { + dispatch(closeModal()); + }, + + onOverlayClicked () { + dispatch(closeModal()); + } +}); + +const styles = { + overlayStyles: { + + }, + + dialogStyles: { + width: '600px', + color: '#282c37', + fontSize: '16px', + lineHeight: '37px', + marginTop: '-300px', + left: '0', + right: '0', + marginLeft: 'auto', + marginRight: 'auto', + height: 'auto' + }, + + imageStyle: { + display: 'block', + maxWidth: '100%', + height: 'auto', + margin: '0 auto' + } +}; + +const Modal = React.createClass({ + + propTypes: { + url: React.PropTypes.string, + isVisible: React.PropTypes.bool, + onCloseClicked: React.PropTypes.func, + onOverlayClicked: React.PropTypes.func + }, + + render () { + const { url, ...other } = this.props; + + return ( + <SkyLightStateless {...other} dialogStyles={styles.dialogStyles} overlayStyles={styles.overlayStyles}> + <img src={url} style={styles.imageStyle} /> + </SkyLightStateless> + ); + } + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(Modal); diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index 06a9d2f50..655b1e2ee 100644 --- a/app/assets/javascripts/components/features/ui/index.jsx +++ b/app/assets/javascripts/components/features/ui/index.jsx @@ -7,6 +7,7 @@ import MentionsTimeline from '../mentions_timeline'; import Compose from '../compose'; import MediaQuery from 'react-responsive'; import TabsBar from './components/tabs_bar'; +import ModalContainer from './containers/modal_container'; const UI = React.createClass({ @@ -36,6 +37,7 @@ const UI = React.createClass({ <NotificationsContainer /> <LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} /> + <ModalContainer /> </div> ); } |