commit: d84cda7009d486a047953b1ca2d27acf35b8ddc1
parent 770d12f7adda5659ff01b83ad3e172c27bae818d
Author: Henry Jameson <spam@hjkos.com>
Date: Thu, 16 Jun 2022 16:30:05 +0300
unify user popovers into a separate component
Diffstat:
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
