commit: 01e56a3e10b9d77e2f5a7fa7c13ce3afbed468d4
parent cb89646c56288f42896d34e3b405621e08c88575
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Jun 2022 23:57:44 +0300
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
Diffstat:
12 files changed, 205 insertions(+), 151 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
@@ -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
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_card/user_card.js b/src/components/user_card/user_card.js
@@ -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 () {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
@@ -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 {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
@@ -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
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,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>
