From d0d799f911925fcbb4d68360546f0245b86334bb Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 7 Nov 2016 18:23:36 +0100 Subject: [PATCH] Replace react-skylight with own solution that centers images better --- Gemfile | 1 + Gemfile.lock | 3 ++ .../components/components/icon_button.jsx | 3 +- .../components/components/lightbox.jsx | 44 +++++++++++++++++++ .../ui/containers/modal_container.jsx | 37 ++++------------ app/assets/stylesheets/components.scss | 4 ++ package.json | 3 +- yarn.lock | 4 -- 8 files changed, 64 insertions(+), 35 deletions(-) create mode 100644 app/assets/javascripts/components/components/lightbox.jsx diff --git a/Gemfile b/Gemfile index 2c8b2c87..7eab0a5b 100644 --- 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 index 2ffdfa07..38b3101d 100644 --- 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 index 663728f3..656f3d4a 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 00000000..619cc092 --- /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 }) => +
+
+ + {children} +
+
+ +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 323125e3..b6c02273 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 ( - - - + + + ); } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 37272e8e..16327168 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; diff --git a/package.json b/package.json index e17fbef5..394ef044 100644 --- 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 index 75baca88..ca16f77b 100644 --- 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"