erik/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-08-20 21:08:15 -07:00
Code Issues Projects Releases Wiki 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
Show stats 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'>

29
app/javascript/styles/mastodon/components.scss
View file

@ -1403,10 +1403,12 @@ body > [data-popper-placement] {
text-decoration: none;
font-size: 14px;
&--with-note {
strong {
display: inline;
}
.display-name {
margin-bottom: 4px;
}
.display-name strong {
display: inline;
}
}
@ -1629,7 +1631,7 @@ a .account__avatar {
.status__display-name,
.account__display-name {
strong {
.display-name strong {
color: $primary-text-color;
}
}
@ -1644,12 +1646,12 @@ a .account__avatar {
.reply-indicator__display-name,
.detailed-status__display-name,
a.account__display-name {
&:hover strong {
&:hover .display-name strong {
text-decoration: underline;
}
}
.account__display-name strong {
.account__display-name .display-name strong {
display: block;
overflow: hidden;
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 {
&__header {
color: $dark-text-color;