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

feat(settings): preview display name and handle

zio/stable
三咲智子 2023-01-07 03:14:00 +08:00
parent 2bbbfd51c1
commit 230c8b68a4
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,11 +87,10 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
</template> </template>
<form space-y-5 @submit.prevent="submit"> <form space-y-5 @submit.prevent="submit">
<div> <div v-if="isHydrated && account">
<!-- banner --> <!-- banner -->
<div of-hidden bg="gray-500/20" aspect="3"> <div of-hidden bg="gray-500/20" aspect="3">
<CommonInputImage <CommonInputImage
v-if="isHydrated"
v-model="form.header" v-model="form.header"
:original="onlineSrc.header" :original="onlineSrc.header"
w-full h-full w-full h-full
@ -100,15 +99,21 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
<CommonCropImage v-model="form.header" :stencil-aspect-ratio="3 / 1" /> <CommonCropImage v-model="form.header" :stencil-aspect-ratio="3 / 1" />
<!-- avatar --> <!-- avatar -->
<div px-4> <div px-4 flex="~ gap4">
<CommonInputImage <CommonInputImage
v-if="isHydrated"
v-model="form.avatar" v-model="form.avatar"
:original="onlineSrc.avatar" :original="onlineSrc.avatar"
mt--10 mt--10
rounded-full border="bg-base 4" rounded-full border="bg-base 4"
w="sm:30 24" min-w="sm:30 24" h="sm:30 24" w="sm:30 24" min-w="sm:30 24" h="sm:30 24"
/> />
<div flex="~ col gap1" self-end>
<AccountDisplayName
:account="{ ...account, displayName: form.displayName }"
font-bold sm:text-2xl text-xl
/>
<AccountHandle :account="account" />
</div>
</div> </div>
<CommonCropImage v-model="form.avatar" /> <CommonCropImage v-model="form.avatar" />
</div> </div>