aboutsummaryrefslogtreecommitdiff
path: root/src/components/notification
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/notification')
-rw-r--r--src/components/notification/notification.js12
-rw-r--r--src/components/notification/notification.scss13
-rw-r--r--src/components/notification/notification.vue137
3 files changed, 112 insertions, 50 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 4aa9affd..ddba560e 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -4,6 +4,10 @@ import Status from '../status/status.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import UserCard from '../user_card/user_card.vue'
import Timeago from '../timeago/timeago.vue'
+import Report from '../report/report.vue'
+import UserLink from '../user_link/user_link.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
+import UserPopover from '../user_popover/user_popover.vue'
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -38,13 +42,17 @@ const Notification = {
unmuted: false
}
},
- props: [ 'notification' ],
+ props: ['notification'],
components: {
StatusContent,
UserAvatar,
UserCard,
Timeago,
- Status
+ Status,
+ Report,
+ RichContent,
+ UserPopover,
+ UserLink
},
methods: {
toggleUserExpanded () {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index f5905560..38978137 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -2,6 +2,19 @@
// TODO Copypaste from Status, should unify it somehow
.Notification {
+ border-bottom: 1px solid;
+ border-color: $fallback--border;
+ border-color: var(--border, $fallback--border);
+ word-wrap: break-word;
+ word-break: break-word;
+ --emoji-size: 14px;
+
+ &:hover {
+ --_still-image-img-visibility: visible;
+ --_still-image-canvas-visibility: hidden;
+ --_still-image-label-visibility: hidden;
+ }
+
&.-muted {
padding: 0.25em 0.6em;
height: 1.2em;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 0081dee4..84f3f7de 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,18 +1,23 @@
<template>
- <Status
+ <article
v-if="notification.type === 'mention'"
- :compact="true"
- :statusoid="notification.status"
- />
- <div v-else>
+ >
+ <Status
+ class="Notification"
+ :compact="true"
+ :statusoid="notification.status"
+ />
+ </article>
+ <article v-else>
<div
v-if="needMute && !unmuted"
class="Notification container -muted"
>
<small>
- <router-link :to="userProfileLink">
- {{ notification.from_profile.screen_name_ui }}
- </router-link>
+ <user-link
+ :user="notification.from_profile"
+ :at="false"
+ />
</small>
<button
class="button-unstyled unmute"
@@ -32,42 +37,49 @@
>
<a
class="avatar-container"
- :href="notification.from_profile.statusnet_profile_url"
- @click.stop.prevent.capture="toggleUserExpanded"
+ :href="$router.resolve(userProfileLink).href"
+ @click.prevent
>
- <UserAvatar
- :compact="true"
- :better-shadow="betterShadow"
- :user="notification.from_profile"
- />
+ <UserPopover
+ :user-id="notification.from_profile.id"
+ :overlay-centers="true"
+ >
+ <UserAvatar
+ class="post-avatar"
+ :bot="botIndicator"
+ :compact="true"
+ :better-shadow="betterShadow"
+ :user="notification.from_profile"
+ />
+ </UserPopover>
</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"
- class="username"
- :title="'@'+notification.from_profile.screen_name_ui"
- v-html="notification.from_profile.name_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>
+ >
+ {{ 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'">
@@ -76,6 +88,7 @@
icon="retweet"
:title="$t('tool_tip.repeat')"
/>
+ {{ ' ' }}
<small>{{ $t('notifications.repeated_you') }}</small>
</span>
<span v-if="notification.type === 'follow'">
@@ -83,6 +96,7 @@
class="type-icon"
icon="user-plus"
/>
+ {{ ' ' }}
<small>{{ $t('notifications.followed_you') }}</small>
</span>
<span v-if="notification.type === 'follow_request'">
@@ -90,6 +104,7 @@
class="type-icon"
icon="user"
/>
+ {{ ' ' }}
<small>{{ $t('notifications.follow_request') }}</small>
</span>
<span v-if="notification.type === 'move'">
@@ -97,15 +112,30 @@
class="type-icon"
icon="suitcase-rolling"
/>
+ {{ ' ' }}
<small>{{ $t('notifications.migrated_to') }}</small>
</span>
<span v-if="notification.type === 'pleroma:emoji_reaction'">
<small>
- <i18n path="notifications.reacted_with">
+ <i18n-t
+ scope="global"
+ keypath="notifications.reacted_with"
+ >
<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
- </i18n>
+ </i18n-t>
</small>
</span>
+ <span v-if="notification.type === 'pleroma:report'">
+ <small>{{ $t('notifications.submitted_report') }}</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"
@@ -148,47 +178,58 @@
v-if="notification.type === 'follow' || notification.type === 'follow_request'"
class="follow-text"
>
- <router-link
- :to="userProfileLink"
+ <user-link
class="follow-name"
- >
- @{{ notification.from_profile.screen_name_ui }}
- </router-link>
+ :user="notification.from_profile"
+ />
<div
v-if="notification.type === 'follow_request'"
style="white-space: nowrap;"
>
- <FAIcon
- icon="check"
- class="fa-scale-110 fa-old-padding follow-request-accept"
+ <button
+ class="button-unstyled"
:title="$t('tool_tip.accept_follow_request')"
@click="approveUser()"
- />
- <FAIcon
- icon="times"
- class="fa-scale-110 fa-old-padding follow-request-reject"
+ >
+ <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>
+ <user-link
+ :user="notification.target"
+ />
</div>
+ <Report
+ v-else-if="notification.type === 'pleroma:report'"
+ :report-id="notification.report.id"
+ />
<template v-else>
- <status-content
+ <StatusContent
class="faint"
+ :compact="true"
:status="notification.action"
/>
</template>
</div>
</div>
- </div>
+ </article>
</template>
<script src="./notification.js"></script>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 15:36:42 +0000