Merge remote-tracking branch 'origin/disjointed-popovers' into disjointed-popovers
* origin/disjointed-popovers: popover controls for user-card unify user popovers into a separate component
This commit is contained in:
commit
01e56a3e10
|
@ -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">
|
||||
|
|
|
@ -81,7 +81,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,7 +14,9 @@ import {
|
|||
faRss,
|
||||
faSearchPlus,
|
||||
faExternalLinkAlt,
|
||||
faEdit
|
||||
faEdit,
|
||||
faTimes,
|
||||
faExpandAlt
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
|
@ -22,12 +24,21 @@ library.add(
|
|||
faBell,
|
||||
faSearchPlus,
|
||||
faExternalLinkAlt,
|
||||
faEdit
|
||||
faEdit,
|
||||
faTimes,
|
||||
faExpandAlt
|
||||
)
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
|
||||
'userId',
|
||||
'switcher',
|
||||
'selected',
|
||||
'hideBio',
|
||||
'rounded',
|
||||
'bordered',
|
||||
'allowZoomingAvatar',
|
||||
'onClose'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
|
@ -47,9 +58,10 @@ export default {
|
|||
},
|
||||
classes () {
|
||||
return [{
|
||||
'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
|
||||
'user-card-rounded': this.rounded === true, // set border-radius for all sides
|
||||
'user-card-bordered': this.bordered === true // set border for all sides
|
||||
'-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
|
||||
'-rounded': this.rounded === true, // set border-radius for all sides
|
||||
'-bordered': this.bordered === true, // set border for all sides
|
||||
'-popover': !!this.onClose // set popover rounding
|
||||
}]
|
||||
},
|
||||
style () {
|
||||
|
|
|
@ -42,8 +42,10 @@
|
|||
mask-composite: exclude;
|
||||
background-size: cover;
|
||||
mask-size: 100% 60%;
|
||||
border-top-left-radius: calc(var(--panelRadius) - 1px);
|
||||
border-top-right-radius: calc(var(--panelRadius) - 1px);
|
||||
border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
|
||||
border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
|
||||
border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
|
||||
border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
|
||||
background-color: var(--profileBg);
|
||||
z-index: -2;
|
||||
|
||||
|
@ -72,21 +74,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
|
||||
&-rounded-t {
|
||||
&.-rounded-t {
|
||||
border-top-left-radius: $fallback--panelRadius;
|
||||
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-top-right-radius: $fallback--panelRadius;
|
||||
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
|
||||
--__roundnessTop: var(--panelRadius);
|
||||
--__roundnessBottom: 0;
|
||||
}
|
||||
|
||||
&-rounded {
|
||||
&.-rounded {
|
||||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
|
||||
--__roundnessTop: var(--panelRadius);
|
||||
--__roundnessBottom: var(--panelRadius);
|
||||
}
|
||||
|
||||
&-bordered {
|
||||
&.-popover {
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
|
||||
--__roundnessTop: var(--tooltipRadius);
|
||||
--__roundnessBottom: var(--tooltipRadius);
|
||||
}
|
||||
|
||||
&.-bordered {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $fallback--border;
|
||||
|
@ -99,6 +113,15 @@
|
|||
color: var(--lightText, $fallback--lightText);
|
||||
padding: 0 26px;
|
||||
|
||||
a {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
|
||||
&:hover {
|
||||
color: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
min-width: 0;
|
||||
padding: 16px 0 6px;
|
||||
|
@ -206,8 +229,6 @@
|
|||
flex: 0 1 auto;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
|
||||
.dailyAvg {
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
:style="style"
|
||||
class="background-image"
|
||||
/>
|
||||
<div class="panel-heading -flexible-height">
|
||||
<div :class="onClose ? '' : panel-heading -flexible-height">
|
||||
<div class="user-info">
|
||||
<div class="container">
|
||||
<a
|
||||
|
@ -38,12 +38,16 @@
|
|||
</router-link>
|
||||
<div class="user-summary">
|
||||
<div class="top-line">
|
||||
<RichContent
|
||||
:title="user.name"
|
||||
<router-link
|
||||
:to="userProfileLink(user)"
|
||||
class="user-name"
|
||||
:html="user.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
>
|
||||
<RichContent
|
||||
:title="user.name"
|
||||
:html="user.name"
|
||||
:emoji="user.emoji"
|
||||
/>
|
||||
</router-link>
|
||||
<button
|
||||
v-if="!isOtherUser && user.is_local"
|
||||
class="button-unstyled edit-profile-button"
|
||||
|
@ -72,6 +76,27 @@
|
|||
:user="user"
|
||||
:relationship="relationship"
|
||||
/>
|
||||
<router-link
|
||||
v-if="onClose"
|
||||
:to="userProfileLink(user)"
|
||||
class="button-unstyled external-link-button"
|
||||
@click="onClose"
|
||||
>
|
||||
<FAIcon
|
||||
class="icon"
|
||||
icon="expand-alt"
|
||||
/>
|
||||
</router-link>
|
||||
<button
|
||||
v-if="onClose"
|
||||
class="button-unstyled external-link-button"
|
||||
@click="onClose"
|
||||
>
|
||||
<FAIcon
|
||||
class="icon"
|
||||
icon="times"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bottom-line">
|
||||
<router-link
|
||||
|
|
|
@ -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
|
|
@ -0,0 +1,33 @@
|
|||
<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={close}>
|
||||
<UserCard
|
||||
class="user-popover"
|
||||
:user-id="userId"
|
||||
:hide-bio="true"
|
||||
:allow-zooming-avatar="true"
|
||||
:onClose="close"
|
||||
/>
|
||||
</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