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

feat: add media tab (#137)

zio/stable
Lucie 2022-11-26 12:36:23 -05:00 committed by GitHub
parent ad8b878120
commit ef287b4f36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/common/CommonTabs.vue
View File

@ -13,7 +13,7 @@ function toValidName(otpion: string) {
</script> </script>
<template> <template>
<div flex w-full text-lg> <div flex w-full items-center lg:text-lg>
<template v-for="option in options" :key="option"> <template v-for="option in options" :key="option">
<input <input
:id="`tab-${toValidName(option)}`" :id="`tab-${toValidName(option)}`"
@ -24,13 +24,13 @@ function toValidName(otpion: string) {
display="none" display="none"
@change="modelValue = option" @change="modelValue = option"
><label ><label
flex flex-1 cursor-pointer p3 m1 rounded transition-all flex flex-auto cursor-pointer p3 m1 rounded transition-all
:for="`tab-${toValidName(option)}`" :for="`tab-${toValidName(option)}`"
tabindex="1" tabindex="1"
hover:bg-active transition-100 hover:bg-active transition-100
@keypress.enter="modelValue = option" @keypress.enter="modelValue = option"
><span ><span
mxa px2 mxa px2 text-center
:class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'" :class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
>{{ option }}</span> >{{ option }}</span>
</label> </label>

14
pages/@[account]/index/index.vue
View File

@ -3,16 +3,26 @@ const params = useRoute().params
const accountName = $computed(() => params.account as string) const accountName = $computed(() => params.account as string)
const account = await fetchAccountByName(accountName) const account = await fetchAccountByName(accountName)
const tabNames = ['Posts', 'Posts and replies'] as const const tabNames = ['Posts', 'Posts & replies', 'Media'] as const
// Don't use local storage because it is better to default to Posts every time you visit a user's profile. // Don't use local storage because it is better to default to Posts every time you visit a user's profile.
const tab = $ref('Posts') const tab = $ref('Posts')
const paginatorPosts = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: true }) const paginatorPosts = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: true })
const paginatorPostsWithReply = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: false }) const paginatorPostsWithReply = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: false })
const paginatorMedia = useMasto().accounts.getStatusesIterable(account.id, { onlyMedia: true, excludeReplies: false })
const paginator = $computed(() => { const paginator = $computed(() => {
return tab === 'Posts' ? paginatorPosts : paginatorPostsWithReply switch (tab) {
case 'Posts & replies':
return paginatorPostsWithReply
case 'Media':
return paginatorMedia
default:
return paginatorPosts
}
}) })
</script> </script>