From 3d970faeb1b52c025b0df38bfd91135e778834e8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 21 Nov 2020 23:54:36 +0100 Subject: [PATCH] [Glitch] Remove fade-in animation from modals in web UI Signed-off-by: Thibaut Girka --- .../flavours/glitch/components/modal_root.js | 18 ++++-------------- .../glitch/styles/components/modal.scss | 2 -- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/app/javascript/flavours/glitch/components/modal_root.js b/app/javascript/flavours/glitch/components/modal_root.js index 8d73a1e407a..13a8e8702d3 100644 --- a/app/javascript/flavours/glitch/components/modal_root.js +++ b/app/javascript/flavours/glitch/components/modal_root.js @@ -14,11 +14,7 @@ export default class ModalRoot extends React.PureComponent { noEsc: PropTypes.bool, }; - 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) @@ -59,8 +55,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 }); } } @@ -80,11 +74,8 @@ export default class ModalRoot extends React.PureComponent { this.handleModalClose(); } - if (this.props.children) { - requestAnimationFrame(() => { - this.setState({ revealed: true }); - }); - if (!prevProps.children) this.handleModalOpen(); + if (this.props.children && !prevProps.children) { + this.handleModalOpen(); } } @@ -121,7 +112,6 @@ export default class ModalRoot extends React.PureComponent { render () { const { children, onClose } = this.props; - const { revealed } = this.state; const visible = !!children; if (!visible) { @@ -131,7 +121,7 @@ export default class ModalRoot extends React.PureComponent { } return ( -
+
{children}
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index bc09658647f..421cbec0012 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -4,8 +4,6 @@ .modal-root { position: relative; - transition: opacity 0.3s linear; - will-change: opacity; z-index: 9999; }