From b2647bc3f2261bc9c0aaa544cb72eb59f35ac36f Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 9 Dec 2023 18:33:42 +0100 Subject: [PATCH] [Glitch] Update `Avatar`, `AvatarComposite`, and `AvatarOverlay` components (#2508) Various ports including 8dfe5179ee7186e549dbe1186a151ffa848fe8ab, d1de7fb7fa561a76c30f3b1f60b82856443ed4b3 and 9f8d34620b6fa502da683f3775805bf2a5474f92. Co-authored-by: Eugen Rochko Co-authored-by: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com> --- .../flavours/glitch/components/avatar.tsx | 33 +++++------ .../glitch/components/avatar_composite.jsx | 8 ++- .../glitch/components/avatar_overlay.jsx | 39 ------------- .../glitch/components/avatar_overlay.tsx | 56 +++++++++++++++++++ .../glitch/components/status_header.jsx | 4 +- .../components/moved_note.jsx | 2 +- .../notifications/components/report.jsx | 2 +- .../glitch/styles/components/accounts.scss | 43 +++++--------- 8 files changed, 93 insertions(+), 94 deletions(-) delete mode 100644 app/javascript/flavours/glitch/components/avatar_overlay.jsx create mode 100644 app/javascript/flavours/glitch/components/avatar_overlay.tsx diff --git a/app/javascript/flavours/glitch/components/avatar.tsx b/app/javascript/flavours/glitch/components/avatar.tsx index e69e9950d1..7ed2d003ef 100644 --- a/app/javascript/flavours/glitch/components/avatar.tsx +++ b/app/javascript/flavours/glitch/components/avatar.tsx @@ -5,49 +5,44 @@ import { autoPlayGif } from '../initial_state'; import type { Account } from '../types/resources'; interface Props { - account: Account | undefined; - className?: string; + account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there size: number; style?: React.CSSProperties; inline?: boolean; + animate?: boolean; } export const Avatar: React.FC = ({ account, - className, + animate = autoPlayGif, size = 20, inline = false, style: styleFromParent, }) => { - const { hovering, handleMouseEnter, handleMouseLeave } = - useHovering(autoPlayGif); + const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate); const style = { ...styleFromParent, width: `${size}px`, height: `${size}px`, - backgroundSize: `${size}px ${size}px`, }; - if (account) { - style.backgroundImage = `url(${account.get( - hovering ? 'avatar' : 'avatar_static', - )})`; - } + const src = + hovering || animate + ? account?.get('avatar') + : account?.get('avatar_static'); return (
+ > + {src && {account?.get('acct')}} +
); }; diff --git a/app/javascript/flavours/glitch/components/avatar_composite.jsx b/app/javascript/flavours/glitch/components/avatar_composite.jsx index 762834f0fc..c736f1dd53 100644 --- a/app/javascript/flavours/glitch/components/avatar_composite.jsx +++ b/app/javascript/flavours/glitch/components/avatar_composite.jsx @@ -5,6 +5,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { autoPlayGif } from '../initial_state'; +import { Avatar } from './avatar'; + export default class AvatarComposite extends PureComponent { static propTypes = { @@ -76,12 +78,12 @@ export default class AvatarComposite extends PureComponent { bottom: bottom, width: `${width}%`, height: `${height}%`, - backgroundSize: 'cover', - backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`, }; return ( -
+
+ +
); } diff --git a/app/javascript/flavours/glitch/components/avatar_overlay.jsx b/app/javascript/flavours/glitch/components/avatar_overlay.jsx deleted file mode 100644 index d8215a4785..0000000000 --- a/app/javascript/flavours/glitch/components/avatar_overlay.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; - -import ImmutablePropTypes from 'react-immutable-proptypes'; - -import { autoPlayGif } from 'flavours/glitch/initial_state'; - -export default class AvatarOverlay extends PureComponent { - - static propTypes = { - account: ImmutablePropTypes.map.isRequired, - friend: ImmutablePropTypes.map.isRequired, - animate: PropTypes.bool, - }; - - static defaultProps = { - animate: autoPlayGif, - }; - - 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')})`, - }; - - return ( -
-
-
-
- ); - } - -} diff --git a/app/javascript/flavours/glitch/components/avatar_overlay.tsx b/app/javascript/flavours/glitch/components/avatar_overlay.tsx new file mode 100644 index 0000000000..da9c293856 --- /dev/null +++ b/app/javascript/flavours/glitch/components/avatar_overlay.tsx @@ -0,0 +1,56 @@ +import { useHovering } from '../hooks/useHovering'; +import { autoPlayGif } from '../initial_state'; +import type { Account } from '../types/resources'; + +interface Props { + account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there + friend: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there + size?: number; + baseSize?: number; + overlaySize?: number; +} + +export const AvatarOverlay: React.FC = ({ + account, + friend, + size = 46, + baseSize = 36, + overlaySize = 24, +}) => { + const { hovering, handleMouseEnter, handleMouseLeave } = + useHovering(autoPlayGif); + const accountSrc = hovering + ? account?.get('avatar') + : account?.get('avatar_static'); + const friendSrc = hovering + ? friend?.get('avatar') + : friend?.get('avatar_static'); + + return ( +
+
+
+ {accountSrc && {account?.get('acct')}} +
+
+
+
+ {friendSrc && {friend?.get('acct')}} +
+
+
+ ); +}; diff --git a/app/javascript/flavours/glitch/components/status_header.jsx b/app/javascript/flavours/glitch/components/status_header.jsx index cf7ab5365e..1c51707cef 100644 --- a/app/javascript/flavours/glitch/components/status_header.jsx +++ b/app/javascript/flavours/glitch/components/status_header.jsx @@ -6,7 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; // Mastodon imports. import { Avatar } from './avatar'; -import AvatarOverlay from './avatar_overlay'; +import { AvatarOverlay } from './avatar_overlay'; import { DisplayName } from './display_name'; export default class StatusHeader extends PureComponent { @@ -39,7 +39,7 @@ export default class StatusHeader extends PureComponent { let statusAvatar; if (friend === undefined || friend === null) { - statusAvatar = ; + statusAvatar = ; } else { statusAvatar = ; } diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx index 5d32f5a90f..9142399929 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx @@ -8,7 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { Icon } from 'flavours/glitch/components/icon'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; -import AvatarOverlay from '../../../components/avatar_overlay'; +import { AvatarOverlay } from '../../../components/avatar_overlay'; import { DisplayName } from '../../../components/display_name'; class MovedNote extends ImmutablePureComponent { diff --git a/app/javascript/flavours/glitch/features/notifications/components/report.jsx b/app/javascript/flavours/glitch/features/notifications/components/report.jsx index fee4f87fcf..decee64db4 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/report.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/report.jsx @@ -5,7 +5,7 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import AvatarOverlay from 'flavours/glitch/components/avatar_overlay'; +import { AvatarOverlay } from 'flavours/glitch/components/avatar_overlay'; import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; // This needs to be kept in sync with app/models/report.rb diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index fa17098234..8983ed7ce4 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -85,10 +85,14 @@ display: block; position: relative; - cursor: pointer; - width: 36px; - height: 36px; - background-size: 36px 36px; + overflow: hidden; + + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } &-inline { display: inline-block; @@ -102,7 +106,7 @@ overflow: hidden; position: relative; - & div { + & > div { @include avatar-radius; float: left; @@ -110,6 +114,11 @@ box-sizing: border-box; } + .account__avatar { + width: 100% !important; + height: 100% !important; + } + &__label { display: block; position: absolute; @@ -125,37 +134,13 @@ } .account__avatar-overlay { - @include avatar-size(48px); - 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; inset-inline-end: 0; z-index: 1; - - img { - @include avatar-radius; - - width: 100%; - height: 100%; - } } }