refactor: use dropdown instead of drawer for user switch

zio/stable
Anthony Fu 2022-11-27 11:34:55 +08:00
parent 4703b6884a
commit 39e200f639
7 changed files with 36 additions and 57 deletions

View File

@ -1,28 +1,19 @@
<script setup lang="ts">
import type { Account } from 'masto'
const { account, link = true, fullServer = false } = defineProps<{
const { account } = defineProps<{
account: Account
link?: boolean
fullServer?: boolean
hover?: boolean
}>()
</script>
<!-- TODO: Make this work for both buttons and links -->
<!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
<template>
<div flex gap-3 cursor-default>
<div flex-shrink-0>
<NuxtLink :to="link ? getAccountPath(account) : null">
<AccountAvatar :account="account" :hover="hover" w-12 h-12 />
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
<div flex gap-3>
<AccountAvatar :account="account" w-12 h-12 />
<div flex="~ col">
<ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" text-sm />
<slot name="bottom" />
</NuxtLink>
<slot />
</div>
</div>
</template>

View File

@ -5,14 +5,10 @@ import {
isPreviewHelpOpen,
isPublishDialogOpen,
isSigninDialogOpen,
isUserSwitcherOpen,
} from '~/composables/dialog'
</script>
<template>
<ModalDialog v-model="isUserSwitcherOpen" type="right">
<UserSwitcher min-w-100 />
</ModalDialog>
<ModalDialog v-model="isSigninDialogOpen">
<UserSignIn m6 />
</ModalDialog>

View File

@ -98,7 +98,7 @@ function onTransitionEnd() {
<template>
<div
v-if="isVisible"
fixed top-0 bottom-0 left-0 right-0 z-40
fixed top-0 bottom-0 left-0 right-0 z-20000
:class="modelValue ? '' : 'pointer-events-none'"
>
<div

View File

@ -50,7 +50,7 @@ defineExpose({
block m0 w-full text-left px2 py1
@click="selectItem(index)"
>
<AccountInfo :link="false" :account="item" />
<AccountInfo :account="item" />
</button>
</template>
<div v-else block m0 w-full text-left px2 py1 italic op30>

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

View File

@ -8,20 +8,14 @@ export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
export const toggleZenMode = useToggle(isZenMode)
export const isUserSwitcherOpen = ref(false)
export const isSigninDialogOpen = ref(false)
export const isPublishDialogOpen = ref(false)
export const isImagePreviewDialogOpen = ref(false)
export const isEditHistoryDialogOpen = ref(false)
export const isPreviewHelpOpen = ref(isFirstVisit.value)
export function openUserSwitcher() {
isUserSwitcherOpen.value = true
}
export function openSigninDialog() {
isSigninDialogOpen.value = true
isUserSwitcherOpen.value = false
}
export function openPublishDialog(draft?: Draft) {

View File

@ -21,16 +21,22 @@
<div sticky top-0 h-screen flex="~ col">
<slot name="right">
<UserSignInEntry v-if="!currentUser" />
<AccountInfo
<VDropdown
v-if="currentUser"
m5 p2 rounded-full
hover:bg-active cursor-pointer transition-100
:account="currentUser.account"
:full-server="true"
:link="false"
@keydown.enter="openUserSwitcher"
@click="openUserSwitcher"
/>
:triggers="['click', 'focus']"
:distance="0"
placement="bottom-end"
>
<button
m5 p2 rounded-full text-start w-full
hover:bg-active cursor-pointer transition-100
>
<AccountInfo :account="currentUser.account" />
</button>
<template #popper>
<UserSwitcher />
</template>
</VDropdown>
<div flex-auto />
<NavFooter />
</slot>