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, | ||||
|   }; | ||||
| 
 | ||||
|   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; | ||||
| } | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue