fix basicusercard

This commit is contained in:
Henry Jameson 2022-06-27 19:26:52 +03:00
parent cb135645f9
commit 700df11e9a
4 changed files with 18 additions and 29 deletions

View File

@ -1,4 +1,4 @@
import UserCard from '../user_card/user_card.vue'
import UserPopover from '../user_popover/user_popover.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -7,20 +7,12 @@ const BasicUserCard = {
props: [
'user'
],
data () {
return {
userExpanded: false
}
},
components: {
UserCard,
UserPopover,
UserAvatar,
RichContent
},
methods: {
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
},
userProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
}

View File

@ -1,24 +1,19 @@
<template>
<div class="basic-user-card">
<router-link :to="userProfileLink(user)">
<router-link @click.prevent :to="userProfileLink(user)">
<UserPopover
:userId="user.id"
:overlayCenters="true"
overlayCentersSelector=".avatar"
>
<UserAvatar
class="avatar"
class="user-avatar avatar"
:user="user"
@click.prevent="toggleUserExpanded"
@click.prevent
/>
</UserPopover>
</router-link>
<div
v-if="userExpanded"
class="basic-user-card-expanded-content"
>
<UserCard
:user-id="user.id"
:rounded="true"
:bordered="true"
/>
</div>
<div
v-else
class="basic-user-card-collapsed-content"
>
<div
@ -53,6 +48,8 @@
margin: 0;
padding: 0.6em 1em;
--emoji-size: 14px;
&-collapsed-content {
margin-left: 0.7em;
text-align: left;

View File

@ -4,7 +4,7 @@ import { defineAsyncComponent } from 'vue'
const UserPopover = {
name: 'UserPopover',
props: [
'userId', 'overlayCenters', 'disabled'
'userId', 'overlayCenters', 'disabled', 'overlay-centers-selector'
],
components: {
UserCard,

View File

@ -2,7 +2,7 @@
<Popover
trigger="click"
popover-class="popover-default user-popover"
overlay-centers-selector=".user-info-avatar-link .Avatar"
:overlay-centers-selector="overlayCentersSelector || '.user-info-avatar-link .Avatar'"
:overlay-centers="overlayCenters"
:disabled="disabled"
>