diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2023-03-25 08:46:32 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-03-25 08:46:32 +0100 |
commit | ef127c964a60f365129bc97a2cb2fc6d12ba6407 (patch) | |
tree | de2adede0dc191848dba54a5eb6eb06db41a704c /app/javascript/mastodon/components/account.jsx | |
parent | 6e8711ff91e01212ac7c82de6349fa2b143582e2 (diff) |
Change design of account rows in web UI (#24247)
Diffstat (limited to 'app/javascript/mastodon/components/account.jsx')
-rw-r--r-- | app/javascript/mastodon/components/account.jsx | 53 |
1 files changed, 47 insertions, 6 deletions
diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 7aaa668fe..0ee0e4551 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -10,6 +10,9 @@ import { me } from '../initial_state'; import RelativeTimestamp from './relative_timestamp'; import Skeleton from 'mastodon/components/skeleton'; import { Link } from 'react-router-dom'; +import { counterRenderer } from 'mastodon/components/common_counter'; +import ShortNumber from 'mastodon/components/short_number'; +import Icon from 'mastodon/components/icon'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -23,6 +26,26 @@ const messages = defineMessages({ block: { id: 'account.block', defaultMessage: 'Block @{name}' }, }); +class VerifiedBadge extends React.PureComponent { + + static propTypes = { + link: PropTypes.string.isRequired, + verifiedAt: PropTypes.string.isRequired, + }; + + render () { + const { link } = this.props; + + return ( + <span className='verified-badge'> + <Icon id='check' className='verified-badge__mark' /> + <span dangerouslySetInnerHTML={{ __html: link }} /> + </span> + ); + } + +} + class Account extends ImmutablePureComponent { static propTypes = { @@ -77,7 +100,11 @@ class Account extends ImmutablePureComponent { <div className='account__wrapper'> <div className='account__display-name'> <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div> - <DisplayName /> + + <div> + <DisplayName /> + <Skeleton width='7ch' /> + </div> </div> </div> </div> @@ -131,18 +158,32 @@ class Account extends ImmutablePureComponent { } } - let mute_expires_at; + let muteTimeRemaining; + if (account.get('mute_expires_at')) { - mute_expires_at = <div><RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></div>; + muteTimeRemaining = <>· <RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></>; + } + + let verification; + + const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at')); + + if (firstVerifiedField) { + verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} verifiedAt={firstVerifiedField.get('verified_at')} /></>; } return ( <div className='account'> <div className='account__wrapper'> <Link key={account.get('id')} className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`}> - <div className='account__avatar-wrapper'><Avatar account={account} size={size} /></div> - {mute_expires_at} - <DisplayName account={account} /> + <div className='account__avatar-wrapper'> + <Avatar account={account} size={size} /> + </div> + + <div> + <DisplayName account={account} /> + <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining} + </div> </Link> <div className='account__relationship'> |