treehouse
/
mastodon
20
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Remove fade-in animation from modals in web UI 

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
lolsob-rspec
Eugen Rochko 2020-11-21 23:54:36 +01:00 committed by Thibaut Girka
parent 42630afabb
commit 11e0328fc7
2 changed files with 4 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/flavours/glitch/components/modal_root.js
View File

@ -14,11 +14,7 @@ export default class ModalRoot extends React.PureComponent {
noEsc: PropTypes.bool, noEsc: PropTypes.bool,
}; };
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)
@ -59,8 +55,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 });
} }
} }
@ -80,11 +74,8 @@ export default class ModalRoot extends React.PureComponent {
this.handleModalClose(); this.handleModalClose();
} }
if (this.props.children) { if (this.props.children && !prevProps.children) {
requestAnimationFrame(() => { this.handleModalOpen();
this.setState({ revealed: true });
});
if (!prevProps.children) this.handleModalOpen();
} }
} }
@ -121,7 +112,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) {
@ -131,7 +121,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>

2
app/javascript/flavours/glitch/styles/components/modal.scss
View File

@ -4,8 +4,6 @@
.modal-root { .modal-root {
position: relative; position: relative;
transition: opacity 0.3s linear;
will-change: opacity;
z-index: 9999; z-index: 9999;
} }