<a {href} rel="prefetch" class="compose-box-avatar {loaded ? 'loaded' : 'not-loaded'}" aria-hidden={!loaded} aria-label="Profile for {accessibleName}"> <Avatar account={verifyCredentials} size="small"/> </a> <a class="compose-box-display-name {loaded ? 'loaded' : 'not-loaded'}" {href} aria-hidden={!loaded} rel="prefetch"> <AccountDisplayName account={verifyCredentials} /> </a> <span class="compose-box-handle {loaded ? 'loaded' : 'not-loaded'}" aria-hidden={!loaded} > {'@' + verifyCredentials.acct} </span> <style> .compose-box-avatar { grid-area: avatar; margin-right: 15px; } .compose-box-display-name { color: var(--deemphasized-text-color); grid-area: name; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.1em; margin-left: 5px; font-weight: 600; } .compose-box-display-name, .compose-box-display-name:hover, .compose-box-display-name:visited { color: var(--body-text-color); } :global(.compose-box-handle) { grid-area: handle; color: var(--deemphasized-text-color); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.1em; margin-left: 5px; } .not-loaded { visibility: hidden; } .loaded { visibility: visible; } @media (max-width: 767px) { .compose-box-avatar { grid-area: avatar; margin-right: 5px; } } </style> <script> import Avatar from '../Avatar.html' import { store } from '../../_store/store' import AccountDisplayName from '../profile/AccountDisplayName.html' import { removeEmoji } from '../../_utils/removeEmoji' import { ONE_TRANSPARENT_PIXEL } from '../../_static/media' export default { components: { Avatar, AccountDisplayName }, store: () => store, computed: { loaded: ({ $currentVerifyCredentials }) => !!$currentVerifyCredentials, verifyCredentials: ({ $currentVerifyCredentials }) => { // return a placeholder while we're waiting on IndexedDB to load // (https://github.com/nolanlawson/pinafore/issues/1076) return $currentVerifyCredentials || { display_name: '', acct: '', avatar: ONE_TRANSPARENT_PIXEL, avatar_static: ONE_TRANSPARENT_PIXEL } }, id: ({ verifyCredentials }) => (verifyCredentials && verifyCredentials.id), href: ({ id }) => (id ? `/accounts/${id}` : '#'), emojis: ({ verifyCredentials }) => (verifyCredentials.emojis || []), displayName: ({ verifyCredentials }) => verifyCredentials.display_name || verifyCredentials.username || '', accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => { if ($omitEmojiInDisplayNames) { return removeEmoji(displayName, emojis) || displayName } return displayName } } } </script>