use user popovers in notifications as well
This commit is contained in:
parent
d3b5d27f29
commit
30c4a66518
@ -5,6 +5,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import UserCard from '../user_card/user_card.vue'
|
||||
import Timeago from '../timeago/timeago.vue'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import Popover from '../popover/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'
|
||||
@ -46,7 +47,8 @@ const Notification = {
|
||||
UserCard,
|
||||
Timeago,
|
||||
Status,
|
||||
RichContent
|
||||
RichContent,
|
||||
Popover
|
||||
},
|
||||
methods: {
|
||||
toggleUserExpanded () {
|
||||
|
@ -34,21 +34,36 @@
|
||||
<a
|
||||
class="avatar-container"
|
||||
:href="$router.resolve(userProfileLink).href"
|
||||
@click.stop.prevent.capture="toggleUserExpanded"
|
||||
@click.prevent
|
||||
>
|
||||
<UserAvatar
|
||||
:compact="true"
|
||||
:better-shadow="betterShadow"
|
||||
:user="notification.from_profile"
|
||||
/>
|
||||
<Popover
|
||||
trigger="click"
|
||||
popover-class="popover-default user-popover"
|
||||
:overlay-centers="true"
|
||||
overlay-centers-selector=".user-info-avatar-link .Avatar"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<UserAvatar
|
||||
class="post-avatar"
|
||||
:bot="botIndicator"
|
||||
:compact="true"
|
||||
:better-shadow="betterShadow"
|
||||
:user="notification.from_profile"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:content>
|
||||
<UserCard
|
||||
class="mention-link-popover"
|
||||
:user-id="getUser(notification).id"
|
||||
:hide-bio="true"
|
||||
:bordered="false"
|
||||
:allow-zooming-avatar="true"
|
||||
:rounded="true"
|
||||
/>
|
||||
</template>
|
||||
</Popover>
|
||||
</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 -->
|
||||
|
Loading…
Reference in New Issue
Block a user