Add opening images in a modal window

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} />;
       }
     }
 

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}

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);

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>
     );
   }