No OneTemporary
Actions

Authored By

Unknown

Size

91 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
	index ab5d1d2982..1e31151ca6 100644
	--- a/src/components/account_actions/account_actions.vue
	+++ b/src/components/account_actions/account_actions.vue
	@@ -1,98 +1,93 @@
	<template>
	<div class="AccountActions">
	<Popover
	trigger="click"
	placement="bottom"
	:bound-to="{ x: 'container' }"
	remove-padding
	>
	- <div
	- slot="content"
	- class="account-tools-popover"
	- >
	+ <template v-slot:content>
	<div class="dropdown-menu">
	<template v-if="relationship.following">
	<button
	v-if="relationship.showing_reblogs"
	class="btn button-default dropdown-item"
	@click="hideRepeats"
	>
	{{ $t('user_card.hide_repeats') }}
	</button>
	<button
	v-if="!relationship.showing_reblogs"
	class="btn button-default dropdown-item"
	@click="showRepeats"
	>
	{{ $t('user_card.show_repeats') }}
	</button>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</template>
	<button
	v-if="relationship.blocking"
	class="btn button-default btn-block dropdown-item"
	@click="unblockUser"
	>
	{{ $t('user_card.unblock') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block dropdown-item"
	@click="blockUser"
	>
	{{ $t('user_card.block') }}
	</button>
	<button
	class="btn button-default btn-block dropdown-item"
	@click="reportUser"
	>
	{{ $t('user_card.report') }}
	</button>
	<button
	v-if="pleromaChatMessagesAvailable"
	class="btn button-default btn-block dropdown-item"
	@click="openChat"
	>
	{{ $t('user_card.message') }}
	</button>
	</div>
	- </div>
	- <div
	- slot="trigger"
	- class="ellipsis-button"
	- >
	- <FAIcon
	- class="icon"
	- icon="ellipsis-v"
	- />
	- </div>
	+ </template>
	+ <template v-slot:trigger>
	+ <button class="button-unstyled ellipsis-button">
	+ <FAIcon
	+ class="icon"
	+ icon="ellipsis-v"
	+ />
	+ </button>
	+ </template>
	</Popover>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';
	.AccountActions {
	button.dropdown-item {
	margin-left: 0;
	}

	.ellipsis-button {
	- cursor: pointer;
	width: 2.5em;
	margin: -0.5em 0;
	padding: 0.5em 0;
	text-align: center;

	&:not(:hover) .icon {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}
	</style>
	diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
	index e23eec135b..f98b7ed294 100644
	--- a/src/components/chat_list/chat_list.vue
	+++ b/src/components/chat_list/chat_list.vue
	@@ -1,67 +1,64 @@
	<template>
	<div v-if="isNew">
	<ChatNew @cancel="cancelNewChat" />
	</div>
	<div
	v-else
	class="chat-list panel panel-default"
	>
	<div class="panel-heading">
	<span class="title">
	{{ $t("chats.chats") }}
	</span>
	<button
	class="button-default"
	@click="newChat"
	>
	{{ $t("chats.new") }}
	</button>
	</div>
	<div class="panel-body">
	<div
	v-if="sortedChatList.length > 0"
	class="timeline"
	>
	<List :items="sortedChatList">
	- <template
	- slot="item"
	- slot-scope="{item}"
	- >
	+ <template v-slot:item="{item}">
	<ChatListItem
	:key="item.id"
	:compact="false"
	:chat="item"
	/>
	</template>
	</List>
	</div>
	<div
	v-else
	class="emtpy-chat-list-alert"
	>
	<span>{{ $t('chats.empty_chat_list_placeholder') }}</span>
	</div>
	</div>
	</div>
	</template>

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

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

	.chat-list {
	min-height: 25em;
	margin-bottom: 0;
	}

	.emtpy-chat-list-alert {
	padding: 3em;
	font-size: 1.2em;
	display: flex;
	justify-content: center;
	color: $fallback--text;
	color: var(--faint, $fallback--text);
	}

	</style>
	diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
	index 0777f8809f..0f3fc97d44 100644
	--- a/src/components/chat_message/chat_message.vue
	+++ b/src/components/chat_message/chat_message.vue
	@@ -1,100 +1,102 @@
	<template>
	<div
	v-if="isMessage"
	class="chat-message-wrapper"
	:class="{ 'hovered-message-chain': hoveredMessageChain }"
	@mouseover="onHover(true)"
	@mouseleave="onHover(false)"
	>
	<div
	class="chat-message"
	:class="[{ 'outgoing': isCurrentUser, 'incoming': !isCurrentUser }]"
	>
	<div
	v-if="!isCurrentUser"
	class="avatar-wrapper"
	>
	<router-link
	v-if="chatViewItem.isHead"
	:to="userProfileLink"
	>
	<UserAvatar
	:compact="true"
	:better-shadow="betterShadow"
	:user="author"
	/>
	</router-link>
	</div>
	<div class="chat-message-inner">
	<div
	class="status-body"
	:style="{ 'min-width': message.attachment ? '80%' : '' }"
	>
	<div
	class="media status"
	:class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
	style="position: relative"
	@mouseenter="hovered = true"
	@mouseleave="hovered = false"
	>
	<div
	class="chat-message-menu"
	:class="{ 'visible': hovered \|\| menuOpened }"
	>
	<Popover
	trigger="click"
	placement="top"
	:bound-to-selector="isCurrentUser ? '' : '.scrollable-message-list'"
	:bound-to="{ x: 'container' }"
	:margin="popoverMarginStyle"
	@show="menuOpened = true"
	@close="menuOpened = false"
	>
	- <div slot="content">
	+ <template v-slot:content>
	<div class="dropdown-menu">
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click="deleteMessage"
	>
	<FAIcon icon="times" /> {{ $t("chats.delete") }}
	</button>
	</div>
	- </div>
	- <button
	- slot="trigger"
	- class="button-default menu-icon"
	- :title="$t('chats.more')"
	- >
	- <FAIcon icon="ellipsis-h" />
	- </button>
	+ </template>
	+ <template v-slot:trigger>
	+ <button
	+ class="button-default menu-icon"
	+ :title="$t('chats.more')"
	+ >
	+ <FAIcon icon="ellipsis-h" />
	+ </button>
	+ </template>
	</Popover>
	</div>
	<StatusContent
	:status="messageForStatusContent"
	:full-content="true"
	>
	- <span
	- slot="footer"
	- class="created-at"
	- >
	- {{ createdAt }}
	- </span>
	+ <template v-slot:footer>
	+ <span
	+ class="created-at"
	+ >
	+ {{ createdAt }}
	+ </span>
	+ </template>
	</StatusContent>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div
	v-else
	class="chat-message-date-separator"
	>
	<ChatMessageDate :date="chatViewItem.date" />
	</div>
	</template>

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

	</style>
	diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
	index 3b5aec141b..836688aa0d 100644
	--- a/src/components/domain_mute_card/domain_mute_card.vue
	+++ b/src/components/domain_mute_card/domain_mute_card.vue
	@@ -1,53 +1,53 @@
	<template>
	<div class="domain-mute-card">
	<div class="domain-mute-card-domain">
	{{ domain }}
	</div>
	<ProgressButton
	v-if="muted"
	:click="unmuteDomain"
	class="btn button-default"
	>
	{{ $t('domain_mute_card.unmute') }}
	- <template slot="progress">
	+ <template v-slot:progress>
	{{ $t('domain_mute_card.unmute_progress') }}
	</template>
	</ProgressButton>
	<ProgressButton
	v-else
	:click="muteDomain"
	class="btn button-default"
	>
	{{ $t('domain_mute_card.mute') }}
	- <template slot="progress">
	+ <template v-slot:progress>
	{{ $t('domain_mute_card.mute_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>

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

	<style lang="scss">
	.domain-mute-card {
	flex: 1 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6em 1em 0.6em 0;

	&-domain {
	margin-right: 1em;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	button {
	width: 10em;
	}

	.autosuggest-results & {
	padding-left: 1em;
	}
	}
	</style>
	diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
	index c6cb9fbe2f..a3c3c767b1 100644
	--- a/src/components/extra_buttons/extra_buttons.vue
	+++ b/src/components/extra_buttons/extra_buttons.vue
	@@ -1,158 +1,154 @@
	<template>
	<Popover
	class="ExtraButtons"
	trigger="click"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	>
	- <div
	- slot="content"
	- slot-scope="{close}"
	- >
	+ <template v-slot:content="{close}">
	<div class="dropdown-menu">
	<button
	v-if="canMute && !status.thread_muted"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="muteConversation"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	/><span>{{ $t("status.mute_conversation") }}</span>
	</button>
	<button
	v-if="canMute && status.thread_muted"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unmuteConversation"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	/><span>{{ $t("status.unmute_conversation") }}</span>
	</button>
	<button
	v-if="!status.pinned && canPin"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="pinStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="thumbtack"
	/><span>{{ $t("status.pin") }}</span>
	</button>
	<button
	v-if="status.pinned && canPin"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unpinStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="thumbtack"
	/><span>{{ $t("status.unpin") }}</span>
	</button>
	<button
	v-if="!status.bookmarked"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="bookmarkStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	:icon="['far', 'bookmark']"
	/><span>{{ $t("status.bookmark") }}</span>
	</button>
	<button
	v-if="status.bookmarked"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unbookmarkStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="bookmark"
	/><span>{{ $t("status.unbookmark") }}</span>
	</button>
	<button
	v-if="canDelete"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="deleteStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="times"
	/><span>{{ $t("status.delete") }}</span>
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="copyLink"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="share-alt"
	/><span>{{ $t("status.copy_link") }}</span>
	</button>
	<a
	v-if="!status.is_local"
	class="button-default dropdown-item dropdown-item-icon"
	title="Source"
	:href="status.external_url"
	target="_blank"
	>
	<FAIcon
	fixed-width
	icon="external-link-alt"
	/><span>{{ $t("status.external_source") }}</span>
	</a>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="reportStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	:icon="['far', 'flag']"
	/><span>{{ $t("user_card.report") }}</span>
	</button>
	</div>
	- </div>
	- <span
	- slot="trigger"
	- class="popover-trigger"
	- >
	- <FAIcon
	- class="fa-scale-110 fa-old-padding"
	- icon="ellipsis-h"
	- />
	- </span>
	+ </template>
	+ <template v-slot:trigger>
	+ <button class="button-unstyled popover-trigger">
	+ <FAIcon
	+ class="fa-scale-110 fa-old-padding"
	+ icon="ellipsis-h"
	+ />
	+ </button>
	+ </template>
	</Popover>
	</template>

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

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

	.ExtraButtons {
	/* override of popover internal stuff */
	.popover-trigger-button {
	width: auto;
	}

	.popover-trigger {
	position: static;
	padding: 10px;
	margin: -10px;

	&:hover .svg-inline--fa {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	}
	</style>
	diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
	index c4c6ee4629..96476abe21 100644
	--- a/src/components/moderation_tools/moderation_tools.vue
	+++ b/src/components/moderation_tools/moderation_tools.vue
	@@ -1,180 +1,181 @@
	<template>
	<div>
	<Popover
	trigger="click"
	class="moderation-tools-popover"
	placement="bottom"
	:offset="{ y: 5 }"
	@show="setToggled(true)"
	@close="setToggled(false)"
	>
	- <div slot="content">
	+ <template v-slot:content>
	<div class="dropdown-menu">
	<span v-if="user.is_local">
	<button
	class="button-default dropdown-item"
	@click="toggleRight("admin")"
	>
	{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleRight("moderator")"
	>
	{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
	</button>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</span>
	<button
	class="button-default dropdown-item"
	@click="toggleActivationStatus()"
	>
	{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="deleteUserDialog(true)"
	>
	{{ $t('user_card.admin_menu.delete_account') }}
	</button>
	<div
	v-if="hasTagPolicy"
	role="separator"
	class="dropdown-divider"
	/>
	<span v-if="hasTagPolicy">
	<button
	class="button-default dropdown-item"
	@click="toggleTag(tags.FORCE_NSFW)"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
	/>
	{{ $t('user_card.admin_menu.force_nsfw') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleTag(tags.STRIP_MEDIA)"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
	/>
	{{ $t('user_card.admin_menu.strip_media') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleTag(tags.FORCE_UNLISTED)"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
	/>
	{{ $t('user_card.admin_menu.force_unlisted') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleTag(tags.SANDBOX)"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
	/>
	{{ $t('user_card.admin_menu.sandbox') }}
	</button>
	<button
	v-if="user.is_local"
	class="button-default dropdown-item"
	@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
	/>
	{{ $t('user_card.admin_menu.disable_remote_subscription') }}
	</button>
	<button
	v-if="user.is_local"
	class="button-default dropdown-item"
	@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
	/>
	{{ $t('user_card.admin_menu.disable_any_subscription') }}
	</button>
	<button
	v-if="user.is_local"
	class="button-default dropdown-item"
	@click="toggleTag(tags.QUARANTINE)"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
	/>
	{{ $t('user_card.admin_menu.quarantine') }}
	</button>
	</span>
	</div>
	- </div>
	- <button
	- slot="trigger"
	- class="btn button-default btn-block moderation-tools-button"
	- :class="{ toggled }"
	- >
	- {{ $t('user_card.admin_menu.moderation') }}
	- <FAIcon icon="chevron-down" />
	- </button>
	+ </template>
	+ <template v-slot:trigger>
	+ <button
	+ class="btn button-default btn-block moderation-tools-button"
	+ :class="{ toggled }"
	+ >
	+ {{ $t('user_card.admin_menu.moderation') }}
	+ <FAIcon icon="chevron-down" />
	+ </button>
	+ </template>
	</Popover>
	<portal to="modal">
	<DialogModal
	v-if="showDeleteUserDialog"
	:on-cancel="deleteUserDialog.bind(this, false)"
	>
	- <template slot="header">
	+ <template v-slot:header>
	{{ $t('user_card.admin_menu.delete_user') }}
	</template>
	<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
	- <template slot="footer">
	+ <template v-slot:footer>
	<button
	class="btn button-default"
	@click="deleteUserDialog(false)"
	>
	{{ $t('general.cancel') }}
	</button>
	<button
	class="btn button-default danger"
	@click="deleteUser()"
	>
	{{ $t('user_card.admin_menu.delete_user') }}
	</button>
	</template>
	</DialogModal>
	</portal>
	</div>
	</template>

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

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

	.moderation-tools-popover {
	height: 100%;
	.trigger {
	display: flex !important;
	height: 100%;
	}
	}

	.moderation-tools-button {
	svg,i {
	font-size: 0.8em;
	}
	}
	</style>
	diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
	index e86a0fcc2f..ba0e90a062 100644
	--- a/src/components/notifications/notification_filters.vue
	+++ b/src/components/notifications/notification_filters.vue
	@@ -1,122 +1,122 @@
	<template>
	<Popover
	trigger="click"
	class="NotificationFilters"
	placement="bottom"
	:bound-to="{ x: 'container' }"
	>
	- <template
	- v-slot:content
	- >
	+ <template v-slot:content>
	<div class="dropdown-menu">
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('likes')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.likes }"
	/>{{ $t('settings.notification_visibility_likes') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('repeats')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.repeats }"
	/>{{ $t('settings.notification_visibility_repeats') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('follows')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.follows }"
	/>{{ $t('settings.notification_visibility_follows') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('mentions')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.mentions }"
	/>{{ $t('settings.notification_visibility_mentions') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('emojiReactions')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.emojiReactions }"
	/>{{ $t('settings.notification_visibility_emoji_reactions') }}
	</button>
	<button
	class="button-default dropdown-item"
	@click="toggleNotificationFilter('moves')"
	>
	<span
	class="menu-checkbox"
	:class="{ 'menu-checkbox-checked': filters.moves }"
	/>{{ $t('settings.notification_visibility_moves') }}
	</button>
	</div>
	</template>
	<template v-slot:trigger>
	- <FAIcon icon="filter" />
	+ <button class="button-unstyled">
	+ <FAIcon icon="filter" />
	+ </button>
	</template>
	</Popover>
	</template>

	<script>
	import Popover from '../popover/popover.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faFilter } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faFilter
	)

	export default {
	components: { Popover },
	computed: {
	filters () {
	return this.$store.getters.mergedConfig.notificationVisibility
	}
	},
	methods: {
	toggleNotificationFilter (type) {
	this.$store.dispatch('setOption', {
	name: 'notificationVisibility',
	value: {
	...this.filters,
	[type]: !this.filters[type]
	}
	})
	}
	}
	}
	</script>

	<style lang="scss">

	.NotificationFilters {
	align-self: stretch;

	> button {
	font-size: 1.2em;
	padding-left: 0.7em;
	padding-right: 0.2em;
	line-height: 100%;
	height: 100%;
	}

	.dropdown-item {
	margin: 0;
	}
	}

	</style>
	diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
	index bc6cd8e73e..6ccf32f057 100644
	--- a/src/components/popover/popover.js
	+++ b/src/components/popover/popover.js
	@@ -1,187 +1,187 @@
	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
	},
	data () {
	return {
	hidden: true,
	styles: { opacity: 0 },
	oldSize: { width: 0, height: 0 }
	}
	},
	methods: {
	containerBoundingClientRect () {
	const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
	return container.getBoundingClientRect()
	},
	updateStyles () {
	if (this.hidden) {
	this.styles = {
	opacity: 0
	}
	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 slot="trigger".
	+ // 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 anchorWidth = anchorEl.offsetWidth \|\| anchorEl.clientWidth
	const anchorHeight = anchorEl.offsetHeight \|\| anchorEl.clientHeight
	const screenBox = anchorEl.getBoundingClientRect()
	// Screen position of the origin point for popover
	const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
	const content = this.$refs.content
	// Minor optimization, don't call a slow reflow call if we don't have to
	const parentBounds = 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: parentBounds.left + (margin.left \|\| 0),
	max: parentBounds.right - (margin.right \|\| 0)
	} : {
	min: 0 + (margin.left \|\| 10),
	max: window.innerWidth - (margin.right \|\| 10)
	}

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

	let horizOffset = 0

	// If overflowing from left, move it so that it doesn't
	if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
	horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
	}

	// If overflowing from right, move it so that it doesn't
	if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
	horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
	}

	// 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.
	if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
	if (origin.y - content.offsetHeight < yBounds.min) usingTop = false

	let vPadding = 0
	if (this.removePadding && usingTop) {
	const anchorStyle = getComputedStyle(anchorEl)
	vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
	}

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

	const xOffset = (this.offset && this.offset.x) \|\| 0
	const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset

	// Note, separate translateX and translateY avoids blurry text on chromium,
	// single translate or translate3d resulted in blurry text.
	this.styles = {
	opacity: 1,
	transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
	}
	},
	showPopover () {
	const wasHidden = this.hidden
	this.hidden = false
	this.$nextTick(() => {
	if (wasHidden) this.$emit('show')
	this.updateStyles()
	})
	},
	hidePopover () {
	if (!this.hidden) this.$emit('close')
	this.hidden = true
	this.styles = { opacity: 0 }
	},
	onMouseenter (e) {
	if (this.trigger === 'hover') this.showPopover()
	},
	onMouseleave (e) {
	if (this.trigger === 'hover') this.hidePopover()
	},
	onClick (e) {
	if (this.trigger === 'click') {
	if (this.hidden) {
	this.showPopover()
	} else {
	this.hidePopover()
	}
	}
	},
	onClickOutside (e) {
	if (this.hidden) return
	if (this.$el.contains(e.target)) return
	this.hidePopover()
	}
	},
	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 }
	}
	},
	created () {
	document.addEventListener('click', this.onClickOutside)
	},
	destroyed () {
	document.removeEventListener('click', this.onClickOutside)
	this.hidePopover()
	}
	}

	export default Popover
	diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
	index 4839024c61..c69c315ba7 100644
	--- a/src/components/react_button/react_button.vue
	+++ b/src/components/react_button/react_button.vue
	@@ -1,131 +1,129 @@
	<template>
	<Popover
	trigger="click"
	class="ReactButton"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	@show="focusInput"
	>
	- <div
	- slot="content"
	- slot-scope="{close}"
	- >
	+ <template v-slot:content="{close}">
	<div class="reaction-picker-filter">
	<input
	v-model="filterWord"
	size="1"
	:placeholder="$t('emoji.search_emoji')"
	>
	</div>
	<div class="reaction-picker">
	<span
	v-for="emoji in commonEmojis"
	:key="emoji.replacement"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-picker-divider" />
	<span
	v-for="(emoji, key) in emojis"
	:key="key"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-bottom-fader" />
	</div>
	- </div>
	- <span
	- slot="trigger"
	- class="popover-trigger"
	- :title="$t('tool_tip.add_reaction')"
	- >
	- <FAIcon
	- class="fa-scale-110 fa-old-padding"
	- :icon="['far', 'smile-beam']"
	- />
	- </span>
	+ </template>
	+ <template v-slot:trigger>
	+ <button
	+ class="button-unstyled popover-trigger"
	+ :title="$t('tool_tip.add_reaction')"
	+ >
	+ <FAIcon
	+ class="fa-scale-110 fa-old-padding"
	+ :icon="['far', 'smile-beam']"
	+ />
	+ </button>
	+ </template>
	</Popover>
	</template>

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

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

	.ReactButton {
	.reaction-picker-filter {
	padding: 0.5em;
	display: flex;

	input {
	flex: 1;
	}
	}

	.reaction-picker-divider {
	height: 1px;
	width: 100%;
	margin: 0.5em;
	background-color: var(--border, $fallback--border);
	}

	.reaction-picker {
	width: 10em;
	height: 9em;
	font-size: 1.5em;
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	padding: 0.5em;
	text-align: center;
	align-content: flex-start;
	user-select: none;

	mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
	linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
	linear-gradient(to top, white, white);
	transition: mask-size 150ms;
	mask-size: 100% 20px, 100% 20px, auto;

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	.emoji-button {
	cursor: pointer;

	flex-basis: 20%;
	line-height: 1.5em;
	align-content: center;

	&:hover {
	transform: scale(1.25);
	}
	}
	}

	/* override of popover internal stuff */
	.popover-trigger-button {
	width: auto;
	}

	.popover-trigger {
	padding: 10px;
	margin: -10px;

	&:hover .svg-inline--fa {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	}

	</style>
	diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
	index a9bb12a187..3f8858818a 100644
	--- a/src/components/selectable_list/selectable_list.vue
	+++ b/src/components/selectable_list/selectable_list.vue
	@@ -1,97 +1,94 @@
	<template>
	<div class="selectable-list">
	<div
	v-if="items.length > 0"
	class="selectable-list-header"
	>
	<div class="selectable-list-checkbox-wrapper">
	<Checkbox
	:checked="allSelected"
	:indeterminate="someSelected"
	@change="toggleAll"
	>
	{{ $t('selectable_list.select_all') }}
	</Checkbox>
	</div>
	<div class="selectable-list-header-actions">
	<slot
	name="header"
	:selected="filteredSelected"
	/>
	</div>
	</div>
	<List
	:items="items"
	:get-key="getKey"
	>
	- <template
	- slot="item"
	- slot-scope="{item}"
	- >
	+ <template v-slot:item="{item}">
	<div
	class="selectable-list-item-inner"
	:class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
	>
	<div class="selectable-list-checkbox-wrapper">
	<Checkbox
	:checked="isSelected(item)"
	@change="checked => toggle(checked, item)"
	/>
	</div>
	<slot
	name="item"
	:item="item"
	/>
	</div>
	</template>
	- <template slot="empty">
	+ <template v-slot:empty>
	<slot name="empty" />
	</template>
	</List>
	</div>
	</template>

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

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

	.selectable-list {
	&-item-inner {
	display: flex;
	align-items: center;

	> * {
	min-width: 0;
	}
	}

	&-item-selected-inner {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: var(--selectedMenuText, $fallback--text);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);
	}

	&-header {
	display: flex;
	align-items: center;
	padding: 0.6em 0;
	border-bottom: 2px solid;
	border-bottom-color: $fallback--border;
	border-bottom-color: var(--border, $fallback--border);

	&-actions {
	flex: 1;
	}
	}

	&-checkbox-wrapper {
	padding: 0 10px;
	flex: none;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
	index 9f4e81fec5..ad212db963 100644
	--- a/src/components/settings_modal/helpers/modified_indicator.vue
	+++ b/src/components/settings_modal/helpers/modified_indicator.vue
	@@ -1,51 +1,51 @@
	<template>
	<span
	v-if="changed"
	class="ModifiedIndicator"
	>
	<Popover
	trigger="hover"
	>
	- <span slot="trigger">
	+ <template v-slot:trigger>

	<FAIcon
	icon="wrench"
	+ :aria-label="$t('settings.setting_changed')"
	/>
	- </span>
	- <div
	- slot="content"
	- class="modified-tooltip"
	- >
	- {{ $t('settings.setting_changed') }}
	- </div>
	+ </template>
	+ <template v-slot:content>
	+ <div class="modified-tooltip">
	+ {{ $t('settings.setting_changed') }}
	+ </div>
	+ </template>
	</Popover>
	</span>
	</template>

	<script>
	import Popover from 'src/components/popover/popover.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faWrench } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faWrench
	)

	export default {
	components: { Popover },
	props: ['changed']
	}
	</script>

	<style lang="scss">
	.ModifiedIndicator {
	display: inline-block;
	position: relative;

	.modified-tooltip {
	margin: 0.5em 1em;
	min-width: 10em;
	text-align: center;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
	index c7da543358..a98cec2782 100644
	--- a/src/components/settings_modal/settings_modal.vue
	+++ b/src/components/settings_modal/settings_modal.vue
	@@ -1,120 +1,118 @@
	<template>
	<Modal
	:is-open="modalActivated"
	class="settings-modal"
	:class="{ peek: modalPeeked }"
	:no-background="modalPeeked"
	>
	<div class="settings-modal-panel panel">
	<div class="panel-heading">
	<span class="title">
	{{ $t('settings.settings') }}
	</span>
	<transition name="fade">
	<template v-if="currentSaveStateNotice">
	<div
	v-if="currentSaveStateNotice.error"
	class="alert error"
	@click.prevent
	>
	{{ $t('settings.saving_err') }}
	</div>

	<div
	v-if="!currentSaveStateNotice.error"
	class="alert transparent"
	@click.prevent
	>
	{{ $t('settings.saving_ok') }}
	</div>
	</template>
	</transition>
	<button
	class="btn button-default"
	:title="$t('general.peek')"
	@click="peekModal"
	>
	<FAIcon
	:icon="['far', 'window-minimize']"
	fixed-width
	/>
	</button>
	<button
	class="btn button-default"
	:title="$t('general.close')"
	@click="closeModal"
	>
	<FAIcon
	icon="times"
	fixed-width
	/>
	</button>
	</div>
	<div class="panel-body">
	<SettingsModalContent v-if="modalOpenedOnce" />
	</div>
	<div class="panel-footer">
	<Popover
	class="export"
	trigger="click"
	placement="top"
	:offset="{ y: 5, x: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	>
	- <button
	- slot="trigger"
	- class="btn button-default"
	- :title="$t('general.close')"
	- >
	- <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
	- <FAIcon
	- icon="chevron-down"
	- />
	- </button>
	- <div
	- slot="content"
	- slot-scope="{close}"
	- >
	+ <template v-slot:trigger>
	+ <button
	+ class="btn button-default"
	+ :title="$t('general.close')"
	+ >
	+ <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
	+ <FAIcon
	+ icon="chevron-down"
	+ />
	+ </button>
	+ </template>
	+ <template v-slot:content ="{close}">
	<div class="dropdown-menu">
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="backup"
	@click="close"
	>
	<FAIcon
	icon="file-download"
	fixed-width
	/><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="backupWithTheme"
	@click="close"
	>
	<FAIcon
	icon="file-download"
	fixed-width
	/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="restore"
	@click="close"
	>
	<FAIcon
	icon="file-upload"
	fixed-width
	/><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
	</button>
	</div>
	- </div>
	+ </template>
	</Popover>
	</div>
	</div>
	</Modal>
	</template>

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

	<style src="./settings_modal.scss" lang="scss"></style>
	diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
	index 63d36bf9a2..32a21415c6 100644
	--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
	+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
	@@ -1,171 +1,156 @@
	<template>
	<tab-switcher
	:scrollable-tabs="true"
	class="mutes-and-blocks-tab"
	>
	<div :label="$t('settings.blocks_tab')">
	<div class="usersearch-wrapper">
	<Autosuggest
	:filter="filterUnblockedUsers"
	:query="queryUserIds"
	:placeholder="$t('settings.search_user_to_block')"
	>
	- <BlockCard
	- slot-scope="row"
	- :user-id="row.item"
	- />
	+ <template v-slot="row">
	+ <BlockCard
	+ :user-id="row.item"
	+ />
	+ </template>
	</Autosuggest>
	</div>
	<BlockList
	:refresh="true"
	:get-key="i => i"
	>
	- <template
	- slot="header"
	- slot-scope="{selected}"
	- >
	+ <template v-slot:header="{selected}">
	<div class="bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default bulk-action-button"
	:click="() => blockUsers(selected)"
	>
	{{ $t('user_card.block') }}
	- <template slot="progress">
	+ <template v-slot:progress>
	{{ $t('user_card.block_progress') }}
	</template>
	</ProgressButton>
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default"
	:click="() => unblockUsers(selected)"
	>
	{{ $t('user_card.unblock') }}
	- <template slot="progress">
	+ <template v-slot:progress>
	{{ $t('user_card.unblock_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	- <template
	- slot="item"
	- slot-scope="{item}"
	- >
	+ <template v-slot:item="{item}">
	<BlockCard :user-id="item" />
	</template>
	- <template slot="empty">
	+ <template v-slot:empty>
	{{ $t('settings.no_blocks') }}
	</template>
	</BlockList>
	</div>

	<div :label="$t('settings.mutes_tab')">
	<tab-switcher>
	<div label="Users">
	<div class="usersearch-wrapper">
	<Autosuggest
	:filter="filterUnMutedUsers"
	:query="queryUserIds"
	:placeholder="$t('settings.search_user_to_mute')"
	>
	- <MuteCard
	- slot-scope="row"
	- :user-id="row.item"
	- />
	+ <template v-slot="row">
	+ <MuteCard
	+ :user-id="row.item"
	+ />
	+ </template>
	</Autosuggest>
	</div>
	<MuteList
	:refresh="true"
	:get-key="i => i"
	>
	- <template
	- slot="header"
	- slot-scope="{selected}"
	- >
	+ <template v-slot:header="{selected}">
	<div class="bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default"
	:click="() => muteUsers(selected)"
	>
	{{ $t('user_card.mute') }}
	- <template slot="progress">
	+ <template v-slot:progress>
	{{ $t('user_card.mute_progress') }}
	</template>
	</ProgressButton>
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default"
	:click="() => unmuteUsers(selected)"
	>
	{{ $t('user_card.unmute') }}
	- <template slot="progress">
	+ <template v-slot:progress>
	{{ $t('user_card.unmute_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	- <template
	- slot="item"
	- slot-scope="{item}"
	- >
	+ <template v-slot:item="{item}">
	<MuteCard :user-id="item" />
	</template>
	- <template slot="empty">
	+ <template v-slot:empty>
	{{ $t('settings.no_mutes') }}
	</template>
	</MuteList>
	</div>

	<div :label="$t('settings.domain_mutes')">
	<div class="domain-mute-form">
	<Autosuggest
	:filter="filterUnMutedDomains"
	:query="queryKnownDomains"
	:placeholder="$t('settings.type_domains_to_mute')"
	>
	- <DomainMuteCard
	- slot-scope="row"
	- :domain="row.item"
	- />
	+ <template v-slot="row">
	+ <DomainMuteCard
	+ :domain="row.item"
	+ />
	+ </template>
	</Autosuggest>
	</div>
	<DomainMuteList
	:refresh="true"
	:get-key="i => i"
	>
	- <template
	- slot="header"
	- slot-scope="{selected}"
	- >
	+ <template v-slot:header="{selected}">
	<div class="bulk-actions">
	<ProgressButton
	v-if="selected.length > 0"
	class="btn button-default"
	:click="() => unmuteDomains(selected)"
	>
	{{ $t('domain_mute_card.unmute') }}
	- <template slot="progress">
	+ <template v-slot:progress>
	{{ $t('domain_mute_card.unmute_progress') }}
	</template>
	</ProgressButton>
	</div>
	</template>
	- <template
	- slot="item"
	- slot-scope="{item}"
	- >
	+ <template v-slot:item="{item}">
	<DomainMuteCard :domain="item" />
	</template>
	- <template slot="empty">
	+ <template v-slot:empty>
	{{ $t('settings.no_mutes') }}
	</template>
	</DomainMuteList>
	</div>
	</tab-switcher>
	</div>
	</tab-switcher>
	</template>

	<script src="./mutes_and_blocks_tab.js"></script>
	<style lang="scss" src="./mutes_and_blocks_tab.scss"></style>
	diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
	index 8237ce00d5..fdca8c9ce0 100644
	--- a/src/components/status_popover/status_popover.vue
	+++ b/src/components/status_popover/status_popover.vue
	@@ -1,75 +1,73 @@
	<template>
	<Popover
	trigger="hover"
	popover-class="popover-default status-popover"
	:bound-to="{ x: 'container' }"
	@show="enter"
	>
	- <template slot="trigger">
	+ <template v-slot:trigger>
	<slot />
	</template>
	- <div
	- slot="content"
	- >
	+ <template v-slot:content>
	<Status
	v-if="status"
	:is-preview="true"
	:statusoid="status"
	:compact="true"
	/>
	<div
	v-else-if="error"
	class="status-preview-no-content faint"
	>
	{{ $t('status.status_unavailable') }}
	</div>
	<div
	v-else
	class="status-preview-no-content"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="2x"
	/>
	</div>
	- </div>
	+ </template>
	</Popover>
	</template>

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

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

	/* popover styles load on-demand, so we need to override */
	.status-popover.popover {
	font-size: 1rem;
	min-width: 15em;
	max-width: 95%;

	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);

	/* TODO cleanup this */
	.Status.Status {
	border: none;
	}

	.status-preview-no-content {
	padding: 1em;
	text-align: center;

	i {
	font-size: 2em;
	}
	}
	}

	</style>
	diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
	index 94997c0d73..98996ebda2 100644
	--- a/src/components/timeline/timeline_quick_settings.vue
	+++ b/src/components/timeline/timeline_quick_settings.vue
	@@ -1,101 +1,102 @@
	<template>
	<Popover
	trigger="click"
	class="TimelineQuickSettings"
	:bound-to="{ x: 'container' }"
	>
	- <div
	- slot="content"
	- class="dropdown-menu"
	- >
	- <div v-if="loggedIn">
	+ <template v-slot:content>
	+ <div class="dropdown-menu">
	+ <div v-if="loggedIn">
	+ <button
	+ class="button-default dropdown-item"
	+ @click="replyVisibilityAll = true"
	+ >
	+ <span
	+ class="menu-checkbox"
	+ :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
	+ />{{ $t('settings.reply_visibility_all') }}
	+ </button>
	+ <button
	+ class="button-default dropdown-item"
	+ @click="replyVisibilityFollowing = true"
	+ >
	+ <span
	+ class="menu-checkbox"
	+ :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
	+ />{{ $t('settings.reply_visibility_following_short') }}
	+ </button>
	+ <button
	+ class="button-default dropdown-item"
	+ @click="replyVisibilitySelf = true"
	+ >
	+ <span
	+ class="menu-checkbox"
	+ :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
	+ />{{ $t('settings.reply_visibility_self_short') }}
	+ </button>
	+ <div
	+ role="separator"
	+ class="dropdown-divider"
	+ />
	+ </div>
	<button
	class="button-default dropdown-item"
	- @click="replyVisibilityAll = true"
	+ @click="hideMedia = !hideMedia"
	>
	<span
	class="menu-checkbox"
	- :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
	- />{{ $t('settings.reply_visibility_all') }}
	+ :class="{ 'menu-checkbox-checked': hideMedia }"
	+ />{{ $t('settings.hide_media_previews') }}
	</button>
	<button
	class="button-default dropdown-item"
	- @click="replyVisibilityFollowing = true"
	+ @click="hideMutedPosts = !hideMutedPosts"
	>
	<span
	class="menu-checkbox"
	- :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
	- />{{ $t('settings.reply_visibility_following_short') }}
	+ :class="{ 'menu-checkbox-checked': hideMutedPosts }"
	+ />{{ $t('settings.hide_all_muted_posts') }}
	</button>
	<button
	- class="button-default dropdown-item"
	- @click="replyVisibilitySelf = true"
	+ class="button-default dropdown-item dropdown-item-icon"
	+ @click="openTab('filtering')"
	>
	- <span
	- class="menu-checkbox"
	- :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
	- />{{ $t('settings.reply_visibility_self_short') }}
	+ <FAIcon icon="font" />{{ $t('settings.word_filter') }}
	+ </button>
	+ <button
	+ class="button-default dropdown-item dropdown-item-icon"
	+ @click="openTab('general')"
	+ >
	+ <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
	</button>
	- <div
	- role="separator"
	- class="dropdown-divider"
	- />
	</div>
	- <button
	- class="button-default dropdown-item"
	- @click="hideMedia = !hideMedia"
	- >
	- <span
	- class="menu-checkbox"
	- :class="{ 'menu-checkbox-checked': hideMedia }"
	- />{{ $t('settings.hide_media_previews') }}
	- </button>
	- <button
	- class="button-default dropdown-item"
	- @click="hideMutedPosts = !hideMutedPosts"
	- >
	- <span
	- class="menu-checkbox"
	- :class="{ 'menu-checkbox-checked': hideMutedPosts }"
	- />{{ $t('settings.hide_all_muted_posts') }}
	- </button>
	- <button
	- class="button-default dropdown-item dropdown-item-icon"
	- @click="openTab('filtering')"
	- >
	- <FAIcon icon="font" />{{ $t('settings.word_filter') }}
	- </button>
	- <button
	- class="button-default dropdown-item dropdown-item-icon"
	- @click="openTab('general')"
	- >
	- <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
	+ </template>
	+ <template v-slot:trigger>
	+ <button class="button-unstyled">
	+ <FAIcon icon="filter" />
	</button>
	- </div>
	- <div slot="trigger">
	- <FAIcon icon="filter" />
	- </div>
	+ </template>
	</Popover>
	</template>

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

	<style lang="scss">

	.TimelineQuickSettings {
	align-self: stretch;

	> button {
	font-size: 1.2em;
	padding-left: 0.7em;
	padding-right: 0.2em;
	line-height: 100%;
	height: 100%;
	}

	.dropdown-item {
	margin: 0;
	}
	}

	</style>
	diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
	index 22dc3432ef..4f6681b802 100644
	--- a/src/components/timeline_menu/timeline_menu.vue
	+++ b/src/components/timeline_menu/timeline_menu.vue
	@@ -1,171 +1,172 @@
	<template>
	<Popover
	trigger="click"
	class="TimelineMenu"
	:class="{ 'open': isOpen }"
	:margin="{ left: -15, right: -200 }"
	:bound-to="{ x: 'container' }"
	popover-class="timeline-menu-popover-wrap"
	@show="openMenu"
	@close="() => isOpen = false"
	>
	- <div
	- slot="content"
	- class="timeline-menu-popover panel panel-default"
	- >
	- <TimelineMenuContent />
	- </div>
	- <div
	- slot="trigger"
	- class="title timeline-menu-title"
	- >
	- <span class="timeline-title">{{ timelineName() }}</span>
	- <span>
	- <FAIcon
	- size="sm"
	- icon="chevron-down"
	+ <template v-slot:content>
	+ <div
	+ slot="content"
	+ class="timeline-menu-popover popover-default"
	+ >
	+ <TimelineMenuContent />
	+ </div>
	+ </template>
	+ <template v-slot:trigger>
	+ <button class="button-unstyled title timeline-menu-title">
	+ <span class="timeline-title">{{ timelineName() }}</span>
	+ <span>
	+ <FAIcon
	+ size="sm"
	+ icon="chevron-down"
	+ />
	+ </span>
	+ <span
	+ class="click-blocker"
	+ @click="blockOpen"
	/>
	- </span>
	- <span
	- class="click-blocker"
	- @click="blockOpen"
	- />
	- </div>
	+ </button>
	+ </template>
	</Popover>
	</template>

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

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

	.TimelineMenu {
	flex-shrink: 1;
	margin-right: auto;
	min-width: 0;
	width: 24rem;

	.timeline-menu-popover-wrap {
	overflow: hidden;
	// Match panel heading padding to line up menu with bottom of heading
	margin-top: 0.6rem;
	padding: 0 15px 15px 15px;
	}

	.timeline-menu-popover {
	width: 24rem;
	max-width: 100vw;
	margin: 0;
	font-size: 1rem;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	transform: translateY(-100%);
	transition: transform 100ms;
	}

	.panel::after {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	}

	&.open .timeline-menu-popover {
	transform: translateY(0);
	}

	.timeline-menu-title {
	margin: 0;
	cursor: pointer;
	user-select: none;
	width: 100%;
	display: flex;

	.timeline-menu-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	svg {
	margin-left: 0.6em;
	transition: transform 100ms;
	}

	.click-blocker {
	cursor: default;
	flex-grow: 1;
	}
	}

	&.open .timeline-menu-title svg {
	color: $fallback--text;
	color: var(--panelText, $fallback--text);
	transform: rotate(180deg);
	}

	.panel {
	box-shadow: var(--popoverShadow);
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	li {
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	padding: 0;

	&:last-child a {
	border-bottom-right-radius: $fallback--panelRadius;
	border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
	border-bottom-left-radius: $fallback--panelRadius;
	border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&:last-child {
	border: none;
	}
	}

	a {
	display: block;
	padding: 0.6em 0.65em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--link;
	color: var(--selectedMenuText, $fallback--link);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);
	}

	&.router-link-active {
	font-weight: bolder;
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedMenuText, $fallback--text);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);

	&:hover {
	text-decoration: underline;
	}
	}

	svg {
	margin-right: 0.4em;
	margin-left: -0.2em;
	}
	}
	}

	</style>
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 4b7ee7d5a2..78b0813f08 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,613 +1,613 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div class="panel-heading">
	<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">
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="user.name_html"
	:title="user.name"
	class="user-name"
	v-html="user.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<div
	v-else
	:title="user.name"
	class="user-name"
	>
	{{ user.name }}
	</div>
	- <a
	+ <button
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	- class="external-link-button"
	+ class="button-unstyled external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	- </a>
	+ </button>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	</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="!!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"
	>
	<label
	for="theme_tab"
	class="userHighlightSel select"
	>
	<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>
	<FAIcon
	class="select-down-icon"
	icon="chevron-down"
	/>
	</label>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton :relationship="relationship" />
	<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"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn button-default btn-block"
	@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>
	<!-- eslint-disable vue/no-v-html -->
	<p
	v-if="!hideBio && user.description_html"
	class="user-card-bio"
	@click.prevent="linkClicked"
	v-html="user.description_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<p
	v-else-if="!hideBio"
	class="user-card-bio"
	>
	{{ user.description }}
	</p>
	</div>
	</div>
	</template>

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

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

	.user-card {
	position: relative;

	&:hover .Avatar {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-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);
	// Autoprefixed 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);
	background-color: var(--profileBg);

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

	p {
	margin-bottom: 0;
	}

	&-bio {
	text-align: center;

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

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

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

	// 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;
	align-items: flex-start;
	max-height: 56px;

	.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 {
	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;

	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;
	}
	}

	.bottom-line {
	display: flex;
	font-weight: light;
	font-size: 15px;

	.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;
	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 svg {
	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 {
	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;
	}
	}
	}

	.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;
	}
	}
	</style>
	diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
	index d0aa315e1d..f4b93c9a95 100644
	--- a/src/components/user_list_popover/user_list_popover.vue
	+++ b/src/components/user_list_popover/user_list_popover.vue
	@@ -1,75 +1,74 @@
	<template>
	<Popover
	trigger="hover"
	placement="top"
	:offset="{ y: 5 }"
	>
	- <template slot="trigger">
	+ <template v-slot:trigger>
	<slot />
	</template>
	- <div
	- slot="content"
	- class="user-list-popover"
	- >
	- <div v-if="users.length">
	- <div
	- v-for="(user) in usersCapped"
	- :key="user.id"
	- class="user-list-row"
	- >
	- <UserAvatar
	- :user="user"
	- class="avatar-small"
	- :compact="true"
	- />
	- <div class="user-list-names">
	- <!-- eslint-disable vue/no-v-html -->
	- <span v-html="user.name_html" />
	- <!-- eslint-enable vue/no-v-html -->
	- <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
	+ <template v-slot:content>
	+ <div class="user-list-popover">
	+ <template v-if="users.length">
	+ <div
	+ v-for="(user) in usersCapped"
	+ :key="user.id"
	+ class="user-list-row"
	+ >
	+ <UserAvatar
	+ :user="user"
	+ class="avatar-small"
	+ :compact="true"
	+ />
	+ <div class="user-list-names">
	+ <!-- eslint-disable vue/no-v-html -->
	+ <span v-html="user.name_html" />
	+ <!-- eslint-enable vue/no-v-html -->
	+ <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
	+ </div>
	</div>
	- </div>
	- </div>
	- <div v-else>
	- <FAIcon
	- icon="circle-notch"
	- spin
	- size="3x"
	- />
	+ </template>
	+ <template v-else>
	+ <FAIcon
	+ icon="circle-notch"
	+ spin
	+ size="3x"
	+ />
	+ </template>
	</div>
	- </div>
	+ </template>
	</Popover>
	</template>

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

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

	.user-list-popover {
	padding: 0.5em;

	.user-list-row {
	padding: 0.25em;
	display: flex;
	flex-direction: row;

	.user-list-names {
	display: flex;
	flex-direction: column;
	margin-left: 0.5em;
	min-width: 5em;

	img {
	width: 1em;
	height: 1em;
	}
	}

	.user-list-screen-name {
	font-size: 9px;
	}
	}
	}

	</style>
	diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
	index 745e795dec..aef897ae26 100644
	--- a/src/components/user_profile/user_profile.vue
	+++ b/src/components/user_profile/user_profile.vue
	@@ -1,224 +1,218 @@
	<template>
	<div>
	<div
	v-if="user"
	class="user-profile panel panel-default"
	>
	<UserCard
	:user-id="userId"
	:switcher="true"
	:selected="timeline.viewing"
	:allow-zooming-avatar="true"
	rounded="top"
	/>
	<div
	v-if="user.fields_html && user.fields_html.length > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(field, index) in user.fields_html"
	:key="index"
	class="user-profile-field"
	>
	<!-- eslint-disable vue/no-v-html -->
	<dt
	:title="user.fields_text[index].name"
	class="user-profile-field-name"
	@click.prevent="linkClicked"
	v-html="field.name"
	/>
	<dd
	:title="user.fields_text[index].value"
	class="user-profile-field-value"
	@click.prevent="linkClicked"
	v-html="field.value"
	/>
	<!-- eslint-enable vue/no-v-html -->
	</dl>
	</div>
	<tab-switcher
	:active-tab="tab"
	:render-only-focused="true"
	:on-switch="onTabSwitch"
	>
	<Timeline
	key="statuses"
	:label="$t('user_card.statuses')"
	:count="user.statuses_count"
	:embedded="true"
	:title="$t('user_profile.timeline_title')"
	:timeline="timeline"
	timeline-name="user"
	:user-id="userId"
	:pinned-status-ids="user.pinnedStatusIds"
	:in-profile="true"
	/>
	<div
	v-if="followsTabVisible"
	key="followees"
	:label="$t('user_card.followees')"
	:disabled="!user.friends_count"
	>
	<FriendList :user-id="userId">
	- <template
	- slot="item"
	- slot-scope="{item}"
	- >
	+ <template v-slot:item="{item}">
	<FollowCard :user="item" />
	</template>
	</FriendList>
	</div>
	<div
	v-if="followersTabVisible"
	key="followers"
	:label="$t('user_card.followers')"
	:disabled="!user.followers_count"
	>
	<FollowerList :user-id="userId">
	- <template
	- slot="item"
	- slot-scope="{item}"
	- >
	+ <template v-slot:item="{item}">
	<FollowCard
	:user="item"
	:no-follows-you="isUs"
	/>
	</template>
	</FollowerList>
	</div>
	<Timeline
	key="media"
	:label="$t('user_card.media')"
	:disabled="!media.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.media')"
	timeline-name="media"
	:timeline="media"
	:user-id="userId"
	:in-profile="true"
	/>
	<Timeline
	v-if="isUs"
	key="favorites"
	:label="$t('user_card.favorites')"
	:disabled="!favorites.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.favorites')"
	timeline-name="favorites"
	:timeline="favorites"
	:in-profile="true"
	/>
	</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>
	<FAIcon
	v-else
	spin
	icon="circle-notch"
	/>
	</div>
	</div>
	</div>
	</template>

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

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

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

	.user-profile-fields {
	margin: 0 0.5em;

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

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

	.user-profile-field {
	display: flex;
	margin: 0.25em;
	border: 1px solid var(--border, $fallback--border);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);

	.user-profile-field-name {
	flex: 0 1 30%;
	font-weight: 500;
	text-align: right;
	color: var(--lightText);
	min-width: 120px;
	border-right: 1px solid var(--border, $fallback--border);
	}

	.user-profile-field-value {
	flex: 1 1 70%;
	color: var(--text);
	margin: 0 0 0 0.25em;
	}

	.user-profile-field-name, .user-profile-field-value {
	line-height: 18px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0.5em 1.5em;
	box-sizing: border-box;
	}
	}
	}

	.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/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
	index a71c02c193..1f67a5cc6e 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.vue
	+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
	@@ -1,184 +1,181 @@
	<template>
	<Modal
	v-if="isOpen"
	@backdropClicked="closeModal"
	>
	<div class="user-reporting-panel panel">
	<div class="panel-heading">
	<div class="title">
	{{ $t('user_reporting.title', [user.screen_name_ui]) }}
	</div>
	</div>
	<div class="panel-body">
	<div class="user-reporting-panel-left">
	<div>
	<p>{{ $t('user_reporting.add_comment_description') }}</p>
	<textarea
	v-model="comment"
	class="form-control"
	:placeholder="$t('user_reporting.additional_comments')"
	rows="1"
	@input="resize"
	/>
	</div>
	<div v-if="!user.is_local">
	<p>{{ $t('user_reporting.forward_description') }}</p>
	<Checkbox v-model="forward">
	{{ $t('user_reporting.forward_to', [remoteInstance]) }}
	</Checkbox>
	</div>
	<div>
	<button
	class="btn button-default"
	:disabled="processing"
	@click="reportUser"
	>
	{{ $t('user_reporting.submit') }}
	</button>
	<div
	v-if="error"
	class="alert error"
	>
	{{ $t('user_reporting.generic_error') }}
	</div>
	</div>
	</div>
	<div class="user-reporting-panel-right">
	<List :items="statuses">
	- <template
	- slot="item"
	- slot-scope="{item}"
	- >
	+ <template v-slot:item="{item}">
	<div class="status-fadein user-reporting-panel-sitem">
	<Status
	:in-conversation="false"
	:focused="false"
	:statusoid="item"
	/>
	<Checkbox
	:checked="isChecked(item.id)"
	@change="checked => toggleStatus(checked, item.id)"
	/>
	</div>
	</template>
	</List>
	</div>
	</div>
	</div>
	</Modal>
	</template>

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

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

	.user-reporting-panel {
	width: 90vw;
	max-width: 700px;
	min-height: 20vh;
	max-height: 80vh;

	.panel-heading {
	.title {
	text-align: center;
	// TODO: Consider making these as default of panel
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	.panel-body {
	display: flex;
	flex-direction: column-reverse;
	border-top: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	overflow: hidden;
	}

	&-left {
	padding: 1.1em 0.7em 0.7em;
	line-height: 1.4em;
	box-sizing: border-box;

	> div {
	margin-bottom: 1em;

	&:last-child {
	margin-bottom: 0;
	}
	}

	p {
	margin-top: 0;
	}

	textarea.form-control {
	line-height: 16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 44px;
	width: 100%;
	}

	.btn {
	min-width: 10em;
	padding: 0 2em;
	}

	.alert {
	margin: 1em 0 0 0;
	line-height: 1.3em;
	}
	}

	&-right {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	}

	&-sitem {
	display: flex;
	justify-content: space-between;

	/* TODO cleanup this */
	> .Status {
	flex: 1;
	}

	> .checkbox {
	margin: 0.75em;
	}
	}

	@media all and (min-width: 801px) {
	.panel-body {
	flex-direction: row;
	}

	&-left {
	width: 50%;
	max-width: 320px;
	border-right: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	padding: 1.1em;

	> div {
	margin-bottom: 2em;
	}
	}

	&-right {
	width: 50%;
	flex: 1 1 auto;
	margin-bottom: 12px;
	}
	}
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 2:12 PM (15 h, 30 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1800193
Default Alt Text: (91 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions