Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-15 08:48:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Add year in review feature to web UI

Browse Source 
Port d6349c0e9a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2024-11-05 15:40:07 +01:00
committed by Claire
parent d19d7a283e
commit 3244926565
21 changed files with 1047 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/javascript/flavours/glitch/components/modal_root.jsx
View File

@@ -13,11 +13,14 @@ class ModalRoot extends PureComponent {
static propTypes = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
backgroundColor: PropTypes.shape({
r: PropTypes.number,
g: PropTypes.number,
b: PropTypes.number,
}),
backgroundColor: PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape({
r: PropTypes.number,
g: PropTypes.number,
b: PropTypes.number,
}),
]),
noEsc: PropTypes.bool,
ignoreFocus: PropTypes.bool,
...WithOptionalRouterPropTypes,
@@ -146,14 +149,17 @@ class ModalRoot extends PureComponent {
let backgroundColor = null;
if (this.props.backgroundColor) {
backgroundColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 });
if (this.props.backgroundColor && typeof this.props.backgroundColor === 'string') {
backgroundColor = this.props.backgroundColor;
} else if (this.props.backgroundColor) {
const darkenedColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 });
backgroundColor = `rgb(${darkenedColor.r}, ${darkenedColor.g}, ${darkenedColor.b})`;
}
return (
<div className='modal-root' ref={this.setRef}>
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
<div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.9)` : null }} />
<div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor }} />
<div role='dialog' className='modal-root__container'>{children}</div>
</div>
</div>