No OneTemporary
Actions

Size

70 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
	index 4ede15e9d5..77fb0aa0f7 100644
	--- a/src/components/basic_user_card/basic_user_card.vue
	+++ b/src/components/basic_user_card/basic_user_card.vue
	@@ -1,92 +1,79 @@
	<template>
	<div class="user-card">
	<router-link :to="userProfileLink(user)">
	- <UserAvatar class="avatar" :compact="true" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
	+ <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
	</router-link>
	<div class="user-card-expanded-content" v-if="userExpanded">
	<user-card-content :user="user" :switcher="false"></user-card-content>
	</div>
	<div class="user-card-collapsed-content" v-else>
	- <div class="user-card-primary-area">
	- <div :title="user.name" class="user-name">
	- <span v-if="user.name_html" v-html="user.name_html"></span>
	- <span v-else>{{ user.name }}</span>
	- </div>
	- <div>
	- <router-link class='user-screen-name' :to="userProfileLink(user)">
	- @{{user.screen_name}}
	- </router-link>
	- </div>
	+ <div :title="user.name" class="user-card-user-name">
	+ <span v-if="user.name_html" v-html="user.name_html"></span>
	+ <span v-else>{{ user.name }}</span>
	</div>
	- <div class="user-card-secondary-area">
	- <slot name="secondary-area"></slot>
	+ <div>
	+ <router-link class="user-card-screen-name" :to="userProfileLink(user)">
	+ @{{user.screen_name}}
	+ </router-link>
	</div>
	+ <slot></slot>
	</div>
	</div>
	</template>

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

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

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

	&-collapsed-content {
	margin-left: 0.7em;
	text-align: left;
	flex: 1;
	- display: flex;
	- align-items: flex-start;
	- justify-content: space-between;
	+ min-width: 0;
	}

	- &-primary-area {
	- flex: 1;
	- .user-name {
	- img {
	- object-fit: contain;
	- height: 16px;
	- width: 16px;
	- vertical-align: middle;
	- }
	+ &-user-name {
	+ img {
	+ object-fit: contain;
	+ height: 16px;
	+ width: 16px;
	+ vertical-align: middle;
	}
	}

	- &-secondary-area {
	- flex: none;
	- }
	-
	&-expanded-content {
	flex: 1;
	- margin: 0.2em 0 0 0.7em;
	+ margin-left: 0.7em;
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	border-style: solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	border-width: 1px;
	overflow: hidden;

	.panel-heading {
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	}

	p {
	margin-bottom: 0;
	}
	}
	}
	</style>
	diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
	index ed7fe30bde..8eb56e2500 100644
	--- a/src/components/block_card/block_card.vue
	+++ b/src/components/block_card/block_card.vue
	@@ -1,24 +1,34 @@
	<template>
	<basic-user-card :user="user">
	- <template slot="secondary-area">
	+ <div class="block-card-content-container">
	<button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
	<template v-if="progress">
	{{ $t('user_card.unblock_progress') }}
	</template>
	<template v-else>
	{{ $t('user_card.unblock') }}
	</template>
	</button>
	<button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
	<template v-if="progress">
	{{ $t('user_card.block_progress') }}
	</template>
	<template v-else>
	{{ $t('user_card.block') }}
	</template>
	</button>
	- </template>
	+ </div>
	</basic-user-card>
	</template>

	-<script src="./block_card.js"></script>
	\ No newline at end of file
	+<script src="./block_card.js"></script>
	+
	+<style lang="scss">
	+.block-card-content-container {
	+ margin-top: 0.5em;
	+ text-align: right;
	+ button {
	+ width: 10em;
	+ }
	+}
	+</style>
	diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
	new file mode 100644
	index 0000000000..425c9c3e8f
	--- /dev/null
	+++ b/src/components/follow_card/follow_card.js
	@@ -0,0 +1,45 @@
	+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
	+
	+const FollowCard = {
	+ props: [
	+ 'user',
	+ 'noFollowsYou'
	+ ],
	+ data () {
	+ return {
	+ inProgress: false,
	+ requestSent: false,
	+ updated: false
	+ }
	+ },
	+ components: {
	+ BasicUserCard
	+ },
	+ computed: {
	+ isMe () { return this.$store.state.users.currentUser.id === this.user.id },
	+ following () { return this.updated ? this.updated.following : this.user.following },
	+ showFollow () {
	+ return !this.following \|\| this.updated && !this.updated.following
	+ }
	+ },
	+ methods: {
	+ followUser () {
	+ this.inProgress = true
	+ requestFollow(this.user, this.$store).then(({ sent, updated }) => {
	+ this.inProgress = false
	+ this.requestSent = sent
	+ this.updated = updated
	+ })
	+ },
	+ unfollowUser () {
	+ this.inProgress = true
	+ requestUnfollow(this.user, this.$store).then(({ updated }) => {
	+ this.inProgress = false
	+ this.updated = updated
	+ })
	+ }
	+ }
	+}
	+
	+export default FollowCard
	diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
	new file mode 100644
	index 0000000000..6cb064eb70
	--- /dev/null
	+++ b/src/components/follow_card/follow_card.vue
	@@ -0,0 +1,53 @@
	+<template>
	+ <basic-user-card :user="user">
	+ <div class="follow-card-content-container">
	+ <span class="faint" v-if="!noFollowsYou && user.follows_you">
	+ {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
	+ </span>
	+ <button
	+ v-if="showFollow"
	+ class="btn btn-default"
	+ @click="followUser"
	+ :disabled="inProgress"
	+ :title="requestSent ? $t('user_card.follow_again') : ''"
	+ >
	+ <template v-if="inProgress">
	+ {{ $t('user_card.follow_progress') }}
	+ </template>
	+ <template v-else-if="requestSent">
	+ {{ $t('user_card.follow_sent') }}
	+ </template>
	+ <template v-else>
	+ {{ $t('user_card.follow') }}
	+ </template>
	+ </button>
	+ <button v-if="following" class="btn btn-default pressed" @click="unfollowUser" :disabled="inProgress">
	+ <template v-if="inProgress">
	+ {{ $t('user_card.follow_progress') }}
	+ </template>
	+ <template v-else>
	+ {{ $t('user_card.follow_unfollow') }}
	+ </template>
	+ </button>
	+ </div>
	+ </basic-user-card>
	+</template>
	+
	+<script src="./follow_card.js"></script>
	+
	+<style lang="scss">
	+.follow-card-content-container {
	+ flex-shrink: 0;
	+ display: flex;
	+ flex-direction: row;
	+ justify-content: space-between;
	+ flex-wrap: wrap;
	+ line-height: 1.5em;
	+
	+ .btn {
	+ margin-top: 0.5em;
	+ margin-left: auto;
	+ width: 10em;
	+ }
	+}
	+</style>
	diff --git a/src/components/follow_list/follow_list.js b/src/components/follow_list/follow_list.js
	deleted file mode 100644
	index 9777c87ebd..0000000000
	--- a/src/components/follow_list/follow_list.js
	+++ /dev/null
	@@ -1,68 +0,0 @@
	-import UserCard from '../user_card/user_card.vue'
	-
	-const FollowList = {
	- data () {
	- return {
	- loading: false,
	- bottomedOut: false,
	- error: false
	- }
	- },
	- props: ['userId', 'showFollowers'],
	- created () {
	- window.addEventListener('scroll', this.scrollLoad)
	- if (this.entries.length === 0) {
	- this.fetchEntries()
	- }
	- },
	- destroyed () {
	- window.removeEventListener('scroll', this.scrollLoad)
	- this.$store.dispatch('clearFriendsAndFollowers', this.userId)
	- },
	- computed: {
	- user () {
	- return this.$store.getters.userById(this.userId)
	- },
	- entries () {
	- return this.showFollowers ? this.user.followers : this.user.friends
	- },
	- showFollowsYou () {
	- return !this.showFollowers \|\| (this.showFollowers && this.userId !== this.$store.state.users.currentUser.id)
	- }
	- },
	- methods: {
	- fetchEntries () {
	- if (!this.loading) {
	- const command = this.showFollowers ? 'addFollowers' : 'addFriends'
	- this.loading = true
	- this.$store.dispatch(command, this.userId).then(entries => {
	- this.error = false
	- this.loading = false
	- this.bottomedOut = entries.length === 0
	- }).catch(() => {
	- this.error = true
	- this.loading = false
	- })
	- }
	- },
	- scrollLoad (e) {
	- const bodyBRect = document.body.getBoundingClientRect()
	- const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	- if (this.loading === false &&
	- this.bottomedOut === false &&
	- this.$el.offsetHeight > 0 &&
	- (window.innerHeight + window.pageYOffset) >= (height - 750)
	- ) {
	- this.fetchEntries()
	- }
	- }
	- },
	- watch: {
	- 'user': 'fetchEntries'
	- },
	- components: {
	- UserCard
	- }
	-}
	-
	-export default FollowList
	diff --git a/src/components/follow_list/follow_list.vue b/src/components/follow_list/follow_list.vue
	deleted file mode 100644
	index 27102edf4e..0000000000
	--- a/src/components/follow_list/follow_list.vue
	+++ /dev/null
	@@ -1,33 +0,0 @@
	-<template>
	- <div class="follow-list">
	- <user-card
	- v-for="entry in entries"
	- :key="entry.id" :user="entry"
	- :noFollowsYou="!showFollowsYou"
	- />
	- <div class="text-center panel-footer">
	- <a v-if="error" @click="fetchEntries" class="alert error">
	- {{$t('general.generic_error')}}
	- </a>
	- <i v-else-if="loading" class="icon-spin3 animate-spin"/>
	- <span v-else-if="bottomedOut"></span>
	- <a v-else @click="fetchEntries">{{$t('general.more')}}</a>
	- </div>
	- </div>
	-</template>
	-
	-<script src="./follow_list.js"></script>
	-
	-<style lang="scss">
	-
	-.follow-list {
	- .panel-footer {
	- padding: 10px;
	- }
	-
	- .error {
	- font-size: 14px;
	- }
	-}
	-
	-</style>
	diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
	new file mode 100644
	index 0000000000..1a00a1c140
	--- /dev/null
	+++ b/src/components/follow_request_card/follow_request_card.js
	@@ -0,0 +1,20 @@
	+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	+
	+const FollowRequestCard = {
	+ props: ['user'],
	+ components: {
	+ BasicUserCard
	+ },
	+ methods: {
	+ approveUser () {
	+ this.$store.state.api.backendInteractor.approveUser(this.user.id)
	+ this.$store.dispatch('removeFollowRequest', this.user)
	+ },
	+ denyUser () {
	+ this.$store.state.api.backendInteractor.denyUser(this.user.id)
	+ this.$store.dispatch('removeFollowRequest', this.user)
	+ }
	+ }
	+}
	+
	+export default FollowRequestCard
	diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
	new file mode 100644
	index 0000000000..4a3bbba49a
	--- /dev/null
	+++ b/src/components/follow_request_card/follow_request_card.vue
	@@ -0,0 +1,29 @@
	+<template>
	+ <basic-user-card :user="user">
	+ <div class="follow-request-card-content-container">
	+ <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
	+ <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
	+ </div>
	+ </basic-user-card>
	+</template>
	+
	+<script src="./follow_request_card.js"></script>
	+
	+<style lang="scss">
	+.follow-request-card-content-container {
	+ display: flex;
	+ flex-direction: row;
	+ flex-wrap: wrap;
	+ button {
	+ margin-top: 0.5em;
	+ margin-right: 0.5em;
	+ flex: 1 1;
	+ max-width: 12em;
	+ min-width: 8em;
	+
	+ &:last-child {
	+ margin-right: 0;
	+ }
	+ }
	+}
	+</style>
	diff --git a/src/components/follow_requests/follow_requests.js b/src/components/follow_requests/follow_requests.js
	index 11a228aa4b..d57dcbc77c 100644
	--- a/src/components/follow_requests/follow_requests.js
	+++ b/src/components/follow_requests/follow_requests.js
	@@ -1,23 +1,23 @@
	-import UserCard from '../user_card/user_card.vue'
	+import FollowRequestCard from '../follow_request_card/follow_request_card.vue'

	const FollowRequests = {
	components: {
	- UserCard
	+ FollowRequestCard
	},
	created () {
	this.updateRequests()
	},
	computed: {
	requests () {
	return this.$store.state.api.followRequests
	}
	},
	methods: {
	updateRequests () {
	this.$store.state.api.backendInteractor.fetchFollowRequests()
	.then((requests) => { this.$store.commit('setFollowRequests', requests) })
	}
	}
	}

	export default FollowRequests
	diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
	index 87dc419414..b83c2d68da 100644
	--- a/src/components/follow_requests/follow_requests.vue
	+++ b/src/components/follow_requests/follow_requests.vue
	@@ -1,12 +1,12 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	{{$t('nav.friend_requests')}}
	</div>
	<div class="panel-body">
	- <user-card v-for="request in requests" :key="request.id" :user="request" :showFollows="false" :showApproval="true"></user-card>
	+ <FollowRequestCard v-for="request in requests" :key="request.id" :user="request"/>
	</div>
	</div>
	</template>

	<script src="./follow_requests.js"></script>
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index 62536bc5a4..d986663ea0 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,150 +1,148 @@
	import Status from '../status/status.vue'
	import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
	import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
	-import UserCard from '../user_card/user_card.vue'
	import { throttle } from 'lodash'

	const Timeline = {
	props: [
	'timeline',
	'timelineName',
	'title',
	'userId',
	'tag',
	'embedded',
	'count'
	],
	data () {
	return {
	paused: false,
	unfocused: false,
	bottomedOut: false
	}
	},
	computed: {
	timelineError () { return this.$store.state.statuses.error },
	newStatusCount () {
	return this.timeline.newStatusCount
	},
	newStatusCountStr () {
	if (this.timeline.flushMarker !== 0) {
	return ''
	} else {
	return ` (${this.newStatusCount})`
	}
	},
	classes () {
	return {
	root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
	header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
	body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
	footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
	}
	}
	},
	components: {
	Status,
	- StatusOrConversation,
	- UserCard
	+ StatusOrConversation
	},
	created () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	const showImmediately = this.timeline.visibleStatuses.length === 0

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

	if (this.timelineName === 'friends' && !credentials) { 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)
	},
	destroyed () {
	window.removeEventListener('scroll', this.scrollLoad)
	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: {
	handleShortKey (e) {
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses () {
	if (this.newStatusCount === 0) return

	if (this.timeline.flushMarker !== 0) {
	this.$store.commit('clearTimeline', { timeline: this.timelineName })
	this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
	this.fetchOlderStatuses()
	} else {
	this.$store.commit('showNewStatuses', { timeline: this.timelineName })
	this.paused = false
	}
	},
	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 => {
	store.commit('setLoading', { timeline: this.timelineName, value: false })
	if (statuses.length === 0) {
	this.bottomedOut = true
	}
	})
	}, 1000, this),
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.timeline.loading === false &&
	this.$store.state.config.autoLoad &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)) {
	this.fetchOlderStatuses()
	}
	},
	handleVisibilityChange () {
	this.unfocused = document.hidden
	}
	},
	watch: {
	newStatusCount (count) {
	if (!this.$store.state.config.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	if (window.pageYOffset < 15 &&
	!this.paused &&
	!(this.unfocused && this.$store.state.config.pauseOnUnfocused)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	}
	}
	}

	export default Timeline
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	deleted file mode 100644
	index 28e22f092f..0000000000
	--- a/src/components/user_card/user_card.js
	+++ /dev/null
	@@ -1,64 +0,0 @@
	-import UserCardContent from '../user_card_content/user_card_content.vue'
	-import UserAvatar from '../user_avatar/user_avatar.vue'
	-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
	-
	-const UserCard = {
	- props: [
	- 'user',
	- 'noFollowsYou',
	- 'showApproval'
	- ],
	- data () {
	- return {
	- userExpanded: false,
	- followRequestInProgress: false,
	- followRequestSent: false,
	- updated: false
	- }
	- },
	- components: {
	- UserCardContent,
	- UserAvatar
	- },
	- computed: {
	- currentUser () { return this.$store.state.users.currentUser },
	- following () { return this.updated ? this.updated.following : this.user.following },
	- showFollow () {
	- return !this.showApproval && (!this.following \|\| this.updated && !this.updated.following)
	- }
	- },
	- methods: {
	- toggleUserExpanded () {
	- this.userExpanded = !this.userExpanded
	- },
	- approveUser () {
	- this.$store.state.api.backendInteractor.approveUser(this.user.id)
	- this.$store.dispatch('removeFollowRequest', this.user)
	- },
	- denyUser () {
	- this.$store.state.api.backendInteractor.denyUser(this.user.id)
	- this.$store.dispatch('removeFollowRequest', this.user)
	- },
	- userProfileLink (user) {
	- return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
	- },
	- followUser () {
	- this.followRequestInProgress = true
	- requestFollow(this.user, this.$store).then(({ sent, updated }) => {
	- this.followRequestInProgress = false
	- this.followRequestSent = sent
	- this.updated = updated
	- })
	- },
	- unfollowUser () {
	- this.followRequestInProgress = true
	- requestUnfollow(this.user, this.$store).then(({ updated }) => {
	- this.followRequestInProgress = false
	- this.updated = updated
	- })
	- }
	- }
	-}
	-
	-export default UserCard
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	deleted file mode 100644
	index ce4edb3c8c..0000000000
	--- a/src/components/user_card/user_card.vue
	+++ /dev/null
	@@ -1,159 +0,0 @@
	-<template>
	- <div class="card">
	- <router-link :to="userProfileLink(user)">
	- <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
	- </router-link>
	- <div class="user-card-main-content">
	- <div class="usercard" v-if="userExpanded">
	- <user-card-content :user="user" :switcher="false"></user-card-content>
	- </div>
	- <div class="name-and-screen-name" v-if="!userExpanded">
	- <div :title="user.name" class="user-name">
	- <span v-if="user.name_html" v-html="user.name_html"></span>
	- <span v-else>{{ user.name }}</span>
	- </div>
	- <div class="user-link-action">
	- <router-link class='user-screen-name' :to="userProfileLink(user)">
	- @{{user.screen_name}}
	- </router-link>
	- </div>
	- </div>
	- <div class="follow-box" v-if="!userExpanded">
	- <span class="faint" v-if="!noFollowsYou && user.follows_you">
	- {{ currentUser.id == user.id ? $t('user_card.its_you') : $t('user_card.follows_you') }}
	- </span>
	- <button
	- v-if="showFollow"
	- class="btn btn-default"
	- @click="followUser"
	- :disabled="followRequestInProgress"
	- :title="followRequestSent ? $t('user_card.follow_again') : ''"
	- >
	- <template v-if="followRequestInProgress">
	- {{ $t('user_card.follow_progress') }}
	- </template>
	- <template v-else-if="followRequestSent">
	- {{ $t('user_card.follow_sent') }}
	- </template>
	- <template v-else>
	- {{ $t('user_card.follow') }}
	- </template>
	- </button>
	- <button v-if="following" class="btn btn-default pressed" @click="unfollowUser" :disabled="followRequestInProgress">
	- <template v-if="followRequestInProgress">
	- {{ $t('user_card.follow_progress') }}
	- </template>
	- <template v-else>
	- {{ $t('user_card.follow_unfollow') }}
	- </template>
	- </button>
	- </div>
	- <div class="approval" v-if="showApproval">
	- <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
	- <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
	- </div>
	- </div>
	- </div>
	-</template>
	-
	-<script src="./user_card.js"></script>
	-
	-<style lang="scss">
	-@import '../../_variables.scss';
	-
	-.user-card-main-content {
	- display: flex;
	- flex-direction: column;
	- flex: 1 1 100%;
	- margin-left: 0.7em;
	- min-width: 0;
	-}
	-
	-.name-and-screen-name {
	- text-align: left;
	- width: 100%;
	-
	- .user-name {
	- img {
	- object-fit: contain;
	- height: 16px;
	- width: 16px;
	- vertical-align: middle;
	- }
	- }
	-
	- .user-link-action {
	- display: flex;
	- align-items: flex-start;
	- justify-content: space-between;
	- }
	-}
	-
	-
	-.card {
	- display: flex;
	- flex: 1 0;
	- padding-top: 0.6em;
	- padding-right: 1em;
	- padding-bottom: 0.6em;
	- padding-left: 1em;
	- border-bottom: 1px solid;
	- margin: 0;
	- border-bottom-color: $fallback--border;
	- border-bottom-color: var(--border, $fallback--border);
	-
	- .avatar {
	- padding: 0;
	- }
	-
	- .follow-box {
	- text-align: center;
	- flex-shrink: 0;
	- display: flex;
	- flex-direction: row;
	- justify-content: space-between;
	- flex-wrap: wrap;
	- line-height: 1.5em;
	-
	- .btn {
	- margin-top: 0.5em;
	- margin-left: auto;
	- width: 10em;
	- }
	- }
	-}
	-
	-.usercard {
	- width: fill-available;
	- border-radius: $fallback--panelRadius;
	- border-radius: var(--panelRadius, $fallback--panelRadius);
	- border-style: solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	- border-width: 1px;
	- overflow: hidden;
	-
	- .panel-heading {
	- background: transparent;
	- flex-direction: column;
	- align-items: stretch;
	- }
	-
	- p {
	- margin-bottom: 0;
	- }
	-}
	-
	-.approval {
	- display: flex;
	- flex-direction: row;
	- flex-wrap: wrap;
	- button {
	- margin-top: 0.5em;
	- margin-right: 0.5em;
	- flex: 1 1;
	- max-width: 12em;
	- min-width: 8em;
	- }
	-}
	-</style>
	diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
	index a3d24eb1d1..689b9ec610 100644
	--- a/src/components/user_card_content/user_card_content.vue
	+++ b/src/components/user_card_content/user_card_content.vue
	@@ -1,389 +1,416 @@
	<template>
	<div id="heading" class="profile-panel-background" :style="headingStyle">
	<div class="panel-heading text-center">
	<div class='user-info'>
	<div class='container'>
	<router-link :to="userProfileLink(user)">
	<UserAvatar :betterShadow="betterShadow" :src="user.profile_image_url_original"/>
	</router-link>
	<div class="name-and-screen-name">
	<div class="top-line">
	<div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
	<div :title="user.name" class='user-name' v-else>{{user.name}}</div>
	<router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser">
	<i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
	</router-link>
	<a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local">
	<i class="icon-link-ext usersettings"></i>
	</a>
	</div>

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

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

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

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

	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;

	.panel-heading {
	padding: .5em 0;
	text-align: center;
	box-shadow: none;
	}
	}

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

	.profile-bio {
	text-align: center;
	}
	}

	.user-info {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	padding: 0 26px;

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

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

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

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

	.name-and-screen-name {
	display: block;
	margin-left: 0.6em;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	// This is so that text doesn't get overlapped by avatar's shadow if it has
	// big one
	z-index: 1;

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

	.user-name {
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1 1 auto;
	margin-right: 1em;
	+
	+ img {
	+ object-fit: contain;
	+ height: 16px;
	+ width: 16px;
	+ vertical-align: middle;
	+ }
	}

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

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

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

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

	.user-meta {
	margin-bottom: .15em;
	display: flex;
	align-items: baseline;
	font-size: 14px;
	line-height: 22px;
	flex-wrap: wrap;

	.following {
	flex: 1 0 auto;
	margin: 0;
	margin-bottom: .25em;
	text-align: left;
	}

	.highlighter {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	margin-right: -.5em;
	align-self: start;

	.userHighlightCl {
	padding: 2px 10px;
	flex: 1 0 auto;
	}

	.userHighlightSel,
	.userHighlightSel.select {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}
	.userHighlightSel.select i {
	line-height: 22px;
	}

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

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

	margin-right: -.75em;

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

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

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

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

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

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

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

	.user-counts {
	display: flex;
	line-height:16px;
	padding: .5em 1.5em 0em 1.5em;
	text-align: center;
	justify-content: space-between;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	flex-wrap: wrap;
	}

	.user-count {
	flex: 1 0 auto;
	padding: .5em 0 .5em 0;
	margin: 0 .5em;

	h5 {
	font-size:1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}
	a {
	text-decoration: none;
	}
	}

	+.usercard {
	+ width: fill-available;
	+ border-radius: $fallback--panelRadius;
	+ border-radius: var(--panelRadius, $fallback--panelRadius);
	+ border-style: solid;
	+ border-color: $fallback--border;
	+ border-color: var(--border, $fallback--border);
	+ border-width: 1px;
	+ overflow: hidden;
	+
	+ .panel-heading {
	+ background: transparent;
	+ flex-direction: column;
	+ align-items: stretch;
	+ }
	+
	+ p {
	+ margin-bottom: 0;
	+ }
	+}
	</style>
	diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
	index ebf6c61ae1..7708141c62 100644
	--- a/src/components/user_profile/user_profile.js
	+++ b/src/components/user_profile/user_profile.js
	@@ -1,130 +1,154 @@
	+import { compose } from 'vue-compose'
	import get from 'lodash/get'
	import UserCardContent from '../user_card_content/user_card_content.vue'
	-import UserCard from '../user_card/user_card.vue'
	+import FollowCard from '../follow_card/follow_card.vue'
	import Timeline from '../timeline/timeline.vue'
	-import FollowList from '../follow_list/follow_list.vue'
	+import withLoadMore from '../../hocs/with_load_more/with_load_more'
	+import withList from '../../hocs/with_list/with_list'
	+
	+const FollowerList = compose(
	+ withLoadMore({
	+ fetch: (props, $store) => $store.dispatch('addFollowers', props.userId),
	+ select: (props, $store) => get($store.getters.userById(props.userId), 'followers', []),
	+ destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
	+ childPropName: 'entries',
	+ additionalPropNames: ['userId']
	+ }),
	+ withList({ getEntryProps: user => ({ user }) })
	+)(FollowCard)
	+
	+const FriendList = compose(
	+ withLoadMore({
	+ fetch: (props, $store) => $store.dispatch('addFriends', props.userId),
	+ select: (props, $store) => get($store.getters.userById(props.userId), 'friends', []),
	+ destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
	+ childPropName: 'entries',
	+ additionalPropNames: ['userId']
	+ }),
	+ withList({ getEntryProps: user => ({ user }) })
	+)(FollowCard)

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

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

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

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

	<style lang="scss">

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

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

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

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

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

	.title, .loadmore-text {
	display: none
	}
	}
	}
	.user-profile-placeholder {
	.panel-body {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 7em;
	}
	}
	</style>
	diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js
	index fe67b2ad8f..550408260a 100644
	--- a/src/components/user_search/user_search.js
	+++ b/src/components/user_search/user_search.js
	@@ -1,45 +1,45 @@
	-import UserCard from '../user_card/user_card.vue'
	+import FollowCard from '../follow_card/follow_card.vue'
	import userSearchApi from '../../services/new_api/user_search.js'
	const userSearch = {
	components: {
	- UserCard
	+ FollowCard
	},
	props: [
	'query'
	],
	data () {
	return {
	username: '',
	users: [],
	loading: false
	}
	},
	mounted () {
	this.search(this.query)
	},
	watch: {
	query (newV) {
	this.search(newV)
	}
	},
	methods: {
	newQuery (query) {
	this.$router.push({ name: 'user-search', query: { query } })
	this.$refs.userSearchInput.focus()
	},
	search (query) {
	if (!query) {
	this.users = []
	return
	}
	this.loading = true
	userSearchApi.search({query, store: this.$store})
	.then((res) => {
	this.loading = false
	this.users = res
	})
	}
	}
	}

	export default userSearch
	diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
	index b39e10f4b3..1269eea645 100644
	--- a/src/components/user_search/user_search.vue
	+++ b/src/components/user_search/user_search.vue
	@@ -1,37 +1,37 @@
	<template>
	<div class="user-search panel panel-default">
	<div class="panel-heading">
	{{$t('nav.user_search')}}
	</div>
	<div class="user-search-input-container">
	<input class="user-finder-input" ref="userSearchInput" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/>
	<button class="btn search-button" @click="newQuery(username)">
	<i class="icon-search"/>
	</button>
	</div>
	<div v-if="loading" class="text-center loading-icon">
	<i class="icon-spin3 animate-spin"/>
	</div>
	<div v-else class="panel-body">
	- <user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
	+ <FollowCard v-for="user in users" :key="user.id" :user="user"/>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	.user-search-input-container {
	margin: 0.5em;
	display: flex;
	justify-content: center;

	.search-button {
	margin-left: 0.5em;
	}
	}

	.loading-icon {
	padding: 1em;
	}
	</style>
	diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
	index 82098fc22e..be0b882780 100644
	--- a/src/components/who_to_follow/who_to_follow.js
	+++ b/src/components/who_to_follow/who_to_follow.js
	@@ -1,48 +1,48 @@
	import apiService from '../../services/api/api.service.js'
	-import UserCard from '../user_card/user_card.vue'
	+import FollowCard from '../follow_card/follow_card.vue'

	const WhoToFollow = {
	components: {
	- UserCard
	+ FollowCard
	},
	data () {
	return {
	users: []
	}
	},
	mounted () {
	this.getWhoToFollow()
	},
	methods: {
	showWhoToFollow (reply) {
	reply.forEach((i, index) => {
	const user = {
	id: 0,
	name: i.display_name,
	screen_name: i.acct,
	profile_image_url: i.avatar \|\| '/images/avi.png'
	}
	this.users.push(user)

	this.$store.state.api.backendInteractor.externalProfile(user.screen_name)
	.then((externalUser) => {
	if (!externalUser.error) {
	this.$store.commit('addNewUsers', [externalUser])
	user.id = externalUser.id
	}
	})
	})
	},
	getWhoToFollow () {
	const credentials = this.$store.state.users.currentUser.credentials
	if (credentials) {
	apiService.suggestions({credentials: credentials})
	.then((reply) => {
	this.showWhoToFollow(reply)
	})
	}
	}
	}
	}

	export default WhoToFollow
	diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
	index df2e03c804..1630f5ac47 100644
	--- a/src/components/who_to_follow/who_to_follow.vue
	+++ b/src/components/who_to_follow/who_to_follow.vue
	@@ -1,15 +1,15 @@
	<template>
	<div class="panel panel-default">
	<div class="panel-heading">
	{{$t('who_to_follow.who_to_follow')}}
	</div>
	<div class="panel-body">
	- <user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
	+ <FollowCard v-for="user in users" :key="user.id" :user="user"/>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	</style>
	diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
	index e862a39bd5..74979b8795 100644
	--- a/src/hocs/with_load_more/with_load_more.js
	+++ b/src/hocs/with_load_more/with_load_more.js
	@@ -1,91 +1,94 @@
	import Vue from 'vue'
	-import filter from 'lodash/filter'
	import isEmpty from 'lodash/isEmpty'
	+import { getComponentProps } from '../../services/component_utils/component_utils'
	import './with_load_more.scss'

	const withLoadMore = ({
	fetch, // function to fetch entries and return a promise
	select, // function to select data from store
	- childPropName = 'entries' // name of the prop to be passed into the wrapped component
	+ destroy, // function called at "destroyed" lifecycle
	+ childPropName = 'entries', // name of the prop to be passed into the wrapped component
	+ additionalPropNames = [] // additional prop name list of the wrapper component
	}) => (WrappedComponent) => {
	- const originalProps = WrappedComponent.props \|\| []
	- const props = filter(originalProps, v => v !== 'entries')
	+ const originalProps = Object.keys(getComponentProps(WrappedComponent))
	+ const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)

	return Vue.component('withLoadMore', {
	render (createElement) {
	const props = {
	props: {
	...this.$props,
	[childPropName]: this.entries
	},
	on: this.$listeners,
	scopedSlots: this.$scopedSlots
	}
	const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
	return (
	<div class="with-load-more">
	<WrappedComponent {...props}>
	{children}
	</WrappedComponent>
	<div class="with-load-more-footer">
	{this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
	{!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
	{!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
	</div>
	</div>
	)
	},
	props,
	data () {
	return {
	loading: false,
	bottomedOut: false,
	error: false
	}
	},
	computed: {
	entries () {
	return select(this.$props, this.$store) \|\| []
	}
	},
	created () {
	window.addEventListener('scroll', this.scrollLoad)
	if (this.entries.length === 0) {
	this.fetchEntries()
	}
	},
	destroyed () {
	window.removeEventListener('scroll', this.scrollLoad)
	+ destroy && destroy(this.$props, this.$store)
	},
	methods: {
	fetchEntries () {
	if (!this.loading) {
	this.loading = true
	this.error = false
	fetch(this.$props, this.$store)
	.then((newEntries) => {
	this.loading = false
	this.bottomedOut = isEmpty(newEntries)
	})
	.catch(() => {
	this.loading = false
	this.error = true
	})
	}
	},
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.loading === false &&
	this.bottomedOut === false &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)
	) {
	this.fetchEntries()
	}
	}
	}
	})
	}

	export default withLoadMore
	diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
	index 1ac67cbac1..679409cf8b 100644
	--- a/src/hocs/with_subscription/with_subscription.js
	+++ b/src/hocs/with_subscription/with_subscription.js
	@@ -1,84 +1,84 @@
	import Vue from 'vue'
	-import reject from 'lodash/reject'
	import isEmpty from 'lodash/isEmpty'
	-import omit from 'lodash/omit'
	+import { getComponentProps } from '../../services/component_utils/component_utils'
	import './with_subscription.scss'

	const withSubscription = ({
	fetch, // function to fetch entries and return a promise
	select, // function to select data from store
	- childPropName = 'content' // name of the prop to be passed into the wrapped component
	+ childPropName = 'content', // name of the prop to be passed into the wrapped component
	+ additionalPropNames = [] // additional prop name list of the wrapper component
	}) => (WrappedComponent) => {
	- const originalProps = WrappedComponent.props \|\| []
	- const props = reject(originalProps, v => v === 'content')
	+ const originalProps = Object.keys(getComponentProps(WrappedComponent))
	+ const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)

	return Vue.component('withSubscription', {
	props: [
	...props,
	'refresh' // boolean saying to force-fetch data whenever created
	],
	render (createElement) {
	if (!this.error && !this.loading) {
	const props = {
	props: {
	- ...omit(this.$props, 'refresh'),
	+ ...this.$props,
	[childPropName]: this.fetchedData
	},
	on: this.$listeners,
	scopedSlots: this.$scopedSlots
	}
	const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
	return (
	<div class="with-subscription">
	<WrappedComponent {...props}>
	{children}
	</WrappedComponent>
	</div>
	)
	} else {
	return (
	<div class="with-subscription-loading">
	{this.error
	? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
	: <i class="icon-spin3 animate-spin"/>
	}
	</div>
	)
	}
	},
	data () {
	return {
	loading: false,
	error: false
	}
	},
	computed: {
	fetchedData () {
	return select(this.$props, this.$store)
	}
	},
	created () {
	if (this.refresh \|\| isEmpty(this.fetchedData)) {
	this.fetchData()
	}
	},
	methods: {
	fetchData () {
	if (!this.loading) {
	this.loading = true
	this.error = false
	fetch(this.$props, this.$store)
	.then(() => {
	this.loading = false
	})
	.catch(() => {
	this.error = true
	this.loading = false
	})
	}
	}
	}
	})
	}

	export default withSubscription
	diff --git a/src/modules/users.js b/src/modules/users.js
	index eabfe5ae22..093af497c3 100644
	--- a/src/modules/users.js
	+++ b/src/modules/users.js
	@@ -1,351 +1,356 @@
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { compact, map, each, merge, find } from 'lodash'
	import { set } from 'vue'
	import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
	import oauthApi from '../services/new_api/oauth'
	import { humanizeErrors } from './errors'

	// TODO: Unify with mergeOrAdd in statuses.js
	export const mergeOrAdd = (arr, obj, item) => {
	if (!item) { return false }
	const oldItem = obj[item.id]
	if (oldItem) {
	// We already have this, so only merge the new info.
	merge(oldItem, item)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	arr.push(item)
	obj[item.id] = item
	if (item.screen_name && !item.screen_name.includes('@')) {
	obj[item.screen_name] = item
	}
	return { item, new: true }
	}
	}

	const getNotificationPermission = () => {
	const Notification = window.Notification

	if (!Notification) return Promise.resolve(null)
	if (Notification.permission === 'default') return Notification.requestPermission()
	return Promise.resolve(Notification.permission)
	}

	export const mutations = {
	setMuted (state, { user: { id }, muted }) {
	const user = state.usersObject[id]
	set(user, 'muted', muted)
	},
	setCurrentUser (state, user) {
	state.lastLoginName = user.screen_name
	state.currentUser = merge(state.currentUser \|\| {}, user)
	},
	clearCurrentUser (state) {
	state.currentUser = false
	state.lastLoginName = false
	},
	beginLogin (state) {
	state.loggingIn = true
	},
	endLogin (state) {
	state.loggingIn = false
	},
	// TODO Clean after ourselves?
	addFriends (state, { id, friends, page }) {
	const user = state.usersObject[id]
	each(friends, friend => {
	if (!find(user.friends, { id: friend.id })) {
	user.friends.push(friend)
	}
	})
	user.friendsPage = page + 1
	},
	addFollowers (state, { id, followers, page }) {
	const user = state.usersObject[id]
	each(followers, follower => {
	if (!find(user.followers, { id: follower.id })) {
	user.followers.push(follower)
	}
	})
	user.followersPage = page + 1
	},
	// Because frontend doesn't have a reason to keep these stuff in memory
	// outside of viewing someones user profile.
	- clearFriendsAndFollowers (state, userKey) {
	- const user = state.usersObject[userKey]
	+ clearFriends (state, userId) {
	+ const user = state.usersObject[userId]
	if (!user) {
	return
	}
	user.friends = []
	- user.followers = []
	user.friendsPage = 0
	+ },
	+ clearFollowers (state, userId) {
	+ const user = state.usersObject[userId]
	+ if (!user) {
	+ return
	+ }
	+ user.followers = []
	user.followersPage = 0
	},
	addNewUsers (state, users) {
	each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
	},
	saveBlocks (state, blockIds) {
	state.currentUser.blockIds = blockIds
	},
	saveMutes (state, muteIds) {
	state.currentUser.muteIds = muteIds
	},
	setUserForStatus (state, status) {
	status.user = state.usersObject[status.user.id]
	},
	setUserForNotification (state, notification) {
	notification.action.user = state.usersObject[notification.action.user.id]
	notification.from_profile = state.usersObject[notification.action.user.id]
	},
	setColor (state, { user: { id }, highlighted }) {
	const user = state.usersObject[id]
	set(user, 'highlight', highlighted)
	},
	signUpPending (state) {
	state.signUpPending = true
	state.signUpErrors = []
	},
	signUpSuccess (state) {
	state.signUpPending = false
	},
	signUpFailure (state, errors) {
	state.signUpPending = false
	state.signUpErrors = errors
	}
	}

	export const getters = {
	userById: state => id =>
	state.users.find(user => user.id === id),
	userByName: state => name =>
	state.users.find(user => user.screen_name &&
	(user.screen_name.toLowerCase() === name.toLowerCase())
	)
	}

	export const defaultState = {
	loggingIn: false,
	lastLoginName: false,
	currentUser: false,
	users: [],
	usersObject: {},
	signUpPending: false,
	signUpErrors: []
	}

	const users = {
	state: defaultState,
	mutations,
	getters,
	actions: {
	fetchUser (store, id) {
	return store.rootState.api.backendInteractor.fetchUser({ id })
	.then((user) => store.commit('addNewUsers', [user]))
	},
	fetchBlocks (store) {
	return store.rootState.api.backendInteractor.fetchBlocks()
	.then((blocks) => {
	store.commit('saveBlocks', map(blocks, 'id'))
	store.commit('addNewUsers', blocks)
	return blocks
	})
	},
	blockUser (store, id) {
	return store.rootState.api.backendInteractor.blockUser(id)
	.then((user) => store.commit('addNewUsers', [user]))
	},
	unblockUser (store, id) {
	return store.rootState.api.backendInteractor.unblockUser(id)
	.then((user) => store.commit('addNewUsers', [user]))
	},
	fetchMutes (store) {
	return store.rootState.api.backendInteractor.fetchMutes()
	.then((mutedUsers) => {
	each(mutedUsers, (user) => { user.muted = true })
	store.commit('addNewUsers', mutedUsers)
	store.commit('saveMutes', map(mutedUsers, 'id'))
	})
	},
	muteUser (store, id) {
	return store.state.api.backendInteractor.setUserMute({ id, muted: true })
	.then((user) => store.commit('addNewUsers', [user]))
	},
	unmuteUser (store, id) {
	return store.state.api.backendInteractor.setUserMute({ id, muted: false })
	.then((user) => store.commit('addNewUsers', [user]))
	},
	addFriends ({ rootState, commit }, fetchBy) {
	return new Promise((resolve, reject) => {
	const user = rootState.users.usersObject[fetchBy]
	const page = user.friendsPage \|\| 1
	rootState.api.backendInteractor.fetchFriends({ id: user.id, page })
	.then((friends) => {
	commit('addFriends', { id: user.id, friends, page })
	resolve(friends)
	}).catch(() => {
	reject()
	})
	})
	},
	addFollowers ({ rootState, commit }, fetchBy) {
	- return new Promise((resolve, reject) => {
	- const user = rootState.users.usersObject[fetchBy]
	- const page = user.followersPage \|\| 1
	- rootState.api.backendInteractor.fetchFollowers({ id: user.id, page })
	- .then((followers) => {
	- commit('addFollowers', { id: user.id, followers, page })
	- resolve(followers)
	- }).catch(() => {
	- reject()
	- })
	- })
	+ const user = rootState.users.usersObject[fetchBy]
	+ const page = user.followersPage \|\| 1
	+ return rootState.api.backendInteractor.fetchFollowers({ id: user.id, page })
	+ .then((followers) => {
	+ commit('addFollowers', { id: user.id, followers, page })
	+ return followers
	+ })
	+ },
	+ clearFriends ({ commit }, userId) {
	+ commit('clearFriends', userId)
	},
	- clearFriendsAndFollowers ({ commit }, userKey) {
	- commit('clearFriendsAndFollowers', userKey)
	+ clearFollowers ({ commit }, userId) {
	+ commit('clearFollowers', userId)
	},
	registerPushNotifications (store) {
	const token = store.state.currentUser.credentials
	const vapidPublicKey = store.rootState.instance.vapidPublicKey
	const isEnabled = store.rootState.config.webPushNotifications
	const notificationVisibility = store.rootState.config.notificationVisibility

	registerPushNotifications(isEnabled, vapidPublicKey, token, notificationVisibility)
	},
	unregisterPushNotifications (store) {
	const token = store.state.currentUser.credentials

	unregisterPushNotifications(token)
	},
	addNewStatuses (store, { statuses }) {
	const users = map(statuses, 'user')
	const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
	store.commit('addNewUsers', users)
	store.commit('addNewUsers', retweetedUsers)

	// Reconnect users to statuses
	each(statuses, (status) => {
	store.commit('setUserForStatus', status)
	})
	// Reconnect users to retweets
	each(compact(map(statuses, 'retweeted_status')), (status) => {
	store.commit('setUserForStatus', status)
	})
	},
	addNewNotifications (store, { notifications }) {
	const users = map(notifications, 'from_profile')
	const notificationIds = notifications.map(_ => _.id)
	store.commit('addNewUsers', users)

	const notificationsObject = store.rootState.statuses.notifications.idStore
	const relevantNotifications = Object.entries(notificationsObject)
	.filter(([k, val]) => notificationIds.includes(k))
	.map(([k, val]) => val)

	// Reconnect users to notifications
	each(relevantNotifications, (notification) => {
	store.commit('setUserForNotification', notification)
	})
	},
	async signUp (store, userInfo) {
	store.commit('signUpPending')

	let rootState = store.rootState

	let response = await rootState.api.backendInteractor.register(userInfo)
	if (response.ok) {
	const data = {
	oauth: rootState.oauth,
	instance: rootState.instance.server
	}
	let app = await oauthApi.getOrCreateApp(data)
	let result = await oauthApi.getTokenWithCredentials({
	app,
	instance: data.instance,
	username: userInfo.username,
	password: userInfo.password
	})
	store.commit('signUpSuccess')
	store.commit('setToken', result.access_token)
	store.dispatch('loginUser', result.access_token)
	} else {
	const data = await response.json()
	let errors = JSON.parse(data.error)
	// replace ap_id with username
	if (errors.ap_id) {
	errors.username = errors.ap_id
	delete errors.ap_id
	}
	errors = humanizeErrors(errors)
	store.commit('signUpFailure', errors)
	throw Error(errors)
	}
	},
	async getCaptcha (store) {
	return await store.rootState.api.backendInteractor.getCaptcha()
	},

	logout (store) {
	store.commit('clearCurrentUser')
	store.commit('setToken', false)
	store.dispatch('stopFetching', 'friends')
	store.commit('setBackendInteractor', backendInteractorService())
	},
	loginUser (store, accessToken) {
	return new Promise((resolve, reject) => {
	const commit = store.commit
	commit('beginLogin')
	store.rootState.api.backendInteractor.verifyCredentials(accessToken)
	.then((data) => {
	if (!data.error) {
	const user = data
	// user.credentials = userCredentials
	user.credentials = accessToken
	user.blockIds = []
	user.muteIds = []
	commit('setCurrentUser', user)
	commit('addNewUsers', [user])

	getNotificationPermission()
	.then(permission => commit('setNotificationPermission', permission))

	// Set our new backend interactor
	commit('setBackendInteractor', backendInteractorService(accessToken))

	if (user.token) {
	store.dispatch('setWsToken', user.token)
	}

	// Start getting fresh posts.
	store.dispatch('startFetching', { timeline: 'friends' })

	// Get user mutes
	store.dispatch('fetchMutes')

	// Fetch our friends
	store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
	.then((friends) => commit('addNewUsers', friends))
	} else {
	const response = data.error
	// Authentication failed
	commit('endLogin')
	if (response.status === 401) {
	reject('Wrong username or password')
	} else {
	reject('An error occurred, please try again')
	}
	}
	commit('endLogin')
	resolve()
	})
	.catch((error) => {
	console.log(error)
	commit('endLogin')
	reject('Failed to connect to server, try again')
	})
	})
	}
	}
	}

	export default users
	diff --git a/src/services/component_utils/component_utils.js b/src/services/component_utils/component_utils.js
	new file mode 100644
	index 0000000000..77ea14a10c
	--- /dev/null
	+++ b/src/services/component_utils/component_utils.js
	@@ -0,0 +1,10 @@
	+import isFunction from 'lodash/isFunction'
	+
	+const getComponentOptions = (Component) => (isFunction(Component)) ? Component.options : Component
	+
	+const getComponentProps = (Component) => getComponentOptions(Component).props
	+
	+export {
	+ getComponentOptions,
	+ getComponentProps
	+}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 30, 5:17 AM (1 d, 15 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1737767
Default Alt Text: (70 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions