CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

[Glitch] Fix missing avatar fallback interfering with transparency in web UI

Browse Source 
Port cae93e79a406a1156b51091784e35f8f0126ea12 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-10-07 11:35:42 +02:00 committed by Claire
parent 9ca99b7dc1
commit ee17081793
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/javascript/flavours/glitch/components/avatar.tsx
View File

@ -1,10 +1,11 @@
import { useState, useCallback } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { useHovering } from 'flavours/glitch/hooks/useHovering';
import { autoPlayGif } from 'flavours/glitch/initial_state';
import type { Account } from 'flavours/glitch/models/account'; import type { Account } from 'flavours/glitch/models/account';
import { useHovering } from '../hooks/useHovering';
import { autoPlayGif } from '../initial_state';
interface Props { interface Props {
account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
size: number; size: number;
@ -25,6 +26,8 @@ export const Avatar: React.FC<Props> = ({
counterBorderColor, counterBorderColor,
}) => { }) => {
const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate); const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(animate);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const style = { const style = {
...styleFromParent, ...styleFromParent,
@ -37,17 +40,29 @@ export const Avatar: React.FC<Props> = ({
? account?.get('avatar') ? account?.get('avatar')
: account?.get('avatar_static'); : account?.get('avatar_static');
const handleLoad = useCallback(() => {
setLoading(false);
}, [setLoading]);
const handleError = useCallback(() => {
setError(true);
}, [setError]);
return ( return (
<div <div
className={classNames('account__avatar', { className={classNames('account__avatar', {
'account__avatar-inline': inline, 'account__avatar--inline': inline,
'account__avatar--loading': loading,
})} })}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
style={style} style={style}
data-avatar-of={account && `@${account.get('acct')}`} data-avatar-of={account && `@${account.get('acct')}`}
> >
{src && <img src={src} alt='' />} {src && !error && (
<img src={src} alt='' onLoad={handleLoad} onError={handleError} />
)}
{counter && ( {counter && (
<div <div
className='account__avatar__counter' className='account__avatar__counter'

7
app/javascript/flavours/glitch/styles/components.scss
View File

@ -2259,7 +2259,6 @@ body > [data-popper-placement] {
display: block; display: block;
position: relative; position: relative;
border-radius: var(--avatar-border-radius); border-radius: var(--avatar-border-radius);
background-color: var(--surface-background-color);
img { img {
width: 100%; width: 100%;
@ -2269,7 +2268,11 @@ body > [data-popper-placement] {
display: inline-block; // to not show broken images display: inline-block; // to not show broken images
} }
&-inline { &--loading {
background-color: var(--surface-background-color);
}
&--inline {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-inline-end: 5px; margin-inline-end: 5px;