ui: improve header view
This commit is contained in:
parent
6fee5026bf
commit
1a43ba9caa
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Account } from 'masto'
|
import type { Account, Field } from 'masto'
|
||||||
|
|
||||||
const { account } = defineProps<{
|
const { account } = defineProps<{
|
||||||
account: Account
|
account: Account
|
||||||
|
@ -11,15 +11,8 @@ const createdAt = $(useFormattedDateTime(() => account.createdAt, {
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const fields = $computed(() => {
|
const namedFields = ref<Field[]>([])
|
||||||
return [
|
const iconFields = ref<Field[]>([])
|
||||||
...account.fields || [],
|
|
||||||
{
|
|
||||||
name: 'Joined',
|
|
||||||
value: createdAt,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
const fieldNameIcons: Record<string, string> = {
|
const fieldNameIcons: Record<string, string> = {
|
||||||
github: 'i-ri:github-fill',
|
github: 'i-ri:github-fill',
|
||||||
|
@ -57,6 +50,26 @@ function previewHeader() {
|
||||||
function previewAvatar() {
|
function previewAvatar() {
|
||||||
openImagePreviewDialog({ src: account.avatar, alt: account.username })
|
openImagePreviewDialog({ src: account.avatar, alt: account.username })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
const named: Field[] = []
|
||||||
|
const icons: Field[] = []
|
||||||
|
|
||||||
|
account.fields?.forEach((field) => {
|
||||||
|
const icon = getFieldNameIcon(field.name)
|
||||||
|
if (icon)
|
||||||
|
icons.push(field)
|
||||||
|
else
|
||||||
|
named.push(field)
|
||||||
|
})
|
||||||
|
icons.push({
|
||||||
|
name: 'Joined',
|
||||||
|
value: createdAt,
|
||||||
|
})
|
||||||
|
|
||||||
|
namedFields.value = named
|
||||||
|
iconFields.value = icons
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -64,7 +77,7 @@ function previewAvatar() {
|
||||||
<button border="b base" z-1>
|
<button border="b base" z-1>
|
||||||
<img h-50 w-full object-cover :src="account.header" @click="previewHeader">
|
<img h-50 w-full object-cover :src="account.header" @click="previewHeader">
|
||||||
</button>
|
</button>
|
||||||
<div p4 mt--17 flex flex-col gap-6>
|
<div p4 mt--17 flex flex-col gap-4>
|
||||||
<div flex justify-between>
|
<div flex justify-between>
|
||||||
<div flex="~ col gap-2 1">
|
<div flex="~ col gap-2 1">
|
||||||
<button w-30 h-30 rounded-full bg-gray border-4 border-bg-base z-2 @click="previewAvatar">
|
<button w-30 h-30 rounded-full bg-gray border-4 border-bg-base z-2 @click="previewAvatar">
|
||||||
|
@ -88,12 +101,17 @@ function previewAvatar() {
|
||||||
<div v-if="account.note">
|
<div v-if="account.note">
|
||||||
<ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
|
<ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
|
||||||
</div>
|
</div>
|
||||||
<div flex flex-wrap gap-4>
|
<div v-if="namedFields.length" flex="~ col wrap gap1">
|
||||||
<div v-for="field in fields" :key="field.name" flex="~ gap-1" items-center>
|
<div v-for="field in namedFields" :key="field.name" flex="~ gap-1" items-center>
|
||||||
<div v-if="getFieldNameIcon(field.name)" text-secondary :class="getFieldNameIcon(field.name)" :title="field.name" />
|
<div text-secondary uppercase text-xs font-bold>
|
||||||
<div v-else text-secondary uppercase text-xs font-bold>
|
|
||||||
{{ field.name }} |
|
{{ field.name }} |
|
||||||
</div>
|
</div>
|
||||||
|
<ContentRich :content="field.value" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="iconFields.length" flex="~ wrap gap-4">
|
||||||
|
<div v-for="field in iconFields" :key="field.name" flex="~ gap-1" items-center>
|
||||||
|
<div text-secondary :class="getFieldNameIcon(field.name)" :title="field.name" />
|
||||||
<ContentRich text-sm filter-saturate-0 :content="field.value" />
|
<ContentRich text-sm filter-saturate-0 :content="field.value" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue