zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: better messages for no favourites and bookmarks (#2031)

zio/stable
patak 2023-04-30 17:49:33 +02:00 committed by GitHub
parent ccf115ca4c
commit d4e0d5c5f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/common/CommonPaginator.vue
View File

@ -11,7 +11,7 @@ const {
virtualScroller = false, virtualScroller = false,
eventType = 'update', eventType = 'update',
preprocess, preprocess,
noEndMessage = false, endMessage = true,
} = defineProps<{ } = defineProps<{
paginator: Paginator<T[], O> paginator: Paginator<T[], O>
keyProp?: keyof T keyProp?: keyof T
@ -19,7 +19,7 @@ const {
stream?: Promise<WsEvents> stream?: Promise<WsEvents>
eventType?: 'notification' | 'update' eventType?: 'notification' | 'update'
preprocess?: (items: (U | T)[]) => U[] preprocess?: (items: (U | T)[]) => U[]
noEndMessage?: boolean endMessage?: boolean | string
}>() }>()
defineSlots<{ defineSlots<{
@ -109,9 +109,9 @@ defineExpose({ createEntry, removeEntry, updateEntry })
<slot v-if="state === 'loading'" name="loading"> <slot v-if="state === 'loading'" name="loading">
<TimelineSkeleton /> <TimelineSkeleton />
</slot> </slot>
<slot v-else-if="state === 'done' && !noEndMessage" name="done"> <slot v-else-if="state === 'done' && endMessage !== false" name="done">
<div p5 text-secondary italic text-center> <div p5 text-secondary italic text-center>
{{ t('common.end_of_list') }} {{ t(typeof endMessage === 'string' ? endMessage : 'common.end_of_list') }}
</div> </div>
</slot> </slot>
<div v-else-if="state === 'error'" p5 text-secondary> <div v-else-if="state === 'error'" p5 text-secondary>

2
components/list/Lists.vue
View File

@ -30,7 +30,7 @@ async function edit(listId: string) {
</script> </script>
<template> <template>
<CommonPaginator no-end-message :paginator="paginator"> <CommonPaginator :end-message="false" :paginator="paginator">
<template #default="{ item }"> <template #default="{ item }">
<div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4> <div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
<p>{{ item.title }}</p> <p>{{ item.title }}</p>

2
components/timeline/TimelineBookmarks.vue
View File

@ -3,5 +3,5 @@ const paginator = useMastoClient().v1.bookmarks.list()
</script> </script>
<template> <template>
<TimelinePaginator :paginator="paginator" /> <TimelinePaginator end-message="common.no_bookmarks" :paginator="paginator" />
</template> </template>

2
components/timeline/TimelineFavourites.vue
View File

@ -3,5 +3,5 @@ const paginator = useMastoClient().v1.favourites.list()
</script> </script>
<template> <template>
<TimelinePaginator :paginator="paginator" /> <TimelinePaginator end-message="common.no_favourites" :paginator="paginator" />
</template> </template>

5
components/timeline/TimelinePaginator.vue
View File

@ -4,13 +4,14 @@ 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 { Paginator, WsEvents, mastodon } from 'masto' import type { Paginator, WsEvents, mastodon } from 'masto'
const { paginator, stream, account, buffer = 10 } = defineProps<{ const { paginator, stream, account, buffer = 10, endMessage } = defineProps<{
paginator: Paginator<mastodon.v1.Status[], mastodon.v1.ListAccountStatusesParams> paginator: Paginator<mastodon.v1.Status[], mastodon.v1.ListAccountStatusesParams>
stream?: Promise<WsEvents> stream?: Promise<WsEvents>
context?: mastodon.v2.FilterContext context?: mastodon.v2.FilterContext
account?: mastodon.v1.Account account?: mastodon.v1.Account
preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[] preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
buffer?: number buffer?: number
endMessage?: boolean | string
}>() }>()
const { formatNumber } = useHumanReadableNumber() const { formatNumber } = useHumanReadableNumber()
@ -22,7 +23,7 @@ const showOriginSite = $computed(() =>
</script> </script>
<template> <template>
<CommonPaginator v-bind="{ paginator, stream, preprocess, buffer }" :virtual-scroller="virtualScroller"> <CommonPaginator v-bind="{ paginator, stream, preprocess, buffer, endMessage }" :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) } }) }}

2
locales/en.json
View File

@ -98,6 +98,8 @@
"error": "ERROR", "error": "ERROR",
"fetching": "Fetching...", "fetching": "Fetching...",
"in": "in", "in": "in",
"no_bookmarks": "No bookmarked posts yet",
"no_favourites": "No liked posts yet",
"not_found": "404 Not Found", "not_found": "404 Not Found",
"offline_desc": "Seems like you are offline. Please check your network connection." "offline_desc": "Seems like you are offline. Please check your network connection."
}, },