Directory account card update
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
@ -176,7 +176,7 @@
|
||||
"twemoji": "https://github.com/twitter/twemoji#v14.0.2",
|
||||
"type-fest": "^4.0.0",
|
||||
"typescript": "^5.4.5",
|
||||
"util": "^0.12.4",
|
||||
"util": "^0.12.5",
|
||||
"uuid": "^9.0.0",
|
||||
"vite": "^5.0.10",
|
||||
"vite-plugin-compile-time": "^0.2.1",
|
||||
|
||||
@ -361,7 +361,7 @@ const submitCompose = (composeId: string, opts: SubmitComposeOpts = {}) =>
|
||||
const mentions: string[] | null = status.match(/(?:^|\s)@([a-z\d_-]+(?:@(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]+)?)/gi);
|
||||
|
||||
if (mentions) {
|
||||
to = to.union(mentions.map(mention => mention.trim().slice(1)));
|
||||
to = to.union(mentions.map(mention => mention.replace(/ /g, '').trim().slice(1)));
|
||||
}
|
||||
|
||||
dispatch(submitComposeRequest(composeId));
|
||||
|
||||
@ -8,15 +8,15 @@ import type { RootState } from 'soapbox/store';
|
||||
|
||||
const IMPORT_FOLLOWS_REQUEST = 'IMPORT_FOLLOWS_REQUEST';
|
||||
const IMPORT_FOLLOWS_SUCCESS = 'IMPORT_FOLLOWS_SUCCESS';
|
||||
const IMPORT_FOLLOWS_FAIL = 'IMPORT_FOLLOWS_FAIL';
|
||||
const IMPORT_FOLLOWS_FAIL = 'IMPORT_FOLLOWS_FAIL';
|
||||
|
||||
const IMPORT_BLOCKS_REQUEST = 'IMPORT_BLOCKS_REQUEST';
|
||||
const IMPORT_BLOCKS_SUCCESS = 'IMPORT_BLOCKS_SUCCESS';
|
||||
const IMPORT_BLOCKS_FAIL = 'IMPORT_BLOCKS_FAIL';
|
||||
const IMPORT_BLOCKS_FAIL = 'IMPORT_BLOCKS_FAIL';
|
||||
|
||||
const IMPORT_MUTES_REQUEST = 'IMPORT_MUTES_REQUEST';
|
||||
const IMPORT_MUTES_SUCCESS = 'IMPORT_MUTES_SUCCESS';
|
||||
const IMPORT_MUTES_FAIL = 'IMPORT_MUTES_FAIL';
|
||||
const IMPORT_MUTES_FAIL = 'IMPORT_MUTES_FAIL';
|
||||
|
||||
type ImportDataActions = {
|
||||
type: typeof IMPORT_FOLLOWS_REQUEST
|
||||
|
||||
@ -86,6 +86,7 @@ interface IAccount {
|
||||
timestampUrl?: string;
|
||||
futureTimestamp?: boolean;
|
||||
withAccountNote?: boolean;
|
||||
withAvatar?: boolean;
|
||||
withDate?: boolean;
|
||||
withLinkToProfile?: boolean;
|
||||
withRelationship?: boolean;
|
||||
@ -114,6 +115,7 @@ const Account = ({
|
||||
timestampUrl,
|
||||
futureTimestamp = false,
|
||||
withAccountNote = false,
|
||||
withAvatar = true,
|
||||
withDate = false,
|
||||
withLinkToProfile = true,
|
||||
withRelationship = true,
|
||||
@ -243,21 +245,23 @@ const Account = ({
|
||||
<div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
|
||||
<HStack alignItems={actionAlignment} space={3} justifyContent='between'>
|
||||
<HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3} className='overflow-hidden'>
|
||||
<ProfilePopper
|
||||
condition={showProfileHoverCard}
|
||||
wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
|
||||
>
|
||||
<LinkEl className='rounded-full' {...linkProps}>
|
||||
<Avatar src={account.avatar} size={avatarSize} />
|
||||
{emoji && (
|
||||
<Emoji
|
||||
className='absolute -right-1.5 bottom-0 h-5 w-5'
|
||||
emoji={emoji}
|
||||
src={emojiUrl}
|
||||
/>
|
||||
)}
|
||||
</LinkEl>
|
||||
</ProfilePopper>
|
||||
{withAvatar && (
|
||||
<ProfilePopper
|
||||
condition={showProfileHoverCard}
|
||||
wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
|
||||
>
|
||||
<LinkEl className='rounded-full' {...linkProps}>
|
||||
<Avatar src={account.avatar} size={avatarSize} />
|
||||
{emoji && (
|
||||
<Emoji
|
||||
className='absolute -right-1.5 bottom-0 h-5 w-5'
|
||||
emoji={emoji}
|
||||
src={emojiUrl}
|
||||
/>
|
||||
)}
|
||||
</LinkEl>
|
||||
</ProfilePopper>
|
||||
)}
|
||||
|
||||
<div className='grow overflow-hidden'>
|
||||
<ProfilePopper
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { useAccount } from 'soapbox/api/hooks';
|
||||
import Account from 'soapbox/components/account';
|
||||
import Badge from 'soapbox/components/badge';
|
||||
import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
|
||||
import RelativeTimestamp from 'soapbox/components/relative-timestamp';
|
||||
import { Stack, Text } from 'soapbox/components/ui';
|
||||
import { Avatar, Stack, Text } from 'soapbox/components/ui';
|
||||
import ActionButton from 'soapbox/features/ui/components/action-button';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
||||
@ -36,7 +38,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='absolute bottom-2.5 right-2.5'>
|
||||
<div className='absolute bottom-0 right-3 translate-y-1/2'>
|
||||
<ActionButton account={account} small />
|
||||
</div>
|
||||
|
||||
@ -45,18 +47,25 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
|
||||
alt=''
|
||||
className='h-32 w-full rounded-t-lg object-cover'
|
||||
/>
|
||||
|
||||
<HoverRefWrapper key={account.id} accountId={account.id} inline>
|
||||
<Link to={`/@${account.acct}`} title={account.acct}>
|
||||
<Avatar src={account.avatar} className='!absolute bottom-0 left-3 translate-y-1/2 bg-white ring-2 ring-white dark:bg-primary-900 dark:ring-primary-900' size={64} />
|
||||
</Link>
|
||||
</HoverRefWrapper>
|
||||
</div>
|
||||
|
||||
<Stack space={4} className='p-3'>
|
||||
<Stack space={4} className='p-3 pt-10'>
|
||||
<Account
|
||||
account={account}
|
||||
withAvatar={false}
|
||||
withRelationship={false}
|
||||
/>
|
||||
|
||||
<Text
|
||||
truncate
|
||||
align='left'
|
||||
className='[&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
|
||||
className='line-clamp-2 [&_br]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate [&_p]:hidden'
|
||||
dangerouslySetInnerHTML={{ __html: account.note_emojified || ' ' }}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user