No OneTemporary
Actions

Size

73 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
	index be7377e955..63e0cebad2 100644
	--- a/src/components/attachment/attachment.vue
	+++ b/src/components/attachment/attachment.vue
	@@ -1,302 +1,306 @@
	<template>
	<div
	v-if="usePlaceholder"
	:class="{ 'fullwidth': fullwidth }"
	@click="openModal"
	>
	<a
	v-if="type !== 'html'"
	class="placeholder"
	target="_blank"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	>
	<span :class="placeholderIconClass" />
	<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
	</a>
	</div>
	<div
	v-else
	v-show="!isEmpty"
	class="attachment"
	:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
	>
	<a
	v-if="hidden"
	class="image-attachment"
	:href="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	@click.prevent="toggleHidden"
	>
	<img
	:key="nsfwImage"
	class="nsfw"
	:src="nsfwImage"
	:class="{'small': isSmall}"
	>
	<i
	v-if="type === 'video'"
	class="play-icon icon-play-circled"
	/>
	</a>
	<div
	v-if="nsfw && hideNsfwLocal && !hidden"
	class="hider"
	>
	<a
	href="#"
	@click.prevent="toggleHidden"
	>Hide</a>
	</div>

	<a
	v-if="type === 'image' && (!hidden \|\| preloadImage)"
	class="image-attachment"
	:class="{'hidden': hidden && preloadImage }"
	:href="attachment.url"
	target="_blank"
	@click="openModal"
	>
	<StillImage
	+ class="image"
	:referrerpolicy="referrerpolicy"
	:mimetype="attachment.mimetype"
	:src="attachment.large_thumb_url \|\| attachment.url"
	:image-load-handler="onImageLoad"
	:alt="attachment.description"
	/>
	</a>

	<a
	v-if="type === 'video' && !hidden"
	class="video-container"
	:class="{'small': isSmall}"
	:href="allowPlay ? undefined : attachment.url"
	@click="openModal"
	>
	<VideoAttachment
	class="video"
	:attachment="attachment"
	:controls="allowPlay"
	/>
	<i
	v-if="!allowPlay"
	class="play-icon icon-play-circled"
	/>
	</a>

	<audio
	v-if="type === 'audio'"
	:src="attachment.url"
	:alt="attachment.description"
	:title="attachment.description"
	controls
	/>

	<div
	v-if="type === 'html' && attachment.oembed"
	class="oembed"
	@click.prevent="linkClicked"
	>
	<div
	v-if="attachment.thumb_url"
	class="image"
	>
	<img :src="attachment.thumb_url">
	</div>
	<div class="text">
	<!-- eslint-disable vue/no-v-html -->
	<h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
	<div v-html="attachment.oembed.oembedHTML" />
	<!-- eslint-enable vue/no-v-html -->
	</div>
	</div>
	</div>
	</template>

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

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

	.attachments {
	display: flex;
	flex-wrap: wrap;

	.non-gallery {
	max-width: 100%;
	}

	.placeholder {
	display: inline-block;
	padding: 0.3em 1em 0.3em 0;
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 100%;
	}

	.nsfw-placeholder {
	cursor: pointer;

	&.loading {
	cursor: progress;
	}
	}

	.attachment {
	position: relative;
	margin-top: 0.5em;
	align-self: flex-start;
	line-height: 0;

	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	overflow: hidden;
	}

	.non-gallery.attachment {
	&.video {
	flex: 1 0 40%;
	}
	.nsfw {
	height: 260px;
	}
	.small {
	height: 120px;
	flex-grow: 0;
	}
	.video {
	height: 260px;
	display: flex;
	}
	video {
	max-height: 100%;
	object-fit: contain;
	}
	}

	.fullwidth {
	flex-basis: 100%;
	}
	// fixes small gap below video
	&.video {
	line-height: 0;
	}

	.video-container {
	display: flex;
	max-height: 100%;
	}

	.video {
	width: 100%;
	height: 100%;
	}

	.play-icon {
	position: absolute;
	font-size: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
	}

	.play-icon::before {
	margin: 0;
	}

	&.html {
	flex-basis: 90%;
	width: 100%;
	display: flex;
	}

	.hider {
	position: absolute;
	right: 0;
	white-space: nowrap;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	font-weight: bold;
	z-index: 4;
	line-height: 1;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	}

	video {
	z-index: 0;
	}

	audio {
	width: 100%;
	}

	img.media-upload {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}

	.oembed {
	line-height: 1.2em;
	flex: 1 0 100%;
	width: 100%;
	margin-right: 15px;
	display: flex;

	img {
	width: 100%;
	}

	.image {
	flex: 1;
	img {
	border: 0px;
	border-radius: 5px;
	height: 100%;
	object-fit: cover;
	}
	}

	.text {
	flex: 2;
	margin: 8px;
	word-break: break-all;
	h1 {
	font-size: 14px;
	margin: 0px;
	}
	}
	}

	.image-attachment {
	- width: 100%;
	- height: 100%;
	+ &,
	+ & .image {
	+ width: 100%;
	+ height: 100%;
	+ }

	&.hidden {
	display: none;
	}

	.nsfw {
	object-fit: cover;
	width: 100%;
	height: 100%;
	}

	img {
	image-orientation: from-image; // NOTE: only FF supports this
	}
	}
	}
	</style>
	diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
	index 10ba45f26c..9e97b28ea9 100644
	--- a/src/components/chat_list_item/chat_list_item.scss
	+++ b/src/components/chat_list_item/chat_list_item.scss
	@@ -1,94 +1,94 @@
	.chat-list-item {
	display: flex;
	flex-direction: row;
	padding: 0.75em;
	height: 5em;
	overflow: hidden;
	box-sizing: border-box;
	cursor: pointer;

	:focus {
	outline: none;
	}

	&:hover {
	background-color: var(--selectedPost, $fallback--lightBg);
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
	}

	.chat-list-item-left {
	margin-right: 1em;
	}

	.chat-list-item-center {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	word-wrap: break-word;
	}

	.heading {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
	line-height: 1em;
	}

	.heading-right {
	white-space: nowrap;
	}

	.name-and-account-name {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 1;
	line-height: 1.4em;
	}

	.chat-preview {
	display: inline-flex;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0.35em 0;
	color: $fallback--text;
	color: var(--faint, $fallback--text);
	width: 100%;
	}

	a {
	color: var(--faintLink, $fallback--link);
	text-decoration: none;
	pointer-events: none;
	}

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

	- .avatar.still-image {
	+ .Avatar {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}

	.StatusContent {
	img.emoji {
	width: 1.4em;
	height: 1.4em;
	}
	}

	.time-wrapper {
	line-height: 1.4em;
	}

	.single-line {
	padding-right: 1em;
	}
	}
	diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
	index c375b10b48..b16ed39d74 100644
	--- a/src/components/chat_title/chat_title.vue
	+++ b/src/components/chat_title/chat_title.vue
	@@ -1,67 +1,67 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div
	class="chat-title"
	:title="title"
	>
	<router-link
	v-if="withAvatar && user"
	:to="getUserProfileLink(user)"
	>
	<UserAvatar
	:user="user"
	width="23px"
	height="23px"
	/>
	</router-link>
	<span
	class="username"
	v-html="htmlTitle"
	/>
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

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

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

	.chat-title {
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	align-items: center;

	.username {
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;

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

	- .still-image.avatar {
	+ .Avatar {
	width: 23px;
	height: 23px;
	margin-right: 0.5em;

	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);

	&.animated::before {
	display: none;
	}
	}
	}
	</style>
	diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
	new file mode 100644
	index 0000000000..d0e63d814f
	--- /dev/null
	+++ b/src/components/notification/notification.scss
	@@ -0,0 +1,52 @@
	+// TODO Copypaste from Status, should unify it somehow
	+.Notification {
	+ &.-muted {
	+ padding: 0.25em 0.6em;
	+ height: 1.2em;
	+ line-height: 1.2em;
	+ text-overflow: ellipsis;
	+ overflow: hidden;
	+ display: flex;
	+ flex-wrap: nowrap;
	+
	+ & .status-username,
	+ & .mute-thread,
	+ & .mute-words {
	+ word-wrap: normal;
	+ word-break: normal;
	+ white-space: nowrap;
	+ }
	+
	+ & .status-username,
	+ & .mute-words {
	+ text-overflow: ellipsis;
	+ overflow: hidden;
	+ }
	+
	+ .status-username {
	+ font-weight: normal;
	+ flex: 0 1 auto;
	+ margin-right: 0.2em;
	+ font-size: smaller;
	+ }
	+
	+ .mute-thread {
	+ flex: 0 0 auto;
	+ }
	+
	+ .mute-words {
	+ flex: 1 0 5em;
	+ margin-left: 0.2em;
	+
	+ &::before {
	+ content: ' ';
	+ }
	+ }
	+
	+ .unmute {
	+ flex: 0 0 auto;
	+ margin-left: auto;
	+ display: block;
	+ }
	+ }
	+}
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index 044ac87154..7fac384079 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,170 +1,171 @@
	<template>
	<status
	v-if="notification.type === 'mention'"
	:compact="true"
	:statusoid="notification.status"
	/>
	<div v-else>
	<div
	v-if="needMute && !unmuted"
	- class="container muted"
	+ class="Notification container -muted"
	>
	<small>
	<router-link :to="userProfileLink">
	{{ notification.from_profile.screen_name }}
	</router-link>
	</small>
	<a
	href="#"
	class="unmute"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</div>
	<div
	v-else
	class="non-mention"
	:class="[userClass, { highlighted: userStyle }]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="notification.from_profile.statusnet_profile_url"
	@click.stop.prevent.capture="toggleUserExpanded"
	>
	<UserAvatar
	:compact="true"
	:better-shadow="betterShadow"
	:user="notification.from_profile"
	/>
	</a>
	<div class="notification-right">
	<UserCard
	v-if="userExpanded"
	:user-id="getUser(notification).id"
	:rounded="true"
	:bordered="true"
	/>
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi
	v-if="!!notification.from_profile.name_html"
	class="username"
	:title="'@'+notification.from_profile.screen_name"
	v-html="notification.from_profile.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name"
	>{{ notification.from_profile.name }}</span>
	<span v-if="notification.type === 'like'">
	<i class="fa icon-star lit" />
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<i
	class="fa icon-retweet lit"
	:title="$t('tool_tip.repeat')"
	/>
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<i class="fa icon-user-plus lit" />
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	<i class="fa icon-user lit" />
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<i class="fa icon-arrow-curved lit" />
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	<i18n path="notifications.reacted_with">
	<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
	</i18n>
	</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	class="faint-link"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<a
	v-if="needMute"
	href="#"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<router-link
	:to="userProfileLink"
	class="follow-name"
	>
	@{{ notification.from_profile.screen_name }}
	</router-link>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<i
	class="icon-ok button-icon follow-request-accept"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	/>
	<i
	class="icon-cancel button-icon follow-request-reject"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	/>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<router-link :to="targetUserProfileLink">
	@{{ notification.target.screen_name }}
	</router-link>
	</div>
	<template v-else>
	<status-content
	class="faint"
	:status="notification.action"
	/>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./notification.js"></script>
	+<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index 7ee9e74847..520c03ea1e 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,653 +1,654 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<div
	v-show="showDropIcon !== 'hide'"
	:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	class="drop-indicator"
	:class="[uploadFileLimitReached ? 'icon-block' : 'icon-upload']"
	@dragleave="fileDragStop"
	@drop.stop="fileDrop"
	/>
	<div class="form-group">
	<i18n
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	path="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	>
	<router-link :to="{ name: 'user-settings' }">
	{{ $t('post_status.account_not_locked_warning_link') }}
	</router-link>
	</i18n>
	<p
	v-if="!hideScopeNotice && newStatus.visibility === 'public'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice"
	>
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<div
	v-if="!disablePreview"
	class="preview-heading faint"
	>
	<a
	class="preview-toggle faint"
	@click.stop.prevent="togglePreview"
	>
	{{ $t('post_status.preview') }}
	<i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
	</a>
	<i
	v-show="previewLoading"
	class="icon-spin3 animate-spin"
	/>
	</div>
	<div
	v-if="showPreview"
	class="preview-container"
	>
	<div
	v-if="!preview"
	class="preview-status"
	>
	{{ $t('general.loading') }}
	</div>
	<div
	v-else-if="preview.error"
	class="preview-status preview-error"
	>
	{{ preview.error }}
	</div>
	<StatusContent
	v-else
	:status="preview"
	class="preview-status"
	/>
	</div>
	<EmojiInput
	v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="form-control"
	>
	<input
	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	:disabled="posting"
	class="form-post-subject"
	>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="form-control main-input"
	enable-emoji-picker
	hide-emoji-button
	:newline-on-ctrl-enter="submitOnEnter"
	enable-sticker-picker
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	@shown="handleEmojiInputShow"
	>
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="placeholder \|\| $t('post_status.default')"
	rows="1"
	+ cols="1"
	:disabled="posting"
	class="form-post-body"
	:class="{ 'scrollable-form': !!maxHeight }"
	@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
	@keydown.meta.enter="postStatus($event, newStatus)"
	@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</EmojiInput>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<label
	for="post-content-type"
	class="select"
	>
	<select
	id="post-content-type"
	v-model="newStatus.contentType"
	class="form-control"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	<div
	v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
	class="text-format"
	>
	<span class="only-format">
	{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
	</span>
	</div>
	</div>
	</div>
	<poll-form
	v-if="pollsAvailable"
	ref="pollForm"
	:visible="pollFormVisible"
	@update-poll="setPoll"
	/>
	<div
	ref="bottom"
	class="form-bottom"
	>
	<div class="form-bottom-left">
	<media-upload
	ref="mediaUpload"
	class="media-upload-icon"
	:drop-files="dropFiles"
	:disabled="uploadFileLimitReached"
	@uploading="startedUploadingFiles"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	@all-uploaded="finishedUploadingFiles"
	/>
	<div
	class="emoji-icon"
	>
	<i
	:title="$t('emoji.add_emoji')"
	class="icon-smile btn btn-default"
	@click="showEmojiPicker"
	/>
	</div>
	<div
	v-if="pollsAvailable"
	class="poll-icon"
	:class="{ selected: pollFormVisible }"
	>
	<i
	:title="$t('polls.add_poll')"
	class="icon-chart-bar btn btn-default"
	@click="togglePollForm"
	/>
	</div>
	</div>
	<button
	v-if="posting"
	disabled
	class="btn btn-default"
	>
	{{ $t('post_status.posting') }}
	</button>
	<button
	v-else-if="isOverLengthLimit"
	disabled
	class="btn btn-default"
	>
	{{ $t('general.submit') }}
	</button>
	<!-- touchstart is used to keep the OSK at the same position after a message send -->
	<button
	v-else
	:disabled="uploadingFiles \|\| disableSubmit"
	class="btn btn-default"
	@touchstart.stop.prevent="postStatus($event, newStatus)"
	@click.stop.prevent="postStatus($event, newStatus)"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	Error: {{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<div class="attachments">
	<div
	v-for="file in newStatus.files"
	:key="file.url"
	class="media-upload-wrapper"
	>
	<i
	class="fa button-icon icon-cancel"
	@click="removeMediaFile(file)"
	/>
	<attachment
	:attachment="file"
	:set-media="() => $store.dispatch('setMedia', newStatus.files)"
	size="small"
	allow-play="false"
	/>
	<input
	v-model="newStatus.mediaDescriptions[file.id]"
	type="text"
	:placeholder="$t('post_status.media_description')"
	@keydown.enter.prevent=""
	>
	</div>
	</div>
	<div
	v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
	class="upload_settings"
	>
	<Checkbox v-model="newStatus.nsfw">
	{{ $t('post_status.attachments_sensitive') }}
	</Checkbox>
	</div>
	</form>
	</div>
	</template>

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

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

	.tribute-container {
	ul {
	padding: 0px;
	li {
	display: flex;
	align-items: center;
	}
	}
	img {
	padding: 3px;
	width: 16px;
	height: 16px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}
	}

	.post-status-form {
	position: relative;

	.form-bottom {
	display: flex;
	justify-content: space-between;
	padding: 0.5em;
	height: 32px;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	.form-bottom-left {
	display: flex;
	flex: 1;
	padding-right: 7px;
	margin-right: 7px;
	max-width: 10em;
	}

	.preview-heading {
	padding-left: 0.5em;
	display: flex;
	width: 100%;

	.icon-spin3 {
	margin-left: auto;
	}
	}

	.preview-toggle {
	display: flex;
	cursor: pointer;
	user-select: none;

	&:hover {
	text-decoration: underline;
	}
	i {
	margin-left: 0.2em;
	font-size: 0.8em;
	transform: rotate(90deg);
	}
	}

	.preview-container {
	margin-bottom: 1em;
	}

	.preview-error {
	font-style: italic;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.preview-status {
	border: 1px solid $fallback--border;
	border: 1px solid var(--border, $fallback--border);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	padding: 0.5em;
	margin: 0;
	line-height: 1.4em;
	}

	.text-format {
	.only-format {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}
	}

	.visibility-tray {
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
	}

	.media-upload-icon, .poll-icon, .emoji-icon {
	font-size: 26px;
	flex: 1;

	&.selected, &:hover {
	// needs to be specific to override icon default color
	i, label {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	&.disabled {
	i {
	cursor: not-allowed;
	color: $fallback--icon;
	color: var(--btnDisabledText, $fallback--icon);

	&:hover {
	color: $fallback--icon;
	color: var(--btnDisabledText, $fallback--icon);
	}
	}
	}
	}

	// Order is not necessary but a good indicator
	.media-upload-icon {
	order: 1;
	text-align: left;
	}

	.emoji-icon {
	order: 2;
	text-align: center;
	}

	.poll-icon {
	order: 3;
	text-align: right;
	}

	.icon-chart-bar {
	cursor: pointer;
	}

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	margin-right: .2em;
	margin-bottom: .5em;
	width: 18em;

	.icon-cancel {
	display: inline-block;
	position: static;
	margin: 0;
	padding-bottom: 0;
	margin-left: $fallback--attachmentRadius;
	margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	}

	img, video {
	object-fit: contain;
	max-height: 10em;
	}

	.video {
	max-height: 10em;
	}

	input {
	flex: 1;
	width: 100%;
	}
	}

	.status-input-wrapper {
	display: flex;
	position: relative;
	width: 100%;
	flex-direction: column;
	}

	.media-upload-wrapper .attachments {
	padding: 0 0.5em;

	.attachment {
	margin: 0;
	padding: 0;
	position: relative;
	}

	i {
	position: absolute;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	font-weight: bold;
	}
	}

	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	form {
	display: flex;
	flex-direction: column;
	margin: 0.6em;
	position: relative;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.25em 0.5em 0.5em;
	line-height:24px;
	}

	form textarea.form-cw {
	line-height:16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 1px;
	}

	.form-post-body {
	height: 16px; // Only affects the empty-height
	line-height: 16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	padding-bottom: 1.75em;
	min-height: 1px;
	box-sizing: content-box;

	&.scrollable-form {
	overflow-y: auto;
	}
	}

	.main-input {
	position: relative;
	}

	.character-counter {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	margin: 0 0.5em;

	&.error {
	color: $fallback--cRed;
	color: var(--cRed, $fallback--cRed);
	}
	}

	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	.icon-cancel {
	cursor: pointer;
	z-index: 4;
	}

	@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 0.6; }
	}

	@keyframes fade-out {
	from { opacity: 0.6; }
	to { opacity: 0; }
	}

	.drop-indicator {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	font-size: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	border: 2px dashed $fallback--text;
	border: 2px dashed var(--text, $fallback--text);
	}
	}

	// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
	img.media-upload, .media-upload-container > video {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}
	</style>
	diff --git a/src/components/status/status.scss b/src/components/status/status.scss
	index 898e914f76..8d292d3f7a 100644
	--- a/src/components/status/status.scss
	+++ b/src/components/status/status.scss
	@@ -1,400 +1,414 @@

	@import '../../_variables.scss';

	$status-margin: 0.75em;

	.Status {
	min-width: 0;

	- &:hover .avatar {
	+ &:hover {
	--still-image-img: visible;
	--still-image-canvas: hidden;
	}

	&.-focused {
	background-color: $fallback--lightBg;
	background-color: var(--selectedPost, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedPostText, $fallback--text);

	--lightText: var(--selectedPostLightText, $fallback--light);
	--faint: var(--selectedPostFaintText, $fallback--faint);
	--faintLink: var(--selectedPostFaintLink, $fallback--faint);
	--postLink: var(--selectedPostPostLink, $fallback--faint);
	--postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
	--icon: var(--selectedPostIcon, $fallback--icon);
	}

	.status-container {
	display: flex;
	padding: $status-margin;

	&.-repeat {
	padding-top: 0;
	}
	}

	.pin {
	padding: $status-margin $status-margin 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}

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

	.right-side {
	flex: 1;
	min-width: 0;
	}

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

	.status-username {
	white-space: nowrap;
	font-size: 14px;
	overflow: hidden;
	max-width: 85%;
	font-weight: bold;
	flex-shrink: 1;
	margin-right: 0.4em;
	text-overflow: ellipsis;

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

	.status-favicon {
	height: 18px;
	width: 18px;
	margin-right: 0.4em;
	}

	.status-heading {
	margin-bottom: 0.5em;
	}

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

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

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

	.heading-left {
	display: flex;
	min-width: 0;
	}

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

	.timeago {
	margin-right: 0.2em;
	}

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

	.reply-to-and-accountname {
	display: flex;
	height: 18px;
	margin-right: 0.5em;
	max-width: 100%;

	+ .reply-to-link {
	+ white-space: nowrap;
	+ word-break: break-word;
	+ text-overflow: ellipsis;
	+ overflow-x: hidden;
	+ }
	+
	.icon-reply {
	// mirror the icon
	transform: scaleX(-1);
	}
	}

	& .reply-to-popover,
	& .reply-to-no-popover {
	min-width: 0;
	margin-right: 0.4em;
	+ flex-shrink: 0;
	}

	.reply-to-popover {
	- &:hover {
	+ .reply-to:hover::before {
	+ content: '';
	+ display: block;
	+ position: absolute;
	+ bottom: 0;
	+ width: 100%;
	border-bottom: 1px solid var(--faint);
	+ pointer-events: none;
	}

	.faint-link:hover {
	// override default
	text-decoration: none;
	}

	&.-strikethrough {
	- position: relative;
	-
	- &::after {
	+ .reply-to::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	border-bottom: 1px solid var(--faint);
	+ pointer-events: none;
	}
	}
	}

	.reply-to {
	display: flex;
	+ position: relative;
	}

	.reply-to-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: 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;
	}

	.repeat-info {
	padding: 0.4em $status-margin;
	line-height: 22px;

	.right-side {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	}

	i {
	padding: 0 0.2em;
	}
	}

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

	.repeater-name {
	text-overflow: ellipsis;
	margin-right: 0;

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

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

	@keyframes fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

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

	> * {
	max-width: 4em;
	flex: 1;
	}
	}

	.button-reply {
	&:not(.-disabled) {
	cursor: pointer;
	}

	&:not(.-disabled):hover,
	&.-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}
	}

	.muted {
	padding: 0.25em 0.6em;
	height: 1.2em;
	line-height: 1.2em;
	text-overflow: ellipsis;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;

	& .status-username,
	& .mute-thread,
	& .mute-words {
	word-wrap: normal;
	word-break: normal;
	white-space: nowrap;
	}

	& .status-username,
	& .mute-words {
	text-overflow: ellipsis;
	overflow: hidden;
	}

	.status-username {
	font-weight: normal;
	flex: 0 1 auto;
	margin-right: 0.2em;
	font-size: smaller;
	}

	.mute-thread {
	flex: 0 0 auto;
	}

	.mute-words {
	flex: 1 0 5em;
	margin-left: 0.2em;

	&::before {
	content: ' ';
	}
	}

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

	.reply-form {
	padding-top: 0;
	padding-bottom: 0;
	}

	.reply-body {
	flex: 1;
	}

	.favs-repeated-users {
	margin-top: $status-margin;
	}

	.stats {
	width: 100%;
	display: flex;
	line-height: 1em;
	}

	.avatar-row {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;

	&::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	left: 0;
	background-color: var(--faint, $fallback--faint);
	}
	}

	.stat-count {
	margin-right: $status-margin;
	user-select: none;

	.stat-title {
	color: var(--faint, $fallback--faint);
	font-size: 12px;
	text-transform: uppercase;
	position: relative;
	}

	.stat-number {
	font-weight: bolder;
	font-size: 16px;
	line-height: 1em;
	}

	&:hover .stat-title {
	text-decoration: underline;
	}
	}

	@media all and (max-width: 800px) {
	.repeater-avatar {
	margin-left: 20px;
	}

	.avatar:not(.repeater-avatar) {
	width: 40px;
	height: 40px;

	// TODO define those other way somehow?
	// stylelint-disable rscss/class-format
	&.avatar-compact {
	width: 32px;
	height: 32px;
	}
	}
	}
	}
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 27af434061..282ad37dd6 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,378 +1,379 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="!hideStatus"
	class="Status"
	:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-csontainer muted">
	<small class="status-username">
	<i
	v-if="muted && retweet"
	class="button-icon icon-retweet"
	/>
	<router-link :to="userProfileLink">
	{{ status.user.screen_name }}
	</router-link>
	</small>
	<small
	v-if="showReasonMutedThread"
	class="mute-thread"
	>
	{{ $t('status.thread_muted') }}
	</small>
	<small
	v-if="showReasonMutedThread && muteWordHits.length > 0"
	class="mute-thread"
	>
	{{ $t('status.thread_muted_and_words') }}
	</small>
	<small
	class="mute-words"
	:title="muteWordHits.join(', ')"
	>
	{{ muteWordHits.join(', ') }}
	</small>
	<a
	href="#"
	class="unmute"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="pin"
	>
	<i class="fa icon-pin faint" />
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<span
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	v-html="retweeterHtml"
	/>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</span>
	<i
	class="fa icon-retweet retweeted"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<router-link
	:to="userProfileLink"
	@click.stop.prevent.capture.native="toggleUserExpanded"
	>
	<UserAvatar
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</router-link>
	</div>
	<div class="right-side">
	<UserCard
	v-if="userExpanded"
	:user-id="status.user.id"
	:rounded="true"
	:bordered="true"
	class="usercard"
	/>
	<div
	v-if="!noHeading"
	class="status-heading"
	>
	<div class="heading-name-row">
	<div class="heading-left">
	<h4
	v-if="status.user.name_html"
	class="status-username"
	:title="status.user.name"
	v-html="status.user.name_html"
	/>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	:title="status.user.screen_name"
	:to="userProfileLink"
	>
	{{ status.user.screen_name }}
	</router-link>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

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

	<div class="heading-reply-row">
	<div
	v-if="isReply"
	class="reply-to-and-accountname"
	>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.parent_visible && status.in_reply_to_status_id"
	class="reply-to-popover"
	style="min-width: 0"
	:class="{ '-strikethrough': !status.parent_visible }"
	>
	<a
	class="reply-to"
	href="#"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<i class="button-icon reply-button icon-reply" />
	<span
	class="faint-link reply-to-text"
	>
	{{ $t('status.reply_to') }}
	</span>
	</a>
	</StatusPopover>
	<span
	v-else
	class="reply-to-no-popover"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	<router-link
	+ class="reply-to-link"
	:title="replyToName"
	:to="replyProfileLink"
	>
	{{ replyToName }}
	</router-link>
	<span
	v-if="replies && replies.length"
	class="faint replies-separator"
	>
	-
	</span>
	</div>
	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<span class="faint">{{ $t('status.replies_list') }}</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<a
	href="#"
	class="reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>{{ reply.name }}</a>
	</StatusPopover>
	</div>
	</div>
	</div>

	<StatusContent
	:status="status"
	:no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	/>

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

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

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions"
	>
	<div>
	<i
	v-if="loggedIn"
	class="button-icon button-reply icon-reply"
	:title="$t('tool_tip.reply')"
	:class="{'-active': replying}"
	@click.prevent="toggleReplying"
	/>
	<i
	v-else
	class="button-icon button-reply -disabled icon-reply"
	:title="$t('tool_tip.reply')"
	/>
	<span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
	</div>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	/>
	<ReactButton
	v-if="loggedIn"
	:status="status"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<PostStatusForm
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	@posted="toggleReplying"
	/>
	</div>
	</template>
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

	<script src="./status.js" ></script>
	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
	index 79a52e3877..162eb21013 100644
	--- a/src/components/status_popover/status_popover.vue
	+++ b/src/components/status_popover/status_popover.vue
	@@ -1,70 +1,71 @@
	<template>
	<Popover
	trigger="hover"
	popover-class="popover-default status-popover"
	:bound-to="{ x: 'container' }"
	@show="enter"
	>
	<template slot="trigger">
	<slot />
	</template>
	<div
	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"
	>
	<i class="icon-spin4 animate-spin" />
	</div>
	</div>
	</Popover>
	</template>

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

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

	-.status-popover {
	+/* 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/still-image/still-image.vue b/src/components/still-image/still-image.vue
	index 6fa055de69..ad82210dcb 100644
	--- a/src/components/still-image/still-image.vue
	+++ b/src/components/still-image/still-image.vue
	@@ -1,87 +1,86 @@
	<template>
	<div
	class="still-image"
	:class="{ animated: animated }"
	>
	<canvas
	v-if="animated"
	ref="canvas"
	/>
	<!-- NOTE: key is required to force to re-render img tag when src is changed -->
	<img
	ref="src"
	:key="src"
	:alt="alt"
	:title="alt"
	:src="src"
	:referrerpolicy="referrerpolicy"
	@load="onLoad"
	@error="onError"
	>
	</div>
	</template>

	<script src="./still-image.js"></script>

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

	.still-image {
	position: relative;
	line-height: 0;
	overflow: hidden;
	- width: 100%;
	- height: 100%;
	display: flex;
	align-items: center;

	canvas {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	visibility: var(--still-image-canvas, visible);
	}

	img {
	width: 100%;
	min-height: 100%;
	object-fit: contain;
	}

	&.animated {
	&::before {
	content: 'gif';
	position: absolute;
	line-height: 10px;
	font-size: 10px;
	top: 5px;
	left: 5px;
	background: rgba(127, 127, 127, 0.5);
	color: #fff;
	display: block;
	padding: 2px 4px;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	z-index: 2;
	+ visibility: var(--still-image-label-visibility, visible);
	}

	&:hover canvas {
	display: none;
	}

	&:hover::before,
	img {
	visibility: var(--still-image-img, hidden);
	}

	&:hover img {
	visibility: visible;
	}
	}
	}
	</style>
	diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
	index 3545b8017f..e4e4127c19 100644
	--- a/src/components/user_avatar/user_avatar.vue
	+++ b/src/components/user_avatar/user_avatar.vue
	@@ -1,44 +1,46 @@
	<template>
	<StillImage
	- class="avatar"
	+ class="Avatar"
	:alt="user.screen_name"
	:title="user.screen_name"
	:src="imgSrc(user.profile_image_url_original)"
	:class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
	:image-load-error="imageLoadError"
	/>
	</template>

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

	-.avatar.still-image {
	+.Avatar {
	+ --still-image-label-visibility: hidden;
	+
	width: 48px;
	height: 48px;
	box-shadow: var(--avatarStatusShadow);
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);

	img {
	width: 100%;
	height: 100%;
	}

	&.better-shadow {
	box-shadow: var(--avatarStatusShadowInset);
	filter: var(--avatarStatusShadowFilter)
	}

	&.animated::before {
	display: none;
	}

	&.avatar-compact {
	width: 32px;
	height: 32px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}
	}
	</style>
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 75db5db17b..07fce79acb 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,578 +1,574 @@
	<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">
	<i class="button-icon icon-zoom-in" />
	</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
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	>
	<i class="icon-link-ext usersettings" />
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	</div>
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	:title="user.screen_name"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name }}
	</router-link>
	<template v-if="!hideBio">
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ visibleRole }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	bot
	</span>
	</template>
	<span v-if="user.locked"><i class="icon icon-lock" /></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">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="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton :relationship="relationship" />
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn btn-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<i class="icon-bell-alt" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn btn-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<i class="icon-bell-ringing-o" />
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn btn-default btn-block toggled"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn btn-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn btn-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;

	.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 {
	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;
	- }
	+ &:hover .avatar {
	+ --still-image-img: visible;
	+ --still-image-canvas: hidden;
	}

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

	i {
	color: #FFF;
	}
	}

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

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

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

	.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;
	text-transform: capitalize;
	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 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 {
	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>

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 30, 12:31 PM (1 d, 12 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1737968
Default Alt Text: (73 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions