clicking avatars goes directly to profile

This commit is contained in:
Nolan Lawson 2018-03-16 18:48:24 -07:00
parent da6c2ecc2a
commit 9a0071a934
5 changed files with 42 additions and 9 deletions

View File

@ -6,8 +6,14 @@
<img class="{{className || ''}} avatar size-{{size}}" aria-hidden="true" alt=""
src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
{{else}}
<NonAutoplayImg className="{{className || ''}} avatar size-{{size}}" ariaHidden="true" alt=""
src="{{account.avatar}}" staticSrc="{{account.avatar_static}}" on:imgLoadError="set({error: true})" />
<NonAutoplayImg className="{{className || ''}} avatar size-{{size}}"
ariaHidden="true"
alt=""
src="{{account.avatar}}"
staticSrc="{{account.avatar_static}}"
:isLink
on:imgLoadError="set({error: true})"
/>
{{/if}}
<style>
:global(.avatar) {

View File

@ -5,7 +5,7 @@
src="{{src}}"
on:imgLoadError />
{{else}}
<img class="{{className || ''}} non-autoplay-zoom-in"
<img class="{{className || ''}} non-autoplay-zoom-in {{isLink ? 'is-link' : ''}}"
aria-hidden="{{ariaHidden}}"
alt="{{alt}}"
src="{{staticSrc}}"
@ -17,6 +17,9 @@
.non-autoplay-zoom-in {
cursor: zoom-in;
}
.non-autoplay-zoom-in.is-link {
cursor: pointer;
}
</style>
<script>
import { imgLoadError, mouseover } from '../_utils/events'

View File

@ -16,7 +16,8 @@
{{#if !isStatusInOwnThread}}
<StatusRelativeDate :isStatusInNotification :originalStatus :originalStatusId :uuid />
{{/if}}
<StatusSidebar :isStatusInOwnThread :originalAccount />
<StatusSidebar :isStatusInOwnThread :originalAccount
:originalAccountId :uuid />
{{#if originalStatus.spoiler_text}}
<StatusSpoiler :isStatusInOwnThread :isStatusInNotification
:originalStatus :uuid :spoilerShown

View File

@ -1,14 +1,28 @@
<a class="status-sidebar size-{{size}}"
href="/accounts/{{originalAccountId}}"
focus-key="{{focusKey}}" >
<Avatar account={{originalAccount}}
className="status-sidebar"
size="{{isStatusInOwnThread ? 'medium' : 'small'}}" />
isLink="true"
:size />
</a>
<style>
:global(.status-sidebar) {
.status-sidebar {
grid-area: sidebar;
margin-right: 15px;
}
.status-sidebar.size-small {
width: 48px;
height: 48px;
}
.status-sidebar.size-medium {
width: 64px;
height: 64px;
}
@media (max-width: 767px) {
:global(.status-sidebar) {
.status-sidebar {
margin-right: 5px;
}
}
@ -18,6 +32,10 @@
export default {
components: {
Avatar
},
computed: {
focusKey: (uuid) => `status-author-avatar-${uuid}`,
size: (isStatusInOwnThread) => isStatusInOwnThread ? 'medium' : 'small'
}
}
</script>

View File

@ -33,6 +33,11 @@ test('timeline link preserves focus', async t => {
.click(goBackButton)
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getActiveElementInnerText()).eql('admin')
.click(getNthStatus(0).find('.status-sidebar'))
.expect(getUrl()).contains('/accounts/')
.click(goBackButton)
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getActiveElementClass()).contains('status-sidebar')
})
test('notification timeline preserves focus', async t => {