Unfloyded/Legamunt
0
0
Fork 0
Code Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

53
app/javascript/mastodon/components/account.jsx
View file

@ -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'>