2018-04-10 02:44:37 +09:00
|
|
|
<template>
|
2022-11-08 14:43:33 +09:00
|
|
|
<article
|
2019-04-01 03:50:34 +09:00
|
|
|
v-if="notification.type === 'mention'"
|
2022-11-08 14:43:33 +09:00
|
|
|
>
|
|
|
|
<Status
|
|
|
|
class="Notification"
|
|
|
|
:compact="true"
|
|
|
|
:statusoid="notification.status"
|
|
|
|
/>
|
|
|
|
</article>
|
|
|
|
<article v-else>
|
2019-09-07 00:15:22 +09:00
|
|
|
<div
|
|
|
|
v-if="needMute && !unmuted"
|
2020-08-18 06:26:02 +09:00
|
|
|
class="Notification container -muted"
|
2019-07-05 16:17:44 +09:00
|
|
|
>
|
2019-09-07 00:15:22 +09:00
|
|
|
<small>
|
2022-08-30 07:46:41 +09:00
|
|
|
<user-link
|
|
|
|
:user="notification.from_profile"
|
|
|
|
:at="false"
|
|
|
|
/>
|
2019-09-07 00:15:22 +09:00
|
|
|
</small>
|
2020-11-24 19:32:42 +09:00
|
|
|
<button
|
|
|
|
class="button-unstyled unmute"
|
2019-09-07 00:15:22 +09:00
|
|
|
@click.prevent="toggleMute"
|
2020-11-25 00:47:37 +09:00
|
|
|
>
|
|
|
|
<FAIcon
|
|
|
|
class="fa-scale-110 fa-old-padding"
|
|
|
|
icon="eye-slash"
|
|
|
|
/>
|
|
|
|
</button>
|
2019-09-07 00:15:22 +09:00
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-else
|
2020-10-20 04:35:46 +09:00
|
|
|
class="Notification non-mention"
|
|
|
|
:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
|
2019-09-07 00:15:22 +09:00
|
|
|
:style="[ userStyle ]"
|
|
|
|
>
|
|
|
|
<a
|
|
|
|
class="avatar-container"
|
2022-03-23 02:43:11 +09:00
|
|
|
:href="$router.resolve(userProfileLink).href"
|
2022-06-15 10:01:46 +09:00
|
|
|
@click.prevent
|
2019-09-07 00:15:22 +09:00
|
|
|
>
|
2022-06-16 22:30:05 +09:00
|
|
|
<UserPopover
|
2022-07-31 18:35:48 +09:00
|
|
|
:user-id="notification.from_profile.id"
|
|
|
|
:overlay-centers="true"
|
2022-06-15 10:01:46 +09:00
|
|
|
>
|
2022-06-16 22:30:05 +09:00
|
|
|
<UserAvatar
|
|
|
|
class="post-avatar"
|
|
|
|
:bot="botIndicator"
|
|
|
|
:compact="true"
|
|
|
|
:better-shadow="betterShadow"
|
|
|
|
:user="notification.from_profile"
|
|
|
|
/>
|
|
|
|
</UserPopover>
|
2019-09-07 00:15:22 +09:00
|
|
|
</a>
|
|
|
|
<div class="notification-right">
|
|
|
|
<span class="notification-details">
|
|
|
|
<div class="name-and-action">
|
|
|
|
<!-- eslint-disable vue/no-v-html -->
|
2021-08-13 19:06:42 +09:00
|
|
|
<bdi v-if="!!notification.from_profile.name_html">
|
|
|
|
<RichContent
|
|
|
|
class="username"
|
|
|
|
:title="'@'+notification.from_profile.screen_name_ui"
|
|
|
|
:html="notification.from_profile.name_html"
|
|
|
|
:emoji="notification.from_profile.emoji"
|
|
|
|
/>
|
|
|
|
</bdi>
|
2019-09-07 00:15:22 +09:00
|
|
|
<!-- eslint-enable vue/no-v-html -->
|
|
|
|
<span
|
|
|
|
v-else
|
|
|
|
class="username"
|
2021-02-26 23:23:11 +09:00
|
|
|
:title="'@'+notification.from_profile.screen_name_ui"
|
2022-03-23 23:08:45 +09:00
|
|
|
>
|
|
|
|
{{ notification.from_profile.name }}
|
|
|
|
</span>
|
|
|
|
{{ ' ' }}
|
2019-09-07 00:15:22 +09:00
|
|
|
<span v-if="notification.type === 'like'">
|
2020-10-21 06:31:16 +09:00
|
|
|
<FAIcon
|
|
|
|
class="type-icon"
|
|
|
|
icon="star"
|
|
|
|
/>
|
2022-03-23 23:08:45 +09:00
|
|
|
{{ ' ' }}
|
2019-09-07 00:15:22 +09:00
|
|
|
<small>{{ $t('notifications.favorited_you') }}</small>
|
|
|
|
</span>
|
|
|
|
<span v-if="notification.type === 'repeat'">
|
2020-10-20 04:35:46 +09:00
|
|
|
<FAIcon
|
2020-10-21 06:31:16 +09:00
|
|
|
class="type-icon"
|
|
|
|
icon="retweet"
|
2019-09-07 00:15:22 +09:00
|
|
|
:title="$t('tool_tip.repeat')"
|
|
|
|
/>
|
2022-03-23 23:08:45 +09:00
|
|
|
{{ ' ' }}
|
2019-09-07 00:15:22 +09:00
|
|
|
<small>{{ $t('notifications.repeated_you') }}</small>
|
|
|
|
</span>
|
|
|
|
<span v-if="notification.type === 'follow'">
|
2020-10-21 06:31:16 +09:00
|
|
|
<FAIcon
|
|
|
|
class="type-icon"
|
|
|
|
icon="user-plus"
|
|
|
|
/>
|
2022-03-23 23:08:45 +09:00
|
|
|
{{ ' ' }}
|
2019-09-07 00:15:22 +09:00
|
|
|
<small>{{ $t('notifications.followed_you') }}</small>
|
|
|
|
</span>
|
2020-04-25 13:04:39 +09:00
|
|
|
<span v-if="notification.type === 'follow_request'">
|
2020-10-21 06:31:16 +09:00
|
|
|
<FAIcon
|
|
|
|
class="type-icon"
|
|
|
|
icon="user"
|
|
|
|
/>
|
2022-03-23 23:08:45 +09:00
|
|
|
{{ ' ' }}
|
2020-04-25 13:04:39 +09:00
|
|
|
<small>{{ $t('notifications.follow_request') }}</small>
|
|
|
|
</span>
|
2019-12-11 00:00:10 +09:00
|
|
|
<span v-if="notification.type === 'move'">
|
2020-10-21 06:31:16 +09:00
|
|
|
<FAIcon
|
|
|
|
class="type-icon"
|
|
|
|
icon="suitcase-rolling"
|
|
|
|
/>
|
2022-03-23 23:08:45 +09:00
|
|
|
{{ ' ' }}
|
2019-12-11 18:20:23 +09:00
|
|
|
<small>{{ $t('notifications.migrated_to') }}</small>
|
2019-12-11 00:00:10 +09:00
|
|
|
</span>
|
2020-02-11 21:24:51 +09:00
|
|
|
<span v-if="notification.type === 'pleroma:emoji_reaction'">
|
|
|
|
<small>
|
2022-03-29 21:35:18 +09:00
|
|
|
<i18n-t
|
|
|
|
scope="global"
|
|
|
|
keypath="notifications.reacted_with"
|
|
|
|
>
|
2022-12-19 04:04:58 +09:00
|
|
|
<img
|
|
|
|
v-if="notification.emoji_url"
|
|
|
|
class="emoji-reaction-emoji emoji-reaction-emoji-image"
|
|
|
|
:src="notification.emoji_url"
|
|
|
|
:name="notification.emoji"
|
|
|
|
>
|
|
|
|
<span
|
|
|
|
v-else
|
|
|
|
class="emoji-reaction-emoji"
|
|
|
|
>{{ notification.emoji }}</span>
|
2021-04-25 19:25:42 +09:00
|
|
|
</i18n-t>
|
2020-02-11 21:24:51 +09:00
|
|
|
</small>
|
|
|
|
</span>
|
2021-01-07 01:31:34 +09:00
|
|
|
<span v-if="notification.type === 'pleroma:report'">
|
|
|
|
<small>{{ $t('notifications.submitted_report') }}</small>
|
|
|
|
</span>
|
2022-05-21 01:39:46 +09:00
|
|
|
<span v-if="notification.type === 'poll'">
|
|
|
|
<FAIcon
|
|
|
|
class="type-icon"
|
|
|
|
icon="poll-h"
|
|
|
|
/>
|
|
|
|
{{ ' ' }}
|
|
|
|
<small>{{ $t('notifications.poll_ended') }}</small>
|
|
|
|
</span>
|
2019-09-07 00:15:22 +09:00
|
|
|
</div>
|
|
|
|
<div
|
2020-04-25 13:04:39 +09:00
|
|
|
v-if="isStatusNotification"
|
2019-09-07 00:15:22 +09:00
|
|
|
class="timeago"
|
|
|
|
>
|
2020-04-25 13:04:39 +09:00
|
|
|
<router-link
|
|
|
|
v-if="notification.status"
|
|
|
|
:to="{ name: 'conversation', params: { id: notification.status.id } }"
|
2022-12-20 05:20:15 +09:00
|
|
|
class="timeago-link faint-link"
|
2020-04-25 13:04:39 +09:00
|
|
|
>
|
2019-09-07 00:15:22 +09:00
|
|
|
<Timeago
|
|
|
|
:time="notification.created_at"
|
|
|
|
:auto-update="240"
|
|
|
|
/>
|
2020-04-25 13:04:39 +09:00
|
|
|
</router-link>
|
2022-12-20 05:20:15 +09:00
|
|
|
<button
|
|
|
|
class="button-unstyled expand-icon"
|
2022-12-22 19:31:36 +09:00
|
|
|
:aria-expanded="statusExpanded"
|
2022-12-19 04:04:58 +09:00
|
|
|
:title="$t('tool_tip.toggle_expand')"
|
|
|
|
@click.prevent="toggleStatusExpanded"
|
2022-12-20 05:20:15 +09:00
|
|
|
>
|
|
|
|
<FAIcon
|
|
|
|
class="fa-scale-110"
|
|
|
|
fixed-width
|
|
|
|
:icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
|
|
|
|
/>
|
|
|
|
</button>
|
2019-09-07 00:15:22 +09:00
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-else
|
|
|
|
class="timeago"
|
|
|
|
>
|
2020-04-25 13:04:39 +09:00
|
|
|
<span class="faint">
|
2019-09-07 00:15:22 +09:00
|
|
|
<Timeago
|
|
|
|
:time="notification.created_at"
|
|
|
|
:auto-update="240"
|
|
|
|
/>
|
2020-04-25 13:04:39 +09:00
|
|
|
</span>
|
2019-09-07 00:15:22 +09:00
|
|
|
</div>
|
2020-11-24 19:32:42 +09:00
|
|
|
<button
|
2019-09-07 00:15:22 +09:00
|
|
|
v-if="needMute"
|
2020-11-24 19:32:42 +09:00
|
|
|
class="button-unstyled"
|
2022-12-22 05:58:41 +09:00
|
|
|
:title="$t('tool_tip.toggle_mute')"
|
2022-12-22 19:31:36 +09:00
|
|
|
:aria-expanded="!unmuted"
|
2019-09-07 00:15:22 +09:00
|
|
|
@click.prevent="toggleMute"
|
2020-11-24 23:10:03 +09:00
|
|
|
>
|
|
|
|
<FAIcon
|
|
|
|
class="fa-scale-110 fa-old-padding"
|
|
|
|
icon="eye-slash"
|
|
|
|
/>
|
|
|
|
</button>
|
2019-09-07 00:15:22 +09:00
|
|
|
</span>
|
2019-07-05 16:17:44 +09:00
|
|
|
<div
|
2020-04-25 13:04:39 +09:00
|
|
|
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
|
2019-09-07 00:15:22 +09:00
|
|
|
class="follow-text"
|
2019-07-05 16:17:44 +09:00
|
|
|
>
|
2022-08-30 07:46:41 +09:00
|
|
|
<user-link
|
2020-04-25 13:04:39 +09:00
|
|
|
class="follow-name"
|
2022-08-30 07:46:41 +09:00
|
|
|
:user="notification.from_profile"
|
|
|
|
/>
|
2020-04-25 13:04:39 +09:00
|
|
|
<div
|
|
|
|
v-if="notification.type === 'follow_request'"
|
|
|
|
style="white-space: nowrap;"
|
|
|
|
>
|
2022-03-30 18:33:56 +09:00
|
|
|
<button
|
|
|
|
class="button-unstyled"
|
2020-04-25 13:04:39 +09:00
|
|
|
:title="$t('tool_tip.accept_follow_request')"
|
|
|
|
@click="approveUser()"
|
2022-03-30 18:33:56 +09:00
|
|
|
>
|
|
|
|
<FAIcon
|
|
|
|
icon="check"
|
|
|
|
class="fa-scale-110 fa-old-padding follow-request-accept"
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
class="button-unstyled"
|
2020-05-02 16:19:47 +09:00
|
|
|
:title="$t('tool_tip.reject_follow_request')"
|
2020-04-25 13:04:39 +09:00
|
|
|
@click="denyUser()"
|
2022-03-30 18:33:56 +09:00
|
|
|
>
|
|
|
|
<FAIcon
|
|
|
|
icon="times"
|
|
|
|
class="fa-scale-110 fa-old-padding follow-request-reject"
|
|
|
|
/>
|
|
|
|
</button>
|
2020-04-25 13:04:39 +09:00
|
|
|
</div>
|
2019-03-04 04:11:38 +09:00
|
|
|
</div>
|
2019-12-11 00:00:10 +09:00
|
|
|
<div
|
|
|
|
v-else-if="notification.type === 'move'"
|
|
|
|
class="move-text"
|
|
|
|
>
|
2022-08-30 07:46:41 +09:00
|
|
|
<user-link
|
|
|
|
:user="notification.target"
|
|
|
|
/>
|
2019-12-11 00:00:10 +09:00
|
|
|
</div>
|
2021-01-12 02:32:58 +09:00
|
|
|
<Report
|
2021-01-07 01:31:34 +09:00
|
|
|
v-else-if="notification.type === 'pleroma:report'"
|
2021-01-18 22:26:08 +09:00
|
|
|
:report-id="notification.report.id"
|
2021-01-12 02:32:58 +09:00
|
|
|
/>
|
2019-09-07 00:15:22 +09:00
|
|
|
<template v-else>
|
2021-06-14 08:52:41 +09:00
|
|
|
<StatusContent
|
2022-12-20 05:20:15 +09:00
|
|
|
:class="{ faint: !statusExpanded }"
|
|
|
|
:compact="!statusExpanded"
|
2020-05-26 07:01:25 +09:00
|
|
|
:status="notification.action"
|
2019-09-07 00:15:22 +09:00
|
|
|
/>
|
|
|
|
</template>
|
2018-04-10 02:44:37 +09:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-06-08 01:37:16 +09:00
|
|
|
<teleport to="#modal">
|
|
|
|
<confirm-modal
|
|
|
|
v-if="showingApproveConfirmDialog"
|
|
|
|
:title="$t('user_card.approve_confirm_title')"
|
|
|
|
:confirm-text="$t('user_card.approve_confirm_accept_button')"
|
|
|
|
:cancel-text="$t('user_card.approve_confirm_cancel_button')"
|
|
|
|
@accepted="doApprove"
|
|
|
|
@cancelled="hideApproveConfirmDialog"
|
|
|
|
>
|
|
|
|
{{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
|
|
|
|
</confirm-modal>
|
|
|
|
<confirm-modal
|
|
|
|
v-if="showingDenyConfirmDialog"
|
|
|
|
:title="$t('user_card.deny_confirm_title')"
|
|
|
|
:confirm-text="$t('user_card.deny_confirm_accept_button')"
|
|
|
|
:cancel-text="$t('user_card.deny_confirm_cancel_button')"
|
|
|
|
@accepted="doDeny"
|
|
|
|
@cancelled="hideDenyConfirmDialog"
|
|
|
|
>
|
|
|
|
{{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
|
|
|
|
</confirm-modal>
|
|
|
|
</teleport>
|
2022-11-08 14:43:33 +09:00
|
|
|
</article>
|
2018-04-10 02:44:37 +09:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./notification.js"></script>
|
2020-08-18 06:26:02 +09:00
|
|
|
<style src="./notification.scss" lang="scss"></style>
|