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="" <img class="{{className || ''}} avatar size-{{size}}" aria-hidden="true" alt=""
src="{{account.avatar}}" on:imgLoadError="set({error: true})" /> src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
{{else}} {{else}}
<NonAutoplayImg className="{{className || ''}} avatar size-{{size}}" ariaHidden="true" alt="" <NonAutoplayImg className="{{className || ''}} avatar size-{{size}}"
src="{{account.avatar}}" staticSrc="{{account.avatar_static}}" on:imgLoadError="set({error: true})" /> ariaHidden="true"
alt=""
src="{{account.avatar}}"
staticSrc="{{account.avatar_static}}"
:isLink
on:imgLoadError="set({error: true})"
/>
{{/if}} {{/if}}
<style> <style>
:global(.avatar) { :global(.avatar) {

View File

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

View File

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

View File

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

View File

@ -33,6 +33,11 @@ test('timeline link preserves focus', async t => {
.click(goBackButton) .click(goBackButton)
.expect(getUrl()).eql('http://localhost:4002/') .expect(getUrl()).eql('http://localhost:4002/')
.expect(getActiveElementInnerText()).eql('admin') .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 => { test('notification timeline preserves focus', async t => {