aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/mention_link/mention_link.js3
-rw-r--r--src/components/mention_link/mention_link.vue115
-rw-r--r--src/components/notification/notification.js4
-rw-r--r--src/components/notification/notification.vue36
-rw-r--r--src/components/popover/popover.js2
-rw-r--r--src/components/status/status.js6
-rw-r--r--src/components/status/status.vue43
-rw-r--r--src/components/user_popover/user_popover.js14
-rw-r--r--src/components/user_popover/user_popover.vue34
9 files changed, 127 insertions, 130 deletions
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 4b088f88..7e47625a 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -16,8 +16,7 @@ const MentionLink = {
name: 'MentionLink',
components: {
UserAvatar,
- Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
- UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue'))
+ UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
},
props: {
url: {
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 686ad27f..0cff50ab 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -10,84 +10,71 @@
target="_blank"
v-html="content"
/><!-- eslint-enable vue/no-v-html -->
- <Popover
- trigger="click"
- :bound-to="{ x: 'container'}"
- bound-to-selector=".column"
- popover-class="popover-default mention-popover"
+ <UserPopover
+ v-else
+ :userId="user.id"
:disabled="!shouldShowTooltip"
>
- <template v-slot:trigger>
- <span
- v-if="user"
- class="new"
- :style="style"
- :class="classnames"
+ <span
+ v-if="user"
+ class="new"
+ :style="style"
+ :class="classnames"
+ >
+ <a
+ class="short button-unstyled"
+ :class="{ '-with-tooltip': shouldShowTooltip }"
+ :href="url"
+ @click.prevent="onClick"
>
- <a
- class="short button-unstyled"
- :class="{ '-with-tooltip': shouldShowTooltip }"
- :href="url"
- @click.prevent="onClick"
+ <!-- eslint-disable vue/no-v-html -->
+ <UserAvatar
+ v-if="shouldShowAvatar"
+ class="mention-avatar"
+ :user="user"
+ /><span
+ class="shortName"
+ ><FAIcon
+ v-if="useAtIcon"
+ size="sm"
+ icon="at"
+ class="at"
+ />{{ !useAtIcon ? '@' : '' }}<span
+ class="userName"
+ v-html="userName"
+ /><span
+ v-if="shouldShowFullUserName"
+ class="serverName"
+ :class="{ '-faded': shouldFadeDomain }"
+ v-html="'@' + serverName"
+ />
+ </span>
+ <span
+ v-if="isYou && shouldShowYous"
+ :class="{ '-you': shouldBoldenYou }"
+ > {{ ' ' + $t('status.you') }}</span>
+ <!-- eslint-enable vue/no-v-html -->
+ </a><span
+ v-if="shouldShowTooltip"
+ class="full"
+ >
+ <span
+ class="userNameFull"
>
<!-- eslint-disable vue/no-v-html -->
- <UserAvatar
- v-if="shouldShowAvatar"
- class="mention-avatar"
- :user="user"
- /><span
- class="shortName"
- ><FAIcon
- v-if="useAtIcon"
- size="sm"
- icon="at"
- class="at"
- />{{ !useAtIcon ? '@' : '' }}<span
+ @<span
class="userName"
v-html="userName"
/><span
- v-if="shouldShowFullUserName"
class="serverName"
:class="{ '-faded': shouldFadeDomain }"
v-html="'@' + serverName"
/>
- </span>
- <span
- v-if="isYou && shouldShowYous"
- :class="{ '-you': shouldBoldenYou }"
- > {{ ' ' + $t('status.you') }}</span>
<!-- eslint-enable vue/no-v-html -->
- </a><span
- v-if="shouldShowTooltip"
- class="full"
- >
- <span
- class="userNameFull"
- >
- <!-- eslint-disable vue/no-v-html -->
- @<span
- class="userName"
- v-html="userName"
- /><span
- class="serverName"
- :class="{ '-faded': shouldFadeDomain }"
- v-html="'@' + serverName"
- />
- <!-- eslint-enable vue/no-v-html -->
- </span>
</span>
- </span></template>
- <template v-slot:content>
- <UserCard
- class="mention-link-popover"
- :user-id="user.id"
- :hide-bio="true"
- :bordered="false"
- :allow-zooming-avatar="true"
- :rounded="true"
- />
- </template>
- </Popover>
+ </span>
+ </span>
+ </UserPopover>
</span>
</template>
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 9408b217..77cdfa73 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -5,7 +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 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'
@@ -48,7 +48,7 @@ const Notification = {
Timeago,
Status,
RichContent,
- Popover
+ UserPopover
},
methods: {
toggleUserExpanded () {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a44481c9..6427d117 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -36,32 +36,18 @@
:href="$router.resolve(userProfileLink).href"
@click.prevent
>
- <Popover
- trigger="click"
- popover-class="popover-default user-popover"
- :overlay-centers="true"
- overlay-centers-selector=".user-info-avatar-link .Avatar"
+ <UserPopover
+ :userId="notification.from_profile.id"
+ :overlayCenters="true"
>
- <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>
+ <UserAvatar
+ class="post-avatar"
+ :bot="botIndicator"
+ :compact="true"
+ :better-shadow="betterShadow"
+ :user="notification.from_profile"
+ />
+ </UserPopover>
</a>
<div class="notification-right">
<span class="notification-details">
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 7f4c1cac..f6527624 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -80,7 +80,7 @@ const Popover = {
y: anchorScreenBox.top + anchorHeight * 0.5
}
const content = this.$refs.content
- const overlayCenter = this.overlayCentersSelector
+ const overlayCenter = this.overlayCenters
? this.$refs.content.querySelector(this.overlayCentersSelector)
: null
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 06496258..053c9441 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -4,14 +4,13 @@ import ReactButton from '../react_button/react_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
import ExtraButtons from '../extra_buttons/extra_buttons.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCard from '../user_card/user_card.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import AvatarList from '../avatar_list/avatar_list.vue'
import Timeago from '../timeago/timeago.vue'
import StatusContent from '../status_content/status_content.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import StatusPopover from '../status_popover/status_popover.vue'
-import Popover from '../popover/popover.vue'
+import UserPopover from '../user_popover/user_popover.vue'
import UserListPopover from '../user_list_popover/user_list_popover.vue'
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
@@ -106,7 +105,6 @@ const Status = {
RetweetButton,
ExtraButtons,
PostStatusForm,
- UserCard,
UserAvatar,
AvatarList,
Timeago,
@@ -117,7 +115,7 @@ const Status = {
RichContent,
MentionLink,
MentionsLine,
- Popover
+ UserPopover
},
props: [
'statusoid',
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 624960fe..771d336a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -123,42 +123,21 @@
class="left-side"
>
<a :href="$router.resolve(userProfileLink).href" @click.prevent>
- <Popover
- trigger="click"
- popover-class="popover-default user-popover"
- :overlay-centers="true"
- overlay-centers-selector=".user-info-avatar-link .Avatar"
+ <UserPopover
+ :userId="status.user.id"
+ :overlayCenters="true"
>
- <template v-slot:trigger>
- <UserAvatar
- class="post-avatar"
- :bot="botIndicator"
- :compact="compact"
- :better-shadow="betterShadow"
- :user="status.user"
- />
- </template>
- <template v-slot:content>
- <UserCard
- class="mention-link-popover"
- :user-id="status.user.id"
- :hide-bio="true"
- :bordered="false"
- :allow-zooming-avatar="true"
- :rounded="true"
- />
- </template>
- </Popover>
+ <UserAvatar
+ class="post-avatar"
+ :bot="botIndicator"
+ :compact="compact"
+ :better-shadow="betterShadow"
+ :user="status.user"
+ />
+ </UserPopover>
</a>
</div>
<div class="right-side">
- <UserCard
- v-if="userExpanded"
- :user-id="status.user.id"
- :rounded="true"
- :bordered="true"
- class="usercard"
- />
<div
v-if="!noHeading"
class="status-heading"
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
new file mode 100644
index 00000000..bffd5962
--- /dev/null
+++ b/src/components/user_popover/user_popover.js
@@ -0,0 +1,14 @@
+import { defineAsyncComponent } from 'vue'
+
+const UserPopover = {
+ name: 'UserPopover',
+ props: [
+ 'userId', 'overlayCenters', 'disabled'
+ ],
+ components: {
+ UserCard: defineAsyncComponent(() => import('../user_card/user_card.vue')),
+ Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
+ }
+}
+
+export default UserPopover
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
new file mode 100644
index 00000000..7ad5c234
--- /dev/null
+++ b/src/components/user_popover/user_popover.vue
@@ -0,0 +1,34 @@
+<template>
+<Popover
+ trigger="click"
+ popover-class="popover-default user-popover"
+ overlay-centers-selector=".user-info-avatar-link .Avatar"
+ :overlay-centers="overlayCenters"
+ :disabled="disabled"
+>
+ <template v-slot:trigger>
+ <slot />
+ </template>
+ <template v-slot:content>
+ <UserCard
+ class="user-popover"
+ :user-id="userId"
+ :hide-bio="true"
+ :bordered="false"
+ :allow-zooming-avatar="true"
+ :rounded="true"
+ />
+ </template>
+</Popover>
+</template>
+
+<script src="./user_popover.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+/* popover styles load on-demand, so we need to override */
+.user-popover.popover {
+}
+
+</style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 09:31:26 +0000