pinafore/routes/_components/status/Notification.html

65 lines
2.0 KiB
HTML
Raw Normal View History

2018-02-04 19:05:01 +01:00
{{#if notification.type === 'mention' || notification.type === 'reblog' || notification.type === 'favourite'}}
<Status :index :length :timelineType :timelineValue :focusSelector
2018-02-04 19:05:01 +01:00
status="{{notification.status}}"
:notification
on:recalculateHeight
/>
{{else}}
<article class="notification-article"
tabindex="0"
aria-posinset="{{index}}" aria-setsize="{{length}}"
ref:node >
2018-02-04 19:05:01 +01:00
<div class="follow-notification-offset">
<StatusHeader :notification :notificationId :status :statusId :timelineType
:account :accountId :uuid isStatusInNotification="true" />
2018-02-04 19:05:01 +01:00
</div>
</article>
{{/if}}
<style>
.notification-article {
width: 560px;
max-width: calc(100vw - 40px);
padding: 10px 20px;
border-bottom: 1px solid var(--main-border);
}
.follow-notification-offset {
margin-left: 58px; /* offset for avatar, 48px + 10px */
}
@media (max-width: 767px) {
.notification-article {
padding: 10px 10px;
max-width: calc(100vw - 20px);
2018-02-25 20:29:19 +01:00
width: 580px;
2018-02-04 19:05:01 +01:00
}
}
</style>
<script>
2018-02-04 19:05:26 +01:00
import Status from './Status.html'
import StatusHeader from './StatusHeader.html'
import { store } from '../../_store/store'
import { restoreFocus } from '../../_utils/restoreFocus'
2018-02-04 19:05:01 +01:00
export default {
oncreate() {
let focusSelector = this.get('focusSelector')
if (this.refs.node && focusSelector) {
restoreFocus(this.refs.node, focusSelector)
}
},
2018-02-04 19:05:01 +01:00
components: {
Status,
StatusHeader
},
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 || ''}`
},
2018-02-04 19:05:01 +01:00
}
}
</script>