mirror of
https://akkoma.dev/AkkomaGang/akkoma-fe
synced 2025-04-30 11:09:30 +08:00
ccb0ffdc8a
Currently all notifications except follow-related once include
and explicit direction text. (It missing in follow notifs is due to an
omission in 804ba0cdb6 which only added
the newly introduced with-direction to status-related notifs. Before,
presumably all notifs included direction text.)
But in the notification tray horizontal space is scarce
and notifs can already be assumed to only come from the past.
While it might not be too bad for the English localisation’s 4-letter
' ago' suffix, e.g. the Indonesian localisation’s ' yang lalu' needs
10 letters.
Thus instead of fixing the omission for follow-related notifs,
drop direction text from all notification timestamps.
259 lines
8 KiB
Vue
259 lines
8 KiB
Vue
<template>
|
|
<Status
|
|
v-if="notification.type === 'mention'"
|
|
class="Notification"
|
|
:compact="true"
|
|
:statusoid="notification.status"
|
|
/>
|
|
<div v-else>
|
|
<div
|
|
v-if="needMute && !unmuted"
|
|
class="Notification container -muted"
|
|
>
|
|
<small>
|
|
<router-link :to="userProfileLink">
|
|
{{ notification.from_profile.screen_name_ui }}
|
|
</router-link>
|
|
</small>
|
|
<button
|
|
class="button-unstyled unmute"
|
|
@click.prevent="toggleMute"
|
|
>
|
|
<FAIcon
|
|
class="fa-scale-110 fa-old-padding"
|
|
icon="eye-slash"
|
|
/>
|
|
</button>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="Notification non-mention"
|
|
:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
|
|
:style="[ userStyle ]"
|
|
>
|
|
<a
|
|
class="avatar-container"
|
|
:href="$router.resolve(userProfileLink).href"
|
|
@click.stop.prevent.capture="toggleUserExpanded"
|
|
>
|
|
<UserAvatar
|
|
:compact="true"
|
|
:better-shadow="betterShadow"
|
|
:user="notification.from_profile"
|
|
/>
|
|
</a>
|
|
<div class="notification-right">
|
|
<UserCard
|
|
v-if="userExpanded"
|
|
:user-id="getUser(notification).id"
|
|
:rounded="true"
|
|
:bordered="true"
|
|
/>
|
|
<span class="notification-details">
|
|
<div class="name-and-action">
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<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>
|
|
<!-- eslint-enable vue/no-v-html -->
|
|
<span
|
|
v-else
|
|
class="username"
|
|
:title="'@'+notification.from_profile.screen_name_ui"
|
|
>
|
|
{{ notification.from_profile.name }}
|
|
</span>
|
|
{{ ' ' }}
|
|
<span v-if="notification.type === 'like'">
|
|
<FAIcon
|
|
class="type-icon"
|
|
icon="star"
|
|
/>
|
|
{{ ' ' }}
|
|
<small>{{ $t('notifications.favorited_you') }}</small>
|
|
</span>
|
|
<span v-if="notification.type === 'repeat'">
|
|
<FAIcon
|
|
class="type-icon"
|
|
icon="retweet"
|
|
:title="$t('tool_tip.repeat')"
|
|
/>
|
|
{{ ' ' }}
|
|
<small>{{ $t('notifications.repeated_you') }}</small>
|
|
</span>
|
|
<span v-if="notification.type === 'follow'">
|
|
<FAIcon
|
|
class="type-icon"
|
|
icon="user-plus"
|
|
/>
|
|
{{ ' ' }}
|
|
<small>{{ $t('notifications.followed_you') }}</small>
|
|
</span>
|
|
<span v-if="notification.type === 'follow_request'">
|
|
<FAIcon
|
|
class="type-icon"
|
|
icon="user"
|
|
/>
|
|
{{ ' ' }}
|
|
<small>{{ $t('notifications.follow_request') }}</small>
|
|
</span>
|
|
<span v-if="notification.type === 'move'">
|
|
<FAIcon
|
|
class="type-icon"
|
|
icon="suitcase-rolling"
|
|
/>
|
|
{{ ' ' }}
|
|
<small>{{ $t('notifications.migrated_to') }}</small>
|
|
</span>
|
|
<span v-if="notification.type === 'pleroma:emoji_reaction'">
|
|
<small>
|
|
<i18n-t
|
|
scope="global"
|
|
keypath="notifications.reacted_with"
|
|
>
|
|
<img
|
|
v-if="notification.emoji_url !== null"
|
|
class="notification-reaction-emoji"
|
|
:src="notification.emoji_url"
|
|
:name="notification.emoji"
|
|
>
|
|
<span
|
|
v-else
|
|
class="emoji-reaction-emoji"
|
|
>
|
|
{{ notification.emoji }}
|
|
</span>
|
|
</i18n-t>
|
|
</small>
|
|
</span>
|
|
<span v-if="notification.type === 'poll'">
|
|
<FAIcon
|
|
class="type-icon"
|
|
icon="poll-h"
|
|
/>
|
|
{{ ' ' }}
|
|
<small>{{ $t('notifications.poll_ended') }}</small>
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="isStatusNotification"
|
|
class="timeago"
|
|
>
|
|
<router-link
|
|
v-if="notification.status"
|
|
:to="{ name: 'conversation', params: { id: notification.status.id } }"
|
|
class="faint-link"
|
|
>
|
|
<Timeago
|
|
:time="notification.created_at"
|
|
:auto-update="240"
|
|
/>
|
|
</router-link>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="timeago"
|
|
>
|
|
<span class="faint">
|
|
<Timeago
|
|
:time="notification.created_at"
|
|
:auto-update="240"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<button
|
|
v-if="needMute"
|
|
class="button-unstyled"
|
|
@click.prevent="toggleMute"
|
|
>
|
|
<FAIcon
|
|
class="fa-scale-110 fa-old-padding"
|
|
icon="eye-slash"
|
|
/>
|
|
</button>
|
|
</span>
|
|
<div
|
|
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
|
|
class="follow-text"
|
|
>
|
|
<router-link
|
|
:to="userProfileLink"
|
|
class="follow-name"
|
|
>
|
|
@{{ notification.from_profile.screen_name_ui }}
|
|
</router-link>
|
|
<div
|
|
v-if="notification.type === 'follow_request'"
|
|
style="white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="button-unstyled"
|
|
:title="$t('tool_tip.accept_follow_request')"
|
|
@click="approveUser()"
|
|
>
|
|
<FAIcon
|
|
icon="check"
|
|
class="fa-scale-110 fa-old-padding follow-request-accept"
|
|
/>
|
|
</button>
|
|
<button
|
|
class="button-unstyled"
|
|
:title="$t('tool_tip.reject_follow_request')"
|
|
@click="denyUser()"
|
|
>
|
|
<FAIcon
|
|
icon="times"
|
|
class="fa-scale-110 fa-old-padding follow-request-reject"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else-if="notification.type === 'move'"
|
|
class="move-text"
|
|
>
|
|
<router-link :to="targetUserProfileLink">
|
|
@{{ notification.target.screen_name_ui }}
|
|
</router-link>
|
|
</div>
|
|
<template v-else>
|
|
<StatusContent
|
|
class="faint"
|
|
:compact="true"
|
|
:status="notification.action"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./notification.js"></script>
|
|
<style src="./notification.scss" lang="scss"></style>
|