No OneTemporary
Actions

Size

81 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
	index a844144691..87085a2824 100644
	--- a/src/components/basic_user_card/basic_user_card.js
	+++ b/src/components/basic_user_card/basic_user_card.js
	@@ -1,28 +1,28 @@
	-import UserCardContent from '../user_card_content/user_card_content.vue'
	+import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	const BasicUserCard = {
	props: [
	'user'
	],
	data () {
	return {
	userExpanded: false
	}
	},
	components: {
	- UserCardContent,
	+ UserCard,
	UserAvatar
	},
	methods: {
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	userProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	}
	}
	}

	export default BasicUserCard
	diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
	index 77fb0aa0f7..9b80c72b81 100644
	--- a/src/components/basic_user_card/basic_user_card.vue
	+++ b/src/components/basic_user_card/basic_user_card.vue
	@@ -1,79 +1,62 @@
	<template>
	- <div class="user-card">
	+ <div class="basic-user-card">
	<router-link :to="userProfileLink(user)">
	<UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
	</router-link>
	- <div class="user-card-expanded-content" v-if="userExpanded">
	- <user-card-content :user="user" :switcher="false"></user-card-content>
	+ <div class="basic-user-card-expanded-content" v-if="userExpanded">
	+ <UserCard :user="user" :rounded="true" :bordered="true"/>
	</div>
	- <div class="user-card-collapsed-content" v-else>
	- <div :title="user.name" class="user-card-user-name">
	+ <div class="basic-user-card-collapsed-content" v-else>
	+ <div :title="user.name" class="basic-user-card-user-name">
	<span v-if="user.name_html" v-html="user.name_html"></span>
	<span v-else>{{ user.name }}</span>
	</div>
	<div>
	- <router-link class="user-card-screen-name" :to="userProfileLink(user)">
	+ <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
	@{{user.screen_name}}
	</router-link>
	</div>
	<slot></slot>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	-.user-card {
	+.basic-user-card {
	display: flex;
	flex: 1 0;
	+ margin: 0;
	padding-top: 0.6em;
	padding-right: 1em;
	padding-bottom: 0.6em;
	padding-left: 1em;
	border-bottom: 1px solid;
	- margin: 0;
	border-bottom-color: $fallback--border;
	border-bottom-color: var(--border, $fallback--border);

	&-collapsed-content {
	margin-left: 0.7em;
	text-align: left;
	flex: 1;
	min-width: 0;
	}

	&-user-name {
	img {
	object-fit: contain;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	}
	}

	&-expanded-content {
	flex: 1;
	margin-left: 0.7em;
	- border-radius: $fallback--panelRadius;
	- border-radius: var(--panelRadius, $fallback--panelRadius);
	- border-style: solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	- border-width: 1px;
	- overflow: hidden;
	-
	- .panel-heading {
	- background: transparent;
	- flex-direction: column;
	- align-items: stretch;
	- }
	-
	- p {
	- margin-bottom: 0;
	- }
	}
	}
	</style>
	diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
	index 7d9807deb3..fe5b701840 100644
	--- a/src/components/notification/notification.js
	+++ b/src/components/notification/notification.js
	@@ -1,38 +1,38 @@
	import Status from '../status/status.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	-import UserCardContent from '../user_card_content/user_card_content.vue'
	+import UserCard from '../user_card/user_card.vue'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	const Notification = {
	data () {
	return {
	userExpanded: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	props: [ 'notification' ],
	components: {
	- Status, UserAvatar, UserCardContent
	+ Status, UserAvatar, UserCard
	},
	methods: {
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	userProfileLink (user) {
	return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	}
	},
	computed: {
	userClass () {
	return highlightClass(this.notification.action.user)
	},
	userStyle () {
	const highlight = this.$store.state.config.highlight
	const user = this.notification.action.user
	return highlightStyle(highlight[user.screen_name])
	}
	}
	}

	export default Notification
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index 87925cfc08..5e9cef97d5 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,46 +1,44 @@
	<template>
	<status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
	<div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
	<a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
	<UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
	</a>
	<div class='notification-right'>
	- <div class="usercard notification-usercard" v-if="userExpanded">
	- <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
	- </div>
	+ <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
	<span class="notification-details">
	<div class="name-and-action">
	<span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
	<span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
	<span v-if="notification.type === 'like'">
	<i class="fa icon-star lit"></i>
	<small>{{$t('notifications.favorited_you')}}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i>
	<small>{{$t('notifications.repeated_you')}}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<i class="fa icon-user-plus lit"></i>
	<small>{{$t('notifications.followed_you')}}</small>
	</span>
	</div>
	<div class="timeago">
	<router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link">
	<timeago :since="notification.action.created_at" :auto-update="240"></timeago>
	</router-link>
	</div>
	</span>
	<div class="follow-text" v-if="notification.type === 'follow'">
	<router-link :to="userProfileLink(notification.action.user)">
	@{{notification.action.user.screen_name}}
	</router-link>
	</div>
	<template v-else>
	<status class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
	</template>
	</div>
	</div>
	</template>

	<script src="./notification.js"></script>
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index 2240c10a8f..c0b458ccf4 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,175 +1,171 @@
	@import '../../_variables.scss';

	.notifications {
	// a bit of a hack to allow scrolling below notifications
	padding-bottom: 15em;

	.loadmore-error {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.notification {
	position: relative;

	.notification-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	pointer-events: none;
	}

	&.unseen {
	.notification-overlay {
	background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
	}
	}
	}
	}

	.notification {
	box-sizing: border-box;
	display: flex;
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	&:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	- .notification-usercard {
	- margin: 0;
	- }
	-
	.non-mention {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	padding: 0.6em;
	min-width: 0;
	.avatar-container {
	width: 32px;
	height: 32px;
	}
	.status-el {
	.status {
	padding: 0.25em 0;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	a {
	color: var(--faintLink);
	}
	}
	padding: 0;
	.media-body {
	margin: 0;
	}
	}
	}

	.follow-text {
	padding: 0.5em 0;
	}

	.status-el {
	flex: 1;
	}

	time {
	white-space: nowrap;
	}

	.notification-right {
	flex: 1;
	padding-left: 0.8em;
	min-width: 0;
	}

	.notification-details {
	min-width: 0px;
	word-wrap: break-word;
	line-height:18px;
	position: relative;
	overflow: hidden;
	width: 100%;
	flex: 1 1 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	.name-and-action {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.username {
	font-weight: bolder;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;

	img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}

	.timeago {
	margin-right: .2em;
	}

	.icon-retweet.lit {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}

	.icon-user-plus.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-reply.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-star.lit {
	color: orange;
	color: $fallback--cOrange;
	color: var(--cOrange, $fallback--cOrange);
	}

	.status-content {
	margin: 0;
	max-height: 300px;
	}

	h1 {
	word-break: break-all;
	margin: 0 0 0.3em;
	padding: 0;
	font-size: 1em;
	line-height:20px;
	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
	index b5c4905934..ad3738d167 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,60 +1,60 @@
	-import UserCardContent from '../user_card_content/user_card_content.vue'
	+import UserCard from '../user_card/user_card.vue'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'

	// TODO: separate touch gesture stuff into their own utils if more components want them
	const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]

	const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])

	const SideDrawer = {
	props: [ 'logout' ],
	data: () => ({
	closed: true,
	touchCoord: [0, 0]
	}),
	- components: { UserCardContent },
	+ components: { UserCard },
	computed: {
	currentUser () {
	return this.$store.state.users.currentUser
	},
	chat () { return this.$store.state.chat.channel.state === 'joined' },
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount () {
	return this.unseenNotifications.length
	},
	suggestionsEnabled () {
	return this.$store.state.instance.suggestionsEnabled
	},
	logo () {
	return this.$store.state.instance.logo
	},
	sitename () {
	return this.$store.state.instance.name
	},
	followRequestCount () {
	return this.$store.state.api.followRequests.length
	}
	},
	methods: {
	toggleDrawer () {
	this.closed = !this.closed
	},
	doLogout () {
	this.logout()
	this.toggleDrawer()
	},
	touchStart (e) {
	this.touchCoord = touchEventCoord(e)
	},
	touchMove (e) {
	const delta = deltaCoord(this.touchCoord, touchEventCoord(e))
	if (delta[0] < -30 && Math.abs(delta[1]) < Math.abs(delta[0]) && !this.closed) {
	this.toggleDrawer()
	}
	}
	}
	}

	export default SideDrawer
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index 6996380dde..b608b008dc 100644
	--- a/src/components/side_drawer/side_drawer.vue
	+++ b/src/components/side_drawer/side_drawer.vue
	@@ -1,223 +1,214 @@
	<template>
	<div class="side-drawer-container"
	:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
	>
	<div class="side-drawer"
	:class="{'side-drawer-closed': closed}"
	@touchstart="touchStart"
	@touchmove="touchMove"
	>
	<div class="side-drawer-heading" @click="toggleDrawer">
	- <user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser"/>
	+ <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
	<div class="side-drawer-logo-wrapper" v-else>
	<img :src="logo"/>
	<span>{{sitename}}</span>
	</div>
	</div>
	<ul>
	<li v-if="currentUser" @click="toggleDrawer">
	<router-link :to="{ name: 'new-status', params: { username: currentUser.screen_name } }">
	{{ $t("post_status.new_status") }}
	</router-link>
	</li>
	<li v-else @click="toggleDrawer">
	<router-link :to="{ name: 'login' }">
	{{ $t("login.login") }}
	</router-link>
	</li>
	<li v-if="currentUser" @click="toggleDrawer">
	<router-link :to="{ name: 'notifications', params: { username: currentUser.screen_name } }">
	{{ $t("notifications.notifications") }} {{ unseenNotificationsCount > 0 ? `(${unseenNotificationsCount})` : '' }}
	</router-link>
	</li>
	<li v-if="currentUser" @click="toggleDrawer">
	<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
	{{ $t("nav.dms") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li v-if="currentUser" @click="toggleDrawer">
	<router-link :to="{ name: 'friends' }">
	{{ $t("nav.timeline") }}
	</router-link>
	</li>
	<li v-if="currentUser && currentUser.locked" @click="toggleDrawer">
	<router-link to='/friend-requests'>
	{{ $t("nav.friend_requests") }}
	<span v-if='followRequestCount > 0' class="badge follow-request-count">
	{{followRequestCount}}
	</span>

	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link to='/main/public'>
	{{ $t("nav.public_tl") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link to='/main/all'>
	{{ $t("nav.twkn") }}
	</router-link>
	</li>
	<li v-if="currentUser && chat" @click="toggleDrawer">
	<router-link :to="{ name: 'chat' }">
	{{ $t("nav.chat") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'user-search' }">
	{{ $t("nav.user_search") }}
	</router-link>
	</li>
	<li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer">
	<router-link :to="{ name: 'who-to-follow' }">
	{{ $t("nav.who_to_follow") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'settings' }">
	{{ $t("settings.settings") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'about'}">
	{{ $t("nav.about") }}
	</router-link>
	</li>
	<li v-if="currentUser" @click="toggleDrawer">
	<a @click="doLogout" href="#">
	{{ $t("login.logout") }}
	</a>
	</li>
	</ul>
	</div>
	<div class="side-drawer-click-outside"
	@click.stop.prevent="toggleDrawer"
	:class="{'side-drawer-click-outside-closed': closed}"
	></div>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	.side-drawer-container {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	}

	.side-drawer-container-open {
	transition-delay: 0.0s;
	transition-property: left;
	}

	.side-drawer-container-closed {
	left: -100%;
	transition-delay: 0.5s;
	transition-property: left;
	}

	.side-drawer-click-outside {
	flex: 1 1 100%;
	}

	.side-drawer {
	overflow-x: hidden;
	transition: 0.35s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	margin: 0 0 0 -100px;
	padding: 0 0 1em 100px;
	width: 80%;
	max-width: 20em;
	flex: 0 0 80%;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: var(--panelShadow);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	.side-drawer-logo-wrapper {
	display: flex;
	align-items: center;
	padding: 0.85em;

	img {
	flex: none;
	height: 50px;
	margin-right: 0.85em;
	}

	span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	.side-drawer-click-outside-closed {
	flex: 0 0 0;
	}

	.side-drawer-closed {
	transform: translate(-100%);
	}

	.side-drawer-heading {
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	display: flex;
	padding: 0;
	margin: 0;
	-
	- .profile-panel-background {
	- border-radius: 0;
	- .panel-heading {
	- background: transparent;
	- flex-direction: column;
	- align-items: stretch;
	- }
	- }
	}

	.side-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;

	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	margin: 0.2em 0;
	}

	.side-drawer ul:last-child {
	border: 0;
	}

	.side-drawer li {
	padding: 0;

	a {
	display: block;
	padding: 0.5em 0.85em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--lightBg, $fallback--lightBg);
	}
	}
	}
	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index fbbca6c49d..9e18fe151c 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,394 +1,394 @@
	import Attachment from '../attachment/attachment.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import DeleteButton from '../delete_button/delete_button.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	-import UserCardContent from '../user_card_content/user_card_content.vue'
	+import UserCard from '../user_card/user_card.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import Gallery from '../gallery/gallery.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import fileType from 'src/services/file_type/file_type.service'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
	import { filter, find, unescape } from 'lodash'

	const Status = {
	name: 'Status',
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'isPreview',
	'noHeading',
	'inlineExpanded'
	],
	data () {
	return {
	replying: false,
	expanded: false,
	unmuted: false,
	userExpanded: false,
	preview: null,
	showPreview: false,
	showingTall: this.inConversation && this.focused,
	showingLongSubject: false,
	expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
	? !this.$store.state.instance.collapseMessageWithSubject
	: !this.$store.state.config.collapseMessageWithSubject,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	computed: {
	localCollapseSubjectDefault () {
	return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
	? this.$store.state.instance.collapseMessageWithSubject
	: this.$store.state.config.collapseMessageWithSubject
	},
	muteWords () {
	return this.$store.state.config.muteWords
	},
	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.$store.state.config.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.$store.state.config.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	hideAttachments () {
	return (this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	(this.$store.state.config.hideAttachmentsInConv && this.inConversation)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name },
	retweeterHtml () { return this.statusoid.user.name_html },
	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
	}
	},
	loggedIn () {
	return !!this.$store.state.users.currentUser
	},
	muteWordHits () {
	const statusText = this.status.text.toLowerCase()
	const hits = filter(this.muteWords, (muteWord) => {
	return statusText.includes(muteWord.toLowerCase())
	})

	return hits
	},
	muted () { return !this.unmuted && (this.status.user.muted \|\| this.muteWordHits.length > 0) },
	hideFilteredStatuses () {
	return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
	? this.$store.state.instance.hideFilteredStatuses
	: this.$store.state.config.hideFilteredStatuses
	},
	hideStatus () {
	return (this.hideReply \|\| this.deleted) \|\| (this.muted && this.hideFilteredStatuses)
	},
	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
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	tallStatus () {
	const lengthScore = this.status.statusnet_html.split(/<p\|<br/).length + this.status.text.length / 80
	return lengthScore > 20
	},
	longSubject () {
	return this.status.summary.length > 900
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	const user = this.$store.state.users.usersObject[this.status.in_reply_to_user_id]
	if (user) {
	return user.screen_name
	} else {
	return this.status.in_reply_to_screen_name
	}
	},
	hideReply () {
	if (this.$store.state.config.replyVisibility === 'all') {
	return false
	}
	if (this.inlineExpanded \|\| this.expanded \|\| this.inConversation \|\| !this.isReply) {
	return false
	}
	if (this.status.user.id === this.$store.state.users.currentUser.id) {
	return false
	}
	if (this.status.type === 'retweet') {
	return false
	}
	var checkFollowing = this.$store.state.config.replyVisibility === 'following'
	for (var i = 0; i < this.status.attentions.length; ++i) {
	if (this.status.user.id === this.status.attentions[i].id) {
	continue
	}
	if (checkFollowing && this.status.attentions[i].following) {
	return false
	}
	if (this.status.attentions[i].id === this.$store.state.users.currentUser.id) {
	return false
	}
	}
	return this.status.attentions.length > 0
	},
	hideSubjectStatus () {
	if (this.tallStatus && !this.localCollapseSubjectDefault) {
	return false
	}
	return !this.expandingSubject && this.status.summary
	},
	hideTallStatus () {
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	if (this.showingTall) {
	return false
	}
	return this.tallStatus
	},
	showingMore () {
	return (this.tallStatus && this.showingTall) \|\| (this.status.summary && this.expandingSubject)
	},
	nsfwClickthrough () {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
	? this.$store.state.instance.subjectLineBehavior
	: this.$store.state.config.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 ''
	}
	},
	attachmentSize () {
	if ((this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	(this.$store.state.config.hideAttachmentsInConv && this.inConversation) \|\|
	(this.status.attachments.length > this.maxThumbnails)) {
	return 'hide'
	} else if (this.compact) {
	return 'small'
	}
	return 'normal'
	},
	galleryTypes () {
	if (this.attachmentSize === 'hide') {
	return []
	}
	return this.$store.state.config.playVideosInModal
	? ['image', 'video']
	: ['image']
	},
	galleryAttachments () {
	return this.status.attachments.filter(
	file => fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	nonGalleryAttachments () {
	return this.status.attachments.filter(
	file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	maxThumbnails () {
	return this.$store.state.config.maxThumbnails
	}
	},
	components: {
	Attachment,
	FavoriteButton,
	RetweetButton,
	DeleteButton,
	PostStatusForm,
	- UserCardContent,
	+ UserCard,
	UserAvatar,
	Gallery,
	LinkPreview
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'icon-lock'
	case 'unlisted':
	return 'icon-lock-open-alt'
	case 'direct':
	return 'icon-mail-alt'
	default:
	return 'icon-globe'
	}
	},
	linkClicked (event) {
	let { target } = event
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	if (target.className.match(/mention/)) {
	const href = target.href
	const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
	if (attn) {
	event.stopPropagation()
	event.preventDefault()
	const link = this.generateUserProfileLink(attn.id, attn.screen_name)
	this.$router.push(link)
	return
	}
	}
	if (target.className.match(/hashtag/)) {
	// Extract tag name from link url
	const tag = extractTagFromUrl(target.href)
	if (tag) {
	const link = this.generateTagLink(tag)
	this.$router.push(link)
	return
	}
	}
	window.open(target.href, '_blank')
	}
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	// only handled by conversation, not status_or_conversation
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	toggleShowMore () {
	if (this.showingTall) {
	this.showingTall = false
	} else if (this.expandingSubject && this.status.summary) {
	this.expandingSubject = false
	} else if (this.hideTallStatus) {
	this.showingTall = true
	} else if (this.hideSubjectStatus && this.status.summary) {
	this.expandingSubject = true
	}
	},
	replyEnter (id, event) {
	this.showPreview = true
	const targetId = id
	const statuses = this.$store.state.statuses.allStatuses

	if (!this.preview) {
	// if we have the status somewhere already
	this.preview = find(statuses, { 'id': targetId })
	// or if we have to fetch it
	if (!this.preview) {
	this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
	this.preview = status
	})
	}
	} else if (this.preview.id !== targetId) {
	this.preview = find(statuses, { 'id': targetId })
	}
	},
	replyLeave () {
	this.showPreview = false
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	generateTagLink (tag) {
	return `/tag/${tag}`
	},
	setMedia () {
	const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
	return () => this.$store.dispatch('setMedia', attachments)
	}
	},
	watch: {
	'highlight': function (id) {
	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)
	}
	}
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 4dd2036245..1f6d0325ee 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,641 +1,638 @@
	<template>
	<div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
	<template v-if="muted && !isPreview">
	<div class="media status container muted">
	<small>
	<router-link :to="userProfileLink">
	{{status.user.screen_name}}
	</router-link>
	</small>
	<small class="muteWords">{{muteWordHits.join(', ')}}</small>
	<a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
	</div>
	</template>
	<template v-else>
	<div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
	<UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
	<div class="media-body faint">
	<span class="user-name">
	<router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/>
	<router-link v-else :to="retweeterProfileLink">{{retweeter}}</router-link>
	</span>
	<i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
	{{$t('timeline.repeated')}}
	</div>
	</div>

	<div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
	<div v-if="!noHeading" class="media-left">
	<router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
	<UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/>
	</router-link>
	</div>
	<div class="status-body">
	- <div class="usercard" v-if="userExpanded">
	- <user-card-content :user="status.user" :switcher="false"></user-card-content>
	- </div>
	+ <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
	<div v-if="!noHeading" class="media-heading">
	<div class="heading-name-row">
	<div class="name-and-account-name">
	<h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
	<h4 class="user-name" v-else>{{status.user.name}}</h4>
	<router-link class="account-name" :to="userProfileLink">
	{{status.user.screen_name}}
	</router-link>
	</div>

	<span class="heading-right">
	<router-link class="timeago faint-link" :to="{ name: 'conversation', params: { id: status.id } }">
	<timeago :since="status.created_at" :auto-update="60"></timeago>
	</router-link>
	<div class="button-icon visibility-icon" v-if="status.visibility">
	<i :class="visibilityIcon(status.visibility)" :title="status.visibility \| capitalize"></i>
	</div>
	<a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
	<i class="button-icon icon-link-ext-alt"></i>
	</a>
	<template v-if="expandable && !isPreview">
	<a href="#" @click.prevent="toggleExpanded" title="Expand">
	<i class="button-icon icon-plus-squared"></i>
	</a>
	</template>
	<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
	</span>
	</div>

	<div class="heading-reply-row">
	<div v-if="isReply" class="reply-to-and-accountname">
	<a class="reply-to"
	href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	:aria-label="$t('tool_tip.reply')"
	@mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
	@mouseleave.prevent.stop="replyLeave()"
	>
	<i class="button-icon icon-reply" v-if="!isPreview"></i>
	<span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
	</a>
	<router-link :to="replyProfileLink">
	{{replyToName}}
	</router-link>
	<span class="faint replies-separator" v-if="replies && replies.length">
	-
	</span>
	</div>
	<div class="replies" v-if="inConversation && !isPreview">
	<span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span>
	<span class="reply-link faint" v-if="replies" v-for="reply in replies">
	<a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
	</span>
	</div>
	</div>


	</div>

	<div v-if="showPreview" class="status-preview-container">
	<status class="status-preview" v-if="preview" :isPreview="true" :statusoid="preview" :compact=true></status>
	<div class="status-preview status-preview-loading" v-else>
	<i class="icon-spin4 animate-spin"></i>
	</div>
	</div>

	<div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
	<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">Show more</a>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
	<a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">Show less</a>
	</div>
	<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else>
	<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideSubjectStatus"></div>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
	<a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a>
	<a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
	</div>

	<div v-if="status.attachments && (!hideSubjectStatus \|\| showingLongSubject)" class="attachments media-body">
	<attachment
	class="non-gallery"
	v-for="attachment in nonGalleryAttachments"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	:attachment="attachment"
	:allowPlay="true"
	:setMedia="setMedia()"
	:key="attachment.id"
	/>
	<gallery
	v-if="galleryAttachments.length > 0"
	:nsfw="nsfwClickthrough"
	:attachments="galleryAttachments"
	:setMedia="setMedia()"
	/>
	</div>

	<div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
	<link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
	</div>

	<div v-if="!noHeading && !isPreview" class='status-actions media-body'>
	<div v-if="loggedIn">
	<a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
	<i class="button-icon icon-reply" :class="{'icon-reply-active': replying}"></i>
	</a>
	</div>
	<retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
	<favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
	<delete-button :status='status'></delete-button>
	</div>
	</div>
	</div>
	<div class="container" v-if="replying">
	<div class="reply-left"/>
	<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
	</div>
	</template>
	</div>
	</template>

	<script src="./status.js" ></script>
	<style lang="scss">
	@import '../../_variables.scss';

	$status-margin: 0.75em;

	.status-body {
	flex: 1;
	min-width: 0;
	}

	.status-preview.status-el {
	border-style: solid;
	border-width: 1px;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}

	.status-preview-container {
	position: relative;
	max-width: 100%;
	}

	.status-preview {
	position: absolute;
	max-width: 95%;
	display: flex;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	box-shadow: var(--popupShadow);
	margin-top: 0.25em;
	margin-left: 0.5em;
	z-index: 50;

	.status {
	flex: 1;
	border: 0;
	min-width: 15em;
	}
	}

	.status-preview-loading {
	display: block;
	min-width: 15em;
	padding: 1em;
	text-align: center;
	border-width: 1px;
	border-style: solid;

	i {
	font-size: 2em;
	}
	}

	.media-left {
	margin-right: $status-margin;
	}

	.status-el {
	hyphens: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	border-left-width: 0px;
	min-width: 0;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	border-left: 4px $fallback--cRed;
	border-left: 4px var(--cRed, $fallback--cRed);

	&_focused {
	background-color: $fallback--lightBg;
	background-color: var(--lightBg, $fallback--lightBg);
	}

	.timeline & {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	}

	.media-body {
	flex: 1;
	padding: 0;
	}

	- .usercard {
	- margin: 0;
	+ .status-usercard {
	margin-bottom: $status-margin;
	}

	.user-name {
	white-space: nowrap;
	font-size: 14px;
	overflow: hidden;
	flex-shrink: 0;
	max-width: 85%;
	font-weight: bold;

	img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}

	.media-heading {
	padding: 0;
	vertical-align: bottom;
	flex-basis: 100%;
	margin-bottom: 0.5em;

	a {
	display: inline-block;
	word-break: break-all;
	}

	small {
	font-weight: lighter;
	}

	.heading-name-row {
	padding: 0;
	display: flex;
	justify-content: space-between;
	line-height: 18px;

	.name-and-account-name {
	display: flex;
	min-width: 0;
	}

	.user-name {
	flex-shrink: 1;
	margin-right: 0.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.account-name {
	min-width: 1.6em;
	margin-right: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 0;
	}
	}

	.heading-right {
	display: flex;
	flex-shrink: 0;
	}

	.timeago {
	margin-right: 0.2em;
	}

	.heading-reply-row {
	align-content: baseline;
	font-size: 12px;
	line-height: 18px;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;

	a {
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}
	}

	.reply-to-and-accountname {
	display: flex;
	height: 18px;
	margin-right: 0.5em;
	overflow: hidden;
	max-width: 100%;
	.icon-reply {
	transform: scaleX(-1);
	}
	}

	.reply-info {
	display: flex;
	}

	.reply-to {
	display: flex;
	}

	.reply-to-text {
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 0.4em 0 0.2em;
	}

	.replies-separator {
	margin-left: 0.4em;
	}

	.replies {
	line-height: 18px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	& > * {
	margin-right: 0.4em;
	}
	}

	.reply-link {
	height: 17px;
	}
	}

	.tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	}

	.tall-status-hider {
	display: inline-block;
	word-break: break-all;
	position: absolute;
	height: 70px;
	margin-top: 150px;
	width: 100%;
	text-align: center;
	line-height: 110px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
	&_focused {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%);
	}
	}

	.status-unhider, .cw-status-hider {
	width: 100%;
	text-align: center;
	display: inline-block;
	word-break: break-all;
	}

	.status-content {
	font-family: var(--postFont, sans-serif);
	line-height: 1.4em;

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

	&.emoji {
	width: 32px;
	height: 32px;
	}
	}

	blockquote {
	margin: 0.2em 0 0.2em 2em;
	font-style: italic;
	}

	pre {
	overflow: auto;
	}

	code, samp, kbd, var, pre {
	font-family: var(--postCodeFont, monospace);
	}

	p {
	margin: 0 0 1em 0;
	}

	p:last-child {
	margin: 0 0 0 0;
	}

	h1 {
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 1.4em 0;
	}

	h2 {
	font-size: 1.1em;
	margin: 1.0em 0;
	}

	h3 {
	font-size: 1em;
	margin: 1.2em 0;
	}

	h4 {
	margin: 1.1em 0;
	}
	}

	.retweet-info {
	padding: 0.4em $status-margin;
	margin: 0;

	.avatar.still-image {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	margin-left: 28px;
	width: 20px;
	height: 20px;
	}

	.media-body {
	font-size: 1em;
	line-height: 22px;

	display: flex;
	align-content: center;
	flex-wrap: wrap;

	.user-name {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;

	img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}

	i {
	padding: 0 0.2em;
	}

	a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}
	}
	}

	.status-fadein {
	animation-duration: 0.4s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	.greentext {
	color: green;
	}

	.status-conversation {
	border-left-style: solid;
	}

	.status-actions {
	width: 100%;
	display: flex;
	margin-top: $status-margin;

	div, favorite-button {
	max-width: 4em;
	flex: 1;
	}
	}

	.icon-reply:hover {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-reply.icon-reply-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.status:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.status {
	display: flex;
	padding: $status-margin;
	&.is-retweet {
	padding-top: 0;
	}
	}

	.status-conversation:last-child {
	border-bottom: none;
	}

	.muted {
	padding: 0.25em 0.5em;
	button {
	margin-left: auto;
	}

	.muteWords {
	margin-left: 10px;
	}
	}

	a.unmute {
	display: block;
	margin-left: auto;
	}

	.reply-left {
	flex: 0;
	min-width: 48px;
	}

	.reply-body {
	flex: 1;
	}

	.timeline > {
	.status-el:last-child {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	border-bottom: none;
	}
	}

	@media all and (max-width: 800px) {
	.status-el {
	.retweet-info {
	.avatar.still-image {
	margin-left: 20px;
	}
	}
	}
	.status {
	max-width: 100%;
	}

	.status .avatar.still-image {
	width: 40px;
	height: 40px;

	&.avatar-compact {
	width: 32px;
	height: 32px;
	}
	}
	}

	</style>
	diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card/user_card.js
	similarity index 92%
	rename from src/components/user_card_content/user_card_content.js
	rename to src/components/user_card/user_card.js
	index 351395044a..80d15a2746 100644
	--- a/src/components/user_card_content/user_card_content.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,149 +1,156 @@
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import { hex2rgb } from '../../services/color_convert/color_convert.js'
	import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

	export default {
	- props: [ 'user', 'switcher', 'selected', 'hideBio' ],
	+ props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
	data () {
	return {
	followRequestInProgress: false,
	followRequestSent: false,
	hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
	? this.$store.state.instance.hideUserStats
	: this.$store.state.config.hideUserStats,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	computed: {
	- headingStyle () {
	+ 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
	+ }]
	+ },
	+ style () {
	const color = this.$store.state.config.customTheme.colors
	? this.$store.state.config.customTheme.colors.bg // v2
	: this.$store.state.config.colors.bg // v1

	if (color) {
	const rgb = (typeof color === 'string') ? hex2rgb(color) : color
	const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`

	const gradient = [
	[tintColor, this.hideBio ? '60%' : ''],
	this.hideBio ? [
	color, '100%'
	] : [
	tintColor, ''
	]
	].map(_ => _.join(' ')).join(', ')

	return {
	backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
	backgroundImage: [
	`linear-gradient(to bottom, ${gradient})`,
	`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.state.config.highlight[this.user.screen_name]
	return data && data.type \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.state.config.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 })
	}
	}
	},
	userHighlightColor: {
	get () {
	const data = this.$store.state.config.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const validRole = (this.user.role === 'admin' \|\| this.user.role === 'moderator')
	const showRole = this.isOtherUser \|\| this.user.show_role

	return validRole && showRole && this.user.role
	}
	},
	components: {
	UserAvatar
	},
	methods: {
	followUser () {
	const store = this.$store
	this.followRequestInProgress = true
	requestFollow(this.user, store).then(({sent}) => {
	this.followRequestInProgress = false
	this.followRequestSent = sent
	})
	},
	unfollowUser () {
	const store = this.$store
	this.followRequestInProgress = true
	requestUnfollow(this.user, store).then(() => {
	this.followRequestInProgress = false
	store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
	})
	},
	blockUser () {
	const store = this.$store
	store.state.api.backendInteractor.blockUser(this.user.id)
	.then((blockedUser) => {
	store.commit('addNewUsers', [blockedUser])
	store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
	store.commit('removeStatus', { timeline: 'public', userId: this.user.id })
	store.commit('removeStatus', { timeline: 'publicAndExternal', userId: this.user.id })
	})
	},
	unblockUser () {
	const store = this.$store
	store.state.api.backendInteractor.unblockUser(this.user.id)
	.then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
	},
	toggleMute () {
	const store = this.$store
	store.commit('setMuted', {user: this.user, muted: !this.user.muted})
	store.state.api.backendInteractor.setUserMute(this.user)
	},
	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)
	}
	}
	}
	diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card/user_card.vue
	similarity index 90%
	rename from src/components/user_card_content/user_card_content.vue
	rename to src/components/user_card/user_card.vue
	index 702c338512..cc2ce6b8fe 100644
	--- a/src/components/user_card_content/user_card_content.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,417 +1,419 @@
	<template>
	-<div id="heading" class="profile-panel-background" :style="headingStyle">
	- <div class="panel-heading text-center">
	+<div class="user-card" :class="classes" :style="style">
	+ <div class="panel-heading">
	<div class='user-info'>
	<div class='container'>
	<router-link :to="userProfileLink(user)">
	<UserAvatar :betterShadow="betterShadow" :src="user.profile_image_url_original"/>
	</router-link>
	<div class="name-and-screen-name">
	<div class="top-line">
	<div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
	<div :title="user.name" class='user-name' v-else>{{user.name}}</div>
	<router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser">
	<i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
	</router-link>
	<a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local">
	<i class="icon-link-ext usersettings"></i>
	</a>
	</div>

	<router-link class='user-screen-name' :to="userProfileLink(user)">
	<span class="handle">@{{user.screen_name}}
	<span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
	</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
	<span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
	</router-link>
	</div>
	</div>
	<div class="user-meta">
	<div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
	{{ $t('user_card.follows_you') }}
	</div>
	<div class="highlighter" v-if="isOtherUser && (loggedIn \|\| !switcher)">
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
	<input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
	<label for="style-switcher" class='userHighlightSel select'>
	<select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
	<option value="disabled">No highlight</option>
	<option value="solid">Solid bg</option>
	<option value="striped">Striped bg</option>
	<option value="side">Side stripe</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	</div>
	<div v-if="isOtherUser" class="user-interactions">
	<div class="follow" v-if="loggedIn">
	<span v-if="user.following">
	<!--Following them!-->
	<button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')">
	<template v-if="followRequestInProgress">
	{{ $t('user_card.follow_progress') }}
	</template>
	<template v-else>
	{{ $t('user_card.following') }}
	</template>
	</button>
	</span>
	<span v-if="!user.following">
	<button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''">
	<template v-if="followRequestInProgress">
	{{ $t('user_card.follow_progress') }}
	</template>
	<template v-else-if="followRequestSent">
	{{ $t('user_card.follow_sent') }}
	</template>
	<template v-else>
	{{ $t('user_card.follow') }}
	</template>
	</button>
	</span>
	</div>
	<div class='mute' v-if='isOtherUser && loggedIn'>
	<span v-if='user.muted'>
	<button @click="toggleMute" class="pressed">
	{{ $t('user_card.muted') }}
	</button>
	</span>
	<span v-if='!user.muted'>
	<button @click="toggleMute">
	{{ $t('user_card.mute') }}
	</button>
	</span>
	</div>
	<div class="remote-follow" v-if='!loggedIn && user.is_local'>
	<form method="POST" :action='subscribeUrl'>
	<input type="hidden" name="nickname" :value="user.screen_name">
	<input type="hidden" name="profile" value="">
	<button click="submit" class="remote-button">
	{{ $t('user_card.remote_follow') }}
	</button>
	</form>
	</div>
	<div class='block' v-if='isOtherUser && loggedIn'>
	<span v-if='user.statusnet_blocking'>
	<button @click="unblockUser" class="pressed">
	{{ $t('user_card.blocked') }}
	</button>
	</span>
	<span v-if='!user.statusnet_blocking'>
	<button @click="blockUser">
	{{ $t('user_card.block') }}
	</button>
	</span>
	</div>
	</div>
	</div>
	</div>
	- <div class="panel-body profile-panel-body" v-if="!hideBio">
	+ <div class="panel-body" v-if="!hideBio">
	<div v-if="!hideUserStatsLocal && switcher" class="user-counts">
	<div class="user-count" v-on:click.prevent="setProfileView('statuses')">
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{user.statuses_count}} <br></span>
	</div>
	<div class="user-count" v-on:click.prevent="setProfileView('friends')">
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{user.friends_count}}</span>
	</div>
	<div class="user-count" v-on:click.prevent="setProfileView('followers')">
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{user.followers_count}}</span>
	</div>
	</div>
	- <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
	- <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
	+ <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
	+ <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
	</div>
	</div>
	</template>

	-<script src="./user_card_content.js"></script>
	+<script src="./user_card.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	-.profile-panel-background {
	+.user-card {
	background-size: cover;
	- border-radius: $fallback--panelRadius;
	- border-radius: var(--panelRadius, $fallback--panelRadius);
	overflow: hidden;

	- border-bottom-left-radius: 0;
	- border-bottom-right-radius: 0;
	-
	.panel-heading {
	padding: .5em 0;
	text-align: center;
	box-shadow: none;
	+ background: transparent;
	+ flex-direction: column;
	+ align-items: stretch;
	}
	-}

	-.profile-panel-body {
	- word-wrap: break-word;
	- background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
	- background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
	+ .panel-body {
	+ word-wrap: break-word;
	+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
	+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
	+ }

	- .profile-bio {
	+ p {
	+ margin-bottom: 0;
	+ }
	+
	+ &-bio {
	text-align: center;
	}
	+
	+ // Modifiers
	+
	+ &-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);
	+ }
	+
	+ &-rounded {
	+ border-radius: $fallback--panelRadius;
	+ border-radius: var(--panelRadius, $fallback--panelRadius);
	+ }
	+
	+ &-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;

	.container {
	padding: 16px 0 6px;
	display: flex;
	max-height: 56px;

	.avatar {
	flex: 1 0 100%;
	width: 56px;
	height: 56px;
	box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
	box-shadow: var(--avatarShadow);
	object-fit: cover;
	}
	}

	&:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.usersettings {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	opacity: .8;
	}

	.name-and-screen-name {
	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;

	img {
	width: 26px;
	height: 26px;
	vertical-align: middle;
	object-fit: contain
	}
	.top-line {
	display: flex;
	}
	}

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

	img {
	object-fit: contain;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	}
	}

	.user-screen-name {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	display: inline-block;
	font-weight: light;
	font-size: 15px;
	padding-right: 0.1em;
	width: 100%;
	display: flex;

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

	.handle {
	min-width: 1px;
	flex: 0 1 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	}

	// TODO use proper colors
	.staff {
	text-transform: capitalize;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	}
	}

	.user-meta {
	margin-bottom: .15em;
	display: flex;
	align-items: baseline;
	font-size: 14px;
	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,
	.userHighlightSel.select {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}
	.userHighlightSel.select i {
	line-height: 22px;
	}

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

	.userHighlightCl,
	.userHighlightText,
	.userHighlightSel,
	.userHighlightSel.select {
	height: 22px;
	vertical-align: top;
	margin-right: .5em;
	margin-bottom: .25em;
	}
	}
	}
	.user-interactions {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	margin-right: -.75em;

	div {
	flex: 1 0 0;
	margin-right: .75em;
	margin-bottom: .6em;
	white-space: nowrap;
	}

	.mute {
	max-width: 220px;
	min-height: 28px;
	}

	.remote-follow {
	max-width: 220px;
	min-height: 28px;
	}

	.follow {
	max-width: 220px;
	min-height: 28px;
	}

	button {
	width: 100%;
	height: 100%;
	margin: 0;
	}

	.remote-button {
	height: 28px !important;
	width: 92%;
	}

	.pressed {
	border-bottom-color: rgba(255, 255, 255, 0.2);
	border-top-color: rgba(0, 0, 0, 0.2);
	}
	}
	}

	.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;
	}
	}
	-
	-.usercard {
	- width: fill-available;
	- border-radius: $fallback--panelRadius;
	- border-radius: var(--panelRadius, $fallback--panelRadius);
	- border-style: solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	- border-width: 1px;
	- overflow: hidden;
	-
	- .panel-heading {
	- background: transparent;
	- flex-direction: column;
	- align-items: stretch;
	- }
	-
	- p {
	- margin-bottom: 0;
	- }
	-}
	</style>
	diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
	index 15804b8847..d447829070 100644
	--- a/src/components/user_panel/user_panel.js
	+++ b/src/components/user_panel/user_panel.js
	@@ -1,16 +1,16 @@
	import LoginForm from '../login_form/login_form.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	-import UserCardContent from '../user_card_content/user_card_content.vue'
	+import UserCard from '../user_card/user_card.vue'

	const UserPanel = {
	computed: {
	user () { return this.$store.state.users.currentUser }
	},
	components: {
	LoginForm,
	PostStatusForm,
	- UserCardContent
	+ UserCard
	}
	}

	export default UserPanel
	diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
	index 2d5cb500d6..8310f30e4a 100644
	--- a/src/components/user_panel/user_panel.vue
	+++ b/src/components/user_panel/user_panel.vue
	@@ -1,23 +1,13 @@
	<template>
	<div class="user-panel">
	<div v-if='user' class="panel panel-default" style="overflow: visible;">
	- <user-card-content :user="user" :switcher="false" :hideBio="true"></user-card-content>
	+ <UserCard :user="user" :hideBio="true" rounded="top"/>
	<div class="panel-footer">
	<post-status-form v-if='user'></post-status-form>
	</div>
	</div>
	<login-form v-if='!user'></login-form>
	</div>
	</template>

	<script src="./user_panel.js"></script>
	-
	-<style lang="scss">
	-.user-panel {
	- .profile-panel-background .panel-heading {
	- background: transparent;
	- flex-direction: column;
	- align-items: stretch;
	- }
	-}
	-</style>
	diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
	index cdf1cee925..54126514ed 100644
	--- a/src/components/user_profile/user_profile.js
	+++ b/src/components/user_profile/user_profile.js
	@@ -1,157 +1,157 @@
	import { compose } from 'vue-compose'
	import get from 'lodash/get'
	-import UserCardContent from '../user_card_content/user_card_content.vue'
	+import UserCard from '../user_card/user_card.vue'
	import FollowCard from '../follow_card/follow_card.vue'
	import Timeline from '../timeline/timeline.vue'
	import withLoadMore from '../../hocs/with_load_more/with_load_more'
	import withList from '../../hocs/with_list/with_list'

	const FollowerList = compose(
	withLoadMore({
	fetch: (props, $store) => $store.dispatch('addFollowers', props.userId),
	select: (props, $store) => get($store.getters.userById(props.userId), 'followers', []),
	destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
	childPropName: 'entries',
	additionalPropNames: ['userId']
	}),
	withList({ getEntryProps: user => ({ user }) })
	)(FollowCard)

	const FriendList = compose(
	withLoadMore({
	fetch: (props, $store) => $store.dispatch('addFriends', props.userId),
	select: (props, $store) => get($store.getters.userById(props.userId), 'friends', []),
	destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
	childPropName: 'entries',
	additionalPropNames: ['userId']
	}),
	withList({ getEntryProps: user => ({ user }) })
	)(FollowCard)

	const UserProfile = {
	data () {
	return {
	error: false
	}
	},
	created () {
	this.$store.commit('clearTimeline', { timeline: 'user' })
	this.$store.commit('clearTimeline', { timeline: 'favorites' })
	this.$store.commit('clearTimeline', { timeline: 'media' })
	this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy })
	this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy })
	this.startFetchFavorites()
	if (!this.user.id) {
	this.$store.dispatch('fetchUser', this.fetchBy)
	.catch((reason) => {
	const errorMessage = get(reason, 'error.error')
	if (errorMessage === 'No user with such user_id') { // Known error
	this.error = this.$t('user_profile.profile_does_not_exist')
	} else if (errorMessage) {
	this.error = errorMessage
	} else {
	this.error = this.$t('user_profile.profile_loading_error')
	}
	})
	}
	},
	destroyed () {
	this.cleanUp()
	},
	computed: {
	timeline () {
	return this.$store.state.statuses.timelines.user
	},
	favorites () {
	return this.$store.state.statuses.timelines.favorites
	},
	media () {
	return this.$store.state.statuses.timelines.media
	},
	userId () {
	return this.$route.params.id \|\| this.user.id
	},
	userName () {
	return this.$route.params.name \|\| this.user.screen_name
	},
	isUs () {
	return this.userId && this.$store.state.users.currentUser.id &&
	this.userId === this.$store.state.users.currentUser.id
	},
	userInStore () {
	if (this.isExternal) {
	return this.$store.getters.userById(this.userId)
	}
	return this.$store.getters.userByName(this.userName)
	},
	user () {
	if (this.timeline.statuses[0]) {
	return this.timeline.statuses[0].user
	}
	if (this.userInStore) {
	return this.userInStore
	}
	return {}
	},
	fetchBy () {
	return this.isExternal ? this.userId : this.userName
	},
	isExternal () {
	return this.$route.name === 'external-user-profile'
	},
	followsTabVisible () {
	return this.isUs \|\| !this.user.hide_follows
	},
	followersTabVisible () {
	return this.isUs \|\| !this.user.hide_followers
	}
	},
	methods: {
	startFetchFavorites () {
	if (this.isUs) {
	this.$store.dispatch('startFetching', { timeline: 'favorites', userId: this.fetchBy })
	}
	},
	startUp () {
	this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy })
	this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy })

	this.startFetchFavorites()
	},
	cleanUp () {
	this.$store.dispatch('stopFetching', 'user')
	this.$store.dispatch('stopFetching', 'favorites')
	this.$store.dispatch('stopFetching', 'media')
	this.$store.commit('clearTimeline', { timeline: 'user' })
	this.$store.commit('clearTimeline', { timeline: 'favorites' })
	this.$store.commit('clearTimeline', { timeline: 'media' })
	}
	},
	watch: {
	userName () {
	if (this.isExternal) {
	return
	}
	this.cleanUp()
	this.startUp()
	},
	userId () {
	if (!this.isExternal) {
	return
	}
	this.cleanUp()
	this.startUp()
	},
	$route () {
	this.$refs.tabSwitcher.activateTab(0)()
	}
	},
	components: {
	- UserCardContent,
	+ UserCard,
	Timeline,
	FollowerList,
	FriendList
	}
	}

	export default UserProfile
	diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
	index 8090efa56e..7d4a8b1f6f 100644
	--- a/src/components/user_profile/user_profile.vue
	+++ b/src/components/user_profile/user_profile.vue
	@@ -1,105 +1,96 @@
	<template>
	<div>
	<div v-if="user.id" class="user-profile panel panel-default">
	- <user-card-content
	- :user="user"
	- :switcher="true"
	- :selected="timeline.viewing"
	- />
	+ <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
	<tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
	<Timeline
	:label="$t('user_card.statuses')"
	:disabled="!user.statuses_count"
	:count="user.statuses_count"
	:embedded="true"
	:title="$t('user_profile.timeline_title')"
	:timeline="timeline"
	:timeline-name="'user'"
	:user-id="fetchBy"
	/>
	<div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
	<FriendList :userId="userId" />
	</div>
	<div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
	<FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" />
	</div>
	<Timeline
	:label="$t('user_card.media')"
	:disabled="!media.visibleStatuses.length"
	:embedded="true" :title="$t('user_card.media')"
	timeline-name="media"
	:timeline="media"
	:user-id="fetchBy"
	/>
	<Timeline
	v-if="isUs"
	:label="$t('user_card.favorites')"
	:disabled="!favorites.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.favorites')"
	timeline-name="favorites"
	:timeline="favorites"
	/>
	</tab-switcher>
	</div>
	<div v-else class="panel user-profile-placeholder">
	<div class="panel-heading">
	<div class="title">
	{{ $t('settings.profile_tab') }}
	</div>
	</div>
	<div class="panel-body">
	<span v-if="error">{{ error }}</span>
	<i class="icon-spin3 animate-spin" v-else></i>
	</div>
	</div>
	</div>
	</template>

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

	<style lang="scss">

	.user-profile {
	flex: 2;
	flex-basis: 500px;

	- .profile-panel-background .panel-heading {
	- background: transparent;
	- flex-direction: column;
	- align-items: stretch;
	- }
	.userlist-placeholder {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 2em;
	}

	.timeline-heading {
	display: flex;
	justify-content: center;

	.loadmore-button, .alert {
	flex: 1;
	}

	.loadmore-button {
	height: 28px;
	margin: 10px .6em;
	}

	.title, .loadmore-text {
	display: none
	}
	}
	}
	.user-profile-placeholder {
	.panel-body {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 7em;
	}
	}
	</style>
	diff --git a/test/unit/specs/boot/routes.spec.js b/test/unit/specs/boot/routes.spec.js
	index 383ba90f2a..a415aeafc5 100644
	--- a/test/unit/specs/boot/routes.spec.js
	+++ b/test/unit/specs/boot/routes.spec.js
	@@ -1,37 +1,37 @@
	import routes from 'src/boot/routes'
	import { createLocalVue } from '@vue/test-utils'
	import VueRouter from 'vue-router'

	const localVue = createLocalVue()
	localVue.use(VueRouter)

	describe('routes', () => {
	const router = new VueRouter({
	mode: 'abstract',
	routes: routes({})
	})

	it('root path', () => {
	router.push('/main/all')

	const matchedComponents = router.getMatchedComponents()

	expect(matchedComponents[0].components.hasOwnProperty('Timeline')).to.eql(true)
	})

	it('user\'s profile', () => {
	router.push('/fake-user-name')

	const matchedComponents = router.getMatchedComponents()

	- expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true)
	+ expect(matchedComponents[0].components.hasOwnProperty('UserCard')).to.eql(true)
	})

	it('user\'s profile at /users', () => {
	router.push('/users/fake-user-name')

	const matchedComponents = router.getMatchedComponents()

	- expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true)
	+ expect(matchedComponents[0].components.hasOwnProperty('UserCard')).to.eql(true)
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 30, 10:34 AM (1 d, 21 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1737919
Default Alt Text: (81 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions