135 lines
3.4 KiB
HTML
135 lines
3.4 KiB
HTML
<div class="account-profile-details">
|
|
<div class="account-profile-details-item">
|
|
<span class="account-profile-details-item-title">
|
|
Toots
|
|
</span>
|
|
<span class="account-profile-details-item-datum">
|
|
{{numStatusesDisplay}}
|
|
</span>
|
|
</div>
|
|
<div class="account-profile-details-item">
|
|
<span class="account-profile-details-item-title">
|
|
Follows
|
|
</span>
|
|
<span class="account-profile-details-item-datum">
|
|
{{numFollowingDisplay}}
|
|
</span>
|
|
</div>
|
|
<div class="account-profile-details-item">
|
|
<span class="account-profile-details-item-title">
|
|
Followers
|
|
</span>
|
|
<span class="account-profile-details-item-datum">
|
|
{{numFollowersDisplay}}
|
|
</span>
|
|
</div>
|
|
<!-- TODO: re-enable this when we support profile editing -->
|
|
{{#if account && verifyCredentials && account.id !== verifyCredentials.id}}
|
|
<div class="account-profile-more-options">
|
|
<IconButton
|
|
label="More options"
|
|
href="#fa-bars"
|
|
muted="true"
|
|
on:click="onMoreOptionsClick()"
|
|
/>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<style>
|
|
.account-profile-details {
|
|
grid-area: details;
|
|
display: flex;
|
|
margin: 0 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
.account-profile-details-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 5px;
|
|
justify-content: center;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.account-profile-details-item:hover {
|
|
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;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.account-profile-details-item {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import IconButton from '../IconButton.html'
|
|
import { importDialogs } from '../../_utils/asyncModules'
|
|
|
|
const numberFormat = new Intl.NumberFormat('en-US')
|
|
|
|
export default {
|
|
computed: {
|
|
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),
|
|
numFollowersDisplay: numFollowers => numberFormat.format(numFollowers)
|
|
},
|
|
methods: {
|
|
async onMoreOptionsClick() {
|
|
let account = this.get('account')
|
|
let relationship = this.get('relationship')
|
|
let verifyCredentials = this.get('verifyCredentials')
|
|
let dialogs = await importDialogs()
|
|
dialogs.showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
|
|
}
|
|
},
|
|
components: {
|
|
IconButton
|
|
}
|
|
}
|
|
</script> |