replace react-modal with selmade modal and fix modal and alert stylings

This commit is contained in:
HF 2021-03-17 20:57:43 +01:00
parent a4c0ead137
commit 109b7f76dc
4 changed files with 91 additions and 57 deletions

View File

@ -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">

View File

@ -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:`}&nbsp; {t`Can't read? Reload:`}&nbsp;
<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>

View File

@ -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);

View File

@ -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;
}