From 218aefeec1514b660e6f06f2eb7aa6167041770b Mon Sep 17 00:00:00 2001
From: Ayaka Rizumu <464388324@qq.com>
Date: Sun, 4 Dec 2022 14:27:08 +0800
Subject: [PATCH] fix: wrong scrolling behavior in dialog (#313)

---
 components/help/HelpPreview.vue        |  2 +-
 components/modal/ModalContainer.vue    | 11 +++++++---
 components/modal/ModalDialog.vue       | 22 +++-----------------
 components/modal/ModalMediaPreview.vue | 28 ++++++++++++++++++++------
 components/publish/PublishWidget.vue   |  8 +++++---
 locales/en-US.json                     |  2 ++
 locales/zh-CN.json                     |  2 ++
 7 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/components/help/HelpPreview.vue b/components/help/HelpPreview.vue
index 89f21da8..afe166fb 100644
--- a/components/help/HelpPreview.vue
+++ b/components/help/HelpPreview.vue
@@ -39,7 +39,7 @@ const teams: Team[] = [
 </script>
 
 <template>
-  <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative max-h-screen>
+  <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
     <button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
       <div i-ri:close-fill />
     </button>
diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index 02f67eda..c7dd1911 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -15,10 +15,15 @@ import {
   <ModalDialog v-model="isPreviewHelpOpen">
     <HelpPreview @close="closePreviewHelp()" />
   </ModalDialog>
-  <ModalDialog v-model="isPublishDialogOpen" max-w-180 md:min-w-160>
-    <PublishWidget :draft-key="dialogDraftKey" expanded />
+  <ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
+    <PublishWidget :draft-key="dialogDraftKey" expanded flex-1 />
   </ModalDialog>
-  <ModalDialog v-model="isMediaPreviewOpen" w-full max-w-full h-full max-h-full bg-transparent border-0 pointer-events-none>
+  <ModalDialog
+    v-model="isMediaPreviewOpen"
+    pointer-events-none
+    w-full max-w-full h-full max-h-full
+    bg-transparent border-0 shadow-none
+  >
     <ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
   </ModalDialog>
   <ModalDialog v-model="isEditHistoryDialogOpen">
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index 8e71808b..216bc19f 100644
--- a/components/modal/ModalDialog.vue
+++ b/components/modal/ModalDialog.vue
@@ -32,9 +32,6 @@ export interface Props {
    * @default false
    */
   keepAlive?: boolean
-
-  /** customizable class for the div outside of slot */
-  customClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -55,14 +52,12 @@ const deactivated = useDeactivated()
 const route = useRoute()
 
 /** scrollable HTML element */
-const elDialogScroll = ref<HTMLDivElement>()
 const elDialogMain = ref<HTMLDivElement>()
 const elDialogRoot = ref<HTMLDivElement>()
 
 defineExpose({
   elDialogRoot,
   elDialogMain,
-  elDialogScroll,
 })
 
 /** close the dialog */
@@ -146,25 +141,14 @@ export default {
         <div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
         <!-- Dialog container -->
         <div class="p-safe-area" absolute inset-0 z-1 pointer-events-none opacity-100 flex>
-          <div class="flex-1 flex items-center justify-center p-4">
+          <div flex-1 flex items-center justify-center p-4>
             <!-- We use `class` here to make v-bind being able to be override them -->
             <div
               ref="elDialogMain"
-              class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full flex flex-col"
+              class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
               v-bind="bindTypeToAny($attrs)"
             >
-              <!-- header -->
-              <slot name="header" />
-              <!-- main -->
-              <div
-                ref="elDialogScroll"
-                class="overflow-y-auto touch-pan-y touch-pan-x overscroll-none flex-1"
-                :class="customClass"
-              >
-                <slot />
-              </div>
-              <!-- footer -->
-              <slot name="footer" />
+              <slot />
             </div>
           </div>
         </div>
diff --git a/components/modal/ModalMediaPreview.vue b/components/modal/ModalMediaPreview.vue
index 5f68e2b0..457f49e8 100644
--- a/components/modal/ModalMediaPreview.vue
+++ b/components/modal/ModalMediaPreview.vue
@@ -30,16 +30,32 @@ function onClick(e: MouseEvent) {
 
 <template>
   <div relative h-full w-full flex select-none pointer-events-none>
-    <div absolute top-0 left-0 right-0 text-center>
+    <div absolute top-0 left-0 right-0 text-white text-center>
       {{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
     </div>
-    <button v-if="hasNext" btn-action-icon absolute pointer-events-auto top="1/2" right-1 title="Next" @click="next">
-      <div i-ri:arrow-right-s-line />
+    <button
+      v-if="hasNext"
+      pointer-events-auto
+      btn-action-icon bg="black/20" aria-label="Close"
+      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
+      absolute top="1/2" right-1
+      :title="$t('action.next')"
+      @click="next"
+    >
+      <div i-ri:arrow-right-s-line text-white />
     </button>
-    <button v-if="hasPrev" btn-action-icon absolute pointer-events-auto top="1/2" left-1 title="Next" @click="prev">
-      <div i-ri:arrow-left-s-line />
+    <button
+      v-if="hasPrev"
+      pointer-events-auto
+      btn-action-icon bg="black/20" aria-label="Close"
+      hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
+      absolute top="1/2" left-1
+      :title="$t('action.prev')"
+      @click="prev"
+    >
+      <div i-ri:arrow-left-s-line text-white />
     </button>
-    <img :src="current.url || current.previewUrl" :alt="current.description || ''" w="max-[95%]" h="max-[95%]" ma>
+    <img :src="current.url || current.previewUrl" :alt="current.description || ''" max-h="95%" max-w="95%" ma>
 
     <button
       btn-action-icon bg="black/20" aria-label="Close"
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index e1193508..668e1aae 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -159,7 +159,8 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
       <div border="b dashed gray/40" />
     </template>
 
-    <div flex gap-4>
+    <!-- The h-0 flex-1 here is to avoid the scrolling failure problem that occurs with flex layouts, so don't remove it unless you know what you're doing  -->
+    <div flex gap-4 h-0 flex-1>
       <NuxtLink w-12 h-12 :to="getAccountRoute(currentUser.account)">
         <AccountAvatar :account="currentUser.account" f-full h-full />
       </NuxtLink>
@@ -179,11 +180,12 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
           >
         </div>
 
-        <div relative>
+        <!-- The h-0 flex-1 here is to avoid the scrolling failure problem that occurs with flex layouts, so don't remove it unless you know what you're doing  -->
+        <div relative h-0 flex-1 flex flex-col>
           <EditorContent
             :editor="editor"
             flex
-            :class="shouldExpanded ? 'min-h-120px max-h-720px of-y-auto' : ''"
+            :class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
           />
           <div v-if="shouldExpanded" absolute right-0 bottom-0 pointer-events-none text-sm text-secondary-light>
             {{ characterLimit - editor?.storage.characterCount.characters() }}
diff --git a/locales/en-US.json b/locales/en-US.json
index 3c153816..0dfc0c75 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -30,6 +30,8 @@
     "favourite": "Favourite",
     "favourited": "Favourited",
     "more": "More",
+    "next": "Next",
+    "prev": "Prev",
     "publish": "Publish!",
     "reply": "Reply",
     "save_changes": "Save changes",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 7b0cfe81..de12c715 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -30,6 +30,8 @@
     "favourite": "喜欢",
     "favourited": "已喜欢",
     "more": "更多",
+    "next": "下一个",
+    "prev": "上一个",
     "publish": "发布！",
     "reply": "回复",
     "save_changes": "保存更改",