Add opening images in a modal window

2 files changed, 69 insertions, 0 deletions

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