90 lines
2.9 KiB
HTML
90 lines
2.9 KiB
HTML
{#if status}
|
|
<Status {index} {length} {timelineType} {timelineValue} {focusSelector}
|
|
{status} {notification} {active} {shortcutScope} on:recalculateHeight
|
|
/>
|
|
{:else}
|
|
<article class={className}
|
|
tabindex="0"
|
|
aria-posinset={index}
|
|
aria-setsize={length}
|
|
aria-label={ariaLabel}
|
|
status-active={active}
|
|
>
|
|
<StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
|
|
{account} {accountId} {uuid} isStatusInNotification="true" />
|
|
{#if shortcutScope}
|
|
<Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
|
|
<Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
|
|
{/if}
|
|
</article>
|
|
{/if}
|
|
<style>
|
|
.notification-article {
|
|
width: 560px;
|
|
max-width: calc(100vw - 40px);
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid var(--main-border);
|
|
}
|
|
.notification-article.status-active {
|
|
background-color: var(--status-active-background);
|
|
}
|
|
@media (max-width: 767px) {
|
|
.notification-article {
|
|
padding: 10px 10px;
|
|
max-width: calc(100vw - 20px);
|
|
width: 580px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import Status from './Status.html'
|
|
import StatusHeader from './StatusHeader.html'
|
|
import Shortcut from '../shortcut/Shortcut.html'
|
|
import { store } from '../../_store/store'
|
|
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
|
|
import { goto } from '../../../../__sapper__/client'
|
|
import { composeNewStatusMentioning } from '../../_actions/mention'
|
|
import { classname } from '../../_utils/classname'
|
|
|
|
export default {
|
|
components: {
|
|
Status,
|
|
StatusHeader,
|
|
Shortcut
|
|
},
|
|
data: () => ({
|
|
active: false,
|
|
shortcutScope: null
|
|
}),
|
|
store: () => store,
|
|
computed: {
|
|
account: ({ notification }) => notification.account,
|
|
accountId: ({ account }) => account.id,
|
|
notificationId: ({ notification }) => notification.id,
|
|
status: ({ notification }) => notification.status,
|
|
statusId: ({ status }) => status && status.id,
|
|
uuid: ({ $currentInstance, timelineType, timelineValue, notificationId, statusId }) => {
|
|
return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId}/${statusId || ''}`
|
|
},
|
|
ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
|
|
!status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
|
|
),
|
|
className: ({ active, $underlineLinks }) => (classname(
|
|
'notification-article',
|
|
active && 'status-active',
|
|
$underlineLinks && 'underline-links'
|
|
))
|
|
},
|
|
methods: {
|
|
openAuthorProfile () {
|
|
let { accountId } = this.get()
|
|
goto(`/accounts/${accountId}`)
|
|
},
|
|
async mentionAuthor () {
|
|
let { account } = this.get()
|
|
await composeNewStatusMentioning(account)
|
|
}
|
|
}
|
|
}
|
|
</script>
|