teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

ui: improve account switcher

Browse source
This commit is contained in:
Anthony Fu 2022-11-30 15:30:17 +08:00
parent b150d6d65e
commit 9ee51a5831
5 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/main/MainContent.vue
View file

@ -21,7 +21,7 @@ defineProps<{
</div> </div>
<div flex items-center> <div flex items-center>
<slot name="actions" /> <slot name="actions" />
<NavUser v-if="isSmallScreen" /> <NavUser v-if="isMediumScreen" />
</div> </div>
</div> </div>
<slot name="header" /> <slot name="header" />

1
components/nav/NavSide.vue
View file

@ -16,6 +16,7 @@ const { t } = useI18n()
<NavSideItem :text="t('nav_side.favourites')" to="/favourites" icon="i-ri:heart-3-line" /> <NavSideItem :text="t('nav_side.favourites')" to="/favourites" icon="i-ri:heart-3-line" />
<NavSideItem :text="t('nav_side.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " /> <NavSideItem :text="t('nav_side.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " />
<NavSideItem <NavSideItem
v-if="isMediumScreen"
:text="currentUser.account.displayName" :text="currentUser.account.displayName"
:to="getAccountPath(currentUser.account)" :to="getAccountPath(currentUser.account)"
icon="i-ri:account-circle-line" icon="i-ri:account-circle-line"

2
components/user/UserSwitcher.vue
View file

@ -28,7 +28,7 @@ const switchUser = (user: UserLogin) => {
aria-label="Switch user" aria-label="Switch user"
@click="switchUser(user)" @click="switchUser(user)"
> >
<AccountInfo :account="user.account" /> <AccountInfo :account="user.account" :hover-card="false" />
<div flex-auto /> <div flex-auto />
<div v-if="user.token === currentUser?.token" i-ri:check-line text-primary mya text-2xl /> <div v-if="user.token === currentUser?.token" i-ri:check-line text-primary mya text-2xl />
</button> </button>

1
composables/screen.ts
View file

@ -3,3 +3,4 @@ import { breakpointsTailwind } from '@vueuse/core'
export const breakpoints = useBreakpoints(breakpointsTailwind) export const breakpoints = useBreakpoints(breakpointsTailwind)
export const isSmallScreen = breakpoints.smallerOrEqual('md') export const isSmallScreen = breakpoints.smallerOrEqual('md')
export const isMediumScreen = breakpoints.smallerOrEqual('lg')

31
layouts/default.vue
View file

@ -21,23 +21,24 @@
<div sticky top-0 h-screen flex="~ col"> <div sticky top-0 h-screen flex="~ col">
<slot name="right"> <slot name="right">
<UserSignInEntry v-if="!currentUser" /> <UserSignInEntry v-if="!currentUser" />
<VDropdown <div v-if="currentUser" py6 px4 w-full flex="~" items-center justify-between>
v-if="currentUser" <NuxtLink
:distance="0" p2 rounded-full text-start w-full
placement="bottom-end"
>
<button
m5 p2 rounded-full text-start w-full
hover:bg-active cursor-pointer transition-100 hover:bg-active cursor-pointer transition-100
class="md:(w-7.5/10 rounded-5)" :to="getAccountPath(currentUser.account)"
aria-label="Switch account"
> >
<AccountInfo :account="currentUser.account" md:flex="col" md:break-words /> <AccountInfo :account="currentUser.account" md:break-words />
</button> </NuxtLink>
<template #popper> <VDropdown :distance="0" placement="bottom-end">
<UserSwitcher /> <button btn-action-icon aria-label="Switch account">
</template> <div i-ri:more-2-line />
</VDropdown> </button>
<template #popper>
<UserSwitcher />
</template>
</VDropdown>
</div>
<div flex-auto /> <div flex-auto />
<NavFooter /> <NavFooter />
</slot> </slot>