forked from ppfun/pixelplanet
replace react-modal with selmade modal and fix modal and alert stylings
This commit is contained in:
parent
a4c0ead137
commit
109b7f76dc
|
@ -45,10 +45,7 @@ const Alert = () => {
|
||||||
onClick={close}
|
onClick={close}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className="Alert"
|
className={(alertOpen && render) ? 'Alert show' : 'Alert'}
|
||||||
style={{
|
|
||||||
zIndex: 5,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<h2>{alertTitle}</h2>
|
<h2>{alertTitle}</h2>
|
||||||
<p className="modaltext">
|
<p className="modaltext">
|
||||||
|
|
|
@ -20,6 +20,7 @@ const Captcha = ({ callback, close }) => {
|
||||||
const [captchaUrl, setCaptchaUrl] = useState(getUrl());
|
const [captchaUrl, setCaptchaUrl] = useState(getUrl());
|
||||||
const [text, setText] = useState('');
|
const [text, setText] = useState('');
|
||||||
const [errors, setErrors] = useState([]);
|
const [errors, setErrors] = useState([]);
|
||||||
|
const [imgLoaded, setImgLoaded] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
@ -34,19 +35,39 @@ const Captcha = ({ callback, close }) => {
|
||||||
({t`Tip: Not case-sensitive; I and l are the same`})
|
({t`Tip: Not case-sensitive; I and l are the same`})
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<img
|
<br />
|
||||||
style={{ width: '75%' }}
|
<div
|
||||||
src={captchaUrl}
|
style={{
|
||||||
alt="CAPTCHA"
|
width: '100%',
|
||||||
onError={() => setErrors([t`Could not load captcha`])}
|
paddingTop: '60%',
|
||||||
/>
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: `scale(${(imgLoaded) ? '1' : '0'}) translate(-50%,-50%)`,
|
||||||
|
transition: '100ms',
|
||||||
|
}}
|
||||||
|
src={captchaUrl}
|
||||||
|
alt="CAPTCHA"
|
||||||
|
onLoad={() => {setImgLoaded(true)}}
|
||||||
|
onError={() => setErrors([t`Could not load captcha`])}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<p className="modaltext">
|
<p className="modaltext">
|
||||||
{t`Can't read? Reload:`}
|
{t`Can't read? Reload:`}
|
||||||
<span
|
<span
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
title={t`Reload`}
|
title={t`Reload`}
|
||||||
onClick={() => setCaptchaUrl(getUrl())}
|
onClick={() => {
|
||||||
|
setImgLoaded(false);
|
||||||
|
setCaptchaUrl(getUrl());
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<IoReloadCircleSharp />
|
<IoReloadCircleSharp />
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -5,9 +5,8 @@
|
||||||
* @flow
|
* @flow
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
import Modal from 'react-modal';
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { MdClose } from 'react-icons/md';
|
import { MdClose } from 'react-icons/md';
|
||||||
import { t } from 'ttag';
|
import { t } from 'ttag';
|
||||||
|
|
||||||
|
@ -38,44 +37,60 @@ const MODAL_COMPONENTS = {
|
||||||
/* other modals */
|
/* other modals */
|
||||||
};
|
};
|
||||||
|
|
||||||
const ModalRoot = ({ modalType, modalOpen, close }) => {
|
const ModalRoot = () => {
|
||||||
const choice = MODAL_COMPONENTS[modalType || 'NONE'];
|
const [render, setRender] = useState(false);
|
||||||
const { content: SpecificModal, title } = choice;
|
|
||||||
|
const {
|
||||||
|
modalType,
|
||||||
|
modalOpen,
|
||||||
|
} = useSelector((state) => state.modal);
|
||||||
|
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
content: SpecificModal,
|
||||||
|
} = MODAL_COMPONENTS[modalType || 'NONE'];
|
||||||
|
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const close = useCallback(() => {
|
||||||
|
dispatch(hideModal());
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
const onTransitionEnd = () => {
|
||||||
|
if (!modalOpen) setRender(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.setTimeout(() => {
|
||||||
|
if (modalOpen) setRender(true);
|
||||||
|
}, 10);
|
||||||
|
}, [modalOpen]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
(render || modalOpen) && (
|
||||||
isOpen={modalOpen}
|
<div>
|
||||||
onClose={close}
|
<div
|
||||||
className="Modal"
|
className={(modalOpen && render) ? 'Overlay show' : 'Overlay'}
|
||||||
overlayClassName="Overlay"
|
onTransitionEnd={onTransitionEnd}
|
||||||
contentLabel={`${title} Modal`}
|
tabIndex={-1}
|
||||||
closeTimeoutMS={200}
|
onClick={close}
|
||||||
onRequestClose={close}
|
/>
|
||||||
>
|
<div
|
||||||
<h2 style={{ paddingLeft: '5%' }}>{title}</h2>
|
className={(modalOpen && render) ? 'Modal show' : 'Modal'}
|
||||||
<div
|
>
|
||||||
onClick={close}
|
<h2 style={{ paddingLeft: '5%' }}>{title}</h2>
|
||||||
className="ModalClose"
|
<div
|
||||||
role="button"
|
onClick={close}
|
||||||
label="close"
|
className="ModalClose"
|
||||||
title={t`Close`}
|
role="button"
|
||||||
tabIndex={-1}
|
label="close"
|
||||||
><MdClose /></div>
|
title={t`Close`}
|
||||||
<SpecificModal />
|
tabIndex={-1}
|
||||||
</Modal>
|
><MdClose /></div>
|
||||||
|
<SpecificModal />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
function mapStateToProps(state: State) {
|
export default React.memo(ModalRoot);
|
||||||
const { modalType, modalOpen } = state.modal;
|
|
||||||
return { modalType, modalOpen };
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapDispatchToProps(dispatch) {
|
|
||||||
return {
|
|
||||||
close() {
|
|
||||||
dispatch(hideModal());
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(ModalRoot);
|
|
||||||
|
|
|
@ -336,17 +336,22 @@ tr:nth-child(even) {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: currentcolor none medium;
|
outline: currentcolor none medium;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
transition: opacity 200ms ease-in-out;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Modal {
|
.Modal {
|
||||||
height: 80%;
|
height: 80%;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
max-height: 900px;
|
max-height: 900px;
|
||||||
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Alert {
|
.Alert {
|
||||||
|
max-height: 100%;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
z-index: 6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modaltext, .modalcotext {
|
.modaltext, .modalcotext {
|
||||||
|
@ -441,7 +446,7 @@ tr:nth-child(even) {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 604px) {
|
@media (max-width: 604px) {
|
||||||
.Modal {
|
.Modal, .Alert {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
|
@ -709,10 +714,6 @@ tr:nth-child(even) {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ReactModal__Overlay--after-open, .Overlay.show {
|
.Modal.show, .Alert.show, .Overlay.show {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ReactModal__Overlay--before-close{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user