ui: fix double borders

zio/stable
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>
<div
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>
<slot />

View File

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

View File

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

View File

@ -21,14 +21,14 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
{{ $t('timeline.show_new_items', number) }}
</button>
</template>
<template #default="{ item, older, newer, active }">
<template #default="{ item, older, newer, active, index }">
<template v-if="virtualScroller">
<DynamicScrollerItem :item="item" :active="active" tag="article">
<StatusCard
:status="item" :context="context"
:connect-reply="item.id === older?.inReplyToId"
: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>
</template>