Fix #414 - Improve lightbox, add loading indicator
Eugen Rochko
parent
a78148f763
commit
da5d366230
|
|
@ -35,7 +35,9 @@ const Lightbox = React.createClass({
|
|||
propTypes: {
|
||||
isVisible: React.PropTypes.bool,
|
||||
onOverlayClicked: React.PropTypes.func,
|
||||
onCloseClicked: React.PropTypes.func
|
||||
onCloseClicked: React.PropTypes.func,
|
||||
intl: React.PropTypes.object.isRequired,
|
||||
children: React.PropTypes.node
|
||||
},
|
||||
|
||||
mixins: [PureRenderMixin],
|
||||
|
|
@ -57,19 +59,17 @@ const Lightbox = React.createClass({
|
|||
render () {
|
||||
const { intl, isVisible, onOverlayClicked, onCloseClicked, children } = this.props;
|
||||
|
||||
const content = isVisible ? children : <div />;
|
||||
|
||||
return (
|
||||
<div className='lightbox' style={{...overlayStyle, display: isVisible ? 'flex' : 'none'}} onClick={onOverlayClicked}>
|
||||
<Motion defaultStyle={{ y: -200 }} style={{ y: spring(isVisible ? 0 : -200) }}>
|
||||
{({ y }) =>
|
||||
<div style={{...dialogStyle, transform: `translateY(${y}px)`}}>
|
||||
<Motion defaultStyle={{ backgroundOpacity: 0, opacity: 0, y: -400 }} style={{ backgroundOpacity: spring(isVisible ? 50 : 0), opacity: isVisible ? spring(200) : 0, y: spring(isVisible ? 0 : -400, { stiffness: 150, damping: 12 }) }}>
|
||||
{({ backgroundOpacity, opacity, y }) =>
|
||||
<div className='lightbox' style={{...overlayStyle, background: `rgba(0, 0, 0, ${backgroundOpacity / 100})`, display: Math.floor(backgroundOpacity) === 0 ? 'none' : 'flex'}} onClick={onOverlayClicked}>
|
||||
<div style={{...dialogStyle, transform: `translateY(${y}px)`, opacity: opacity / 100 }}>
|
||||
<IconButton title={intl.formatMessage({ id: 'lightbox.close', defaultMessage: 'Close' })} icon='times' onClick={onCloseClicked} size={16} style={closeStyle} />
|
||||
{content}
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
</Motion>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</Motion>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { closeModal } from '../../../actions/modal';
|
||||
import Lightbox from '../../../components/lightbox';
|
||||
import { connect } from 'react-redux';
|
||||
import { closeModal } from '../../../actions/modal';
|
||||
import Lightbox from '../../../components/lightbox';
|
||||
import ImageLoader from 'react-imageloader';
|
||||
import LoadingIndicator from '../../../components/loading_indicator';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
url: state.getIn(['modal', 'url']),
|
||||
|
|
@ -23,6 +25,8 @@ const imageStyle = {
|
|||
maxHeight: '80vh'
|
||||
};
|
||||
|
||||
const preloader = () => <LoadingIndicator />;
|
||||
|
||||
const Modal = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
|
|
@ -37,7 +41,11 @@ const Modal = React.createClass({
|
|||
|
||||
return (
|
||||
<Lightbox {...other}>
|
||||
<img src={url} style={imageStyle} />
|
||||
<ImageLoader
|
||||
src={url}
|
||||
preloader={preloader}
|
||||
imgProps={{ style: imageStyle }}
|
||||
/>
|
||||
</Lightbox>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
"react-autosuggest": "^7.0.1",
|
||||
"react-decoration": "^1.4.0",
|
||||
"react-dom": "^15.3.0",
|
||||
"react-imageloader": "^2.1.0",
|
||||
"react-immutable-proptypes": "^2.1.0",
|
||||
"react-intl": "^2.1.5",
|
||||
"react-motion": "^0.4.5",
|
||||
|
|
|
|||
123
yarn.lock
123
yarn.lock
|
|
@ -97,10 +97,6 @@
|
|||
webpack-dev-middleware "^1.6.0"
|
||||
webpack-hot-middleware "^2.10.0"
|
||||
|
||||
Base64@~0.2.0:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/Base64/-/Base64-0.2.1.tgz#ba3a4230708e186705065e66babdd4c35cf60028"
|
||||
|
||||
JSONStream@^0.10.0:
|
||||
version "0.10.0"
|
||||
resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-0.10.0.tgz#74349d0d89522b71f30f0a03ff9bd20ca6f12ac0"
|
||||
|
|
@ -1192,7 +1188,7 @@ browserify-sign@^4.0.0:
|
|||
inherits "^2.0.1"
|
||||
parse-asn1 "^5.0.0"
|
||||
|
||||
browserify-zlib@^0.1.4, browserify-zlib@~0.1.2, browserify-zlib@~0.1.4:
|
||||
browserify-zlib@^0.1.4, browserify-zlib@~0.1.2:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
|
||||
dependencies:
|
||||
|
|
@ -1522,10 +1518,6 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
|
|||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
|
||||
|
||||
constants-browserify@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-0.0.1.tgz#92577db527ba6c4cf0a4568d84bc031f441e21f2"
|
||||
|
||||
constants-browserify@^1.0.0, constants-browserify@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
|
||||
|
|
@ -1626,14 +1618,6 @@ crypto-browserify@^3.0.0:
|
|||
public-encrypt "^4.0.0"
|
||||
randombytes "^2.0.0"
|
||||
|
||||
crypto-browserify@~3.2.6:
|
||||
version "3.2.8"
|
||||
resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.2.8.tgz#b9b11dbe6d9651dd882a01e6cc467df718ecf189"
|
||||
dependencies:
|
||||
pbkdf2-compat "2.0.1"
|
||||
ripemd160 "0.2.0"
|
||||
sha.js "2.2.6"
|
||||
|
||||
css-color-names@0.0.4:
|
||||
version "0.0.4"
|
||||
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
|
||||
|
|
@ -2543,13 +2527,6 @@ htmlparser2@~3.8.1:
|
|||
entities "1.0"
|
||||
readable-stream "1.1"
|
||||
|
||||
http-browserify@^1.3.2:
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/http-browserify/-/http-browserify-1.7.0.tgz#33795ade72df88acfbfd36773cefeda764735b20"
|
||||
dependencies:
|
||||
Base64 "~0.2.0"
|
||||
inherits "~2.0.1"
|
||||
|
||||
http-errors@~1.5.0:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.0.tgz#b1cb3d8260fd8e2386cad3189045943372d48211"
|
||||
|
|
@ -2570,10 +2547,6 @@ http-signature@~1.1.0:
|
|||
jsprim "^1.2.2"
|
||||
sshpk "^1.7.0"
|
||||
|
||||
https-browserify@0.0.0:
|
||||
version "0.0.0"
|
||||
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.0.tgz#b3ffdfe734b2a3d4a9efd58e8654c91fce86eafd"
|
||||
|
||||
https-browserify@0.0.1, https-browserify@~0.0.0:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
|
||||
|
|
@ -3445,34 +3418,6 @@ node-gyp@^3.3.1:
|
|||
tar "^2.0.0"
|
||||
which "1"
|
||||
|
||||
node-libs-browser@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.6.0.tgz#244806d44d319e048bc8607b5cc4eaf9a29d2e3c"
|
||||
dependencies:
|
||||
assert "^1.1.1"
|
||||
browserify-zlib "~0.1.4"
|
||||
buffer "^4.9.0"
|
||||
console-browserify "^1.1.0"
|
||||
constants-browserify "0.0.1"
|
||||
crypto-browserify "~3.2.6"
|
||||
domain-browser "^1.1.1"
|
||||
events "^1.0.0"
|
||||
http-browserify "^1.3.2"
|
||||
https-browserify "0.0.0"
|
||||
os-browserify "~0.1.2"
|
||||
path-browserify "0.0.0"
|
||||
process "^0.11.0"
|
||||
punycode "^1.2.4"
|
||||
querystring-es3 "~0.2.0"
|
||||
readable-stream "^1.1.13"
|
||||
stream-browserify "^1.0.0"
|
||||
string_decoder "~0.10.25"
|
||||
timers-browserify "^1.0.1"
|
||||
tty-browserify "0.0.0"
|
||||
url "~0.10.1"
|
||||
util "~0.10.3"
|
||||
vm-browserify "0.0.4"
|
||||
|
||||
node-libs-browser@^0.7.0:
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
|
||||
|
|
@ -3710,7 +3655,7 @@ os-browserify@^0.2.0:
|
|||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
|
||||
|
||||
os-browserify@~0.1.1, os-browserify@~0.1.2:
|
||||
os-browserify@~0.1.1:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.1.2.tgz#49ca0293e0b19590a5f5de10c7f265a617d8fe54"
|
||||
|
||||
|
|
@ -4280,6 +4225,10 @@ react-fuzzy@^0.3.3:
|
|||
classnames "^2.2.3"
|
||||
fuse.js "^2.2.0"
|
||||
|
||||
react-imageloader@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-imageloader/-/react-imageloader-2.1.0.tgz#a58401970b3282386aeb810c43175165634f6308"
|
||||
|
||||
react-immutable-proptypes@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz#023d6f39bb15c97c071e9e60d00d136eac5fa0b4"
|
||||
|
|
@ -4435,7 +4384,7 @@ read-pkg@^1.0.0:
|
|||
normalize-package-data "^2.3.2"
|
||||
path-type "^1.0.0"
|
||||
|
||||
readable-stream@1.1, readable-stream@^1.0.27-1, readable-stream@^1.1.13:
|
||||
readable-stream@1.1:
|
||||
version "1.1.14"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
|
||||
dependencies:
|
||||
|
|
@ -4831,7 +4780,7 @@ sortobject@^1.0.0:
|
|||
dependencies:
|
||||
editions "^1.1.1"
|
||||
|
||||
source-list-map@^0.1.4, source-list-map@~0.1.0:
|
||||
source-list-map@^0.1.4:
|
||||
version "0.1.6"
|
||||
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.6.tgz#e1e6f94f0b40c4d28dcf8f5b8766e0e45636877f"
|
||||
|
||||
|
|
@ -4909,13 +4858,6 @@ stackframe@^0.3.1:
|
|||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.0.tgz#8e55758cb20e7682c1f4fce8dcab30bf01d1e07a"
|
||||
|
||||
stream-browserify@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
|
||||
dependencies:
|
||||
inherits "~2.0.1"
|
||||
readable-stream "^1.0.27-1"
|
||||
|
||||
stream-browserify@^2.0.0, stream-browserify@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
|
||||
|
|
@ -4979,7 +4921,7 @@ string.prototype.padstart@^3.0.0:
|
|||
es-abstract "^1.4.3"
|
||||
function-bind "^1.0.2"
|
||||
|
||||
string_decoder@^0.10.25, string_decoder@~0.10.0, string_decoder@~0.10.25, string_decoder@~0.10.x:
|
||||
string_decoder@^0.10.25, string_decoder@~0.10.0, string_decoder@~0.10.x:
|
||||
version "0.10.31"
|
||||
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
|
||||
|
||||
|
|
@ -5177,15 +5119,6 @@ ua-parser-js@^0.7.9:
|
|||
version "0.7.10"
|
||||
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.10.tgz#917559ddcce07cbc09ece7d80495e4c268f4ef9f"
|
||||
|
||||
uglify-js@~2.6.0:
|
||||
version "2.6.4"
|
||||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.6.4.tgz#65ea2fb3059c9394692f15fed87c2b36c16b9adf"
|
||||
dependencies:
|
||||
async "~0.2.6"
|
||||
source-map "~0.5.1"
|
||||
uglify-to-browserify "~1.0.0"
|
||||
yargs "~3.10.0"
|
||||
|
||||
uglify-js@~2.7.3:
|
||||
version "2.7.5"
|
||||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
|
||||
|
|
@ -5239,13 +5172,6 @@ url@^0.11.0, url@~0.11.0:
|
|||
punycode "1.3.2"
|
||||
querystring "0.2.0"
|
||||
|
||||
url@~0.10.1:
|
||||
version "0.10.3"
|
||||
resolved "https://registry.yarnpkg.com/url/-/url-0.10.3.tgz#021e4d9c7705f21bbf37d03ceb58767402774c64"
|
||||
dependencies:
|
||||
punycode "1.3.2"
|
||||
querystring "0.2.0"
|
||||
|
||||
user-home@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
|
||||
|
|
@ -5254,7 +5180,7 @@ util-deprecate@~1.0.1:
|
|||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
|
||||
|
||||
util@0.10.3, "util@>=0.10.3 <1", util@^0.10.3, util@~0.10.1, util@~0.10.3:
|
||||
util@0.10.3, "util@>=0.10.3 <1", util@^0.10.3, util@~0.10.1:
|
||||
version "0.10.3"
|
||||
resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
|
||||
dependencies:
|
||||
|
|
@ -5323,13 +5249,6 @@ webidl-conversions@^3.0.0, webidl-conversions@^3.0.1:
|
|||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
|
||||
|
||||
webpack-core@~0.6.0:
|
||||
version "0.6.8"
|
||||
resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.8.tgz#edf9135de00a6a3c26dd0f14b208af0aa4af8d0a"
|
||||
dependencies:
|
||||
source-list-map "~0.1.0"
|
||||
source-map "~0.4.1"
|
||||
|
||||
webpack-core@~0.6.9:
|
||||
version "0.6.9"
|
||||
resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
|
||||
|
|
@ -5355,27 +5274,7 @@ webpack-hot-middleware@^2.10.0:
|
|||
querystring "^0.2.0"
|
||||
strip-ansi "^3.0.0"
|
||||
|
||||
webpack@^1.13.1:
|
||||
version "1.13.2"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.13.2.tgz#f11a96f458eb752970a86abe746c0704fabafaf3"
|
||||
dependencies:
|
||||
acorn "^3.0.0"
|
||||
async "^1.3.0"
|
||||
clone "^1.0.2"
|
||||
enhanced-resolve "~0.9.0"
|
||||
interpret "^0.6.4"
|
||||
loader-utils "^0.2.11"
|
||||
memory-fs "~0.3.0"
|
||||
mkdirp "~0.5.0"
|
||||
node-libs-browser "^0.6.0"
|
||||
optimist "~0.6.0"
|
||||
supports-color "^3.1.0"
|
||||
tapable "~0.1.8"
|
||||
uglify-js "~2.6.0"
|
||||
watchpack "^0.2.1"
|
||||
webpack-core "~0.6.0"
|
||||
|
||||
webpack@^1.14.0:
|
||||
webpack@^1.13.1, webpack@^1.14.0:
|
||||
version "1.14.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
|
||||
dependencies:
|
||||
|
|
|
|||
Reference in New Issue