fix: wrong scrolling behavior in dialog (#313)

This commit is contained in:
Ayaka Rizumu 2022-12-04 14:27:08 +08:00 committed by GitHub
parent aab6eb6752
commit 218aefeec1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 43 additions and 32 deletions

View file

@ -39,7 +39,7 @@ const teams: Team[] = [
</script> </script>
<template> <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')"> <button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
<div i-ri:close-fill /> <div i-ri:close-fill />
</button> </button>

View file

@ -15,10 +15,15 @@ import {
<ModalDialog v-model="isPreviewHelpOpen"> <ModalDialog v-model="isPreviewHelpOpen">
<HelpPreview @close="closePreviewHelp()" /> <HelpPreview @close="closePreviewHelp()" />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isPublishDialogOpen" max-w-180 md:min-w-160> <ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
<PublishWidget :draft-key="dialogDraftKey" expanded /> <PublishWidget :draft-key="dialogDraftKey" expanded flex-1 />
</ModalDialog> </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()" /> <ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
</ModalDialog> </ModalDialog>
<ModalDialog v-model="isEditHistoryDialogOpen"> <ModalDialog v-model="isEditHistoryDialogOpen">

View file

@ -32,9 +32,6 @@ export interface Props {
* @default false * @default false
*/ */
keepAlive?: boolean keepAlive?: boolean
/** customizable class for the div outside of slot */
customClass?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -55,14 +52,12 @@ const deactivated = useDeactivated()
const route = useRoute() const route = useRoute()
/** scrollable HTML element */ /** scrollable HTML element */
const elDialogScroll = ref<HTMLDivElement>()
const elDialogMain = ref<HTMLDivElement>() const elDialogMain = ref<HTMLDivElement>()
const elDialogRoot = ref<HTMLDivElement>() const elDialogRoot = ref<HTMLDivElement>()
defineExpose({ defineExpose({
elDialogRoot, elDialogRoot,
elDialogMain, elDialogMain,
elDialogScroll,
}) })
/** close the dialog */ /** 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" /> <div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
<!-- Dialog container --> <!-- Dialog container -->
<div class="p-safe-area" absolute inset-0 z-1 pointer-events-none opacity-100 flex> <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 --> <!-- We use `class` here to make v-bind being able to be override them -->
<div <div
ref="elDialogMain" 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)" v-bind="bindTypeToAny($attrs)"
> >
<!-- header --> <slot />
<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" />
</div> </div>
</div> </div>
</div> </div>

View file

@ -30,16 +30,32 @@ function onClick(e: MouseEvent) {
<template> <template>
<div relative h-full w-full flex select-none pointer-events-none> <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 }} {{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
</div> </div>
<button v-if="hasNext" btn-action-icon absolute pointer-events-auto top="1/2" right-1 title="Next" @click="next"> <button
<div i-ri:arrow-right-s-line /> 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>
<button v-if="hasPrev" btn-action-icon absolute pointer-events-auto top="1/2" left-1 title="Next" @click="prev"> <button
<div i-ri:arrow-left-s-line /> 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> </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 <button
btn-action-icon bg="black/20" aria-label="Close" btn-action-icon bg="black/20" aria-label="Close"

View file

@ -159,7 +159,8 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
<div border="b dashed gray/40" /> <div border="b dashed gray/40" />
</template> </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)"> <NuxtLink w-12 h-12 :to="getAccountRoute(currentUser.account)">
<AccountAvatar :account="currentUser.account" f-full h-full /> <AccountAvatar :account="currentUser.account" f-full h-full />
</NuxtLink> </NuxtLink>
@ -179,11 +180,12 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
> >
</div> </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 <EditorContent
:editor="editor" :editor="editor"
flex 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> <div v-if="shouldExpanded" absolute right-0 bottom-0 pointer-events-none text-sm text-secondary-light>
{{ characterLimit - editor?.storage.characterCount.characters() }} {{ characterLimit - editor?.storage.characterCount.characters() }}

View file

@ -30,6 +30,8 @@
"favourite": "Favourite", "favourite": "Favourite",
"favourited": "Favourited", "favourited": "Favourited",
"more": "More", "more": "More",
"next": "Next",
"prev": "Prev",
"publish": "Publish!", "publish": "Publish!",
"reply": "Reply", "reply": "Reply",
"save_changes": "Save changes", "save_changes": "Save changes",

View file

@ -30,6 +30,8 @@
"favourite": "喜欢", "favourite": "喜欢",
"favourited": "已喜欢", "favourited": "已喜欢",
"more": "更多", "more": "更多",
"next": "下一个",
"prev": "上一个",
"publish": "发布!", "publish": "发布!",
"reply": "回复", "reply": "回复",
"save_changes": "保存更改", "save_changes": "保存更改",