mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02:00
Remove fade-in animation from modals in web UI (#15199)
This commit is contained in:
parent
f970e1fab6
commit
272566043a
@ -9,11 +9,7 @@ export default class ModalRoot extends React.PureComponent {
|
|||||||
onClose: PropTypes.func.isRequired,
|
onClose: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
activeElement = this.props.children ? document.activeElement : null;
|
||||||
revealed: !!this.props.children,
|
|
||||||
};
|
|
||||||
|
|
||||||
activeElement = this.state.revealed ? document.activeElement : null;
|
|
||||||
|
|
||||||
handleKeyUp = (e) => {
|
handleKeyUp = (e) => {
|
||||||
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
|
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
|
||||||
@ -53,8 +49,6 @@ export default class ModalRoot extends React.PureComponent {
|
|||||||
this.activeElement = document.activeElement;
|
this.activeElement = document.activeElement;
|
||||||
|
|
||||||
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
|
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
|
||||||
} else if (!nextProps.children) {
|
|
||||||
this.setState({ revealed: false });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -72,11 +66,6 @@ export default class ModalRoot extends React.PureComponent {
|
|||||||
console.error(error);
|
console.error(error);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (this.props.children) {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
this.setState({ revealed: true });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
@ -94,7 +83,6 @@ export default class ModalRoot extends React.PureComponent {
|
|||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { children, onClose } = this.props;
|
const { children, onClose } = this.props;
|
||||||
const { revealed } = this.state;
|
|
||||||
const visible = !!children;
|
const visible = !!children;
|
||||||
|
|
||||||
if (!visible) {
|
if (!visible) {
|
||||||
@ -104,7 +92,7 @@ export default class ModalRoot extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
|
<div className='modal-root' ref={this.setRef}>
|
||||||
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
|
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
|
||||||
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
|
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
|
||||||
<div role='dialog' className='modal-root__container'>{children}</div>
|
<div role='dialog' className='modal-root__container'>{children}</div>
|
||||||
|
@ -4439,8 +4439,6 @@ a.status-card.compact:hover {
|
|||||||
|
|
||||||
.modal-root {
|
.modal-root {
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: opacity 0.3s linear;
|
|
||||||
will-change: opacity;
|
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user