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

feat(settings): up to 16 fields for glitch edition

zio/stable
三咲智子 2023-01-10 16:33:20 +08:00
parent 88731ee18d
commit 217f1ea567
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
6 changed files with 61 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
components/settings/SettingsProfileMetadata.vue
View File

@ -9,11 +9,22 @@ const { form } = defineModel<{
const dropdown = $ref<any>()
const fieldIcons = computed(() =>
Array.from({ length: 4 }, (_, i) =>
Array.from({ length: maxAccountFieldCount.value }, (_, i) =>
getAccountFieldIcon(form.value.fieldsAttributes[i].name),
),
)
const fieldCount = $computed(() => {
// find last non-empty field
const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value)
if (idx === -1)
return 1
return Math.min(
form.value.fieldsAttributes.length - idx + 1,
maxAccountFieldCount.value,
)
})
const chooseIcon = (i: number, text: string) => {
form.value.fieldsAttributes[i].name = text
dropdown[i]?.hide()
@ -21,40 +32,49 @@ const chooseIcon = (i: number, text: string) => {
</script>
<template>
<div flex="~ col gap4">
<div v-for="i in 4" :key="i" flex="~ gap3" items-center>
<CommonDropdown ref="dropdown" placement="left">
<CommonTooltip content="Pick a icon">
<button type="button" btn-action-icon>
<div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
</button>
</CommonTooltip>
<template #popper>
<div flex="~ wrap gap-1" max-w-50 m2>
<CommonTooltip
v-for="(icon, text) in accountFieldIcons"
:key="icon"
:content="text"
>
<template v-if="text !== 'Joined'">
<button type="button" btn-action-icon @click="chooseIcon(i - 1, text)">
<div text-xl :class="icon" />
</button>
</template>
</CommonTooltip>
</div>
</template>
</CommonDropdown>
<input
v-model="form.fieldsAttributes[i - 1].name"
type="text" placeholder="Label"
input-base
>
<input
v-model="form.fieldsAttributes[i - 1].value"
type="text" placeholder="Content"
input-base
>
<div space-y-2>
<div font-medium>
{{ $t('settings.profile.appearance.profile_metadata') }}
</div>
<div text-sm text-secondary>
{{ $t('settings.profile.appearance.profile_metadata_desc', [maxAccountFieldCount]) }}
</div>
<div flex="~ col gap4">
<div v-for="i in fieldCount" :key="i" flex="~ gap3" items-center>
<CommonDropdown ref="dropdown" placement="left">
<CommonTooltip content="Pick a icon">
<button type="button" btn-action-icon>
<div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
</button>
</CommonTooltip>
<template #popper>
<div flex="~ wrap gap-1" max-w-50 m2>
<CommonTooltip
v-for="(icon, text) in accountFieldIcons"
:key="icon"
:content="text"
>
<template v-if="text !== 'Joined'">
<button type="button" btn-action-icon @click="chooseIcon(i - 1, text)">
<div text-xl :class="icon" />
</button>
</template>
</CommonTooltip>
</div>
</template>
</CommonDropdown>
<input
v-model="form.fieldsAttributes[i - 1].name"
type="text" placeholder="Label"
input-base
>
<input
v-model="form.fieldsAttributes[i - 1].value"
type="text" placeholder="Content"
input-base
>
</div>
</div>
</div>
</template>

1
composables/settings/metadata.ts 100644
View File

@ -0,0 +1 @@
export const maxAccountFieldCount = computed(() => isGlitchEdition.value ? 16 : 4)

1
composables/users.ts
View File

@ -55,6 +55,7 @@ export const currentUser = computed<UserLogin | undefined>(() => {
const publicInstance = ref<mastodon.v1.Instance | null>(null)
export const currentInstance = computed<null | mastodon.v1.Instance>(() => currentUser.value ? instances.value[currentUser.value.server] ?? null : publicInstance.value)
export const isGlitchEdition = computed(() => currentInstance.value?.version.includes('+glitch'))
export const publicServer = ref('')
export const currentServer = computed<string>(() => currentUser.value?.server || publicServer.value)

2
locales/en-US.json
View File

@ -325,7 +325,7 @@
"display_name": "Display name",
"label": "Appearance",
"profile_metadata": "Profile metadata",
"profile_metadata_desc": "You can have up to 4 items displayed as a table on your profile",
"profile_metadata_desc": "You can have up to {0} items displayed as a table on your profile",
"title": "Edit profile"
},
"featured_tags": {

2
locales/nl-NL.json
View File

@ -268,7 +268,7 @@
"display_name": "Zichtbare naam",
"label": "Uiterlijk",
"profile_metadata": "Profiel metadata",
"profile_metadata_desc": "Je kan tot en met 4 elementen als table zetten op je profiel zetten",
"profile_metadata_desc": "Je kan tot en met {0} elementen als table zetten op je profiel zetten",
"title": "Aanpassen profiel"
},
"featured_tags": {

12
pages/settings/profile/appearance.vue
View File

@ -24,7 +24,7 @@ const onlineSrc = $computed(() => ({
const { form, reset, submitter, dirtyFields, isError } = useForm({
form: () => {
// For complex types of objects, a deep copy is required to ensure correct comparison of initial and modified values
const fieldsAttributes = Array.from({ length: 4 }, (_, i) => {
const fieldsAttributes = Array.from({ length: maxAccountFieldCount.value }, (_, i) => {
const field = { ...account?.fields?.[i] || { name: '', value: '' } }
const linkElement = (parse(field.value)?.children?.[0])
@ -151,16 +151,8 @@ onReactivated(refreshInfo)
</label>
<!-- metadata -->
<div space-y-2>
<div font-medium>
{{ $t('settings.profile.appearance.profile_metadata') }}
</div>
<div text-sm text-secondary>
{{ $t('settings.profile.appearance.profile_metadata_desc') }}
</div>
<SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
</div>
<SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
<!-- actions -->
<div flex="~ gap2" justify-end>