mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 20:29:08 +01:00
parent
a311e0ec80
commit
79e4841f87
5 changed files with 29 additions and 26 deletions
|
@ -11,7 +11,6 @@ const {
|
||||||
virtualScroller = false,
|
virtualScroller = false,
|
||||||
eventType = 'update',
|
eventType = 'update',
|
||||||
preprocess,
|
preprocess,
|
||||||
isAccountTimeline,
|
|
||||||
} = defineProps<{
|
} = defineProps<{
|
||||||
paginator: Paginator<any, any[]>
|
paginator: Paginator<any, any[]>
|
||||||
keyProp?: string
|
keyProp?: string
|
||||||
|
@ -19,7 +18,6 @@ const {
|
||||||
stream?: Promise<WsEvents>
|
stream?: Promise<WsEvents>
|
||||||
eventType?: 'notification' | 'update'
|
eventType?: 'notification' | 'update'
|
||||||
preprocess?: (items: any[]) => any[]
|
preprocess?: (items: any[]) => any[]
|
||||||
isAccountTimeline?: boolean
|
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
defineSlots<{
|
defineSlots<{
|
||||||
|
@ -34,18 +32,9 @@ defineSlots<{
|
||||||
update: () => void
|
update: () => void
|
||||||
}
|
}
|
||||||
loading: {}
|
loading: {}
|
||||||
|
done: {}
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
let account: Account | null = null
|
|
||||||
|
|
||||||
const { params } = useRoute()
|
|
||||||
|
|
||||||
if (isAccountTimeline) {
|
|
||||||
const handle = $(computedEager(() => params.account as string))
|
|
||||||
|
|
||||||
account = await fetchAccountByHandle(handle)
|
|
||||||
}
|
|
||||||
|
|
||||||
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
|
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -84,15 +73,11 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
|
||||||
<slot v-if="state === 'loading'" name="loading">
|
<slot v-if="state === 'loading'" name="loading">
|
||||||
<TimelineSkeleton />
|
<TimelineSkeleton />
|
||||||
</slot>
|
</slot>
|
||||||
<div v-else-if="state === 'done'" p5 text-secondary italic text-center flex flex-col items-center gap1>
|
<slot v-else-if="state === 'done'" name="done">
|
||||||
<template v-if="isAccountTimeline">
|
<div p5 text-secondary italic text-center>
|
||||||
<span>{{ $t('timeline.view_older_posts') }}</span>
|
|
||||||
<a :href="account!.url" not-italic text-primary hover="underline text-primary-active">{{ $t('menu.open_in_original_site') }}</a>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
{{ $t('common.end_of_list') }}
|
{{ $t('common.end_of_list') }}
|
||||||
</template>
|
</div>
|
||||||
</div>
|
</slot>
|
||||||
<div v-else-if="state === 'error'" p5 text-secondary>
|
<div v-else-if="state === 'error'" p5 text-secondary>
|
||||||
{{ $t('common.error') }}: {{ error }}
|
{{ $t('common.error') }}: {{ error }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,21 +2,26 @@
|
||||||
// @ts-expect-error missing types
|
// @ts-expect-error missing types
|
||||||
import { DynamicScrollerItem } from 'vue-virtual-scroller'
|
import { DynamicScrollerItem } from 'vue-virtual-scroller'
|
||||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||||
import type { FilterContext, Paginator, Status, WsEvents } from 'masto'
|
import type { Account, FilterContext, Paginator, Status, WsEvents } from 'masto'
|
||||||
|
|
||||||
const { paginator, stream } = defineProps<{
|
const { paginator, stream, account } = defineProps<{
|
||||||
paginator: Paginator<any, Status[]>
|
paginator: Paginator<any, Status[]>
|
||||||
stream?: Promise<WsEvents>
|
stream?: Promise<WsEvents>
|
||||||
context?: FilterContext
|
context?: FilterContext
|
||||||
|
account?: Account
|
||||||
preprocess?: (items: any[]) => any[]
|
preprocess?: (items: any[]) => any[]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const { formatNumber } = useHumanReadableNumber()
|
const { formatNumber } = useHumanReadableNumber()
|
||||||
const virtualScroller = $(useFeatureFlag('experimentalVirtualScroll'))
|
const virtualScroller = $(useFeatureFlag('experimentalVirtualScroll'))
|
||||||
|
|
||||||
|
const showOriginSite = $computed(() =>
|
||||||
|
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CommonPaginator v-bind="{ paginator, stream, preprocess }" :virtual-scroller="virtualScroller" :is-account-timeline="context === 'account'">
|
<CommonPaginator v-bind="{ paginator, stream, preprocess }" :virtual-scroller="virtualScroller">
|
||||||
<template #updater="{ number, update }">
|
<template #updater="{ number, update }">
|
||||||
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
|
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
|
||||||
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
|
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
|
||||||
|
@ -32,5 +37,18 @@ const virtualScroller = $(useFeatureFlag('experimentalVirtualScroll'))
|
||||||
<StatusCard :status="item" :context="context" :older="older" :newer="newer" />
|
<StatusCard :status="item" :context="context" :older="older" :newer="newer" />
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-if="context === 'account' && showOriginSite" #done>
|
||||||
|
<div p5 text-secondary text-center flex flex-col items-center gap1>
|
||||||
|
<span italic>{{ $t('timeline.view_older_posts') }}</span>
|
||||||
|
<a
|
||||||
|
:href="account!.url" target="_blank"
|
||||||
|
flex="~ gap-1" items-center text-primary
|
||||||
|
hover="underline text-primary-active"
|
||||||
|
>
|
||||||
|
<div i-ri:external-link-fill />
|
||||||
|
{{ $t('menu.open_in_original_site') }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</CommonPaginator>
|
</CommonPaginator>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -23,6 +23,6 @@ if (account) {
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<AccountTabs />
|
<AccountTabs />
|
||||||
<TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" />
|
<TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -21,6 +21,6 @@ if (account) {
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<AccountTabs />
|
<AccountTabs />
|
||||||
<TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" />
|
<TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -21,6 +21,6 @@ if (account) {
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<AccountTabs />
|
<AccountTabs />
|
||||||
<TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" />
|
<TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in a new issue