diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2022-10-28 00:48:45 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-28 00:48:45 +0200 |
commit | 8dfe5179ee7186e549dbe1186a151ffa848fe8ab (patch) | |
tree | 9b2ec70b5330372ea02e8d14e5f9dc3f402ea2d9 /app/javascript/mastodon/components/avatar_overlay.js | |
parent | 07cc201accd4a04c8c11cda21eecded4e7875d55 (diff) |
Fix avatars not using image tags in web UI (#19488)
Fix #19483
Diffstat (limited to 'app/javascript/mastodon/components/avatar_overlay.js')
-rw-r--r-- | app/javascript/mastodon/components/avatar_overlay.js | 36 |
1 files changed, 25 insertions, 11 deletions
diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index 3ec1d7730..8d5d44ea5 100644 --- a/app/javascript/mastodon/components/avatar_overlay.js +++ b/app/javascript/mastodon/components/avatar_overlay.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { autoPlayGif } from '../initial_state'; +import Avatar from './avatar'; export default class AvatarOverlay extends React.PureComponent { @@ -9,27 +10,40 @@ export default class AvatarOverlay extends React.PureComponent { account: ImmutablePropTypes.map.isRequired, friend: ImmutablePropTypes.map.isRequired, animate: PropTypes.bool, + size: PropTypes.number, + baseSize: PropTypes.number, + overlaySize: PropTypes.number, }; static defaultProps = { animate: autoPlayGif, + size: 46, + baseSize: 36, + overlaySize: 24, }; - render() { - const { account, friend, animate } = this.props; + state = { + hovering: false, + }; + + handleMouseEnter = () => { + if (this.props.animate) return; + this.setState({ hovering: true }); + } - const baseStyle = { - backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`, - }; + handleMouseLeave = () => { + if (this.props.animate) return; + this.setState({ hovering: false }); + } - const overlayStyle = { - backgroundImage: `url(${friend.get(animate ? 'avatar' : 'avatar_static')})`, - }; + render() { + const { account, friend, animate, size, baseSize, overlaySize } = this.props; + const { hovering } = this.state; return ( - <div className='account__avatar-overlay'> - <div className='account__avatar-overlay-base' style={baseStyle} /> - <div className='account__avatar-overlay-overlay' style={overlayStyle} /> + <div className='account__avatar-overlay' style={{ width: size, height: size }}> + <div className='account__avatar-overlay-base'><Avatar animate={hovering || animate} account={account} size={baseSize} /></div> + <div className='account__avatar-overlay-overlay'><Avatar animate={hovering || animate} account={friend} size={overlaySize} /></div> </div> ); } |