No OneTemporary
Actions

Authored By

Unknown

Size

39 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index c2c323c19b..48e7934c14 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,278 +1,283 @@
	<template>
	<div
	v-if="!hideStatus"
	:style="hiddenStyle"
	class="Conversation"
	:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
	>
	<div
	v-if="isExpanded"
	class="panel-heading conversation-heading -sticky"
	>
	<span class="title"> {{ $t('timeline.conversation') }} </span>
	<button
	v-if="collapsable"
	class="button-unstyled -link"
	@click.prevent="toggleExpanded"
	>
	{{ $t('timeline.collapse') }}
	</button>
	</div>
	<div class="conversation-body panel-body">
	<div
	v-if="isTreeView"
	class="thread-body"
	>
	<div
	v-if="shouldShowAllConversationButton"
	class="conversation-dive-to-top-level-box"
	>
	<i18n-t
	keypath="status.show_all_conversation_with_icon"
	tag="button"
	class="button-unstyled -link"
	@click.prevent="diveToTopLevel"
	scope="global"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-left"
	/>
	</template>
	<template #text>
	<span>
	{{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	<div
	v-if="shouldShowAncestors"
	class="thread-ancestors"
	>
	<div
	v-for="status in ancestorsOf(diveRoot)"
	:key="status.id"
	class="thread-ancestor"
	:class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
	>
	<status
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status status-fadein panel-body"

	:simple-tree="treeViewIsSimple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
	:dive="() => diveIntoStatus(status.id)"

	:controlled-showing-tall="statusContentProperties[status.id].showingTall"
	:controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
	:controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
	:controlled-replying="statusContentProperties[status.id].replying"
	:controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
	:controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
	:controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
	:controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
	:controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
	:controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"

	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	<div
	v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
	class="thread-ancestor-dive-box"
	>
	<div
	class="thread-ancestor-dive-box-inner"
	>
	<i18n-t
	tag="button"
	scope="global"
	keypath="status.ancestor_follow_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="diveIntoStatus(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-right"
	/>
	</template>
	<template #text>
	<span>
	{{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	</div>
	</div>
	</div>
	<thread-tree
	v-for="status in showingTopLevel"
	:key="status.id"
	ref="statusComponent"
	:depth="0"

	:status="status"
	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	:focused="focused"
	:get-replies="getReplies"
	:highlight="maybeHighlight"
	:set-highlight="setHighlight"
	:toggle-expanded="toggleExpanded"

	:simple="treeViewIsSimple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:status-content-properties="statusContentProperties"
	:set-status-content-property="setStatusContentProperty"
	:toggle-status-content-property="toggleStatusContentProperty"
	:dive="canDive ? diveIntoStatus : undefined"
	/>
	</div>
	<div
	v-if="isLinearView"
	class="thread-body"
	>
	<status
	v-for="status in conversation"
	:key="status.id"
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status status-fadein panel-body"

	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:status-content-properties="statusContentProperties"
	:set-status-content-property="setStatusContentProperty"
	:toggle-status-content-property="toggleStatusContentProperty"

	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	:style="hiddenStyle"
	/>
	</template>

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

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

	.Conversation {
	.conversation-dive-to-top-level-box {
	padding: var(--status-margin, $status-margin);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--border, $fallback--border);
	border-radius: 0;
	/* Make the button stretch along the whole row */
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}

	.thread-ancestors {
	margin-left: var(--status-margin, $status-margin);
	border-left: 2px solid var(--border, $fallback--border);
	}

	.thread-ancestor.-faded .StatusContent {
	--link: var(--faintLink);
	--text: var(--faint);
	color: var(--text);
	}
	+
	.thread-ancestor-dive-box {
	padding-left: var(--status-margin, $status-margin);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--border, $fallback--border);
	border-radius: 0;
	/* Make the button stretch along the whole row */
	&, &-inner {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}
	}
	.thread-ancestor-dive-box-inner {
	padding: var(--status-margin, $status-margin);
	}

	.conversation-status {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--border, $fallback--border);
	border-radius: 0;
	}

	.thread-ancestor-has-other-replies .conversation-status,
	.thread-ancestor:last-child .conversation-status,
	.thread-ancestor:last-child .thread-ancestor-dive-box,
	&.-expanded .thread-tree .conversation-status {
	border-bottom: none;
	}

	+ &:last-child .conversation-status {
	+ border-bottom: none;
	+ }
	+
	.thread-ancestors + .thread-tree > .conversation-status {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: var(--border, $fallback--border);
	}

	/* expanded conversation in timeline */
	&.status-fadein.-expanded .thread-body {
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: $fallback--cRed;
	border-left-color: var(--cRed, $fallback--cRed);
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	border-bottom: 1px solid var(--border, $fallback--border);
	}

	&.-expanded.status-fadein {
	margin: calc(var(--status-margin, $status-margin) / 2);
	}
	}
	</style>
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index 976688d139..07abee2734 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,171 +1,171 @@
	@import '../../_variables.scss';

	.Notifications {
	&:not(.minimal) {
	// a bit of a hack to allow scrolling below notifications
	padding-bottom: 15em;
	}

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

	- .notifications-footer {
	- border: none;
	- }
	-
	.notification {
	position: relative;

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

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

	.notification {
	box-sizing: border-box;

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

	+ &:last-child .Notification {
	+ border-bottom: none;
	+ }
	+
	.non-mention {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	padding: 0.6em;
	min-width: 0;

	.avatar-container {
	width: 32px;
	height: 32px;
	}

	--link: var(--faintLink);
	--text: var(--faint);
	}

	.follow-request-accept {
	&:hover {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}

	.follow-request-reject {
	&:hover {
	color: $fallback--cRed;
	color: var(--cRed, $fallback--cRed);
	}
	}

	.follow-text, .move-text {
	padding: 0.5em 0;
	overflow-wrap: break-word;
	display: flex;
	justify-content: space-between;

	.follow-name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

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

	time {
	white-space: nowrap;
	}

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

	.timeago {
	min-width: 3em;
	text-align: right;
	}
	}

	.emoji-reaction-emoji {
	font-size: 1.3em;
	}

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

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

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

	.timeago {
	margin-right: 0.2em;
	}

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

	h1 {
	word-break: break-all;
	margin: 0 0 0.3em;
	padding: 0;
	font-size: 1em;
	line-height: 1.5;

	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
	index bfc97dc078..d5b2d1d5bb 100644
	--- a/src/components/notifications/notifications.vue
	+++ b/src/components/notifications/notifications.vue
	@@ -1,72 +1,72 @@
	<template>
	<teleport :disabled="minimalMode" :to="teleportTarget">
	<div
	:class="{ minimal: minimalMode }"
	class="Notifications"
	>
	<div :class="mainClass">
	<div
	v-if="!noHeading"
	class="notifications-heading panel-heading -sticky"
	>
	<div class="title">
	{{ $t('notifications.notifications') }}
	<span
	v-if="unseenCount"
	class="badge badge-notification unseen-count"
	>{{ unseenCount }}</span>
	</div>
	<button
	v-if="unseenCount"
	class="button-default read-button"
	@click.prevent="markAsSeen"
	>
	{{ $t('notifications.read') }}
	</button>
	<NotificationFilters />
	</div>
	<div class="panel-body">
	<div
	v-for="notification in notificationsToDisplay"
	:key="notification.id"
	class="notification"
	:class="{"unseen": !minimalMode && !notification.seen}"
	>
	<div class="notification-overlay" />
	<notification :notification="notification" />
	</div>
	</div>
	- <div class="panel-footer notifications-footer">
	+ <div class="panel-footer">
	<div
	v-if="bottomedOut"
	class="new-status-notification text-center faint"
	>
	{{ $t('notifications.no_more_notifications') }}
	</div>
	<button
	v-else-if="!loading"
	class="button-unstyled -link -fullwidth"
	@click.prevent="fetchOlderNotifications()"
	>
	<div class="new-status-notification text-center">
	{{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
	</div>
	</button>
	<div
	v-else
	class="new-status-notification text-center"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="lg"
	/>
	</div>
	</div>
	</div>
	</div>
	</teleport>
	</template>

	<script src="./notifications.js"></script>
	<style lang="scss" src="./notifications.scss"></style>
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index f79b516727..94f0e916c4 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,247 +1,248 @@
	import Status from '../status/status.vue'
	import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
	import Conversation from '../conversation/conversation.vue'
	import TimelineMenu from '../timeline_menu/timeline_menu.vue'
	import TimelineQuickSettings from './timeline_quick_settings.vue'
	import { debounce, throttle, keyBy } from 'lodash'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch,
	faCog
	)

	const Timeline = {
	props: [
	'timeline',
	'timelineName',
	'title',
	'userId',
	'tag',
	'embedded',
	'count',
	'pinnedStatusIds',
	- 'inProfile'
	+ 'inProfile',
	+ 'footerSlipgate' // reference to an element where we should put our footer
	],
	data () {
	return {
	paused: false,
	unfocused: false,
	bottomedOut: false,
	virtualScrollIndex: 0,
	blockingClicks: false
	}
	},
	components: {
	Status,
	Conversation,
	TimelineMenu,
	TimelineQuickSettings
	},
	computed: {
	filteredVisibleStatuses () {
	return this.timeline.visibleStatuses.filter(status => this.timelineName !== 'user' \|\| (status.id >= this.timeline.minId && status.id <= this.timeline.maxId))
	},
	filteredPinnedStatusIds () {
	return (this.pinnedStatusIds \|\| []).filter(statusId => this.timeline.statusesObject[statusId])
	},
	newStatusCount () {
	return this.timeline.newStatusCount
	},
	showLoadButton () {
	return this.timeline.newStatusCount > 0 \|\| this.timeline.flushMarker !== 0
	},
	loadButtonString () {
	if (this.timeline.flushMarker !== 0) {
	return this.$t('timeline.reload')
	} else {
	return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
	}
	},
	classes () {
	let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
	if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
	return {
	root: rootClasses,
	header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
	body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
	footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
	}
	},
	// id map of statuses which need to be hidden in the main list due to pinning logic
	pinnedStatusIdsObject () {
	return keyBy(this.pinnedStatusIds)
	},
	statusesToDisplay () {
	const amount = this.timeline.visibleStatuses.length
	const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
	const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
	const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
	return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
	},
	virtualScrollingEnabled () {
	return this.$store.getters.mergedConfig.virtualScrolling
	}
	},
	created () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	const showImmediately = this.timeline.visibleStatuses.length === 0

	window.addEventListener('scroll', this.handleScroll)

	if (store.state.api.fetchers[this.timelineName]) { return false }

	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	showImmediately,
	userId: this.userId,
	tag: this.tag
	})
	},
	mounted () {
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.unfocused = document.hidden
	}
	window.addEventListener('keydown', this.handleShortKey)
	setTimeout(this.determineVisibleStatuses, 250)
	},
	unmounted () {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('keydown', this.handleShortKey)
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
	},
	methods: {
	stopBlockingClicks: debounce(function () {
	this.blockingClicks = false
	}, 1000),
	blockClicksTemporarily () {
	if (!this.blockingClicks) {
	this.blockingClicks = true
	}
	this.stopBlockingClicks()
	},
	handleShortKey (e) {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses () {
	if (this.timeline.flushMarker !== 0) {
	this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
	this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
	this.fetchOlderStatuses()
	} else {
	this.blockClicksTemporarily()
	this.$store.commit('showNewStatuses', { timeline: this.timelineName })
	this.paused = false
	}
	window.scrollTo({ top: 0 })
	},
	fetchOlderStatuses: throttle(function () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setLoading', { timeline: this.timelineName, value: true })
	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	older: true,
	showImmediately: true,
	userId: this.userId,
	tag: this.tag
	}).then(({ statuses }) => {
	if (statuses && statuses.length === 0) {
	this.bottomedOut = true
	}
	}).finally(() =>
	store.commit('setLoading', { timeline: this.timelineName, value: false })
	)
	}, 1000, this),
	determineVisibleStatuses () {
	if (!this.$refs.timeline) return
	if (!this.virtualScrollingEnabled) return

	const statuses = this.$refs.timeline.children
	const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))

	if (statuses.length === 0) return

	const height = Math.max(document.body.offsetHeight, window.pageYOffset)

	const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)

	// Start from approximating the index of some visible status by using the
	// the center of the screen on the timeline.
	let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
	let err = statuses[approxIndex].getBoundingClientRect().y

	// if we have a previous scroll index that can be used, test if it's
	// closer than the previous approximation, use it if so

	const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
	if (Math.abs(err) > virtualScrollIndexY) {
	approxIndex = cappedScrollIndex
	err = virtualScrollIndexY
	}

	// if the status is too far from viewport, check the next/previous ones if
	// they happen to be better
	while (err < -20 && approxIndex < statuses.length - 1) {
	err += statuses[approxIndex].offsetHeight
	approxIndex++
	}
	while (err > window.innerHeight + 100 && approxIndex > 0) {
	approxIndex--
	err -= statuses[approxIndex].offsetHeight
	}

	// this status is now the center point for virtual scrolling and visible
	// statuses will be nearby statuses before and after it
	this.virtualScrollIndex = approxIndex
	},
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.timeline.loading === false &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)) {
	this.fetchOlderStatuses()
	}
	},
	handleScroll: throttle(function (e) {
	this.determineVisibleStatuses()
	this.scrollLoad(e)
	}, 200),
	handleVisibilityChange () {
	this.unfocused = document.hidden
	}
	},
	watch: {
	newStatusCount (count) {
	if (!this.$store.getters.mergedConfig.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	const doc = document.documentElement
	const top = (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| 0)
	if (top < 15 &&
	!this.paused &&
	!(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	}
	}
	}

	export default Timeline
	diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
	index 958808f606..ebf8ab5209 100644
	--- a/src/components/timeline/timeline.vue
	+++ b/src/components/timeline/timeline.vue
	@@ -1,86 +1,88 @@
	<template>
	<div :class="['Timeline', classes.root]">
	<div :class="classes.header">
	<TimelineMenu v-if="!embedded" />
	<button
	v-if="showLoadButton"
	class="button-default loadmore-button"
	@click.prevent="showNewStatuses"
	>
	{{ loadButtonString }}
	</button>
	<div
	v-else
	class="loadmore-text faint"
	@click.prevent
	>
	{{ $t('timeline.up_to_date') }}
	</div>
	<TimelineQuickSettings v-if="!embedded" />
	</div>
	<div :class="classes.body">
	<div
	ref="timeline"
	class="timeline"
	>
	<conversation
	v-for="statusId in filteredPinnedStatusIds"
	:key="statusId + '-pinned'"
	class="status-fadein"
	:status-id="statusId"
	:collapsable="true"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:in-profile="inProfile"
	:profile-user-id="userId"
	/>
	<conversation
	v-for="status in filteredVisibleStatuses"
	:key="status.id"
	class="status-fadein"
	:status-id="status.id"
	:collapsable="true"
	:in-profile="inProfile"
	:profile-user-id="userId"
	:virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
	/>
	</div>
	</div>
	<div :class="classes.footer">
	- <div
	- v-if="count===0"
	- class="new-status-notification text-center faint"
	- >
	- {{ $t('timeline.no_statuses') }}
	- </div>
	- <div
	- v-else-if="bottomedOut"
	- class="new-status-notification text-center faint"
	- >
	- {{ $t('timeline.no_more_statuses') }}
	- </div>
	- <button
	- v-else-if="!timeline.loading"
	- class="button-unstyled -link"
	- @click.prevent="fetchOlderStatuses()"
	- >
	- <div class="new-status-notification text-center">
	- {{ $t('timeline.load_older') }}
	+ <teleport :to="footerSlipgate" :disabled="!embedded \|\| !footerSlipgate">
	+ <div
	+ v-if="count===0"
	+ class="new-status-notification text-center faint"
	+ >
	+ {{ $t('timeline.no_statuses') }}
	</div>
	- </button>
	- <div
	- v-else
	- class="new-status-notification text-center"
	- >
	- <FAIcon
	- icon="circle-notch"
	- spin
	- size="lg"
	- />
	- </div>
	+ <div
	+ v-else-if="bottomedOut"
	+ class="new-status-notification text-center faint"
	+ >
	+ {{ $t('timeline.no_more_statuses') }}
	+ </div>
	+ <button
	+ v-else-if="!timeline.loading"
	+ class="button-unstyled -link"
	+ @click.prevent="fetchOlderStatuses()"
	+ >
	+ <div class="new-status-notification text-center">
	+ {{ $t('timeline.load_older') }}
	+ </div>
	+ </button>
	+ <div
	+ v-else
	+ class="new-status-notification text-center"
	+ >
	+ <FAIcon
	+ icon="circle-notch"
	+ spin
	+ size="lg"
	+ />
	+ </div>
	+ </teleport>
	</div>
	</div>
	</template>

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

	<style src="./timeline.scss" lang="scss"> </style>
	diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
	index eeb6ea403b..f779b82305 100644
	--- a/src/components/user_profile/user_profile.js
	+++ b/src/components/user_profile/user_profile.js
	@@ -1,173 +1,177 @@
	import get from 'lodash/get'
	import UserCard from '../user_card/user_card.vue'
	import FollowCard from '../follow_card/follow_card.vue'
	import Timeline from '../timeline/timeline.vue'
	import Conversation from '../conversation/conversation.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import List from '../list/list.vue'
	import withLoadMore from '../../hocs/with_load_more/with_load_more'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faCircleNotch
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch
	)

	const FollowerList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
	select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
	destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId),
	childPropName: 'items',
	additionalPropNames: ['userId']
	})(List)

	const FriendList = withLoadMore({
	fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
	select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
	destroy: (props, $store) => $store.dispatch('clearFriends', props.userId),
	childPropName: 'items',
	additionalPropNames: ['userId']
	})(List)

	const defaultTabKey = 'statuses'

	const UserProfile = {
	data () {
	return {
	error: false,
	userId: null,
	- tab: defaultTabKey
	+ tab: defaultTabKey,
	+ footerRef: null
	}
	},
	created () {
	const routeParams = this.$route.params
	this.load(routeParams.name \|\| routeParams.id)
	this.tab = get(this.$route, 'query.tab', defaultTabKey)
	},
	unmounted () {
	this.stopFetching()
	},
	computed: {
	timeline () {
	return this.$store.state.statuses.timelines.user
	},
	favorites () {
	return this.$store.state.statuses.timelines.favorites
	},
	media () {
	return this.$store.state.statuses.timelines.media
	},
	isUs () {
	return this.userId && this.$store.state.users.currentUser.id &&
	this.userId === this.$store.state.users.currentUser.id
	},
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	isExternal () {
	return this.$route.name === 'external-user-profile'
	},
	followsTabVisible () {
	return this.isUs \|\| !this.user.hide_follows
	},
	followersTabVisible () {
	return this.isUs \|\| !this.user.hide_followers
	}
	},
	methods: {
	+ setFooterRef (el) {
	+ this.footerRef = el
	+ },
	load (userNameOrId) {
	const startFetchingTimeline = (timeline, userId) => {
	// Clear timeline only if load another user's profile
	if (userId !== this.$store.state.statuses.timelines[timeline].userId) {
	this.$store.commit('clearTimeline', { timeline })
	}
	this.$store.dispatch('startFetchingTimeline', { timeline, userId })
	}

	const loadById = (userId) => {
	this.userId = userId
	startFetchingTimeline('user', userId)
	startFetchingTimeline('media', userId)
	if (this.isUs) {
	startFetchingTimeline('favorites', userId)
	}
	// Fetch all pinned statuses immediately
	this.$store.dispatch('fetchPinnedStatuses', userId)
	}

	// Reset view
	this.userId = null
	this.error = false

	// Check if user data is already loaded in store
	const user = this.$store.getters.findUser(userNameOrId)
	if (user) {
	loadById(user.id)
	} else {
	this.$store.dispatch('fetchUser', userNameOrId)
	.then(({ id }) => loadById(id))
	.catch((reason) => {
	const errorMessage = get(reason, 'error.error')
	if (errorMessage === 'No user with such user_id') { // Known error
	this.error = this.$t('user_profile.profile_does_not_exist')
	} else if (errorMessage) {
	this.error = errorMessage
	} else {
	this.error = this.$t('user_profile.profile_loading_error')
	}
	})
	}
	},
	stopFetching () {
	this.$store.dispatch('stopFetchingTimeline', 'user')
	this.$store.dispatch('stopFetchingTimeline', 'favorites')
	this.$store.dispatch('stopFetchingTimeline', 'media')
	},
	switchUser (userNameOrId) {
	this.stopFetching()
	this.load(userNameOrId)
	},
	onTabSwitch (tab) {
	this.tab = tab
	this.$router.replace({ query: { tab } })
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	}
	},
	watch: {
	'$route.params.id': function (newVal) {
	if (newVal) {
	this.switchUser(newVal)
	}
	},
	'$route.params.name': function (newVal) {
	if (newVal) {
	this.switchUser(newVal)
	}
	},
	'$route.query': function (newVal) {
	this.tab = newVal.tab \|\| defaultTabKey
	}
	},
	components: {
	UserCard,
	Timeline,
	FollowerList,
	FriendList,
	FollowCard,
	TabSwitcher,
	Conversation,
	RichContent
	}
	}

	export default UserProfile
	diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
	index 67966ff4a1..74d101c4d9 100644
	--- a/src/components/user_profile/user_profile.vue
	+++ b/src/components/user_profile/user_profile.vue
	@@ -1,204 +1,208 @@
	<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"
	>
	<dt
	:title="user.fields_text[index].name"
	class="user-profile-field-name"
	>
	<RichContent
	:html="field.name"
	:emoji="user.emoji"
	/>
	</dt>
	<dd
	:title="user.fields_text[index].value"
	class="user-profile-field-value"
	>
	<RichContent
	:html="field.value"
	:emoji="user.emoji"
	/>
	</dd>
	</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"
	+ :footerSlipgate="footerRef"
	/>
	<div
	v-if="followsTabVisible"
	key="followees"
	:label="$t('user_card.followees')"
	:disabled="!user.friends_count"
	>
	<FriendList :user-id="userId">
	<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 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"
	+ :footerSlipgate="footerRef"
	/>
	<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"
	+ :footerSlipgate="footerRef"
	/>
	</tab-switcher>
	+ <div class="panel-footer" :ref="setFooterRef"></div>
	</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: 1.3;
	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;
	}
	}
	.user-profile-placeholder {
	.panel-body {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 7em;
	}
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Mon, Nov 2, 9:40 AM (2 h, 48 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1804262
Default Alt Text: (39 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions