150 lines
3.4 KiB
Vue
150 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
v-if="user"
|
|
class="user-profile panel panel-default"
|
|
>
|
|
<UserCard
|
|
:userId="user.id"
|
|
:switcher="true"
|
|
:selected="timeline.viewing"
|
|
:allow-zooming-avatar="true"
|
|
rounded="top"
|
|
/>
|
|
<tab-switcher
|
|
:active-tab="tab"
|
|
:render-only-focused="true"
|
|
:on-switch="onTabSwitch"
|
|
>
|
|
<Timeline
|
|
key="statuses"
|
|
:label="$t('user_card.statuses')"
|
|
:count="user.statuses_count"
|
|
:embedded="true"
|
|
:title="$t('user_profile.timeline_title')"
|
|
:timeline="timeline"
|
|
timeline-name="user"
|
|
:user-id="userId"
|
|
:pinned-status-ids="user.pinnedStatusIds"
|
|
:in-profile="true"
|
|
/>
|
|
<div
|
|
v-if="followsTabVisible"
|
|
key="followees"
|
|
:label="$t('user_card.followees')"
|
|
:disabled="!user.friends_count"
|
|
>
|
|
<FriendList :user-id="userId">
|
|
<template
|
|
slot="item"
|
|
slot-scope="{item}"
|
|
>
|
|
<FollowCard :user="item" />
|
|
</template>
|
|
</FriendList>
|
|
</div>
|
|
<div
|
|
v-if="followersTabVisible"
|
|
key="followers"
|
|
:label="$t('user_card.followers')"
|
|
:disabled="!user.followers_count"
|
|
>
|
|
<FollowerList :user-id="userId">
|
|
<template
|
|
slot="item"
|
|
slot-scope="{item}"
|
|
>
|
|
<FollowCard
|
|
:user="item"
|
|
:no-follows-you="isUs"
|
|
/>
|
|
</template>
|
|
</FollowerList>
|
|
</div>
|
|
<Timeline
|
|
key="media"
|
|
:label="$t('user_card.media')"
|
|
:disabled="!media.visibleStatuses.length"
|
|
:embedded="true"
|
|
:title="$t('user_card.media')"
|
|
timeline-name="media"
|
|
:timeline="media"
|
|
:user-id="userId"
|
|
:in-profile="true"
|
|
/>
|
|
<Timeline
|
|
v-if="isUs"
|
|
key="favorites"
|
|
:label="$t('user_card.favorites')"
|
|
:disabled="!favorites.visibleStatuses.length"
|
|
:embedded="true"
|
|
:title="$t('user_card.favorites')"
|
|
timeline-name="favorites"
|
|
:timeline="favorites"
|
|
:in-profile="true"
|
|
/>
|
|
</tab-switcher>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="panel user-profile-placeholder"
|
|
>
|
|
<div class="panel-heading">
|
|
<div class="title">
|
|
{{ $t('settings.profile_tab') }}
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<span v-if="error">{{ error }}</span>
|
|
<i
|
|
v-else
|
|
class="icon-spin3 animate-spin"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./user_profile.js"></script>
|
|
|
|
<style lang="scss">
|
|
|
|
.user-profile {
|
|
flex: 2;
|
|
flex-basis: 500px;
|
|
|
|
.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>
|