From 8dfe5179ee7186e549dbe1186a151ffa848fe8ab Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Oct 2022 00:48:45 +0200 Subject: [PATCH] Fix avatars not using image tags in web UI (#19488) Fix #19483 --- .../__snapshots__/avatar-test.js.snap | 22 ++++---- .../__snapshots__/avatar_overlay-test.js.snap | 50 +++++++++++++++---- app/javascript/mastodon/components/avatar.js | 26 +++------- .../mastodon/components/avatar_composite.js | 7 +-- .../mastodon/components/avatar_overlay.js | 38 +++++++++----- .../styles/mastodon/components.scss | 39 +++++---------- 6 files changed, 103 insertions(+), 79 deletions(-) diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap index f5c10aa377d..7fbdedeb23f 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap @@ -2,36 +2,38 @@ exports[` Autoplay renders a animated avatar 1`] = `
+> + alice +
`; exports[` Still renders a still avatar 1`] = `
+> + alice +
`; diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap index 58f27a32122..f8385357a39 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap @@ -3,22 +3,52 @@ exports[`
+
+ > + alice +
+
+
+ > + eve@blackhat.lair +
+
`; diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index dd3932ae6c3..207b2669134 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -42,30 +42,20 @@ export default class Avatar extends React.PureComponent { ...this.props.style, width: `${size}px`, height: `${size}px`, - backgroundSize: `${size}px ${size}px`, }; - if (account) { - const src = account.get('avatar'); - const staticSrc = account.get('avatar_static'); + let src; - if (hovering || animate) { - style.backgroundImage = `url(${src})`; - } else { - style.backgroundImage = `url(${staticSrc})`; - } + if (hovering || animate) { + src = account?.get('avatar'); + } else { + src = account?.get('avatar_static'); } - return ( -
+
+ {account?.get('acct')} +
); } diff --git a/app/javascript/mastodon/components/avatar_composite.js b/app/javascript/mastodon/components/avatar_composite.js index 5d5b897492f..220bf5b4f8e 100644 --- a/app/javascript/mastodon/components/avatar_composite.js +++ b/app/javascript/mastodon/components/avatar_composite.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 AvatarComposite extends React.PureComponent { @@ -74,12 +75,12 @@ export default class AvatarComposite extends React.PureComponent { bottom: bottom, width: `${width}%`, height: `${height}%`, - backgroundSize: 'cover', - backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`, }; return ( -
+
+ +
); } diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index 3ec1d77304f..8d5d44ea560 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, }; + state = { + hovering: false, + }; + + handleMouseEnter = () => { + if (this.props.animate) return; + this.setState({ hovering: true }); + } + + handleMouseLeave = () => { + if (this.props.animate) return; + this.setState({ hovering: false }); + } + render() { - const { account, friend, animate } = this.props; - - const baseStyle = { - backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`, - }; - - const overlayStyle = { - backgroundImage: `url(${friend.get(animate ? 'avatar' : 'avatar_static')})`, - }; + const { account, friend, animate, size, baseSize, overlaySize } = this.props; + const { hovering } = this.state; return ( -
-
-
+
+
+
); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 633b9ed7031..69301fb052e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1382,6 +1382,14 @@ display: block; position: relative; + overflow: hidden; + + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } &-inline { display: inline-block; @@ -1390,8 +1398,6 @@ } &-composite { - @include avatar-radius; - border-radius: 50%; overflow: hidden; position: relative; @@ -1402,6 +1408,11 @@ box-sizing: border-box; } + .account__avatar { + width: 100% !important; + height: 100% !important; + } + &__label { display: block; position: absolute; @@ -1421,37 +1432,13 @@ a .account__avatar { } .account__avatar-overlay { - @include avatar-size(46px); - position: relative; - &-base { - @include avatar-radius; - @include avatar-size(36px); - - img { - @include avatar-radius; - - width: 100%; - height: 100%; - } - } - &-overlay { - @include avatar-radius; - @include avatar-size(24px); - position: absolute; bottom: 0; right: 0; z-index: 1; - - img { - @include avatar-radius; - - width: 100%; - height: 100%; - } } }