From 4703b6884a7146ccd7c393d858c6bf765f619385 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 11:13:39 +0800
Subject: [PATCH] feat: improve dialog

---
 components/help/HelpPreview.vue     | 16 +++++-
 components/modal/ModalContainer.vue |  4 +-
 components/modal/ModalDialog.vue    | 79 +++++++++++++++++++++--------
 components/nav/NavBottom.vue        |  2 +-
 components/nav/NavSide.vue          |  4 +-
 composables/dialog.ts               |  4 ++
 composables/screen.ts               |  5 ++
 layouts/default.vue                 |  2 +-
 8 files changed, 86 insertions(+), 30 deletions(-)
 create mode 100644 composables/screen.ts

diff --git a/components/help/HelpPreview.vue b/components/help/HelpPreview.vue
index 71bf9c11..7e5035aa 100644
--- a/components/help/HelpPreview.vue
+++ b/components/help/HelpPreview.vue
@@ -6,6 +6,10 @@ interface Team {
   mastodon: string
 }
 
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
 const teams: Team[] = [
   {
     github: 'antfu',
@@ -35,7 +39,11 @@ const teams: Team[] = [
 </script>
 
 <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">
     <h1 mxa text-4xl mb4>
       Elk is in Preview!
@@ -53,7 +61,7 @@ const teams: Team[] = [
     </p>
     <p flex="~ gap-2 wrap" mxa>
       <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>
         </a>
       </template>
@@ -61,5 +69,9 @@ const teams: Team[] = [
     <p italic text-2xl>
       <span text-lg font-script>The Elk Team</span>
     </p>
+
+    <button btn-solid mxa @click="emit('close')">
+      Enter App
+    </button>
   </div>
 </template>
diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index 7d89eb84..777fa115 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -16,8 +16,8 @@ import {
   <ModalDialog v-model="isSigninDialogOpen">
     <UserSignIn m6 />
   </ModalDialog>
-  <ModalDialog v-model="isPreviewHelpOpen">
-    <HelpPreview />
+  <ModalDialog v-model="isPreviewHelpOpen" :type="isSmallScreen ? 'bottom' : 'dialog'">
+    <HelpPreview @close="closePreviewHelp()" />
   </ModalDialog>
   <ModalDialog v-model="isPublishDialogOpen">
     <PublishWidget draft-key="dialog" expanded min-w-180 />
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index 40f3f640..b028aed0 100644
--- a/components/modal/ModalDialog.vue
+++ b/components/modal/ModalDialog.vue
@@ -11,8 +11,12 @@ const {
 
 const { modelValue } = defineModel<{
   modelValue: boolean
+  closeButton?: boolean
 }>()
 
+let isVisible = $ref(modelValue.value)
+let isOut = $ref(!modelValue.value)
+
 const positionClass = computed(() => {
   switch (type) {
     case 'dialog':
@@ -30,24 +34,32 @@ const positionClass = computed(() => {
   }
 })
 
-const transform = computed(() => {
-  switch (type) {
-    case 'bottom':
-      return 'translateY(100%)'
-    case 'top':
-      return 'translateY(-100%)'
-    case 'left':
-      return 'translateX(-100%)'
-    case 'right':
-      return 'translateX(100%)'
-    default:
-      return ''
+const transformClass = computed(() => {
+  if (isOut) {
+    switch (type) {
+      case 'dialog':
+        return 'op0'
+      case 'bottom':
+        return 'translate-y-[100%]'
+      case 'top':
+        return 'translate-y-[100%]'
+      case 'left':
+        return 'translate-x-[-100%]'
+      case 'right':
+        return 'translate-x-[100%]'
+      default:
+        return ''
+    }
   }
 })
 
 const target = ref<HTMLElement | null>(null)
 const { activate, deactivate } = useFocusTrap(target)
 
+function close() {
+  modelValue.value = false
+}
+
 watchEffect(() => {
   if (modelValue)
     activate()
@@ -55,29 +67,52 @@ watchEffect(() => {
     deactivate()
 })
 
-let init = $ref(modelValue)
-watchOnce(modelValue, () => {
-  init = true
+useEventListener('keydown', (e: KeyboardEvent) => {
+  if (!modelValue.value)
+    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>
 
 <template>
   <div
+    v-if="isVisible"
     fixed top-0 bottom-0 left-0 right-0 z-40
     :class="modelValue ? '' : 'pointer-events-none'"
   >
     <div
       bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
-      :class="modelValue ? 'opacity-85' : 'opacity-0'"
-      @click="modelValue = false"
+      :class="isOut ? 'opacity-0' : 'opacity-85'"
+      @click="close"
     />
     <div
-      ref="target" bg-base border-base absolute transition-all duration-200
-      ease-out
-      :class="positionClass"
-      :style="modelValue ? {} : { transform }"
+      ref="target"
+      bg-base border-base absolute transition-all duration-200 ease-out transform
+      :class="`${positionClass} ${transformClass}`"
+      @transitionend="onTransitionEnd"
     >
-      <slot v-if="init" />
+      <slot />
     </div>
   </div>
 </template>
diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
index ac81989a..7ca403f6 100644
--- a/components/nav/NavBottom.vue
+++ b/components/nav/NavBottom.vue
@@ -3,7 +3,7 @@
 </script>
 
 <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">
       <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 />
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 86c76376..3ce7f768 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -1,5 +1,5 @@
 <template>
-  <div px3 py4 flex="~ col gap2" text-lg>
+  <nav px3 py4 flex="~ col gap2" text-lg>
     <template v-if="currentUser">
       <NavSideItem text="Home" to="/home" icon="i-ri:home-5-line" />
       <NavSideItem text="Notifications" to="/notifications" icon="i-ri:notification-4-line" />
@@ -17,5 +17,5 @@
         </template>
       </NavSideItem>
     </template>
-  </div>
+  </nav>
 </template>
diff --git a/composables/dialog.ts b/composables/dialog.ts
index cfba8134..440f3c64 100644
--- a/composables/dialog.ts
+++ b/composables/dialog.ts
@@ -49,3 +49,7 @@ export function openEditHistoryDialog(edit: StatusEdit) {
 export function openPreviewHelp() {
   isPreviewHelpOpen.value = true
 }
+
+export function closePreviewHelp() {
+  isPreviewHelpOpen.value = false
+}
diff --git a/composables/screen.ts b/composables/screen.ts
new file mode 100644
index 00000000..4b601579
--- /dev/null
+++ b/composables/screen.ts
@@ -0,0 +1,5 @@
+import { breakpointsTailwind } from '@vueuse/core'
+
+export const breakpoints = useBreakpoints(breakpointsTailwind)
+
+export const isSmallScreen = breakpoints.smallerOrEqual('md')
diff --git a/layouts/default.vue b/layouts/default.vue
index 0be2f9da..941a151c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,7 +13,7 @@
           </slot>
         </div>
       </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">
         <slot />
       </div>