106 lines
3.7 KiB
HTML
106 lines
3.7 KiB
HTML
{#if status}
|
|
<Status {index} {length} {timelineType} {timelineValue} {focusSelector}
|
|
{status} {notification} {enableShortcuts} on:recalculateHeight
|
|
/>
|
|
{:else}
|
|
<article id={elementId}
|
|
class={className}
|
|
tabindex="0"
|
|
aria-posinset={index + 1}
|
|
aria-setsize={length}
|
|
aria-label={ariaLabel}
|
|
>
|
|
<StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
|
|
{account} {accountId} {uuid} isStatusInNotification="true" />
|
|
{#if enableShortcuts}
|
|
<Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
|
|
<Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
|
|
{/if}
|
|
</article>
|
|
{/if}
|
|
<style>
|
|
.notification-article {
|
|
padding: var(--status-pad-v) var(--status-pad-h);
|
|
width: 560px;
|
|
max-width: calc(100vw - 40px);
|
|
border-bottom: 1px solid var(--main-border);
|
|
}
|
|
@media (max-width: 767px) {
|
|
.notification-article {
|
|
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.js'
|
|
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName.js'
|
|
import { goto } from '../../../../__sapper__/client.js'
|
|
import { composeNewStatusMentioning } from '../../_actions/mention.js'
|
|
import { classname } from '../../_utils/classname.js'
|
|
import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid.js'
|
|
import { formatIntl } from '../../_utils/formatIntl.js'
|
|
|
|
export default {
|
|
components: {
|
|
Status,
|
|
StatusHeader,
|
|
Shortcut
|
|
},
|
|
data: () => ({
|
|
enableShortcuts: null
|
|
}),
|
|
store: () => store,
|
|
computed: {
|
|
account: ({ notification }) => notification.account,
|
|
accountId: ({ account }) => account.id,
|
|
notificationId: ({ notification }) => notification.id,
|
|
notificationType: ({ notification }) => notification.type,
|
|
status: ({ notification }) => notification.status,
|
|
statusId: ({ status }) => status && status.id,
|
|
uuid: ({ $currentInstance, timelineType, timelineValue, notificationId, statusId }) => (
|
|
createStatusOrNotificationUuid($currentInstance, timelineType, timelineValue, notificationId, statusId)
|
|
),
|
|
elementId: ({ uuid }) => uuid,
|
|
shortcutScope: ({ elementId }) => elementId,
|
|
ariaLabel: ({ status, account, $omitEmojiInDisplayNames, notificationType }) => {
|
|
if (status) {
|
|
return undefined // aria-label not needed if there's a status
|
|
}
|
|
const params = {
|
|
name: getAccountAccessibleName(account, $omitEmojiInDisplayNames),
|
|
account: `@${account.acct}`
|
|
}
|
|
if (notificationType === 'admin.sign_up') {
|
|
return formatIntl('intl.accountSignedUp', params)
|
|
} else if (notificationType === 'follow_request') {
|
|
return formatIntl('intl.accountRequestedFollow', params)
|
|
} else if (notificationType === 'admin.report') {
|
|
return formatIntl('intl.accountReported', params)
|
|
} else { // 'follow'
|
|
return formatIntl('intl.accountFollowedYou', params)
|
|
}
|
|
},
|
|
className: ({ $underlineLinks }) => (classname(
|
|
'notification-article',
|
|
'shortcut-list-item',
|
|
'focus-fix',
|
|
$underlineLinks && 'underline-links'
|
|
))
|
|
},
|
|
methods: {
|
|
openAuthorProfile () {
|
|
const { accountId } = this.get()
|
|
goto(`/accounts/${accountId}`)
|
|
},
|
|
async mentionAuthor () {
|
|
const { account } = this.get()
|
|
await composeNewStatusMentioning(account)
|
|
}
|
|
}
|
|
}
|
|
</script>
|