diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2016-11-07 18:23:36 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2016-11-07 18:23:36 +0100 |
commit | d0d799f911925fcbb4d68360546f0245b86334bb (patch) | |
tree | 48cdf3f87b53834730c83a99677f654743723a9f /app/assets/javascripts/components/components | |
parent | f5c6baf29dde4d89c1c4611ac11b1da939523f06 (diff) |
Replace react-skylight with own solution that centers images better
Diffstat (limited to 'app/assets/javascripts/components/components')
-rw-r--r-- | app/assets/javascripts/components/components/icon_button.jsx | 3 | ||||
-rw-r--r-- | app/assets/javascripts/components/components/lightbox.jsx | 44 |
2 files changed, 46 insertions, 1 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; |