diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2020-11-27 03:24:11 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-11-27 03:24:11 +0100 |
commit | 1e89e2ed988d2103ecd46e06476d863cb40c57c7 (patch) | |
tree | 8106653d22e2f0275529fca4f9f8f763326ccd77 /app/javascript/mastodon/components/modal_root.js | |
parent | cb7bd8ee0333b608b168c20f32acf3337412dac0 (diff) |
Change media modals look in web UI (#15217)
- Change overlay background to match color of viewed image - Add interactive reply/boost/favourite buttons to footer of modal - Change ugly "View context" link to button among the action bar
Diffstat (limited to 'app/javascript/mastodon/components/modal_root.js')
-rw-r--r-- | app/javascript/mastodon/components/modal_root.js | 18 |
1 files changed, 14 insertions, 4 deletions
diff --git a/app/javascript/mastodon/components/modal_root.js b/app/javascript/mastodon/components/modal_root.js index fe573ffda..9bfc0e49f 100644 --- a/app/javascript/mastodon/components/modal_root.js +++ b/app/javascript/mastodon/components/modal_root.js @@ -1,12 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import 'wicg-inert'; +import { normal } from 'color-blend'; export default class ModalRoot extends React.PureComponent { static propTypes = { children: PropTypes.node, onClose: PropTypes.func.isRequired, + backgroundColor: PropTypes.shape({ + r: PropTypes.number, + g: PropTypes.number, + b: PropTypes.number, + }), }; activeElement = this.props.children ? document.activeElement : null; @@ -62,9 +68,7 @@ export default class ModalRoot extends React.PureComponent { Promise.resolve().then(() => { this.activeElement.focus({ preventScroll: true }); this.activeElement = null; - }).catch((error) => { - console.error(error); - }); + }).catch(console.error); } } @@ -91,10 +95,16 @@ export default class ModalRoot extends React.PureComponent { ); } + let backgroundColor = null; + + if (this.props.backgroundColor) { + backgroundColor = normal({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.3 }); + } + return ( <div className='modal-root' ref={this.setRef}> <div style={{ pointerEvents: visible ? 'auto' : 'none' }}> - <div role='presentation' className='modal-root__overlay' onClick={onClose} /> + <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.7)` : null }} /> <div role='dialog' className='modal-root__container'>{children}</div> </div> </div> |