mirrors/catstodon
1
0
Fork 0
mirror of https://git.kescher.at/CatCatNya/catstodon.git synced 2024-11-22 11:48:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

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

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

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