aboutsummaryrefslogtreecommitdiff
path: root/src/components/notification
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/notification')
-rw-r--r--src/components/notification/notification.js24
-rw-r--r--src/components/notification/notification.scss13
-rw-r--r--src/components/notification/notification.vue141
3 files changed, 126 insertions, 52 deletions
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 398bb7a9..265aaee0 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -4,7 +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'
@@ -17,7 +20,9 @@ import {
faUserPlus,
faEyeSlash,
faUser,
- faSuitcaseRolling
+ faSuitcaseRolling,
+ faExpandAlt,
+ faCompressAlt
} from '@fortawesome/free-solid-svg-icons'
library.add(
@@ -28,29 +33,34 @@ library.add(
faUserPlus,
faUser,
faEyeSlash,
- faSuitcaseRolling
+ faSuitcaseRolling,
+ faExpandAlt,
+ faCompressAlt
)
const Notification = {
data () {
return {
- userExpanded: false,
+ statusExpanded: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter,
unmuted: false
}
},
- props: [ 'notification' ],
+ props: ['notification'],
components: {
StatusContent,
UserAvatar,
UserCard,
Timeago,
Status,
- RichContent
+ Report,
+ RichContent,
+ UserPopover,
+ UserLink
},
methods: {
- toggleUserExpanded () {
- this.userExpanded = !this.userExpanded
+ toggleStatusExpanded () {
+ this.statusExpanded = !this.statusExpanded
},
generateUserProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index ec291547..38978137 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -2,7 +2,18 @@
// TODO Copypaste from Status, should unify it somehow
.Notification {
- --emoji-size: 14px;
+ 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;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 634ec8ee..f1aa5420 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,22 +37,23 @@
>
<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 -->
@@ -64,12 +70,16 @@
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'">
@@ -78,6 +88,7 @@
icon="retweet"
:title="$t('tool_tip.repeat')"
/>
+ {{ ' ' }}
<small>{{ $t('notifications.repeated_you') }}</small>
</span>
<span v-if="notification.type === 'follow'">
@@ -85,6 +96,7 @@
class="type-icon"
icon="user-plus"
/>
+ {{ ' ' }}
<small>{{ $t('notifications.followed_you') }}</small>
</span>
<span v-if="notification.type === 'follow_request'">
@@ -92,6 +104,7 @@
class="type-icon"
icon="user"
/>
+ {{ ' ' }}
<small>{{ $t('notifications.follow_request') }}</small>
</span>
<span v-if="notification.type === 'move'">
@@ -99,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"
@@ -116,13 +144,25 @@
<router-link
v-if="notification.status"
:to="{ name: 'conversation', params: { id: notification.status.id } }"
- class="faint-link"
+ class="timeago-link faint-link"
>
<Timeago
:time="notification.created_at"
:auto-update="240"
/>
</router-link>
+ <button
+ class="button-unstyled expand-icon"
+ @click.prevent="toggleStatusExpanded"
+ :title="$t('tool_tip.toggle_expand')"
+ :aria-expanded="statusExpanded"
+ >
+ <FAIcon
+ class="fa-scale-110"
+ fixed-width
+ :icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
+ />
+ </button>
</div>
<div
v-else
@@ -138,6 +178,8 @@
<button
v-if="needMute"
class="button-unstyled"
+ :title="$t('tool_tip.toggle_mute')"
+ :aria-expanded="!unmuted"
@click.prevent="toggleMute"
>
<FAIcon
@@ -150,47 +192,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
- class="faint"
+ <StatusContent
+ :class="{ faint: !statusExpanded }"
+ :compact="!statusExpanded"
: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 20:37:18 +0000