commit: d0d799f911925fcbb4d68360546f0245b86334bb
parent: f5c6baf29dde4d89c1c4611ac11b1da939523f06
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 7 Nov 2016 18:23:36 +0100
Replace react-skylight with own solution that centers images better
Diffstat:
8 files changed, 64 insertions(+), 35 deletions(-)
diff --git a/Gemfile b/Gemfile
@@ -45,6 +45,7 @@ gem 'neography'
gem 'react-rails'
gem 'browserify-rails'
+gem 'autoprefixer-rails'
group :development, :test do
gem 'rspec-rails'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -59,6 +59,10 @@
}
}
+.lightbox .icon-button {
+ color: #282c37;
+}
+
.compose-form__textarea, .follow-form__input {
background: #fff;
diff --git a/package.json b/package.json
@@ -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"
}
}
diff --git a/yarn.lock b/yarn.lock
@@ -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"
