unify user popovers into a separate component
This commit is contained in:
parent
770d12f7ad
commit
d84cda7009
@ -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: {
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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 () {
|
||||
|
@ -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">
|
||||
|
@ -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
|
||||
|
||||
|
@ -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',
|
||||
|
@ -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"
|
||||
|
14
src/components/user_popover/user_popover.js
Normal file
14
src/components/user_popover/user_popover.js
Normal file
@ -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
|
34
src/components/user_popover/user_popover.vue
Normal file
34
src/components/user_popover/user_popover.vue
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user