zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

refactor: use dropdown instead of drawer for user switch

Browse source
This commit is contained in:
Anthony Fu 2022-11-27 11:34:55 +08:00
parent 4703b6884a
commit 39e200f639
7 changed files with 36 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/user/UserSwitcher.vue
View file

@ -10,28 +10,20 @@ const sorted = computed(() => {
</script>
<template>
<div max-w-40rem mxa p4 flex="~ col gap2">
<h1 text-2xl>
Account
</h1>
<div mx--2>
<template v-for="user of sorted" :key="user.id">
<AccountInfo
:account="user.account"
:link="false"
:full-server="true"
rounded p2
:class="user.token !== currentUser?.token ? 'hover:bg-active cursor-pointer transition-100' : ''"
@click="loginTo(user)"
>
<template v-if="user.token === currentUser?.token">
<div flex-auto />
<div i-ri:check-line text-primary mya text-2xl />
</template>
</AccountInfo>
</template>
</div>
<div mx--4 border="t base" pt2>
<div min-w-80 mxa py2 flex="~ col">
<template v-for="user of sorted" :key="user.id">
<Component
:is="user.token !== currentUser?.token ? 'button' : 'div'"
flex rounded px4 py3 text-left
:class="user.token !== currentUser?.token ? 'hover:bg-active cursor-pointer transition-100' : ''"
@click="loginTo(user)"
>
<AccountInfo :account="user.account" />
<div flex-auto />
<div v-if="user.token === currentUser?.token" i-ri:check-line text-primary mya text-2xl />
</Component>
</template>
<div border="t base" pt2>
<button btn-text flex="~ gap-1" items-center @click="openSigninDialog">
<div i-ri:user-add-line />
Add an existing account