akkoma-fe/src/components/user_profile/user_profile.vue

212 lines
4.7 KiB
Vue
Raw Normal View History

2016-11-30 22:32:22 +00:00
<template>
2019-07-05 07:17:44 +00:00
<div>
<div
v-if="user"
class="user-profile panel panel-default"
>
<UserCard
:user="user"
:switcher="true"
:selected="timeline.viewing"
:allow-zooming-avatar="true"
2019-07-05 07:17:44 +00:00
rounded="top"
/>
2019-11-15 18:12:16 +00:00
<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"
>
<!-- eslint-disable vue/no-v-html -->
<dt
class="user-profile-field-name"
@click.prevent="linkClicked"
v-html="field.name"
/>
<dd
class="user-profile-field-value"
@click.prevent="linkClicked"
v-html="field.value"
/>
<!-- eslint-enable vue/no-v-html -->
</dl>
</div>
<div
v-else-if="user.fields && user.fields.length > 0"
class="user-card-fields"
>
<dl
v-for="(field, index) in user.fields"
:key="index"
>
<dt class="user-card-field-name">
{{ field.name }}
</dt>
<dd class="user-card-field-value">
{{ field.value }}
</dd>
</dl>
</div>
2019-07-05 07:17:44 +00:00
<tab-switcher
:active-tab="tab"
2019-07-05 07:17:44 +00:00
:render-only-focused="true"
:on-switch="onTabSwitch"
2019-07-05 07:17:44 +00:00
>
<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"
2019-09-13 20:55:17 +00:00
:in-profile="true"
/>
2019-07-05 07:17:44 +00:00
<div
v-if="followsTabVisible"
key="followees"
2019-07-05 07:17:44 +00:00
: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"
2019-07-05 07:17:44 +00:00
: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"
2019-07-05 07:17:44 +00:00
:label="$t('user_card.media')"
:disabled="!media.visibleStatuses.length"
:embedded="true"
2019-07-05 07:17:44 +00:00
:title="$t('user_card.media')"
timeline-name="media"
:timeline="media"
:user-id="userId"
2019-09-13 20:55:17 +00:00
:in-profile="true"
/>
2019-07-05 07:17:44 +00:00
<Timeline
v-if="isUs"
key="favorites"
2019-07-05 07:17:44 +00:00
:label="$t('user_card.favorites')"
:disabled="!favorites.visibleStatuses.length"
:embedded="true"
:title="$t('user_card.favorites')"
timeline-name="favorites"
:timeline="favorites"
2019-09-13 20:55:17 +00:00
:in-profile="true"
2019-07-05 07:17:44 +00:00
/>
</tab-switcher>
</div>
<div
v-else
class="panel user-profile-placeholder"
>
<div class="panel-heading">
<div class="title">
{{ $t('settings.profile_tab') }}
</div>
</div>
2019-07-05 07:17:44 +00:00
<div class="panel-body">
<span v-if="error">{{ error }}</span>
<i
v-else
class="icon-spin3 animate-spin"
/>
</div>
</div>
2016-11-30 22:32:22 +00:00
</div>
</template>
<script src="./user_profile.js"></script>
2016-12-08 08:09:21 +00:00
<style lang="scss">
.user-profile {
2018-04-07 16:30:27 +00:00
flex: 2;
flex-basis: 500px;
2019-11-15 18:12:16 +00:00
.user-profile-fields {
2019-11-17 15:27:14 +00:00
img {
object-fit: contain;
vertical-align: middle;
max-width: 100%;
max-height: 400px;
&.emoji {
width: 32px;
height: 32px;
}
}
2019-11-15 18:12:16 +00:00
dl {
margin: 1em 1.5em;
dt, dd {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
.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;
}
}
2016-12-08 08:09:21 +00:00
</style>