184 lines
5.1 KiB
HTML
184 lines
5.1 KiB
HTML
<h2 class="sr-only">{intl.nameAndFollowing}</h2>
|
|
<div class="account-profile-avatar">
|
|
<button class="account-profile-avatar-button"
|
|
aria-label="{intl.clickToSeeAvatar}"
|
|
on:click="onAvatarClick()" >
|
|
<Avatar {account} size={avatarSize} />
|
|
</button>
|
|
</div>
|
|
<div class="account-profile-name">
|
|
<AccountDisplayName {account} />
|
|
</div>
|
|
{#if label}
|
|
<Label {label} className="account-profile-label" />
|
|
{/if}
|
|
<div class="account-profile-username">
|
|
<ExternalLink className="focus-fix" href={account.url}>
|
|
{'@' + account.acct}
|
|
</ExternalLink>
|
|
</div>
|
|
<div class="account-profile-followed-by">
|
|
{#if relationship && relationship.blocking}
|
|
<span class="account-profile-followed-by-span">{intl.blocked}</span>
|
|
{/if}
|
|
{#if relationship && relationship.domain_blocking}
|
|
<span class="account-profile-followed-by-span">{intl.domainHidden}</span>
|
|
{/if}
|
|
{#if relationship && relationship.muting}
|
|
<span class="account-profile-followed-by-span">{intl.muted}</span>
|
|
{/if}
|
|
{#if relationship && relationship.followed_by}
|
|
<span class="account-profile-followed-by-span">{intl.followsYou}</span>
|
|
{/if}
|
|
</div>
|
|
<style>
|
|
.account-profile-followed-by {
|
|
grid-area: followed-by;
|
|
align-self: center;
|
|
text-transform: uppercase;
|
|
color: var(--deemphasized-text-color);
|
|
font-size: 0.8em;
|
|
white-space: nowrap;
|
|
}
|
|
.account-profile-followed-by-span {
|
|
white-space: nowrap;
|
|
padding: 3px 6px;
|
|
border: 1px solid;
|
|
border-radius: 4px;
|
|
}
|
|
.account-profile-avatar {
|
|
grid-area: avatar;
|
|
}
|
|
|
|
.account-profile-username {
|
|
grid-area: username;
|
|
color: var(--deemphasized-text-color);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
align-self: center;
|
|
}
|
|
|
|
.account-profile-name {
|
|
grid-area: name;
|
|
font-size: 1.5em;
|
|
align-self: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 0;
|
|
}
|
|
|
|
.account-profile-avatar-button {
|
|
border: none;
|
|
background: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.account-profile-avatar-button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.account-profile-avatar-button:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
:global(a.account-profile-name-link) {
|
|
color: var(--body-text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
:global(a.account-profile-name-link:hover) {
|
|
color: var(--body-text-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
:global(.account-profile-label) {
|
|
grid-area: label;
|
|
justify-content: left !important;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.account-profile-name {
|
|
font-size: 1.3em;
|
|
}
|
|
.account-profile-username {
|
|
font-size: 1.1em;
|
|
}
|
|
.account-profile-name, .account-profile-username {
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import Avatar from '../Avatar.html'
|
|
import ExternalLink from '../ExternalLink.html'
|
|
import AccountDisplayName from './AccountDisplayName.html'
|
|
import { removeEmoji } from '../../_utils/removeEmoji.js'
|
|
import { store } from '../../_store/store.js'
|
|
import Label from '../Label.html'
|
|
import { importShowMediaDialog } from '../dialog/asyncDialogs/importShowMediaDialog.js'
|
|
import { getImageNativeDimensions } from '../../_utils/getImageNativeDimensions.js'
|
|
import { formatIntl } from '../../_utils/formatIntl.js'
|
|
|
|
export default {
|
|
store: () => store,
|
|
computed: {
|
|
emojis: ({ account }) => (account.emojis || []),
|
|
displayName: ({ account }) => account.display_name || account.username,
|
|
accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => {
|
|
return $omitEmojiInDisplayNames
|
|
? removeEmoji(displayName, emojis) || displayName
|
|
: displayName
|
|
},
|
|
bot: ({ account }) => !!account.bot,
|
|
label: ({ bot }) => bot ? 'bot' : '',
|
|
avatarSize: ({ $isVeryTinyMobileSize, $isTinyMobileSize }) => (
|
|
$isVeryTinyMobileSize ? 'small' : $isTinyMobileSize ? 'medium' : 'big'
|
|
),
|
|
externalLinkLabel: ({ accessibleName }) => (
|
|
formatIntl('intl.opensInNewWindow', { label: accessibleName })
|
|
)
|
|
},
|
|
methods: {
|
|
async onAvatarClick () {
|
|
const { account } = this.get()
|
|
const { avatar, avatar_static: avatarStatic, display_name: displayName, username } = account
|
|
const [showMediaDialog, nativeDimensions] = await Promise.all([
|
|
importShowMediaDialog(),
|
|
getImageNativeDimensions(avatarStatic)
|
|
])
|
|
// pretend this is a media attachment so it will work in the media dialog
|
|
const { width, height } = nativeDimensions
|
|
const mediaAttachments = [
|
|
{
|
|
description: formatIntl('intl.avatarForAccount', { account: displayName || username }),
|
|
type: 'image',
|
|
preview_url: avatarStatic,
|
|
url: avatar,
|
|
meta: {
|
|
original: {
|
|
width,
|
|
height
|
|
},
|
|
small: {
|
|
width: 100,
|
|
height: 100
|
|
}
|
|
}
|
|
}
|
|
]
|
|
showMediaDialog(mediaAttachments, /* index */ 0)
|
|
}
|
|
},
|
|
components: {
|
|
Avatar,
|
|
ExternalLink,
|
|
AccountDisplayName,
|
|
Label
|
|
}
|
|
}
|
|
</script>
|