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

252 lines
5.8 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
2020-04-23 11:44:55 +00:00
:user-id="userId"
2019-07-05 07:17:44 +00:00
: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"
class="user-profile-field"
2019-11-15 18:12:16 +00:00
>
<dt
:title="user.fields_text[index].name"
2019-11-15 18:12:16 +00:00
class="user-profile-field-name"
>
<RichContent
:html="field.name"
:emoji="user.emoji"
/>
</dt>
2019-11-15 18:12:16 +00:00
<dd
:title="user.fields_text[index].value"
2019-11-15 18:12:16 +00:00
class="user-profile-field-value"
>
<RichContent
:html="field.value"
:emoji="user.emoji"
/>
</dd>
2019-11-15 18:12:16 +00:00
</dl>
</div>
2022-06-23 12:04:54 +00:00
<div
2022-06-23 17:02:47 +00:00
v-if="currentUser && !isUs"
2022-06-23 12:04:54 +00:00
class="note"
>
2022-06-23 12:04:19 +00:00
<textarea
v-model="note"
class="resize-height"
:placeholder="$t('user_card.note')"
@input="setNote"
/>
<div
v-show="noteLoading"
class="preview-spinner"
>
<FAIcon
class="fa-old-padding"
spin
icon="circle-notch"
/>
</div>
</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"
2022-06-15 15:58:02 +00:00
:footer-slipgate="footerRef"
/>
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">
2021-04-07 19:42:34 +00:00
<template v-slot:item="{item}">
2019-07-05 07:17:44 +00:00
<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">
2021-04-07 19:42:34 +00:00
<template v-slot:item="{item}">
2019-07-05 07:17:44 +00:00
<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"
2022-06-15 15:58:02 +00:00
:footer-slipgate="footerRef"
/>
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"
2022-06-15 15:58:02 +00:00
:footer-slipgate="footerRef"
2019-07-05 07:17:44 +00:00
/>
</tab-switcher>
2022-06-15 15:58:02 +00:00
<div
:ref="setFooterRef"
class="panel-footer"
/>
2019-07-05 07:17:44 +00:00
</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>
2020-10-20 21:01:28 +00:00
<FAIcon
2019-07-05 07:17:44 +00:00
v-else
2020-10-20 21:01:28 +00:00
spin
icon="circle-notch"
2019-07-05 07:17:44 +00:00
/>
</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">
2020-06-17 15:26:06 +00:00
@import '../../_variables.scss';
2016-12-08 08:09:21 +00:00
.user-profile {
2018-04-07 16:30:27 +00:00
flex: 2;
flex-basis: 500px;
// No sticky header on user profile
--currentPanelStack: 1;
2019-11-15 18:12:16 +00:00
.user-profile-fields {
2020-06-17 15:26:06 +00:00
margin: 0 0.5em;
2020-10-20 21:01:28 +00:00
2019-11-17 15:27:14 +00:00
img {
object-fit: contain;
vertical-align: middle;
max-width: 100%;
max-height: 400px;
&.emoji {
2020-06-17 15:34:24 +00:00
width: 18px;
height: 18px;
2019-11-17 15:27:14 +00:00
}
}
.user-profile-field {
display: flex;
2020-09-24 10:05:51 +00:00
margin: 0.25em;
2020-06-18 11:08:00 +00:00
border: 1px solid var(--border, $fallback--border);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
2019-11-15 18:12:16 +00:00
.user-profile-field-name {
2020-06-17 15:26:06 +00:00
flex: 0 1 30%;
font-weight: 500;
2019-11-20 10:25:11 +00:00
text-align: right;
color: var(--lightText);
min-width: 120px;
2020-06-18 11:08:00 +00:00
border-right: 1px solid var(--border, $fallback--border);
}
.user-profile-field-value {
2020-06-18 11:13:44 +00:00
flex: 1 1 70%;
color: var(--text);
2020-06-17 15:26:06 +00:00
margin: 0 0 0 0.25em;
}
.user-profile-field-name, .user-profile-field-value {
line-height: 1.3;
2019-11-15 18:12:16 +00:00
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
2020-06-17 15:26:06 +00:00
padding: 0.5em 1.5em;
box-sizing: border-box;
2019-11-15 18:12:16 +00:00
}
}
}
.userlist-placeholder {
display: flex;
justify-content: center;
align-items: middle;
padding: 2em;
}
2022-06-22 15:46:47 +00:00
.note {
2022-06-23 12:04:19 +00:00
position: relative;
2022-06-22 15:46:47 +00:00
margin: 0.5em 0.75em;
2022-06-23 12:04:19 +00:00
textarea {
width: 100%;
}
.preview-spinner {
position: absolute;
top: 0;
right: 0;
margin: 0.5em 0.25em;
}
2022-06-22 15:46:47 +00:00
}
}
.user-profile-placeholder {
.panel-body {
display: flex;
justify-content: center;
align-items: middle;
padding: 7em;
}
}
2016-12-08 08:09:21 +00:00
</style>