sforkowany z mirror/soapbox
add verification icon on verified users
rodzic
19e3dc9ed3
commit
c9b2b66283
|
@ -16,13 +16,14 @@ export default class DisplayName extends React.PureComponent {
|
|||
const { account, others, children } = this.props;
|
||||
|
||||
let displayName, suffix;
|
||||
const verified = account.get('pleroma').get('tags').includes('verified');
|
||||
|
||||
if (others && others.size > 1) {
|
||||
displayName = others.take(2).map(a => [
|
||||
<bdi key={a.get('id')}>
|
||||
<strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} />
|
||||
</bdi>,
|
||||
a.get('is_verified') && <VerificationBadge />,
|
||||
verified && <VerificationBadge />,
|
||||
]).reduce((prev, cur) => [prev, ', ', cur]);
|
||||
|
||||
if (others.size - 2 > 0) {
|
||||
|
@ -32,7 +33,7 @@ export default class DisplayName extends React.PureComponent {
|
|||
displayName = (
|
||||
<>
|
||||
<bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
|
||||
{account.get('is_verified') && <VerificationBadge />}
|
||||
{verified && <VerificationBadge />}
|
||||
</>
|
||||
);
|
||||
suffix = <span className='display-name__account'>@{acctFull(account)}</span>;
|
||||
|
|
|
@ -59,6 +59,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
|
|||
const fields = account.get('fields');
|
||||
const displayNameHtml = { __html: account.get('display_name_html') };
|
||||
const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
|
||||
const verified = account.get('pleroma').get('tags').includes('verified');
|
||||
|
||||
return (
|
||||
<div className='profile-info-panel'>
|
||||
|
@ -67,7 +68,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
|
|||
<div className='profile-info-panel-content__name'>
|
||||
<h1>
|
||||
<span dangerouslySetInnerHTML={displayNameHtml} />
|
||||
{account.get('is_verified') && <VerificationBadge />}
|
||||
{verified && <VerificationBadge />}
|
||||
{badge}
|
||||
<small>@{acctFull(account)} {lockedIcon}</small>
|
||||
</h1>
|
||||
|
|
|
@ -10,6 +10,7 @@ import Avatar from 'soapbox/components/avatar';
|
|||
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
||||
import { acctFull } from 'soapbox/utils/accounts';
|
||||
import StillImage from 'soapbox/components/still_image';
|
||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||
|
||||
class UserPanel extends ImmutablePureComponent {
|
||||
|
||||
|
@ -24,6 +25,7 @@ class UserPanel extends ImmutablePureComponent {
|
|||
if (!account) return null;
|
||||
const displayNameHtml = { __html: account.get('display_name_html') };
|
||||
const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
|
||||
const verified = account.get('pleroma').get('tags').includes('verified');
|
||||
|
||||
return (
|
||||
<div className='user-panel'>
|
||||
|
@ -45,6 +47,7 @@ class UserPanel extends ImmutablePureComponent {
|
|||
<h1>
|
||||
<Link to={`/@${account.get('acct')}`}>
|
||||
<span className='user-panel__account__name' dangerouslySetInnerHTML={displayNameHtml} />
|
||||
{verified && <VerificationBadge />}
|
||||
<small className='user-panel__account__username'>@{acctFull(account)}</small>
|
||||
</Link>
|
||||
</h1>
|
||||
|
|
|
@ -4,12 +4,21 @@
|
|||
width: 265px;
|
||||
flex-direction: column;
|
||||
|
||||
.user-panel__account__name {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.verified-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&,
|
||||
.user-panel__account__name,
|
||||
.user-panel__account__username {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--primary-text-color--faint);
|
||||
}
|
||||
|
||||
&__header {
|
||||
|
@ -49,13 +58,13 @@
|
|||
&__meta {
|
||||
display: block;
|
||||
padding: 6px 20px 17px;
|
||||
opacity: 0.6;
|
||||
// opacity: 0.6;
|
||||
}
|
||||
|
||||
&__account {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
color: var(--primary-text-color--faint);
|
||||
}
|
||||
|
||||
&__name {
|
||||
|
@ -63,7 +72,7 @@
|
|||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
color: var(--primary-text-color);
|
||||
color: var(--primary-text-color--faint);
|
||||
}
|
||||
|
||||
&:hover & {
|
||||
|
@ -96,7 +105,7 @@
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
color: var(--primary-text-color--faint);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
|
@ -106,7 +115,7 @@
|
|||
&__value {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: var(--primary-text-color);
|
||||
color: var(--primary-text-color--faint);
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 24px;
|
||||
|
|
Ładowanie…
Reference in New Issue