Replace react-skylight with own solution that centers images better
This commit is contained in:
Eugen Rochko
parent
f5c6baf29d
commit
d0d799f911
8 changed files with 64 additions and 35 deletions
1
Gemfile
1
Gemfile
|
|
@ -45,6 +45,7 @@ gem 'neography'
|
|||
|
||||
gem 'react-rails'
|
||||
gem 'browserify-rails'
|
||||
gem 'autoprefixer-rails'
|
||||
|
||||
group :development, :test do
|
||||
gem 'rspec-rails'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
44
app/assets/javascripts/components/components/lightbox.jsx
Normal file
44
app/assets/javascripts/components/components/lightbox.jsx
Normal 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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.lightbox .icon-button {
|
||||
color: #282c37;
|
||||
}
|
||||
|
||||
.compose-form__textarea, .follow-form__input {
|
||||
background: #fff;
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue