Skip to content
Permalink
Browse files

Remove fade-in animation from modals in web UI (#15199)

  • Loading branch information
Gargron committed Nov 21, 2020
1 parent f970e1f commit 272566043a1b25db012c8d0dd4ccc7ac909a3d77
Showing with 2 additions and 16 deletions.
  1. +2 −14 app/javascript/mastodon/components/modal_root.js
  2. +0 −2 app/javascript/styles/mastodon/components.scss
@@ -9,11 +9,7 @@ export default class ModalRoot extends React.PureComponent {
onClose: PropTypes.func.isRequired,
};

state = {
revealed: !!this.props.children,
};

activeElement = this.state.revealed ? document.activeElement : null;
activeElement = this.props.children ? document.activeElement : null;

handleKeyUp = (e) => {
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.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);
});
}
if (this.props.children) {
requestAnimationFrame(() => {
this.setState({ revealed: true });
});
}
}

componentWillUnmount () {
@@ -94,7 +83,6 @@ export default class ModalRoot extends React.PureComponent {

render () {
const { children, onClose } = this.props;
const { revealed } = this.state;
const visible = !!children;

if (!visible) {
@@ -104,7 +92,7 @@ export default class ModalRoot extends React.PureComponent {
}

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 role='presentation' className='modal-root__overlay' onClick={onClose} />
<div role='dialog' className='modal-root__container'>{children}</div>
@@ -4439,8 +4439,6 @@ a.status-card.compact:hover {

.modal-root {
position: relative;
transition: opacity 0.3s linear;
will-change: opacity;
z-index: 9999;
}

0 comments on commit 2725660

Please sign in to comment.
You can’t perform that action at this time.