Add lock icon to hover cards

This commit is contained in:
Claire 2024-11-29 17:22:09 +01:00
parent 4635ce2926
commit b1a89b8d35
2 changed files with 17 additions and 3 deletions

View File

@ -2,6 +2,8 @@ import React from 'react';
import type { List } from 'immutable'; import type { List } from 'immutable';
import LockIcon from '@/material-icons/400-24px/lock.svg?react';
import { Icon } from 'mastodon/components/icon';
import type { Account } from 'mastodon/models/account'; import type { Account } from 'mastodon/models/account';
import { autoPlayGif } from '../initial_state'; import { autoPlayGif } from '../initial_state';
@ -12,6 +14,7 @@ interface Props {
account?: Account; account?: Account;
others?: List<Account>; others?: List<Account>;
localDomain?: string; localDomain?: string;
showLocked?: boolean;
} }
export class DisplayName extends React.PureComponent<Props> { export class DisplayName extends React.PureComponent<Props> {
@ -48,7 +51,7 @@ export class DisplayName extends React.PureComponent<Props> {
}; };
render() { render() {
const { others, localDomain } = this.props; const { others, localDomain, showLocked } = this.props;
let displayName: React.ReactNode, let displayName: React.ReactNode,
suffix: React.ReactNode, suffix: React.ReactNode,
@ -93,7 +96,14 @@ export class DisplayName extends React.PureComponent<Props> {
/> />
</bdi> </bdi>
); );
suffix = <span className='display-name__account'>@{acct}</span>; suffix = (
<span className='display-name__account'>
@{acct}
{showLocked && account.get('locked') && (
<Icon id='lock' icon={LockIcon} />
)}
</span>
);
} else { } else {
displayName = ( displayName = (
<bdi> <bdi>

View File

@ -51,7 +51,11 @@ export const HoverCardAccount = forwardRef<
<> <>
<Link to={`/@${account.acct}`} className='hover-card__name'> <Link to={`/@${account.acct}`} className='hover-card__name'>
<Avatar account={account} size={46} /> <Avatar account={account} size={46} />
<DisplayName account={account} localDomain={domain} /> <DisplayName
account={account}
localDomain={domain}
showLocked
/>
</Link> </Link>
<div className='hover-card__text-row'> <div className='hover-card__text-row'>