forked from AkkomaGang/akkoma-fe
91 lines
2.1 KiB
Vue
91 lines
2.1 KiB
Vue
<template>
|
|
<Popover
|
|
trigger="click"
|
|
class="SwitchAccounts"
|
|
:bound-to="{ x: 'container' }"
|
|
:offset="{ x: -16 }"
|
|
>
|
|
<template #trigger>
|
|
<button
|
|
class="button-unstyled switch-account-button"
|
|
>
|
|
<FAIcon
|
|
fixed-width
|
|
class="icon"
|
|
icon="user-plus"
|
|
:title="$t('user_card.switch_accounts')"
|
|
/>
|
|
</button>
|
|
</template>
|
|
<template #content>
|
|
<div class="dropdown-menu">
|
|
<button
|
|
v-for="account in accounts"
|
|
class="button-default dropdown-item account-button"
|
|
:class="account.id === currentUser.id ? 'selected' : ''"
|
|
:key="account.screen_name"
|
|
@click="switchAccount(account.screen_name)"
|
|
>
|
|
<UserAvatar
|
|
:compact="true"
|
|
:user="account"
|
|
/>
|
|
<div class="right-side">
|
|
<RichContent
|
|
class="username"
|
|
:title="'@'+account.screen_name"
|
|
:html="account.name_html"
|
|
:emoji="account.emoji"
|
|
/>
|
|
<a>@{{ account.screen_name }}</a>
|
|
</div>
|
|
</button>
|
|
<div
|
|
role="separator"
|
|
class="dropdown-divider"
|
|
/>
|
|
<button
|
|
class="button-default dropdown-item dropdown-item-icon"
|
|
@click="login"
|
|
>
|
|
<FAIcon icon="right-to-bracket" />{{ $t('login.login') }}
|
|
</button>
|
|
<button
|
|
v-if="registrationOpen"
|
|
class="button-default dropdown-item dropdown-item-icon"
|
|
@click="register"
|
|
>
|
|
<FAIcon icon="user-pen" />{{ $t('login.register') }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</Popover>
|
|
</template>
|
|
|
|
<script src="./account_switcher.js"></script>
|
|
|
|
<style lang="scss">
|
|
@import '../../_variables.scss';
|
|
|
|
.button-default.dropdown-item.account-button {
|
|
display: flex;
|
|
|
|
&.selected {
|
|
background-color: var(--selectedPost, $fallback--lightBg);
|
|
}
|
|
|
|
.Avatar {
|
|
margin-right: 0.75em;
|
|
}
|
|
|
|
.right-side {
|
|
margin: auto;
|
|
}
|
|
|
|
.username {
|
|
font-weight: bolder;
|
|
margin-right: 0.4em;
|
|
}
|
|
}
|
|
</style>
|