Change design of account rows in web UI (#24247)

This commit is contained in:
Eugen Rochko 2023-03-25 08:46:32 +01:00 committed by GitHub
parent 6e8711ff91
commit ef127c964a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 13 deletions

View file

@ -10,6 +10,9 @@ import { me } from '../initial_state';
import RelativeTimestamp from './relative_timestamp'; import RelativeTimestamp from './relative_timestamp';
import Skeleton from 'mastodon/components/skeleton'; import Skeleton from 'mastodon/components/skeleton';
import { Link } from 'react-router-dom'; 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({ const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' }, follow: { id: 'account.follow', defaultMessage: 'Follow' },
@ -23,6 +26,26 @@ const messages = defineMessages({
block: { id: 'account.block', defaultMessage: 'Block @{name}' }, 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 { class Account extends ImmutablePureComponent {
static propTypes = { static propTypes = {
@ -77,7 +100,11 @@ class Account extends ImmutablePureComponent {
<div className='account__wrapper'> <div className='account__wrapper'>
<div className='account__display-name'> <div className='account__display-name'>
<div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div> <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
<div>
<DisplayName /> <DisplayName />
<Skeleton width='7ch' />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -131,18 +158,32 @@ class Account extends ImmutablePureComponent {
} }
} }
let mute_expires_at; let muteTimeRemaining;
if (account.get('mute_expires_at')) { 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 ( return (
<div className='account'> <div className='account'>
<div className='account__wrapper'> <div className='account__wrapper'>
<Link key={account.get('id')} className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`}> <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> <div className='account__avatar-wrapper'>
{mute_expires_at} <Avatar account={account} size={size} />
</div>
<div>
<DisplayName account={account} /> <DisplayName account={account} />
<ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
</div>
</Link> </Link>
<div className='account__relationship'> <div className='account__relationship'>

View file

@ -1403,10 +1403,12 @@ body > [data-popper-placement] {
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
&--with-note { .display-name {
strong { margin-bottom: 4px;
display: inline;
} }
.display-name strong {
display: inline;
} }
} }
@ -1629,7 +1631,7 @@ a .account__avatar {
.status__display-name, .status__display-name,
.account__display-name { .account__display-name {
strong { .display-name strong {
color: $primary-text-color; color: $primary-text-color;
} }
} }
@ -1644,12 +1646,12 @@ a .account__avatar {
.reply-indicator__display-name, .reply-indicator__display-name,
.detailed-status__display-name, .detailed-status__display-name,
a.account__display-name { a.account__display-name {
&:hover strong { &:hover .display-name strong {
text-decoration: underline; text-decoration: underline;
} }
} }
.account__display-name strong { .account__display-name .display-name strong {
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -7356,6 +7358,19 @@ noscript {
} }
} }
.verified-badge {
display: inline-flex;
align-items: center;
color: $valid-value-color;
gap: 4px;
a {
color: inherit;
font-weight: 500;
text-decoration: none;
}
}
.trends { .trends {
&__header { &__header {
color: $dark-text-color; color: $dark-text-color;