clicking avatars goes directly to profile
This commit is contained in:
parent
da6c2ecc2a
commit
9a0071a934
|
@ -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) {
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
|
@ -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 => {
|
||||||
|
|
Loading…
Reference in a new issue