bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'avatar-stack' into 'develop'

Browse source 
Add AvatarStack component

See merge request soapbox-pub/soapbox!2602
This commit is contained in:
marcin mikołajczak 2023-07-10 12:57:24 +00:00
commit fe08f06e5e
2 changed files with 66 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/soapbox/components/avatar-stack.tsx Normal file
View file

@ -0,0 +1,40 @@
import clsx from 'clsx';
import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
import React from 'react';
import { Avatar, HStack } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';
import type { Account } from 'soapbox/types/entities';
const getAccount = makeGetAccount();
interface IAvatarStack {
accountIds: ImmutableOrderedSet<string>
limit?: number
}
const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
const accounts = useAppSelector(state => ImmutableList(accountIds.slice(0, limit).map(accountId => getAccount(state, accountId)).filter(account => account))) as ImmutableList<Account>;
return (
<HStack className='relative' aria-hidden>
{accounts.map((account, i) => (
<div
className={clsx('relative', { '-ml-3': i !== 0 })}
key={account.id}
style={{ zIndex: limit - i }}
>
<Avatar
className='ring-1 ring-white dark:ring-primary-900'
src={account.avatar}
size={20}
/>
</div>
))}
</HStack>
);
};
export default AvatarStack;

40
app/soapbox/features/ui/components/profile-familiar-followers.tsx
View file

@ -5,8 +5,9 @@ import { Link } from 'react-router-dom';
import { fetchAccountFamiliarFollowers } from 'soapbox/actions/familiar-followers';
import { openModal } from 'soapbox/actions/modals';
import AvatarStack from 'soapbox/components/avatar-stack';
import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
import { Text } from 'soapbox/components/ui';
import { HStack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification-badge';
import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';
@ -30,7 +31,7 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
if (me && features.familiarFollowers) {
dispatch(fetchAccountFamiliarFollowers(account.id));
}
}, []);
}, [account.id]);
const openFamiliarFollowersModal = () => {
dispatch(openModal('FAMILIAR_FOLLOWERS', {
@ -44,10 +45,18 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
const accounts: Array<React.ReactNode> = familiarFollowers.map(account => !!account && (
<HoverRefWrapper accountId={account.id} inline>
<Link className='mention' to={`/@${account.acct}`}>
<span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
<Link className='mention inline-block' to={`/@${account.acct}`}>
<HStack space={1} alignItems='center' grow>
<Text
size='sm'
theme='primary'
truncate
dangerouslySetInnerHTML={{ __html: account.display_name_html }}
/>
{/* <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} /> */}
{account.verified && <VerificationBadge />}
{account.verified && <VerificationBadge />}
</HStack>
</Link>
</HoverRefWrapper>
)).toArray();
@ -65,15 +74,18 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
}
return (
<Text theme='muted' size='sm'>
<FormattedMessage
id='account.familiar_followers'
defaultMessage='Followed by {accounts}'
values={{
accounts: <FormattedList type='conjunction' value={accounts} />,
}}
/>
</Text>
<HStack space={2} alignItems='center'>
<AvatarStack accountIds={familiarFollowerIds} />
<Text theme='muted' size='sm'>
<FormattedMessage
id='account.familiar_followers'
defaultMessage='Followed by {accounts}'
values={{
accounts: <FormattedList type='conjunction' value={accounts} />,
}}
/>
</Text>
</HStack>
);
};