mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
refactor: use dropdown instead of drawer for user switch
This commit is contained in:
parent
4703b6884a
commit
39e200f639
7 changed files with 36 additions and 57 deletions
|
@ -1,28 +1,19 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Account } from 'masto'
|
import type { Account } from 'masto'
|
||||||
|
|
||||||
const { account, link = true, fullServer = false } = defineProps<{
|
const { account } = defineProps<{
|
||||||
account: Account
|
account: Account
|
||||||
link?: boolean
|
|
||||||
fullServer?: boolean
|
|
||||||
hover?: boolean
|
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- TODO: Make this work for both buttons and links -->
|
<!-- 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 -->
|
<!-- 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>
|
<template>
|
||||||
<div flex gap-3 cursor-default>
|
<div flex gap-3>
|
||||||
<div flex-shrink-0>
|
<AccountAvatar :account="account" w-12 h-12 />
|
||||||
<NuxtLink :to="link ? getAccountPath(account) : null">
|
<div flex="~ col">
|
||||||
<AccountAvatar :account="account" :hover="hover" w-12 h-12 />
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
|
|
||||||
<ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
|
<ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
|
||||||
<AccountHandle :account="account" text-sm />
|
<AccountHandle :account="account" text-sm />
|
||||||
<slot name="bottom" />
|
</div>
|
||||||
</NuxtLink>
|
|
||||||
<slot />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -5,14 +5,10 @@ import {
|
||||||
isPreviewHelpOpen,
|
isPreviewHelpOpen,
|
||||||
isPublishDialogOpen,
|
isPublishDialogOpen,
|
||||||
isSigninDialogOpen,
|
isSigninDialogOpen,
|
||||||
isUserSwitcherOpen,
|
|
||||||
} from '~/composables/dialog'
|
} from '~/composables/dialog'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ModalDialog v-model="isUserSwitcherOpen" type="right">
|
|
||||||
<UserSwitcher min-w-100 />
|
|
||||||
</ModalDialog>
|
|
||||||
<ModalDialog v-model="isSigninDialogOpen">
|
<ModalDialog v-model="isSigninDialogOpen">
|
||||||
<UserSignIn m6 />
|
<UserSignIn m6 />
|
||||||
</ModalDialog>
|
</ModalDialog>
|
||||||
|
|
|
@ -98,7 +98,7 @@ function onTransitionEnd() {
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="isVisible"
|
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'"
|
:class="modelValue ? '' : 'pointer-events-none'"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -50,7 +50,7 @@ defineExpose({
|
||||||
block m0 w-full text-left px2 py1
|
block m0 w-full text-left px2 py1
|
||||||
@click="selectItem(index)"
|
@click="selectItem(index)"
|
||||||
>
|
>
|
||||||
<AccountInfo :link="false" :account="item" />
|
<AccountInfo :account="item" />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
<div v-else block m0 w-full text-left px2 py1 italic op30>
|
<div v-else block m0 w-full text-left px2 py1 italic op30>
|
||||||
|
|
|
@ -10,28 +10,20 @@ const sorted = computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div max-w-40rem mxa p4 flex="~ col gap2">
|
<div min-w-80 mxa py2 flex="~ col">
|
||||||
<h1 text-2xl>
|
|
||||||
Account
|
|
||||||
</h1>
|
|
||||||
<div mx--2>
|
|
||||||
<template v-for="user of sorted" :key="user.id">
|
<template v-for="user of sorted" :key="user.id">
|
||||||
<AccountInfo
|
<Component
|
||||||
:account="user.account"
|
:is="user.token !== currentUser?.token ? 'button' : 'div'"
|
||||||
:link="false"
|
flex rounded px4 py3 text-left
|
||||||
:full-server="true"
|
|
||||||
rounded p2
|
|
||||||
:class="user.token !== currentUser?.token ? 'hover:bg-active cursor-pointer transition-100' : ''"
|
:class="user.token !== currentUser?.token ? 'hover:bg-active cursor-pointer transition-100' : ''"
|
||||||
@click="loginTo(user)"
|
@click="loginTo(user)"
|
||||||
>
|
>
|
||||||
<template v-if="user.token === currentUser?.token">
|
<AccountInfo :account="user.account" />
|
||||||
<div flex-auto />
|
<div flex-auto />
|
||||||
<div 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 />
|
||||||
|
</Component>
|
||||||
</template>
|
</template>
|
||||||
</AccountInfo>
|
<div border="t base" pt2>
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div mx--4 border="t base" pt2>
|
|
||||||
<button btn-text flex="~ gap-1" items-center @click="openSigninDialog">
|
<button btn-text flex="~ gap-1" items-center @click="openSigninDialog">
|
||||||
<div i-ri:user-add-line />
|
<div i-ri:user-add-line />
|
||||||
Add an existing account
|
Add an existing account
|
||||||
|
|
|
@ -8,20 +8,14 @@ export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
|
||||||
export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
|
export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
|
||||||
export const toggleZenMode = useToggle(isZenMode)
|
export const toggleZenMode = useToggle(isZenMode)
|
||||||
|
|
||||||
export const isUserSwitcherOpen = ref(false)
|
|
||||||
export const isSigninDialogOpen = ref(false)
|
export const isSigninDialogOpen = ref(false)
|
||||||
export const isPublishDialogOpen = ref(false)
|
export const isPublishDialogOpen = ref(false)
|
||||||
export const isImagePreviewDialogOpen = ref(false)
|
export const isImagePreviewDialogOpen = ref(false)
|
||||||
export const isEditHistoryDialogOpen = ref(false)
|
export const isEditHistoryDialogOpen = ref(false)
|
||||||
export const isPreviewHelpOpen = ref(isFirstVisit.value)
|
export const isPreviewHelpOpen = ref(isFirstVisit.value)
|
||||||
|
|
||||||
export function openUserSwitcher() {
|
|
||||||
isUserSwitcherOpen.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openSigninDialog() {
|
export function openSigninDialog() {
|
||||||
isSigninDialogOpen.value = true
|
isSigninDialogOpen.value = true
|
||||||
isUserSwitcherOpen.value = false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function openPublishDialog(draft?: Draft) {
|
export function openPublishDialog(draft?: Draft) {
|
||||||
|
|
|
@ -21,16 +21,22 @@
|
||||||
<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" />
|
||||||
<AccountInfo
|
<VDropdown
|
||||||
v-if="currentUser"
|
v-if="currentUser"
|
||||||
m5 p2 rounded-full
|
:triggers="['click', 'focus']"
|
||||||
|
:distance="0"
|
||||||
|
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
|
||||||
:account="currentUser.account"
|
>
|
||||||
:full-server="true"
|
<AccountInfo :account="currentUser.account" />
|
||||||
:link="false"
|
</button>
|
||||||
@keydown.enter="openUserSwitcher"
|
<template #popper>
|
||||||
@click="openUserSwitcher"
|
<UserSwitcher />
|
||||||
/>
|
</template>
|
||||||
|
</VDropdown>
|
||||||
<div flex-auto />
|
<div flex-auto />
|
||||||
<NavFooter />
|
<NavFooter />
|
||||||
</slot>
|
</slot>
|
||||||
|
|
Loading…
Reference in a new issue