2020-11-29 22:13:27 +00:00
|
|
|
<h2 class="sr-only">{intl.statisticsAndMoreOptions}</h2>
|
2018-04-01 00:51:18 +01:00
|
|
|
<div class="account-profile-details">
|
|
|
|
<div class="account-profile-details-item">
|
2018-04-01 01:01:09 +01:00
|
|
|
<span class="account-profile-details-item-title">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.statuses}
|
2018-04-01 01:01:09 +01:00
|
|
|
</span>
|
2018-04-01 00:51:18 +01:00
|
|
|
<span class="account-profile-details-item-datum">
|
2018-05-02 01:05:36 +01:00
|
|
|
{numStatusesDisplay}
|
2018-04-01 01:01:09 +01:00
|
|
|
</span>
|
2018-04-01 00:51:18 +01:00
|
|
|
</div>
|
2018-04-27 05:09:39 +01:00
|
|
|
<a class="account-profile-details-item"
|
2018-05-02 01:05:36 +01:00
|
|
|
href='/accounts/{account.id}/follows'
|
|
|
|
aria-label={followingLabel}
|
2019-02-14 02:40:02 +00:00
|
|
|
rel="prefetch"
|
2018-04-27 06:05:55 +01:00
|
|
|
>
|
2018-04-27 05:09:39 +01:00
|
|
|
<span class="account-profile-details-item-title">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.follows}
|
2018-04-27 05:09:39 +01:00
|
|
|
</span>
|
|
|
|
<span class="account-profile-details-item-datum">
|
2018-05-02 01:05:36 +01:00
|
|
|
{numFollowingDisplay}
|
2018-04-27 05:09:39 +01:00
|
|
|
</span>
|
|
|
|
</a>
|
|
|
|
<a class="account-profile-details-item"
|
2018-05-02 01:05:36 +01:00
|
|
|
href='/accounts/{account.id}/followers'
|
|
|
|
aria-label={followersLabel}
|
2019-02-14 02:40:02 +00:00
|
|
|
rel="prefetch"
|
2018-04-27 06:05:55 +01:00
|
|
|
>
|
2018-04-27 05:09:39 +01:00
|
|
|
<span class="account-profile-details-item-title">
|
2020-11-29 22:13:27 +00:00
|
|
|
{intl.followers}
|
2018-04-27 05:09:39 +01:00
|
|
|
</span>
|
|
|
|
<span class="account-profile-details-item-datum">
|
2018-05-02 01:05:36 +01:00
|
|
|
{numFollowersDisplay}
|
2018-04-27 05:09:39 +01:00
|
|
|
</span>
|
|
|
|
</a>
|
2018-04-15 23:39:54 +01:00
|
|
|
<!-- TODO: re-enable this when we support profile editing -->
|
2018-05-02 01:05:36 +01:00
|
|
|
{#if account && verifyCredentials && account.id !== verifyCredentials.id}
|
2018-04-15 23:39:54 +01:00
|
|
|
<div class="account-profile-more-options">
|
|
|
|
<IconButton
|
2020-11-29 22:13:27 +00:00
|
|
|
label="{intl.moreOptions}"
|
2018-04-15 23:39:54 +01:00
|
|
|
href="#fa-bars"
|
|
|
|
muted="true"
|
|
|
|
on:click="onMoreOptionsClick()"
|
|
|
|
/>
|
|
|
|
</div>
|
2018-05-02 01:05:36 +01:00
|
|
|
{/if}
|
2018-04-01 00:51:18 +01:00
|
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.account-profile-details {
|
|
|
|
grid-area: details;
|
2019-09-24 08:29:42 +01:00
|
|
|
display: grid;
|
2018-04-01 00:51:18 +01:00
|
|
|
margin: 0 5px;
|
2018-04-05 05:45:19 +01:00
|
|
|
align-items: center;
|
2019-09-24 08:29:42 +01:00
|
|
|
grid-template-columns: 1fr 1fr 1fr min-content;
|
2018-04-01 00:51:18 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.account-profile-details-item {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
padding: 5px;
|
|
|
|
justify-content: center;
|
|
|
|
font-size: 1.1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.account-profile-details-item:hover {
|
2018-04-27 05:09:39 +01:00
|
|
|
text-decoration: none;
|
2018-04-01 00:51:18 +01:00
|
|
|
background: var(--button-bg-hover);
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.account-profile-details-item:active {
|
|
|
|
background: var(--button-bg-active);
|
|
|
|
}
|
|
|
|
|
|
|
|
.account-profile-details-item-title {
|
|
|
|
text-transform: uppercase;
|
|
|
|
color: var(--deemphasized-text-color);
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.account-profile-details-item-datum {
|
|
|
|
color: var(--body-text-color);
|
|
|
|
margin-left: 5px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
2018-04-01 01:01:09 +01:00
|
|
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
.account-profile-details-item {
|
|
|
|
flex-direction: column;
|
|
|
|
margin-left: 5px;
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.account-profile-details-item:last-child {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.account-profile-details-item:first-child {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.account-profile-details-item-title {
|
|
|
|
margin-right: 0;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.account-profile-details-item-datum {
|
|
|
|
margin-left: 0;
|
|
|
|
text-align: center;
|
|
|
|
}
|
2018-04-13 06:13:05 +01:00
|
|
|
.account-profile-details-item {
|
|
|
|
font-size: 1em;
|
|
|
|
}
|
|
|
|
}
|
2019-09-24 08:29:42 +01:00
|
|
|
|
|
|
|
@media (max-width: 240px) {
|
|
|
|
.account-profile-details {
|
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
|
}
|
|
|
|
.account-profile-more-options {
|
|
|
|
justify-self: flex-end;
|
|
|
|
grid-column: 1 / 4;
|
|
|
|
}
|
|
|
|
}
|
2018-04-03 16:57:01 +01:00
|
|
|
</style>
|
|
|
|
<script>
|
2018-04-05 05:45:19 +01:00
|
|
|
import IconButton from '../IconButton.html'
|
2019-10-30 01:58:49 +00:00
|
|
|
import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js'
|
2020-11-29 22:13:27 +00:00
|
|
|
import { LOCALE } from '../../_static/intl'
|
|
|
|
import { formatIntl } from '../../_utils/formatIntl'
|
2018-04-05 05:45:19 +01:00
|
|
|
|
2020-11-29 22:13:27 +00:00
|
|
|
const numberFormat = new Intl.NumberFormat(LOCALE)
|
2018-04-03 16:57:01 +01:00
|
|
|
|
|
|
|
export default {
|
|
|
|
computed: {
|
2018-05-02 01:05:36 +01:00
|
|
|
numStatuses: ({ account }) => account.statuses_count || 0,
|
|
|
|
numFollowing: ({ account }) => account.following_count || 0,
|
|
|
|
numFollowers: ({ account }) => account.followers_count || 0,
|
|
|
|
numStatusesDisplay: ({ numStatuses }) => numberFormat.format(numStatuses),
|
|
|
|
numFollowingDisplay: ({ numFollowing }) => numberFormat.format(numFollowing),
|
2019-06-01 21:07:31 +01:00
|
|
|
numFollowersDisplay: ({ numFollowers, $disableFollowerCounts }) => {
|
|
|
|
if ($disableFollowerCounts && numFollowers >= 10) {
|
|
|
|
return '10+'
|
|
|
|
}
|
|
|
|
return numberFormat.format(numFollowers)
|
|
|
|
},
|
2020-11-29 22:13:27 +00:00
|
|
|
followersLabel: ({ numFollowers }) => (
|
|
|
|
formatIntl('intl.followersLabel', { count: numFollowers })
|
|
|
|
),
|
|
|
|
followingLabel: ({ numFollowing }) => (
|
|
|
|
formatIntl('intl.followingLabel', { count: numFollowing })
|
|
|
|
)
|
2018-04-05 05:45:19 +01:00
|
|
|
},
|
|
|
|
methods: {
|
2018-04-20 05:38:01 +01:00
|
|
|
async onMoreOptionsClick () {
|
2019-08-03 21:49:37 +01:00
|
|
|
const { account, relationship, verifyCredentials } = this.get()
|
|
|
|
const showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
|
2018-04-21 17:56:53 +01:00
|
|
|
showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
|
2018-04-05 05:45:19 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
IconButton
|
2018-04-03 16:57:01 +01:00
|
|
|
}
|
|
|
|
}
|
2018-04-22 19:06:54 +01:00
|
|
|
</script>
|