ui: fix double borders

This commit is contained in:
Anthony Fu 2022-12-27 23:18:16 +01:00
parent 4638a38deb
commit 378ba25997
4 changed files with 20 additions and 7 deletions

View file

@ -19,7 +19,7 @@ function close() {
<template> <template>
<div <div
flex="~ gap-2" justify-between items-center flex="~ gap-2" justify-between items-center
class="border-b border-base text-sm text-secondary px4 py2 sm:py4" border="b base" text-sm text-secondary px4 py2 sm:py4
> >
<div> <div>
<slot /> <slot />

View file

@ -4,7 +4,14 @@ import { DynamicScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import type { Paginator, WsEvents } from 'masto' import type { Paginator, WsEvents } from 'masto'
const { paginator, stream, keyProp = 'id', virtualScroller = false, eventType = 'update', preprocess } = defineProps<{ const {
paginator,
stream,
keyProp = 'id',
virtualScroller = false,
eventType = 'update',
preprocess,
} = defineProps<{
paginator: Paginator<any, any[]> paginator: Paginator<any, any[]>
keyProp?: string keyProp?: string
virtualScroller?: boolean virtualScroller?: boolean
@ -19,6 +26,7 @@ defineSlots<{
active?: boolean active?: boolean
older?: any older?: any
newer?: any newer?: any
index?: number
} }
updater: { updater: {
number: number number: number
@ -36,13 +44,17 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
<slot name="items" :items="items"> <slot name="items" :items="items">
<template v-if="virtualScroller"> <template v-if="virtualScroller">
<DynamicScroller <DynamicScroller
v-slot="{ item, active }" v-slot="{ item, active, index }"
:items="items" :items="items"
:min-item-size="200" :min-item-size="200"
:key-field="keyProp" :key-field="keyProp"
page-mode page-mode
> >
<slot :item="item" :active="active" /> <slot
:item="item"
:active="active"
:index="index"
/>
</DynamicScroller> </DynamicScroller>
</template> </template>
<template v-else> <template v-else>
@ -52,6 +64,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
:item="item" :item="item"
:older="items[i + 1]" :older="items[i + 1]"
:newer="items[i - 1]" :newer="items[i - 1]"
:index="i"
/> />
</template> </template>
</slot> </slot>

View file

@ -23,7 +23,7 @@ function preprocess(items: Status[]) {
<template> <template>
<div> <div>
<PublishWidget draft-key="home" /> <PublishWidget draft-key="home" border="b base" />
<TimelinePaginator v-bind="{ paginator, stream, preprocess }" context="home" /> <TimelinePaginator v-bind="{ paginator, stream, preprocess }" context="home" />
</div> </div>
</template> </template>

View file

@ -21,14 +21,14 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
{{ $t('timeline.show_new_items', number) }} {{ $t('timeline.show_new_items', number) }}
</button> </button>
</template> </template>
<template #default="{ item, older, newer, active }"> <template #default="{ item, older, newer, active, index }">
<template v-if="virtualScroller"> <template v-if="virtualScroller">
<DynamicScrollerItem :item="item" :active="active" tag="article"> <DynamicScrollerItem :item="item" :active="active" tag="article">
<StatusCard <StatusCard
:status="item" :context="context" :status="item" :context="context"
:connect-reply="item.id === older?.inReplyToId" :connect-reply="item.id === older?.inReplyToId"
:show-reply-to="!(item.inReplyToId && item.inReplyToId === newer?.id)" :show-reply-to="!(item.inReplyToId && item.inReplyToId === newer?.id)"
:class="{ 'border-t border-base': !(item.inReplyToId && item.inReplyToId === newer?.id) }" :class="{ 'border-t border-base': index !== 0 && !(item.inReplyToId && item.inReplyToId === newer?.id) }"
/> />
</DynamicScrollerItem> </DynamicScrollerItem>
</template> </template>