mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 20:29:08 +01:00
fix: wrong scrolling behavior in dialog (#313)
This commit is contained in:
parent
aab6eb6752
commit
218aefeec1
7 changed files with 43 additions and 32 deletions
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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() }}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -30,6 +30,8 @@
|
||||||
"favourite": "喜欢",
|
"favourite": "喜欢",
|
||||||
"favourited": "已喜欢",
|
"favourited": "已喜欢",
|
||||||
"more": "更多",
|
"more": "更多",
|
||||||
|
"next": "下一个",
|
||||||
|
"prev": "上一个",
|
||||||
"publish": "发布!",
|
"publish": "发布!",
|
||||||
"reply": "回复",
|
"reply": "回复",
|
||||||
"save_changes": "保存更改",
|
"save_changes": "保存更改",
|
||||||
|
|
Loading…
Reference in a new issue