feat: improve dialog

This commit is contained in:
Anthony Fu 2022-11-27 11:13:39 +08:00
parent cd4658506d
commit 4703b6884a
8 changed files with 86 additions and 30 deletions

View file

@ -6,6 +6,10 @@ interface Team {
mastodon: string mastodon: string
} }
const emit = defineEmits<{
(event: 'close'): void
}>()
const teams: Team[] = [ const teams: Team[] = [
{ {
github: 'antfu', github: 'antfu',
@ -35,7 +39,11 @@ const teams: Team[] = [
</script> </script>
<template> <template>
<div p8 flex="~ col gap-4"> <div p8 flex="~ col gap-4" relative max-h-screen of-auto>
<button btn-action-icon absolute top-0 right-0 m1 @click="emit('close')">
<div i-ri:close-fill />
</button>
<img src="/logo.svg" w-20 h-20 mxa alt="logo"> <img src="/logo.svg" w-20 h-20 mxa alt="logo">
<h1 mxa text-4xl mb4> <h1 mxa text-4xl mb4>
Elk is in Preview! Elk is in Preview!
@ -53,7 +61,7 @@ const teams: Team[] = [
</p> </p>
<p flex="~ gap-2 wrap" mxa> <p flex="~ gap-2 wrap" mxa>
<template v-for="team of teams" :key="team.github"> <template v-for="team of teams" :key="team.github">
<a :href="`https://github.com/sponsors/${team.github}`" target="_blank"> <a :href="`https://github.com/sponsors/${team.github}`" target="_blank" rounded-full>
<img :src="`https://github.com/${team.github}.png`" :alt="team.display" rounded-full w-15 h-15> <img :src="`https://github.com/${team.github}.png`" :alt="team.display" rounded-full w-15 h-15>
</a> </a>
</template> </template>
@ -61,5 +69,9 @@ const teams: Team[] = [
<p italic text-2xl> <p italic text-2xl>
<span text-lg font-script>The Elk Team</span> <span text-lg font-script>The Elk Team</span>
</p> </p>
<button btn-solid mxa @click="emit('close')">
Enter App
</button>
</div> </div>
</template> </template>

View file

@ -16,8 +16,8 @@ import {
<ModalDialog v-model="isSigninDialogOpen"> <ModalDialog v-model="isSigninDialogOpen">
<UserSignIn m6 /> <UserSignIn m6 />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isPreviewHelpOpen"> <ModalDialog v-model="isPreviewHelpOpen" :type="isSmallScreen ? 'bottom' : 'dialog'">
<HelpPreview /> <HelpPreview @close="closePreviewHelp()" />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isPublishDialogOpen"> <ModalDialog v-model="isPublishDialogOpen">
<PublishWidget draft-key="dialog" expanded min-w-180 /> <PublishWidget draft-key="dialog" expanded min-w-180 />

View file

@ -11,8 +11,12 @@ const {
const { modelValue } = defineModel<{ const { modelValue } = defineModel<{
modelValue: boolean modelValue: boolean
closeButton?: boolean
}>() }>()
let isVisible = $ref(modelValue.value)
let isOut = $ref(!modelValue.value)
const positionClass = computed(() => { const positionClass = computed(() => {
switch (type) { switch (type) {
case 'dialog': case 'dialog':
@ -30,24 +34,32 @@ const positionClass = computed(() => {
} }
}) })
const transform = computed(() => { const transformClass = computed(() => {
switch (type) { if (isOut) {
case 'bottom': switch (type) {
return 'translateY(100%)' case 'dialog':
case 'top': return 'op0'
return 'translateY(-100%)' case 'bottom':
case 'left': return 'translate-y-[100%]'
return 'translateX(-100%)' case 'top':
case 'right': return 'translate-y-[100%]'
return 'translateX(100%)' case 'left':
default: return 'translate-x-[-100%]'
return '' case 'right':
return 'translate-x-[100%]'
default:
return ''
}
} }
}) })
const target = ref<HTMLElement | null>(null) const target = ref<HTMLElement | null>(null)
const { activate, deactivate } = useFocusTrap(target) const { activate, deactivate } = useFocusTrap(target)
function close() {
modelValue.value = false
}
watchEffect(() => { watchEffect(() => {
if (modelValue) if (modelValue)
activate() activate()
@ -55,29 +67,52 @@ watchEffect(() => {
deactivate() deactivate()
}) })
let init = $ref(modelValue) useEventListener('keydown', (e: KeyboardEvent) => {
watchOnce(modelValue, () => { if (!modelValue.value)
init = true return
if (e.key === 'Escape') {
close()
e.preventDefault()
}
}) })
watch(modelValue, async (v) => {
if (v) {
isOut = true
isVisible = true
setTimeout(() => {
isOut = false
}, 10)
}
else {
isOut = true
}
})
function onTransitionEnd() {
if (!modelValue.value)
isVisible = false
}
</script> </script>
<template> <template>
<div <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-40
:class="modelValue ? '' : 'pointer-events-none'" :class="modelValue ? '' : 'pointer-events-none'"
> >
<div <div
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
:class="modelValue ? 'opacity-85' : 'opacity-0'" :class="isOut ? 'opacity-0' : 'opacity-85'"
@click="modelValue = false" @click="close"
/> />
<div <div
ref="target" bg-base border-base absolute transition-all duration-200 ref="target"
ease-out bg-base border-base absolute transition-all duration-200 ease-out transform
:class="positionClass" :class="`${positionClass} ${transformClass}`"
:style="modelValue ? {} : { transform }" @transitionend="onTransitionEnd"
> >
<slot v-if="init" /> <slot />
</div> </div>
</div> </div>
</template> </template>

View file

@ -3,7 +3,7 @@
</script> </script>
<template> <template>
<nav h-14 fixed bottom-0 left-0 right-0 z-50 border="t base" bg-base flex flex-row> <nav h-14 fixed bottom-0 left-0 right-0 z-10 border="t base" bg-base flex flex-row>
<template v-if="currentUser"> <template v-if="currentUser">
<NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1> <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
<div i-ri:home-5-line /> <div i-ri:home-5-line />

View file

@ -1,5 +1,5 @@
<template> <template>
<div px3 py4 flex="~ col gap2" text-lg> <nav px3 py4 flex="~ col gap2" text-lg>
<template v-if="currentUser"> <template v-if="currentUser">
<NavSideItem text="Home" to="/home" icon="i-ri:home-5-line" /> <NavSideItem text="Home" to="/home" icon="i-ri:home-5-line" />
<NavSideItem text="Notifications" to="/notifications" icon="i-ri:notification-4-line" /> <NavSideItem text="Notifications" to="/notifications" icon="i-ri:notification-4-line" />
@ -17,5 +17,5 @@
</template> </template>
</NavSideItem> </NavSideItem>
</template> </template>
</div> </nav>
</template> </template>

View file

@ -49,3 +49,7 @@ export function openEditHistoryDialog(edit: StatusEdit) {
export function openPreviewHelp() { export function openPreviewHelp() {
isPreviewHelpOpen.value = true isPreviewHelpOpen.value = true
} }
export function closePreviewHelp() {
isPreviewHelpOpen.value = false
}

5
composables/screen.ts Normal file
View file

@ -0,0 +1,5 @@
import { breakpointsTailwind } from '@vueuse/core'
export const breakpoints = useBreakpoints(breakpointsTailwind)
export const isSmallScreen = breakpoints.smallerOrEqual('md')

View file

@ -13,7 +13,7 @@
</slot> </slot>
</div> </div>
</aside> </aside>
<NavBottom md:hidden /> <NavBottom v-if="isSmallScreen" md:hidden />
<div class="w-full mb14 md:(w-2/4 mb0) min-h-screen" border="l r base"> <div class="w-full mb14 md:(w-2/4 mb0) min-h-screen" border="l r base">
<slot /> <slot />
</div> </div>