No OneTemporary
Actions

Size

89 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
	index 4b088f883a..7e47625a2d 100644
	--- a/src/components/mention_link/mention_link.js
	+++ b/src/components/mention_link/mention_link.js
	@@ -1,138 +1,137 @@
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters, mapState } from 'vuex'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import { defineAsyncComponent } from 'vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAt
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faAt
	)

	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: {
	required: true,
	type: String
	},
	content: {
	required: true,
	type: String
	},
	userId: {
	required: false,
	type: String
	},
	userScreenName: {
	required: false,
	type: String
	}
	},
	methods: {
	onClick () {
	if (this.shouldShowTooltip) return
	const link = generateProfileLink(
	this.userId \|\| this.user.id,
	this.userScreenName \|\| this.user.screen_name
	)
	this.$router.push(link)
	}
	},
	computed: {
	user () {
	return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
	},
	isYou () {
	// FIXME why user !== currentUser???
	return this.user && this.user.id === this.currentUser.id
	},
	userName () {
	return this.user && this.userNameFullUi.split('@')[0]
	},
	serverName () {
	// XXX assumed that domain does not contain @
	return this.user && (this.userNameFullUi.split('@')[1] \|\| this.$store.getters.instanceDomain)
	},
	userNameFull () {
	return this.user && this.user.screen_name
	},
	userNameFullUi () {
	return this.user && this.user.screen_name_ui
	},
	highlight () {
	return this.user && this.mergedConfig.highlight[this.user.screen_name]
	},
	highlightType () {
	return this.highlight && ('-' + this.highlight.type)
	},
	highlightClass () {
	if (this.highlight) return highlightClass(this.user)
	},
	style () {
	if (this.highlight) {
	const {
	backgroundColor,
	backgroundPosition,
	backgroundImage,
	...rest
	} = highlightStyle(this.highlight)
	return rest
	}
	},
	classnames () {
	return [
	{
	'-you': this.isYou && this.shouldBoldenYou,
	'-highlighted': this.highlight
	},
	this.highlightType
	]
	},
	useAtIcon () {
	return this.mergedConfig.useAtIcon
	},
	isRemote () {
	return this.userName !== this.userNameFull
	},
	shouldShowFullUserName () {
	const conf = this.mergedConfig.mentionLinkDisplay
	if (conf === 'short') {
	return false
	} else if (conf === 'full') {
	return true
	} else { // full_for_remote
	return this.isRemote
	}
	},
	shouldShowTooltip () {
	return this.mergedConfig.mentionLinkShowTooltip
	},
	shouldShowAvatar () {
	return this.mergedConfig.mentionLinkShowAvatar
	},
	shouldShowYous () {
	return this.mergedConfig.mentionLinkShowYous
	},
	shouldBoldenYou () {
	return this.mergedConfig.mentionLinkBoldenYou
	},
	shouldFadeDomain () {
	return this.mergedConfig.mentionLinkFadeDomain
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	currentUser: state => state.users.currentUser
	})
	}
	}

	export default MentionLink
	diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
	index 686ad27f9a..0cff50abf9 100644
	--- a/src/components/mention_link/mention_link.vue
	+++ b/src/components/mention_link/mention_link.vue
	@@ -1,96 +1,83 @@
	<template>
	<span
	class="MentionLink"
	>
	<!-- eslint-disable vue/no-v-html -->
	<a
	v-if="!user"
	:href="url"
	class="original"
	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>

	<script src="./mention_link.js"/>

	<style lang="scss" src="./mention_link.scss"/>
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index 9408b21782..77cdfa7338 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,118 +1,118 @@
	import StatusContent from '../status_content/status_content.vue'
	import { mapState } from 'vuex'
	import Status from '../status/status.vue'
	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'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCheck,
	faTimes,
	faStar,
	faRetweet,
	faUserPlus,
	faEyeSlash,
	faUser,
	faSuitcaseRolling
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCheck,
	faTimes,
	faStar,
	faRetweet,
	faUserPlus,
	faUser,
	faEyeSlash,
	faSuitcaseRolling
	)

	const Notification = {
	data () {
	return {
	userExpanded: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter,
	unmuted: false
	}
	},
	props: [ 'notification' ],
	components: {
	StatusContent,
	UserAvatar,
	UserCard,
	Timeago,
	Status,
	RichContent,
	- Popover
	+ UserPopover
	},
	methods: {
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	},
	getUser (notification) {
	return this.$store.state.users.usersObject[notification.from_profile.id]
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	approveUser () {
	this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
	this.$store.dispatch('updateNotification', {
	id: this.notification.id,
	updater: notification => {
	notification.type = 'follow'
	}
	})
	},
	denyUser () {
	this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
	.then(() => {
	this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
	this.$store.dispatch('removeFollowRequest', this.user)
	})
	}
	},
	computed: {
	userClass () {
	return highlightClass(this.notification.from_profile)
	},
	userStyle () {
	const highlight = this.$store.getters.mergedConfig.highlight
	const user = this.notification.from_profile
	return highlightStyle(highlight[user.screen_name])
	},
	user () {
	return this.$store.getters.findUser(this.notification.from_profile.id)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.user)
	},
	targetUser () {
	return this.$store.getters.findUser(this.notification.target.id)
	},
	targetUserProfileLink () {
	return this.generateUserProfileLink(this.targetUser)
	},
	needMute () {
	return this.$store.getters.relationship(this.user.id).muting
	},
	isStatusNotification () {
	return isStatusNotification(this.notification.type)
	},
	...mapState({
	currentUser: state => state.users.currentUser
	})
	}
	}

	export default Notification
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index a44481c9b6..6427d117c6 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,241 +1,227 @@
	<template>
	<Status
	v-if="notification.type === 'mention'"
	class="Notification"
	:compact="true"
	:statusoid="notification.status"
	/>
	<div v-else>
	<div
	v-if="needMute && !unmuted"
	class="Notification container -muted"
	>
	<small>
	<router-link :to="userProfileLink">
	{{ notification.from_profile.screen_name_ui }}
	</router-link>
	</small>
	<button
	class="button-unstyled unmute"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</div>
	<div
	v-else
	class="Notification non-mention"
	:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	: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">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi v-if="!!notification.from_profile.name_html">
	<RichContent
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	:html="notification.from_profile.name_html"
	:emoji="notification.from_profile.emoji"
	/>
	</bdi>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	>
	{{ notification.from_profile.name }}
	</span>
	{{ ' ' }}
	<span v-if="notification.type === 'like'">
	<FAIcon
	class="type-icon"
	icon="star"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<FAIcon
	class="type-icon"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<FAIcon
	class="type-icon"
	icon="user-plus"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	<FAIcon
	class="type-icon"
	icon="user"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<FAIcon
	class="type-icon"
	icon="suitcase-rolling"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	<i18n-t
	scope="global"
	keypath="notifications.reacted_with"
	>
	<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
	</i18n-t>
	</small>
	</span>
	<span v-if="notification.type === 'poll'">
	<FAIcon
	class="type-icon"
	icon="poll-h"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.poll_ended') }}</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	class="faint-link"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<button
	v-if="needMute"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<router-link
	:to="userProfileLink"
	class="follow-name"
	>
	@{{ notification.from_profile.screen_name_ui }}
	</router-link>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	/>
	</button>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	/>
	</button>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<router-link :to="targetUserProfileLink">
	@{{ notification.target.screen_name_ui }}
	</router-link>
	</div>
	<template v-else>
	<StatusContent
	class="faint"
	:compact="true"
	:status="notification.action"
	/>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
	index e0c22e86b5..58de83df5a 100644
	--- a/src/components/popover/popover.js
	+++ b/src/components/popover/popover.js
	@@ -1,266 +1,266 @@
	const Popover = {
	name: 'Popover',
	props: {
	// Action to trigger popover: either 'hover' or 'click'
	trigger: String,

	// Either 'top' or 'bottom'
	placement: String,

	// Takes object with properties 'x' and 'y', values of these can be
	// 'container' for using offsetParent as boundaries for either axis
	// or 'viewport'
	boundTo: Object,

	// Takes a selector to use as a replacement for the parent container
	// for getting boundaries for x an y axis
	boundToSelector: String,

	// Takes a top/bottom/left/right object, how much space to leave
	// between boundary and popover element
	margin: Object,

	// Takes a x/y object and tells how many pixels to offset from
	// anchor point on either axis
	offset: Object,

	// Replaces the classes you may want for the popover container.
	// Use 'popover-default' in addition to get the default popover
	// styles with your custom class.
	popoverClass: String,

	// If true, subtract padding when calculating position for the popover,
	// use it when popover offset looks to be different on top vs bottom.
	removePadding: Boolean,

	// self-explanatory (i hope)
	disabled: Boolean,

	// Instead of putting popover next to anchor, overlay popover's center on top of anchor's center
	overlayCenters: Boolean,

	// What selector (witin popover!) to use for determining center of popover
	overlayCentersSelector: String
	},
	data () {
	return {
	hidden: true,
	styles: {},
	oldSize: { width: 0, height: 0 },
	scrollable: null,
	// used to avoid blinking if hovered onto popover
	graceTimeout: null
	}
	},
	methods: {
	containerBoundingClientRect () {
	const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
	return container.getBoundingClientRect()
	},
	updateStyles () {
	if (this.hidden) {
	this.styles = {}
	return
	}

	// Popover will be anchored around this element, trigger ref is the container, so
	// its children are what are inside the slot. Expect only one v-slot:trigger.
	const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) \|\| this.$el
	// SVGs don't have offsetWidth/Height, use fallback
	const anchorHeight = anchorEl.offsetHeight \|\| anchorEl.clientHeight
	const anchorWidth = anchorEl.offsetWidth \|\| anchorEl.clientWidth
	const anchorScreenBox = anchorEl.getBoundingClientRect()

	const anchorStyle = getComputedStyle(anchorEl)
	const topPadding = parseFloat(anchorStyle.paddingTop)
	const bottomPadding = parseFloat(anchorStyle.paddingBottom)

	// Screen position of the origin point for popover = center of the anchor
	const origin = {
	x: anchorScreenBox.left + anchorWidth * 0.5,
	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

	// Minor optimization, don't call a slow reflow call if we don't have to
	const parentScreenBox = this.boundTo &&
	(this.boundTo.x === 'container' \|\| this.boundTo.y === 'container') &&
	this.containerBoundingClientRect()

	const margin = this.margin \|\| {}

	// What are the screen bounds for the popover? Viewport vs container
	// when using viewport, using default margin values to dodge the navbar
	const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
	min: parentScreenBox.left + (margin.left \|\| 0),
	max: parentScreenBox.right - (margin.right \|\| 0)
	} : {
	min: 0 + (margin.left \|\| 10),
	max: window.innerWidth - (margin.right \|\| 10)
	}

	const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
	min: parentScreenBox.top + (margin.top \|\| 0),
	max: parentScreenBox.bottom - (margin.bottom \|\| 0)
	} : {
	min: 0 + (margin.top \|\| 50),
	max: window.innerHeight - (margin.bottom \|\| 5)
	}

	let horizOffset = 0
	let vertOffset = 0

	if (overlayCenter) {
	const box = content.getBoundingClientRect()
	const overlayCenterScreenBox = overlayCenter.getBoundingClientRect()
	const leftInnerOffset = overlayCenterScreenBox.left - box.left
	const topInnerOffset = overlayCenterScreenBox.top - box.top
	horizOffset = -leftInnerOffset - overlayCenter.offsetWidth * 0.5
	vertOffset = -topInnerOffset - overlayCenter.offsetWidth * 0.5
	} else {
	horizOffset = content.offsetWidth * -0.5
	vertOffset = content.offsetWidth * -0.5
	}
	const leftBorder = origin.x + horizOffset
	const rightBorder = origin.x - horizOffset
	// If overflowing from left, move it so that it doesn't
	if (leftBorder < xBounds.min) {
	horizOffset += xBounds.min - leftBorder
	}

	// If overflowing from right, move it so that it doesn't
	if (rightBorder > xBounds.max) {
	horizOffset -= rightBorder - xBounds.max
	}

	let translateX = 0
	let translateY = 0

	if (overlayCenter) {
	translateX = origin.x + horizOffset
	translateY = origin.y + vertOffset
	} else {
	// Default to whatever user wished with placement prop
	let usingTop = this.placement !== 'bottom'

	// Handle special cases, first force to displaying on top if there's not space on bottom,
	// regardless of what placement value was. Then check if there's not space on top, and
	// force to bottom, again regardless of what placement value was.
	const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
	const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0)
	if (bottomBoundary + content.offsetHeight > yBounds.max) usingTop = true
	if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false

	const yOffset = (this.offset && this.offset.y) \|\| 0
	translateY = usingTop
	? topBoundary - yOffset - content.offsetHeight
	: bottomBoundary + yOffset

	const xOffset = (this.offset && this.offset.x) \|\| 0
	translateX = origin.x + horizOffset + xOffset
	}

	this.styles = {
	left: `${Math.round(translateX)}px`,
	top: `${Math.round(translateY)}px`
	}

	if (parentScreenBox) {
	this.styles.maxWidth = `${Math.round(parentScreenBox.width)}px`
	}
	},
	showPopover () {
	if (this.disabled) return
	const wasHidden = this.hidden
	this.hidden = false
	if (this.trigger === 'click') {
	document.addEventListener('click', this.onClickOutside)
	}
	this.scrollable.addEventListener('scroll', this.onScroll)
	this.scrollable.addEventListener('resize', this.onResize)
	this.$nextTick(() => {
	if (wasHidden) this.$emit('show')
	this.updateStyles()
	})
	},
	hidePopover () {
	if (this.disabled) return
	if (!this.hidden) this.$emit('close')
	this.hidden = true
	if (this.trigger === 'click') {
	document.removeEventListener('click', this.onClickOutside)
	}
	this.scrollable.removeEventListener('scroll', this.onScroll)
	this.scrollable.removeEventListener('resize', this.onResize)
	},
	onMouseenter (e) {
	if (this.trigger === 'hover') {
	clearTimeout(this.graceTimeout)
	this.graceTimeout = null
	this.showPopover()
	}
	},
	onMouseleave (e) {
	if (this.trigger === 'hover') {
	this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
	}
	},
	onMouseenterContent (e) {
	if (this.trigger === 'hover') {
	clearTimeout(this.graceTimeout)
	this.graceTimeout = null
	this.showPopover()
	}
	},
	onMouseleaveContent (e) {
	if (this.trigger === 'hover') {
	this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
	}
	},
	onClick (e) {
	if (this.trigger === 'click') {
	if (this.hidden) {
	this.showPopover()
	} else {
	this.hidePopover()
	}
	}
	},
	onClickOutside (e) {
	if (this.hidden) return
	if (this.$refs.content.contains(e.target)) return
	if (this.$el.contains(e.target)) return
	this.hidePopover()
	},
	onScroll (e) {
	this.updateStyles()
	},
	onResize (e) {
	this.updateStyles()
	}
	},
	updated () {
	// Monitor changes to content size, update styles only when content sizes have changed,
	// that should be the only time we need to move the popover box if we don't care about scroll
	// or resize
	const content = this.$refs.content
	if (!content) return
	if (this.oldSize.width !== content.offsetWidth \|\| this.oldSize.height !== content.offsetHeight) {
	this.updateStyles()
	this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
	}
	},
	mounted () {
	let scrollable = this.$refs.trigger.closest('.column.-scrollable')
	if (!scrollable) scrollable = window
	this.scrollable = scrollable
	},
	beforeUnmount () {
	this.hidePopover()
	}
	}

	export default Popover
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 0649625874..053c94415d 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,489 +1,487 @@
	import ReplyButton from '../reply_button/reply_button.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	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'
	import MentionLink from 'src/components/mention_link/mention_link.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { muteWordHits } from '../../services/status_parser/status_parser.js'
	import { unescape, uniqBy } from 'lodash'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEnvelope,
	faLock,
	faLockOpen,
	faGlobe,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faSmileBeam,
	faEllipsisH,
	faStar,
	faEyeSlash,
	faEye,
	faThumbtack,
	faChevronUp,
	faChevronDown,
	faAngleDoubleRight
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEnvelope,
	faGlobe,
	faLock,
	faLockOpen,
	faTimes,
	faRetweet,
	faReply,
	faPlusSquare,
	faStar,
	faSmileBeam,
	faEllipsisH,
	faEyeSlash,
	faEye,
	faThumbtack,
	faChevronUp,
	faChevronDown,
	faAngleDoubleRight
	)

	const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)

	const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const controlledName = `controlled${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	res[name] = function () {
	return ((this.$data[toggle] !== undefined \|\| this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
	}
	return res
	}, {})

	const controlledOrUncontrolledToggle = (obj, name) => {
	const camelized = camelCase(name)
	const toggle = `controlledToggle${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[toggle]) {
	obj[toggle]()
	} else {
	obj[uncontrolledName] = !obj[uncontrolledName]
	}
	}

	const controlledOrUncontrolledSet = (obj, name, val) => {
	const camelized = camelCase(name)
	const set = `controlledSet${camelized}`
	const uncontrolledName = `uncontrolled${camelized}`
	if (obj[set]) {
	obj[set](val)
	} else {
	obj[uncontrolledName] = val
	}
	}

	const Status = {
	name: 'Status',
	components: {
	ReplyButton,
	FavoriteButton,
	ReactButton,
	RetweetButton,
	ExtraButtons,
	PostStatusForm,
	- UserCard,
	UserAvatar,
	AvatarList,
	Timeago,
	StatusPopover,
	UserListPopover,
	EmojiReactions,
	StatusContent,
	RichContent,
	MentionLink,
	MentionsLine,
	- Popover
	+ UserPopover
	},
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded',
	'showPinned',
	'inProfile',
	'profileUserId',

	'simpleTree',
	'controlledThreadDisplayStatus',
	'controlledToggleThreadDisplay',
	'showOtherRepliesAsButton',

	'controlledShowingTall',
	'controlledToggleShowingTall',
	'controlledExpandingSubject',
	'controlledToggleExpandingSubject',
	'controlledShowingLongSubject',
	'controlledToggleShowingLongSubject',
	'controlledReplying',
	'controlledToggleReplying',
	'controlledMediaPlaying',
	'controlledSetMediaPlaying',
	'dive'
	],
	data () {
	return {
	uncontrolledReplying: false,
	unmuted: false,
	userExpanded: false,
	uncontrolledMediaPlaying: [],
	suspendable: true,
	error: null,
	headTailLinks: null
	}
	},
	computed: {
	...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
	muteWords () {
	return this.mergedConfig.muteWords
	},
	showReasonMutedThread () {
	return (
	this.status.thread_muted \|\|
	(this.status.reblog && this.status.reblog.thread_muted)
	) && !this.inConversation
	},
	repeaterClass () {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass () {
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	return highlightClass(user)
	},
	deleted () {
	return this.statusoid.deleted
	},
	repeaterStyle () {
	const user = this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle () {
	if (this.noHeading) return
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	const highlight = this.mergedConfig.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	// FIXME Why user not found sometimes???
	return user ? user.statusnet_profile_url : 'NOT_FOUND'
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeterUser () { return this.statusoid.user },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name_ui },
	retweeterHtml () { return this.statusoid.user.name },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	statusFromGlobalRepository () {
	// NOTE: Consider to replace status with statusFromGlobalRepository
	return this.$store.state.statuses.allStatusesObject[this.status.id]
	},
	loggedIn () {
	return !!this.currentUser
	},
	muteWordHits () {
	return muteWordHits(this.status, this.muteWords)
	},
	rtBotStatus () {
	return this.statusoid.user.bot
	},
	botStatus () {
	return this.status.user.bot
	},
	botIndicator () {
	return this.botStatus && !this.hideBotIndication
	},
	rtBotIndicator () {
	return this.rtBotStatus && !this.hideBotIndication
	},
	mentionsLine () {
	if (!this.headTailLinks) return []
	const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
	return this.status.attentions.filter(attn => {
	// no reply user
	return attn.id !== this.status.in_reply_to_user_id &&
	// no self-replies
	attn.statusnet_profile_url !== this.status.user.statusnet_profile_url &&
	// don't include if mentions is written
	!writtenSet.has(attn.statusnet_profile_url)
	}).map(attn => ({
	url: attn.statusnet_profile_url,
	content: attn.screen_name,
	userId: attn.id
	}))
	},
	hasMentionsLine () {
	return this.mentionsLine.length > 0
	},
	muted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const reasonsToMute = this.userIsMuted \|\|
	// Thread is muted
	status.thread_muted \|\|
	// Wordfiltered
	this.muteWordHits.length > 0 \|\|
	// bot status
	(this.muteBotStatuses && this.botStatus && !this.compact)
	return !this.unmuted && !this.shouldNotMute && reasonsToMute
	},
	userIsMuted () {
	if (this.statusoid.user.id === this.currentUser.id) return false
	const { status } = this
	const { reblog } = status
	const relationship = this.$store.getters.relationship(status.user.id)
	const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
	return status.muted \|\|
	// Reprööt of a muted post according to BE
	(reblog && reblog.muted) \|\|
	// Muted user
	relationship.muting \|\|
	// Muted user of a reprööt
	(relationshipReblog && relationshipReblog.muting)
	},
	shouldNotMute () {
	const { status } = this
	const { reblog } = status
	return (
	(
	this.inProfile && (
	// Don't mute user's posts on user timeline (except reblogs)
	(!reblog && status.user.id === this.profileUserId) \|\|
	// Same as above but also allow self-reblogs
	(reblog && reblog.user.id === this.profileUserId)
	)
	) \|\|
	// Don't mute statuses in muted conversation when said conversation is opened
	(this.inConversation && status.thread_muted)
	// No excuses if post has muted words
	) && !this.muteWordHits.length > 0
	},
	hideMutedUsers () {
	return this.mergedConfig.hideMutedPosts
	},
	hideMutedThreads () {
	return this.mergedConfig.hideMutedThreads
	},
	hideFilteredStatuses () {
	return this.mergedConfig.hideFilteredStatuses
	},
	hideWordFilteredPosts () {
	return this.mergedConfig.hideWordFilteredPosts
	},
	hideStatus () {
	return (!this.shouldNotMute) && (
	(this.muted && this.hideFilteredStatuses) \|\|
	(this.userIsMuted && this.hideMutedUsers) \|\|
	(this.status.thread_muted && this.hideMutedThreads) \|\|
	(this.muteWordHits.length > 0 && this.hideWordFilteredPosts)
	)
	},
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	if (this.status.in_reply_to_screen_name) {
	return this.status.in_reply_to_screen_name
	} else {
	const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
	return user && user.screen_name_ui
	}
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	const behavior = this.mergedConfig.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if ((behavior !== 'noop' && startsWithRe) \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	combinedFavsAndRepeatsUsers () {
	// Use the status from the global status repository since favs and repeats are saved in it
	const combinedUsers = [].concat(
	this.statusFromGlobalRepository.favoritedBy,
	this.statusFromGlobalRepository.rebloggedBy
	)
	return uniqBy(combinedUsers, 'id')
	},
	tags () {
	return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
	},
	hidePostStats () {
	return this.mergedConfig.hidePostStats
	},
	muteBotStatuses () {
	return this.mergedConfig.muteBotStatuses
	},
	hideBotIndication () {
	return this.mergedConfig.hideBotIndication
	},
	currentUser () {
	return this.$store.state.users.currentUser
	},
	betterShadow () {
	return this.$store.state.interface.browserSupport.cssFilter
	},
	mergedConfig () {
	return this.$store.getters.mergedConfig
	},
	isSuspendable () {
	return !this.replying && this.mediaPlaying.length === 0
	},
	inThreadForest () {
	return !!this.controlledThreadDisplayStatus
	},
	threadShowing () {
	return this.controlledThreadDisplayStatus === 'showing'
	},
	visibilityLocalized () {
	return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
	}
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'lock'
	case 'unlisted':
	return 'lock-open'
	case 'direct':
	return 'envelope'
	default:
	return 'globe'
	}
	},
	showError (error) {
	this.error = error
	},
	clearError () {
	this.error = undefined
	},
	toggleReplying () {
	controlledOrUncontrolledToggle(this, 'replying')
	},
	gotoOriginal (id) {
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	addMediaPlaying (id) {
	controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.concat(id))
	},
	removeMediaPlaying (id) {
	controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.filter(mediaId => mediaId !== id))
	},
	setHeadTailLinks (headTailLinks) {
	this.headTailLinks = headTailLinks
	},
	toggleThreadDisplay () {
	this.controlledToggleThreadDisplay()
	},
	scrollIfHighlighted (highlightId) {
	const id = highlightId
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= (window.innerHeight - 50)) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	}
	},
	watch: {
	'highlight': function (id) {
	this.scrollIfHighlighted(id)
	},
	'status.repeat_num': function (num) {
	// refetch repeats when repeat_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {
	this.$store.dispatch('fetchRepeats', this.status.id)
	}
	},
	'status.fave_num': function (num) {
	// refetch favs when fave_num is changed in any way
	if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
	this.$store.dispatch('fetchFavs', this.status.id)
	}
	},
	'isSuspendable': function (val) {
	this.suspendable = val
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 624960fef7..771d336a9d 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,513 +1,492 @@
	<template>
	<div
	v-if="!hideStatus"
	ref="root"
	class="Status"
	:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<span
	class="fa-scale-110 fa-old-padding"
	@click="clearError"
	>
	<FAIcon icon="times" />
	</span>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-container muted">
	<small class="status-username">
	<FAIcon
	v-if="muted && retweet"
	class="fa-scale-110 fa-old-padding repeat-icon"
	icon="retweet"
	/>
	<router-link :to="userProfileLink">
	{{ status.user.screen_name_ui }}
	</router-link>
	</small>
	<small
	v-if="showReasonMutedThread"
	class="mute-thread"
	>
	{{ $t('status.thread_muted') }}
	</small>
	<small
	v-if="showReasonMutedThread && muteWordHits.length > 0"
	class="mute-thread"
	>
	{{ $t('status.thread_muted_and_words') }}
	</small>
	<small
	class="mute-words"
	:title="muteWordHits.join(', ')"
	>
	{{ muteWordHits.join(', ') }}
	</small>
	<button
	class="unmute button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	icon="eye-slash"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="pin"
	>
	<FAIcon
	icon="thumbtack"
	class="faint"
	/>
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:bot="rtBotIndicator"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<span
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	>
	<RichContent
	:html="retweeterHtml"
	:emoji="retweeterUser.emoji"
	/>
	</router-link>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</span>
	{{ ' ' }}
	<FAIcon
	icon="retweet"
	class="repeat-icon"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	v-if="!deleted"
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	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"
	>
	<div class="heading-name-row">
	<div class="heading-left">
	<h4
	v-if="status.user.name_html"
	class="status-username"
	:title="status.user.name"
	>
	<RichContent
	:html="status.user.name"
	:emoji="status.user.emoji"
	/>
	</h4>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	:title="status.user.screen_name_ui"
	:to="userProfileLink"
	>
	{{ status.user.screen_name_ui }}
	</router-link>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

	<span class="heading-right">
	<router-link
	class="timeago faint-link"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<span
	v-if="status.visibility"
	class="visibility-icon"
	:title="visibilityLocalized"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="visibilityIcon(status.visibility)"
	/>
	</span>
	<button
	v-if="expandable && !isPreview"
	class="button-unstyled"
	:title="$t('status.expand')"
	@click.prevent="toggleExpanded"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="plus-square"
	/>
	</button>
	<button
	v-if="unmuted"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	class="fa-scale-110"
	/>
	</button>
	<button
	v-if="inThreadForest && replies && replies.length && !simpleTree"
	class="button-unstyled"
	:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
	:aria-expanded="threadShowing ? 'true' : 'false'"
	@click.prevent="toggleThreadDisplay"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<button
	v-if="dive && !simpleTree"
	class="button-unstyled"
	:title="$t('status.show_only_conversation_under_this')"
	@click.prevent="dive"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="'angle-double-right'"
	/>
	</button>
	</span>
	</div>
	<div
	v-if="isReply \|\| hasMentionsLine"
	class="heading-reply-row"
	>
	<span
	v-if="isReply"
	class="glued-label reply-glued-label"
	>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.parent_visible && status.in_reply_to_status_id"
	class="reply-to-popover"
	style="min-width: 0"
	:class="{ '-strikethrough': !status.parent_visible }"
	>
	<button
	class="button-unstyled reply-to"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	flip="horizontal"
	/>
	{{ ' ' }}
	<span
	class="reply-to-text"
	>
	{{ $t('status.reply_to') }}
	</span>
	</button>
	</StatusPopover>

	<span
	v-else
	class="reply-to-no-popover"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	<MentionLink
	:content="replyToName"
	:url="replyProfileLink"
	:user-id="status.in_reply_to_user_id"
	:user-screen-name="status.in_reply_to_screen_name"
	/>
	</span>

	<!-- This little wrapper is made for sole purpose of "gluing" -->
	<!-- "Mentions" label to the first mention -->
	<span
	v-if="hasMentionsLine"
	class="glued-label"
	>
	<span
	class="mentions"
	:aria-label="$t('tool_tip.mentions')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<span
	class="mentions-text"
	>
	{{ $t('status.mentions') }}
	</span>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(0, 1)"
	class="mentions-line-first"
	/>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(1)"
	class="mentions-line"
	/>
	</div>
	</div>

	<StatusContent
	ref="content"
	:status="status"
	:no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	:controlled-showing-tall="controlledShowingTall"
	:controlled-expanding-subject="controlledExpandingSubject"
	:controlled-showing-long-subject="controlledShowingLongSubject"
	:controlled-toggle-showing-tall="controlledToggleShowingTall"
	:controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
	:controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	@parseReady="setHeadTailLinks"
	/>

	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<button
	v-if="showOtherRepliesAsButton && replies.length > 1"
	class="button-unstyled -link faint"
	:title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
	@click.prevent="dive"
	>
	{{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
	</button>
	<span
	v-else
	class="faint"
	>
	{{ $t('status.replies_list') }}
	</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<button
	class="button-unstyled -link reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>
	{{ reply.name }}
	</button>
	</StatusPopover>
	</div>

	<transition name="fade">
	<div
	v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
	class="favs-repeated-users"
	>
	<div class="stats">
	<UserListPopover
	v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
	:users="statusFromGlobalRepository.rebloggedBy"
	>
	<div class="stat-count">
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.rebloggedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<UserListPopover
	v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
	:users="statusFromGlobalRepository.favoritedBy"
	>
	<div
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.favoritedBy.length }}
	</div>
	</div>
	</UserListPopover>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers" />
	</div>
	</div>
	</div>
	</transition>

	<EmojiReactions
	v-if="(mergedConfig.emojiReactionsOnTimeline \|\| isFocused) && (!noHeading && !isPreview)"
	:status="status"
	/>

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions"
	>
	<reply-button
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	/>
	<ReactButton
	v-if="loggedIn"
	:status="status"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="gravestone"
	>
	<div class="left-side">
	<UserAvatar
	class="post-avatar"
	:compact="compact"
	:bot="botIndicator"
	/>
	</div>
	<div class="right-side">
	<div class="deleted-text">
	{{ $t('status.status_deleted') }}
	</div>
	<reply-button
	v-if="replying"
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	@posted="toggleReplying"
	/>
	</div>
	</template>
	</div>
	</template>

	<script src="./status.js" ></script>

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 4168c54ae1..52e8c0798b 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,175 +1,187 @@
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import AccountActions from '../account_actions/account_actions.vue'
	import Select from '../select/select.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faRss,
	faSearchPlus,
	faExternalLinkAlt,
	- faEdit
	+ faEdit,
	+ faTimes,
	+ faExpandAlt
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faRss,
	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 {
	followRequestInProgress: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	relationship () {
	return this.$store.getters.relationship(this.userId)
	},
	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 () {
	return {
	backgroundImage: [
	`linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
	`url(${this.user.cover_photo})`
	].join(', ')
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	// eslint-disable-next-line no-undef
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	userHighlightType: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	},
	...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount () {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount () {
	return this.isOtherUser && this.user.hide_followers_count
	},
	...mapGetters(['mergedConfig'])
	},
	components: {
	UserAvatar,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	FollowButton,
	Select,
	RichContent
	},
	methods: {
	muteUser () {
	this.$store.dispatch('muteUser', this.user.id)
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser () {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	setProfileView (v) {
	if (this.switcher) {
	const store = this.$store
	store.commit('setProfileView', { v })
	}
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink (user) {
	return generateProfileLink(
	user.id, user.screen_name,
	this.$store.state.instance.restrictedNicknames
	)
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	this.$store.dispatch('setMedia', [attachment])
	this.$store.dispatch('setCurrentMedia', attachment)
	},
	mentionUser () {
	this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
	}
	}
	}
	diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
	index 2e1531200a..65299e6064 100644
	--- a/src/components/user_card/user_card.scss
	+++ b/src/components/user_card/user_card.scss
	@@ -1,323 +1,344 @@
	@import '../../_variables.scss';

	.user-card {
	position: relative;
	z-index: 1;

	&:hover {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	--_still-image-label-visibility: hidden;
	}

	.panel-heading {
	padding: .5em 0;
	text-align: center;
	box-shadow: none;
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	// create new stacking context
	position: relative;
	}

	.panel-body {
	word-wrap: break-word;
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
	// create new stacking context
	position: relative;
	}

	.background-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mask: linear-gradient(to top, white, transparent) bottom no-repeat,
	linear-gradient(to top, white, white);
	// Autoprefixer seem to ignore this one, and also syntax is different
	-webkit-mask-composite: xor;
	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;

	&.hide-bio {
	mask-size: 100% 40px;
	}
	}

	&-bio {
	text-align: center;
	display: block;
	line-height: 1.3;
	padding: 1em;
	margin: 0;

	a {
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	}

	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;
	}
	}

	- // 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;
	border-color: var(--border, $fallback--border);
	}
	}

	.user-info {
	color: $fallback--lightText;
	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;
	display: flex;
	align-items: flex-start;
	max-height: 56px;

	> * {
	min-width: 0;
	}

	.Avatar {
	--_avatarShadowBox: var(--avatarShadow);
	--_avatarShadowFilter: var(--avatarShadowFilter);
	--_avatarShadowInset: var(--avatarShadowInset);

	flex: 1 0 100%;
	width: 56px;
	height: 56px;
	object-fit: cover;
	}
	}

	&-avatar-link {
	position: relative;
	cursor: pointer;

	&-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	opacity: 0;
	transition: opacity .2s ease;

	svg {
	color: #FFF;
	}
	}

	&:hover &-overlay {
	opacity: 1;
	}
	}

	.external-link-button, .edit-profile-button {
	cursor: pointer;
	width: 2.5em;
	text-align: center;
	margin: -0.5em 0;
	padding: 0.5em 0;

	&:not(:hover) .icon {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	.user-summary {
	display: block;
	margin-left: 0.6em;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	// This is so that text doesn't get overlapped by avatar's shadow if it has
	// big one
	z-index: 1;
	line-height: 2em;

	--emoji-size: 1.7em;

	.top-line,
	.bottom-line {
	display: flex;
	}
	}

	.user-name {
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1 1 auto;
	margin-right: 1em;
	font-size: 1.1em;
	}

	.bottom-line {
	font-weight: light;
	font-size: 1.1em;
	align-items: baseline;

	.lock-icon {
	margin-left: 0.5em;
	}

	.user-screen-name {
	min-width: 1px;
	flex: 0 1 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	- color: $fallback--lightText;
	- color: var(--lightText, $fallback--lightText);
	}

	.dailyAvg {
	min-width: 1px;
	flex: 0 0 auto;
	margin-left: 1em;
	font-size: 0.7em;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.user-role {
	flex: none;
	color: $fallback--text;
	color: var(--alertNeutralText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--alertNeutral, $fallback--fg);
	}
	}

	.user-meta {
	margin-bottom: .15em;
	display: flex;
	align-items: baseline;
	line-height: 22px;
	flex-wrap: wrap;

	.following {
	flex: 1 0 auto;
	margin: 0;
	margin-bottom: .25em;
	text-align: left;
	}

	.highlighter {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	margin-right: -.5em;
	align-self: start;

	.userHighlightCl {
	padding: 2px 10px;
	flex: 1 0 auto;
	}

	.userHighlightSel {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}

	.userHighlightText {
	width: 70px;
	flex: 1 0 auto;
	}

	.userHighlightCl,
	.userHighlightText,
	.userHighlightSel {
	vertical-align: top;
	margin-right: .5em;
	margin-bottom: .25em;
	}
	}
	}
	.user-interactions {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	margin-right: -.75em;

	> * {
	margin: 0 .75em .6em 0;
	white-space: nowrap;
	min-width: 95px;
	}

	button {
	margin: 0;
	}
	}
	}

	.sidebar .edit-profile-button {
	display: none;
	}

	.user-counts {
	display: flex;
	line-height:16px;
	padding: .5em 1.5em 0em 1.5em;
	text-align: center;
	justify-content: space-between;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	flex-wrap: wrap;
	}

	.user-count {
	flex: 1 0 auto;
	padding: .5em 0 .5em 0;
	margin: 0 .5em;

	h5 {
	font-size:1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}
	a {
	text-decoration: none;
	}
	}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 67837845ed..936d67981a 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,287 +1,312 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	: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
	v-if="allowZoomingAvatar"
	class="user-info-avatar-link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar-link-overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="search-plus"
	/>
	</div>
	</a>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</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"
	@click.stop="openProfileTab"
	>
	<FAIcon
	fixed-width
	class="icon"
	icon="edit"
	:title="$t('user_card.edit_profile')"
	/>
	</button>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="button-unstyled external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	: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
	class="user-screen-name"
	:title="user.screen_name_ui"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name_ui }}
	</router-link>
	<template v-if="!hideBio">
	<span
	v-if="user.deactivated"
	class="alert user-role"
	>
	{{ $t('user_card.deactivated') }}
	</span>
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ $t(`general.role.${visibleRole}`) }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	{{ $t('user_card.bot') }}
	</span>
	</template>
	<span v-if="user.locked">
	<FAIcon
	class="lock-icon"
	icon="lock"
	size="sm"
	/>
	</span>
	<span
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	{{ ' ' }}
	<Select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">
	{{ $t('user_card.highlight.disabled') }}
	</option>
	<option value="solid">
	{{ $t('user_card.highlight.solid') }}
	</option>
	<option value="striped">
	{{ $t('user_card.highlight.striped') }}
	</option>
	<option value="side">
	{{ $t('user_card.highlight.side') }}
	</option>
	</Select>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton
	:relationship="relationship"
	:user="user"
	/>
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn button-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn button-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<FALayers>
	<FAIcon
	icon="rss"
	transform="left-5 shrink-6 up-3 rotate-20"
	flip="horizontal"
	/>
	<FAIcon
	icon="rss"
	transform="right-5 shrink-6 up-3 rotate-20"
	/>
	<FAIcon icon="bell" />
	</FALayers>
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn button-default btn-block toggled"
	:disabled="user.deactivated"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block"
	:disabled="user.deactivated"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn button-default btn-block"
	:disabled="user.deactivated"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	</div>
	<ModerationTools
	v-if="loggedIn.role === "admin""
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
	</div>
	</div>
	<RichContent
	v-if="!hideBio"
	class="user-card-bio"
	:html="user.description_html"
	:emoji="user.emoji"
	:handle-links="true"
	/>
	</div>
	</div>
	</template>

	<script src="./user_card.js"></script>

	<style lang="scss" src="./user_card.scss" />
	diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
	new file mode 100644
	index 0000000000..bffd59625b
	--- /dev/null
	+++ 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
	new file mode 100644
	index 0000000000..c998e2984c
	--- /dev/null
	+++ 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>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Sep 19, 12:19 AM (16 h, 10 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1768533
Default Alt Text: (89 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions