No OneTemporary
Actions

Size

33 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.vue b/src/App.vue
	index 31e8fd4049..3532f898d3 100644
	--- a/src/App.vue
	+++ b/src/App.vue
	@@ -1,68 +1,68 @@
	<template>
	<div
	id="app"
	:style="bgStyle"
	>
	<div
	id="app_bg_wrapper"
	class="app-bg-wrapper"
	/>
	<MobileNav v-if="isMobileLayout" />
	<DesktopNav v-else />
	<div class="app-bg-wrapper app-container-wrapper" />
	<div
	id="content"
	class="container underlay"
	>
	<div
	class="sidebar-flexer mobile-hidden"
	:style="sidebarAlign"
	>
	<div class="sidebar-bounds">
	<div class="sidebar-scroller">
	<div class="sidebar">
	<user-panel />
	<div v-if="!isMobileLayout">
	<nav-panel />
	<instance-specific-panel v-if="showInstanceSpecificPanel" />
	<features-panel v-if="!currentUser && showFeaturesPanel" />
	<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
	<notifications v-if="currentUser" />
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="main">
	<div
	v-if="!currentUser"
	class="login-hint panel panel-default"
	>
	<router-link
	:to="{ name: 'login' }"
	class="panel-body"
	>
	{{ $t("login.hint") }}
	</router-link>
	</div>
	<router-view />
	</div>
	<media-modal />
	</div>
	<shout-panel
	v-if="currentUser && shout && !hideShoutbox"
	:floating="true"
	class="floating-shout mobile-hidden"
	:class="{ 'left': shoutboxPosition }"
	/>
	<MobilePostStatusButton />
	<UserReportingModal />
	<PostStatusModal />
	<SettingsModal />
	- <div id="modal"/>
	+ <div id="modal" />
	<GlobalNoticeList />
	</div>
	</template>

	<script src="./App.js"></script>
	<style lang="scss" src="./App.scss"></style>
	diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
	index 53deb1df4a..eeca78288c 100644
	--- a/src/components/basic_user_card/basic_user_card.vue
	+++ b/src/components/basic_user_card/basic_user_card.vue
	@@ -1,87 +1,87 @@
	<template>
	<div class="basic-user-card">
	<router-link :to="userProfileLink(user)">
	<UserAvatar
	class="avatar"
	:user="user"
	- @click.prevent.native="toggleUserExpanded"
	+ @click.prevent="toggleUserExpanded"
	/>
	</router-link>
	<div
	v-if="userExpanded"
	class="basic-user-card-expanded-content"
	>
	<UserCard
	:user-id="user.id"
	:rounded="true"
	:bordered="true"
	/>
	</div>
	<div
	v-else
	class="basic-user-card-collapsed-content"
	>
	<div
	:title="user.name"
	class="basic-user-card-user-name"
	>
	<RichContent
	class="basic-user-card-user-name-value"
	:html="user.name"
	:emoji="user.emoji"
	/>
	</div>
	<div>
	<router-link
	class="basic-user-card-screen-name"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name_ui }}
	</router-link>
	</div>
	<slot />
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.basic-user-card {
	display: flex;
	flex: 1 0;
	margin: 0;
	padding: 0.6em 1em;

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

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

	&-user-name-value,
	&-screen-name {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}

	&-expanded-content {
	flex: 1;
	margin-left: 0.7em;
	min-width: 0;
	}
	}
	</style>
	diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
	index 94a0097c18..493c5d5ac5 100644
	--- a/src/components/chat/chat.vue
	+++ b/src/components/chat/chat.vue
	@@ -1,105 +1,103 @@
	<template>
	<div class="chat-view">
	<div class="chat-view-inner">
	<div
	id="nav"
	ref="inner"
	class="panel-default panel chat-view-body"
	>
	<div
	ref="header"
	class="panel-heading chat-view-heading mobile-hidden"
	>
	<a
	class="go-back-button"
	@click="goBack"
	>
	<FAIcon
	size="lg"
	icon="chevron-left"
	/>
	</a>
	<div class="title text-center">
	<ChatTitle
	:user="recipient"
	:with-avatar="true"
	/>
	</div>
	</div>
	- <template>
	+ <div
	+ ref="scrollable"
	+ class="scrollable-message-list"
	+ :style="{ height: scrollableContainerHeight }"
	+ @scroll="handleScroll"
	+ >
	+ <template v-if="!errorLoadingChat">
	+ <ChatMessage
	+ v-for="chatViewItem in chatViewItems"
	+ :key="chatViewItem.id"
	+ :author="recipient"
	+ :chat-view-item="chatViewItem"
	+ :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
	+ @hover="onMessageHover"
	+ />
	+ </template>
	<div
	- ref="scrollable"
	- class="scrollable-message-list"
	- :style="{ height: scrollableContainerHeight }"
	- @scroll="handleScroll"
	+ v-else
	+ class="chat-loading-error"
	>
	- <template v-if="!errorLoadingChat">
	- <ChatMessage
	- v-for="chatViewItem in chatViewItems"
	- :key="chatViewItem.id"
	- :author="recipient"
	- :chat-view-item="chatViewItem"
	- :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
	- @hover="onMessageHover"
	- />
	- </template>
	- <div
	- v-else
	- class="chat-loading-error"
	- >
	- <div class="alert error">
	- {{ $t('chats.error_loading_chat') }}
	- </div>
	+ <div class="alert error">
	+ {{ $t('chats.error_loading_chat') }}
	</div>
	</div>
	+ </div>
	+ <div
	+ ref="footer"
	+ class="panel-body footer"
	+ >
	<div
	- ref="footer"
	- class="panel-body footer"
	+ class="jump-to-bottom-button"
	+ :class="{ 'visible': jumpToBottomButtonVisible }"
	+ @click="scrollDown({ behavior: 'smooth' })"
	>
	- <div
	- class="jump-to-bottom-button"
	- :class="{ 'visible': jumpToBottomButtonVisible }"
	- @click="scrollDown({ behavior: 'smooth' })"
	- >
	- <span>
	- <FAIcon icon="chevron-down" />
	- <div
	- v-if="newMessageCount"
	- class="badge badge-notification unread-chat-count unread-message-count"
	- >
	- {{ newMessageCount }}
	- </div>
	- </span>
	- </div>
	- <PostStatusForm
	- :disable-subject="true"
	- :disable-scope-selector="true"
	- :disable-notice="true"
	- :disable-lock-warning="true"
	- :disable-polls="true"
	- :disable-sensitivity-checkbox="true"
	- :disable-submit="errorLoadingChat \|\| !currentChat"
	- :disable-preview="true"
	- :optimistic-posting="true"
	- :post-handler="sendMessage"
	- :submit-on-enter="!mobileLayout"
	- :preserve-focus="!mobileLayout"
	- :auto-focus="!mobileLayout"
	- :placeholder="formPlaceholder"
	- :file-limit="1"
	- max-height="160"
	- emoji-picker-placement="top"
	- @resize="handleResize"
	- />
	+ <span>
	+ <FAIcon icon="chevron-down" />
	+ <div
	+ v-if="newMessageCount"
	+ class="badge badge-notification unread-chat-count unread-message-count"
	+ >
	+ {{ newMessageCount }}
	+ </div>
	+ </span>
	</div>
	- </template>
	+ <PostStatusForm
	+ :disable-subject="true"
	+ :disable-scope-selector="true"
	+ :disable-notice="true"
	+ :disable-lock-warning="true"
	+ :disable-polls="true"
	+ :disable-sensitivity-checkbox="true"
	+ :disable-submit="errorLoadingChat \|\| !currentChat"
	+ :disable-preview="true"
	+ :optimistic-posting="true"
	+ :post-handler="sendMessage"
	+ :submit-on-enter="!mobileLayout"
	+ :preserve-focus="!mobileLayout"
	+ :auto-focus="!mobileLayout"
	+ :placeholder="formPlaceholder"
	+ :file-limit="1"
	+ max-height="160"
	+ emoji-picker-placement="top"
	+ @resize="handleResize"
	+ />
	+ </div>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat.js"></script>
	<style lang="scss">
	@import '../../_variables.scss';
	@import './chat.scss';
	</style>
	diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
	index d28c2cfde3..ff2b4e7734 100644
	--- a/src/components/checkbox/checkbox.vue
	+++ b/src/components/checkbox/checkbox.vue
	@@ -1,105 +1,105 @@
	<template>
	<label
	class="checkbox"
	:class="{ disabled, indeterminate }"
	>
	<input
	type="checkbox"
	:disabled="disabled"
	:checked="checked"
	- :indeterminate.prop="indeterminate"
	+ :indeterminate="indeterminate"
	@change="$emit('change', $event.target.checked)"
	>
	<i class="checkbox-indicator" />
	<span
	v-if="!!$slots.default"
	class="label"
	>
	<slot />
	</span>
	</label>
	</template>

	<script>
	export default {
	model: {
	prop: 'checked',
	event: 'change'
	},
	props: [
	'checked',
	'indeterminate',
	'disabled'
	]
	}
	</script>

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

	.checkbox {
	position: relative;
	display: inline-block;
	min-height: 1.2em;

	&-indicator {
	position: relative;
	padding-left: 1.2em;
	}

	&-indicator::before {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	content: '✓';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}

	&.disabled {
	.checkbox-indicator::before,
	.label {
	opacity: .5;
	}
	.label {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}
	}

	input[type=checkbox] {
	display: none;

	&:checked + .checkbox-indicator::before {
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	}

	&:indeterminate + .checkbox-indicator::before {
	content: '–';
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	}

	}

	& > span {
	margin-left: .5em;
	}
	}
	</style>
	diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
	index 304baf9dbf..bab3ca819c 100644
	--- a/src/components/desktop_nav/desktop_nav.vue
	+++ b/src/components/desktop_nav/desktop_nav.vue
	@@ -1,82 +1,82 @@
	<template>
	<nav
	id="nav"
	class="DesktopNav"
	:class="{ '-logoLeft': logoLeft }"
	@click="scrollToTop()"
	>
	<div class="inner-nav">
	<div class="item sitename">
	<router-link
	v-if="!hideSitename"
	class="site-name"
	:to="{ name: 'root' }"
	active-class="home"
	>
	{{ sitename }}
	</router-link>
	</div>
	<router-link
	class="logo"
	:to="{ name: 'root' }"
	:style="logoBgStyle"
	>
	<div
	class="mask"
	:style="logoMaskStyle"
	/>
	<img
	:src="logo"
	:style="logoStyle"
	>
	</router-link>
	<div class="item right actions">
	<search-bar
	v-if="currentUser \|\| !privateMode"
	@toggled="onSearchBarToggled"
	- @click.stop.native
	+ @click.stop
	/>
	<button
	class="button-unstyled nav-icon"
	@click.stop="openSettingsModal"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="cog"
	:title="$t('nav.preferences')"
	/>
	</button>
	<a
	v-if="currentUser && currentUser.role === 'admin'"
	href="/pleroma/admin/#/login-pleroma"
	class="nav-icon"
	target="_blank"
	@click.stop
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="tachometer-alt"
	:title="$t('nav.administration')"
	/>
	</a>
	<button
	v-if="currentUser"
	class="button-unstyled nav-icon"
	@click.prevent="logout"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-out-alt"
	:title="$t('login.logout')"
	/>
	</button>
	</div>
	</div>
	</nav>
	</template>
	<script src="./desktop_nav.js"></script>

	<style src="./desktop_nav.scss" lang="scss"></style>
	diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
	index 137ef9c0ba..24bad93789 100644
	--- a/src/components/font_control/font_control.js
	+++ b/src/components/font_control/font_control.js
	@@ -1,62 +1,62 @@
	-import { set } from 'vue'
	+import { set } from 'lodash'
	import Select from '../select/select.vue'

	export default {
	components: {
	Select
	},
	props: [
	'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
	],
	data () {
	return {
	lValue: this.value,
	availableOptions: [
	this.noInherit ? '' : 'inherit',
	'custom',
	...(this.options \|\| []),
	'serif',
	'monospace',
	'sans-serif'
	].filter(_ => _)
	}
	},
	beforeUpdate () {
	this.lValue = this.value
	},
	computed: {
	present () {
	return typeof this.lValue !== 'undefined'
	},
	dValue () {
	return this.lValue \|\| this.fallback \|\| {}
	},
	family: {
	get () {
	return this.dValue.family
	},
	set (v) {
	set(this.lValue, 'family', v)
	this.$emit('input', this.lValue)
	}
	},
	isCustom () {
	return this.preset === 'custom'
	},
	preset: {
	get () {
	if (this.family === 'serif' \|\|
	this.family === 'sans-serif' \|\|
	this.family === 'monospace' \|\|
	this.family === 'inherit') {
	return this.family
	} else {
	return 'custom'
	}
	},
	set (v) {
	this.family = v === 'custom' ? '' : v
	}
	}
	}
	}
	diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
	index 466e15b9de..ddc3010ec8 100644
	--- a/src/components/importer/importer.vue
	+++ b/src/components/importer/importer.vue
	@@ -1,49 +1,49 @@
	<template>
	<div class="importer">
	<form>
	<input
	ref="input"
	type="file"
	@change="change"
	>
	</form>
	<FAIcon
	v-if="submitting"
	class="importer-uploading"
	spin
	icon="circle-notch"
	/>
	<button
	v-else
	class="btn button-default"
	@click="submit"
	>
	{{ submitButtonLabel \|\| $t('importer.submit') }}
	</button>
	<div v-if="success">
	<FAIcon
	icon="times"
	@click="dismiss"
	/>
	- <p>{{ successMessage \|\| $t('importer.success')}}</p>
	+ <p>{{ successMessage \|\| $t('importer.success') }}</p>
	</div>
	<div v-else-if="error">
	<FAIcon
	icon="times"
	@click="dismiss"
	/>
	- <p>{{ errorMessage \|\| $t('importer.error')}}</p>
	+ <p>{{ errorMessage \|\| $t('importer.error') }}</p>
	</div>
	</div>
	</template>

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

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

	<div
	v-if="!deleted"
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<router-link
	:to="userProfileLink"
	- @click.stop.prevent.capture.native="toggleUserExpanded"
	+ @click.stop.prevent.capture="toggleUserExpanded"
	>
	<UserAvatar
	:bot="botIndicator"
	: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"
	>
	<RichContent
	:html="status.user.name"
	:emoji="status.user.emoji"
	/>
	</h4>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	:title="status.user.screen_name_ui"
	:to="userProfileLink"
	>
	{{ status.user.screen_name_ui }}
	</router-link>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

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

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

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

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

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

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

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

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

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

	<style src="./status.scss" lang="scss"></style>

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 9, 8:18 AM (1 d, 12 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1784561
Default Alt Text: (33 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions