feat: clicking avatar opens media modal (#1485)

fixes #1464
This commit is contained in:
Nolan Lawson 2019-09-14 22:26:29 -07:00 committed by GitHub
parent dbb746ff34
commit 58af4d888e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 1 deletions

View file

@ -1,6 +1,10 @@
<h2 class="sr-only">Name and following</h2> <h2 class="sr-only">Name and following</h2>
<div class="account-profile-avatar"> <div class="account-profile-avatar">
<Avatar {account} size="big" /> <button class="account-profile-avatar-button"
aria-label="Click to see avatar"
on:click="onAvatarClick()" >
<Avatar {account} size="big" />
</button>
</div> </div>
<div class="account-profile-name"> <div class="account-profile-name">
<ExternalLink <ExternalLink
@ -70,6 +74,22 @@
min-width: 0; 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) { :global(a.account-profile-name-link) {
color: var(--body-text-color); color: var(--body-text-color);
text-decoration: none; text-decoration: none;
@ -104,6 +124,8 @@
import { removeEmoji } from '../../_utils/removeEmoji' import { removeEmoji } from '../../_utils/removeEmoji'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import Label from '../Label.html' import Label from '../Label.html'
import { importShowMediaDialog } from '../dialog/asyncDialogs'
import { getImageNativeDimensions } from '../../_utils/getImageNativeDimensions'
export default { export default {
store: () => store, store: () => store,
@ -118,6 +140,37 @@
bot: ({ account }) => !!account.bot, bot: ({ account }) => !!account.bot,
label: ({ bot }) => bot ? 'bot' : '' label: ({ bot }) => bot ? 'bot' : ''
}, },
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: `Avatar for ${displayName || username}`,
type: 'image',
preview_url: avatarStatic,
url: avatar,
meta: {
original: {
width,
height
},
small: {
width: 100,
height: 100
}
}
}
]
showMediaDialog(mediaAttachments, /* index */ 0)
}
},
components: { components: {
Avatar, Avatar,
ExternalLink, ExternalLink,

View file

@ -0,0 +1,11 @@
import { decodeImage } from './decodeImage'
export async function getImageNativeDimensions (url) {
const img = document.createElement('img')
img.src = url
await decodeImage(img)
return {
width: img.naturalWidth,
height: img.naturalHeight
}
}