diff options
Diffstat (limited to 'app/assets')
4 files changed, 59 insertions, 29 deletions
diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx index 663728f34..656f3d4a3 100644 --- a/app/assets/javascripts/components/components/icon_button.jsx +++ b/app/assets/javascripts/components/components/icon_button.jsx @@ -35,7 +35,8 @@ const IconButton = React.createClass({ width: `${this.props.size * 1.28571429}px`, height: `${this.props.size}px`, lineHeight: `${this.props.size}px`, - cursor: 'pointer' + cursor: 'pointer', + ...this.props.style }; return ( diff --git a/app/assets/javascripts/components/components/lightbox.jsx b/app/assets/javascripts/components/components/lightbox.jsx new file mode 100644 index 000000000..619cc0928 --- /dev/null +++ b/app/assets/javascripts/components/components/lightbox.jsx @@ -0,0 +1,44 @@ +import IconButton from './icon_button'; + +const overlayStyle = { + position: 'fixed', + top: '0', + left: '0', + width: '100%', + height: '100%', + justifyContent: 'center', + alignContent: 'center', + background: 'rgba(0, 0, 0, 0.5)' +}; + +const dialogStyle = { + color: '#282c37', + background: '#d9e1e8', + borderRadius: '4px', + boxShadow: '0 0 15px rgba(0, 0, 0, 0.4)', + padding: '10px', + margin: 'auto', + position: 'relative' +}; + +const closeStyle = { + position: 'absolute', + top: '4px', + right: '4px' +}; + +const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) => + <div className='lightbox' style={{ ...overlayStyle, display: isVisible ? 'flex' : 'none' }} onClick={onOverlayClicked}> + <div style={dialogStyle}> + <IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} /> + {children} + </div> + </div> + +Lightbox.propTypes = { + isVisible: React.PropTypes.bool, + onOverlayClicked: React.PropTypes.func, + onCloseClicked: React.PropTypes.func +}; + +export default Lightbox; diff --git a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx index 323125e30..b6c022736 100644 --- a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx +++ b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; -import { SkyLightStateless } from 'react-skylight'; import { closeModal } from '../../../actions/modal'; +import Lightbox from '../../../components/lightbox'; const mapStateToProps = state => ({ url: state.getIn(['modal', 'url']), @@ -17,30 +17,11 @@ const mapDispatchToProps = dispatch => ({ } }); -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 imageStyle = { + display: 'block', + maxWidth: '100%', + height: 'auto', + margin: '0 auto' }; const Modal = React.createClass({ @@ -56,9 +37,9 @@ const Modal = React.createClass({ const { url, ...other } = this.props; return ( - <SkyLightStateless {...other} dialogStyles={styles.dialogStyles} overlayStyles={styles.overlayStyles}> - <img src={url} style={styles.imageStyle} /> - </SkyLightStateless> + <Lightbox {...other}> + <img src={url} style={imageStyle} /> + </Lightbox> ); } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 37272e8e5..16327168c 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -59,6 +59,10 @@ } } +.lightbox .icon-button { + color: #282c37; +} + .compose-form__textarea, .follow-form__input { background: #fff; |