Replace react-skylight with own solution that centers images better

This commit is contained in:
Eugen Rochko 2016-11-07 18:23:36 +01:00
parent f5c6baf29d
commit d0d799f911
8 changed files with 64 additions and 35 deletions

View File

@ -45,6 +45,7 @@ gem 'neography'
gem 'react-rails'
gem 'browserify-rails'
gem 'autoprefixer-rails'
group :development, :test do
gem 'rspec-rails'

View File

@ -42,6 +42,8 @@ GEM
addressable (2.4.0)
arel (7.1.1)
ast (2.3.0)
autoprefixer-rails (6.5.0.2)
execjs
av (0.9.0)
cocaine (~> 0.5.3)
aws-sdk (1.66.0)
@ -379,6 +381,7 @@ PLATFORMS
DEPENDENCIES
active_record_query_trace
addressable
autoprefixer-rails
aws-sdk (< 2.0)
better_errors
binding_of_caller

View File

@ -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 (

View File

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

View File

@ -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: {
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>
);
}

View File

@ -59,6 +59,10 @@
}
}
.lightbox .icon-button {
color: #282c37;
}
.compose-form__textarea, .follow-form__input {
background: #fff;

View File

@ -43,7 +43,6 @@
"dependencies": {
"react-autosuggest": "^7.0.1",
"react-responsive": "^1.1.5",
"react-router-scroll": "^0.3.2",
"react-skylight": "^0.4.1"
"react-router-scroll": "^0.3.2"
}
}

View File

@ -3956,10 +3956,6 @@ react-simple-dropdown@^1.1.4:
dependencies:
classnames "^2.1.2"
react-skylight:
version "0.4.1"
resolved "https://registry.yarnpkg.com/react-skylight/-/react-skylight-0.4.1.tgz#07d1af6dea0a50a5d8122a786a8ce8bc6bdf2241"
react-themeable@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"