i18n: doing more

This commit is contained in:
Anthony Fu 2022-11-29 15:18:28 +08:00
parent 00ae9d0b6c
commit ea73107c23
9 changed files with 82 additions and 51 deletions

View file

@ -52,24 +52,24 @@ const toggleBlockDomain = async () => {
<template v-if="currentUser"> <template v-if="currentUser">
<template v-if="!isSelf"> <template v-if="!isSelf">
<CommonDropdownItem icon="i-ri:at-line" @click="mentionUser(account)"> <CommonDropdownItem icon="i-ri:at-line" @click="mentionUser(account)">
{{ $t('menu.mention_account', [account.acct]) }} {{ $t('menu.mention_account', [`@${account.acct}`]) }}
</CommonDropdownItem> </CommonDropdownItem>
<CommonDropdownItem icon="i-ri:message-3-line" @click="directMessageUser(account)"> <CommonDropdownItem icon="i-ri:message-3-line" @click="directMessageUser(account)">
{{ $t('menu.direct_message_account', [account.acct]) }} {{ $t('menu.direct_message_account', [`@${account.acct}`]) }}
</CommonDropdownItem> </CommonDropdownItem>
<CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="toggleMute"> <CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="toggleMute">
{{ $t('menu.mute_account', [account.acct]) }} {{ $t('menu.mute_account', [`@${account.acct}`]) }}
</CommonDropdownItem> </CommonDropdownItem>
<CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="toggleMute"> <CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="toggleMute">
{{ $t('menu.unmute_account', [account.acct]) }} {{ $t('menu.unmute_account', [`@${account.acct}`]) }}
</CommonDropdownItem> </CommonDropdownItem>
<CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="toggleBlockUser"> <CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="toggleBlockUser">
{{ $t('menu.block_account', [account.acct]) }} {{ $t('menu.block_account', [`@${account.acct}`]) }}
</CommonDropdownItem> </CommonDropdownItem>
<CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="toggleBlockUser"> <CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="toggleBlockUser">
{{ $t('menu.unblock_account', [account.acct]) }} {{ $t('menu.unblock_account', [`@${account.acct}`]) }}
</CommonDropdownItem> </CommonDropdownItem>
<template v-if="getServerName(account) !== currentServer"> <template v-if="getServerName(account) !== currentServer">

View file

@ -1,12 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ const { options } = defineProps<{
options: string[] options: string[] | { name: string; display: string }[]
}>() }>()
const { modelValue } = defineModel<{ const { modelValue } = defineModel<{
modelValue: string modelValue: string
}>() }>()
const tabs = computed(() => {
return options.map((option) => {
if (typeof option === 'string')
return { name: option, display: option }
else
return option
})
})
function toValidName(otpion: string) { function toValidName(otpion: string) {
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-') return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
} }
@ -14,25 +23,25 @@ function toValidName(otpion: string) {
<template> <template>
<div flex w-full items-center lg:text-lg> <div flex w-full items-center lg:text-lg>
<template v-for="option in options" :key="option"> <template v-for="option in tabs" :key="option">
<input <input
:id="`tab-${toValidName(option)}`" :id="`tab-${toValidName(option.name)}`"
:checked="modelValue === option" :checked="modelValue === option.name"
:value="option" :value="option"
type="radio" type="radio"
name="tabs" name="tabs"
display="none" display="none"
@change="modelValue = option" @change="modelValue = option.name"
><label ><label
flex flex-auto cursor-pointer px3 m1 rounded transition-all flex flex-auto cursor-pointer px3 m1 rounded transition-all
:for="`tab-${toValidName(option)}`" :for="`tab-${toValidName(option.name)}`"
tabindex="1" tabindex="1"
hover:bg-active transition-100 hover:bg-active transition-100
@keypress.enter="modelValue = option" @keypress.enter="modelValue = option.name"
><span ><span
mxa px4 py3 text-center mxa px4 py3 text-center
:class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'" :class="modelValue === option.name ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
>{{ option }}</span> >{{ option.display }}</span>
</label> </label>
</template> </template>
</div> </div>

View file

@ -71,7 +71,7 @@ const teams: Team[] = [
</p> </p>
<button btn-solid mxa @click="emit('close')"> <button btn-solid mxa @click="emit('close')">
Enter App {{ $t('action.enter_app') }}
</button> </button>
</div> </div>
</template> </template>

View file

@ -14,6 +14,6 @@
</template> </template>
</VDropdown> </VDropdown>
<button v-else btn-solid text-sm px-2 py-1 text-center @click="openSigninDialog()"> <button v-else btn-solid text-sm px-2 py-1 text-center @click="openSigninDialog()">
Sign in {{ $t('action.sign_in') }}
</button> </button>
</template> </template>

View file

@ -15,7 +15,7 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
<CommonPaginator v-bind="{ paginator, stream }" :virtual-scroller="virtualScroller"> <CommonPaginator v-bind="{ paginator, stream }" :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">
Show {{ number }} new items {{ $t('timeline.show_new_items', [number]) }}
</button> </button>
</template> </template>
<template #default="{ item, active }"> <template #default="{ item, active }">

View file

@ -24,9 +24,8 @@
"notifications": "Mitteilungen", "notifications": "Mitteilungen",
"profile": "Profil" "profile": "Profil"
}, },
"timeline": "Timeline",
"title": { "title": {
"federated_timeline": "@:nav_side.federated @:timeline", "federated_timeline": "@:nav_side.federated @:timeline.name",
"local_timeline": "@:nav_side.local @:timeline" "local_timeline": "@:nav_side.local @:timeline.name"
} }
} }

View file

@ -11,22 +11,24 @@
}, },
"action": { "action": {
"compose": "Compose", "compose": "Compose",
"enter_app": "Enter App",
"publish": "Publish!", "publish": "Publish!",
"save_changes": "Save changes" "save_changes": "Save changes",
"sign_in": "Sign in"
}, },
"feature_flag": { "feature_flag": {
"virtual_scroll": "Virtual Scrolling" "virtual_scroll": "Virtual Scrolling"
}, },
"menu": { "menu": {
"block_account": "Block @{0}", "block_account": "Block {0}",
"block_domain": "Block domain {0}", "block_domain": "Block domain {0}",
"direct_message_account": "Direct message @{0}", "direct_message_account": "Direct message {0}",
"mention_account": "Mention @{0}", "mention_account": "Mention {0}",
"mute_account": "Mute @{0}", "mute_account": "Mute {0}",
"open_in_original_site": "Open in original site", "open_in_original_site": "Open in original site",
"unblock_account": "Unblock @{0}", "unblock_account": "Unblock {0}",
"unblock_domain": "Unblock domain {0}", "unblock_domain": "Unblock domain {0}",
"unmute_account": "Unmute @{0}" "unmute_account": "Unmute {0}"
}, },
"nav_footer": { "nav_footer": {
"select_feature_flags": "Toggle Feature Flags", "select_feature_flags": "Toggle Feature Flags",
@ -49,10 +51,18 @@
"editing": "Editing", "editing": "Editing",
"uploading": "Uploading..." "uploading": "Uploading..."
}, },
"timeline": "Timeline", "tab": {
"media": "Media",
"posts": "Posts",
"posts_with_replies": "Posts & Replies"
},
"timeline": {
"name": "Timeline",
"show_new_items": "Show {0} new items"
},
"title": { "title": {
"federated_timeline": "@:nav_side.federated @:timeline", "federated_timeline": "@:nav_side.federated @:timeline.name",
"local_timeline": "@:nav_side.local @:timeline" "local_timeline": "@:nav_side.local @:timeline.name"
}, },
"tooltip": { "tooltip": {
"add_content_warning": "Add content warning", "add_content_warning": "Add content warning",

View file

@ -24,9 +24,16 @@
"notifications": "通知", "notifications": "通知",
"profile": "个人资料" "profile": "个人资料"
}, },
"timeline": "时间轴", "tab": {
"media": "媒体",
"posts": "贴文",
"posts_with_replies": "帖文与留言"
},
"timeline": {
"name": "时间轴"
},
"title": { "title": {
"federated_timeline": "@:nav_side.federated@:timeline", "federated_timeline": "@:nav_side.federated@:timeline.name",
"local_timeline": "@:nav_side.local@:timeline" "local_timeline": "@:nav_side.local@:timeline.name"
} }
} }

View file

@ -3,32 +3,38 @@ const params = useRoute().params
const accountName = $(computedEager(() => params.account as string)) const accountName = $(computedEager(() => params.account as string))
const account = await fetchAccountByName(accountName) const account = await fetchAccountByName(accountName)
const tabNames = ['Posts', 'Posts & replies', 'Media'] as const const { t } = useI18n()
// 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 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 paginatorMedia = useMasto().accounts.getStatusesIterable(account.id, { onlyMedia: true, excludeReplies: false })
const paginator = $computed(() => { const tabs = $computed(() => [
switch (tab) { {
case 'Posts & replies': name: 'posts',
return paginatorPostsWithReply display: t('tab.posts'),
paginator: paginatorPosts,
},
{
name: 'relies',
display: t('tab.posts_with_replies'),
paginator: paginatorPostsWithReply,
},
{
name: 'media',
display: t('tab.media'),
paginator: paginatorMedia,
},
] as const)
case 'Media': // Don't use local storage because it is better to default to Posts every time you visit a user's profile.
return paginatorMedia const tab = $ref(tabs[0].name)
const paginator = $computed(() => tabs.find(t => t.name === tab)!.paginator)
default:
return paginatorPosts
}
})
</script> </script>
<template> <template>
<div> <div>
<CommonTabs v-model="tab" :options="tabNames" /> <CommonTabs v-model="tab" :options="tabs" />
<KeepAlive> <KeepAlive>
<TimelinePaginator :key="tab" :paginator="paginator" /> <TimelinePaginator :key="tab" :paginator="paginator" />
</KeepAlive> </KeepAlive>