teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(settings): preview display name and handle

Browse source
This commit is contained in:
三咲智子 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>
<form space-y-5 @submit.prevent="submit">
<div>
<div v-if="isHydrated && account">
<!-- banner -->
<div of-hidden bg="gray-500/20" aspect="3">
<CommonInputImage
v-if="isHydrated"
v-model="form.header"
:original="onlineSrc.header"
w-full h-full
@ -100,15 +99,21 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
<CommonCropImage v-model="form.header" :stencil-aspect-ratio="3 / 1" />
<!-- avatar -->
<div px-4>
<div px-4 flex="~ gap4">
<CommonInputImage
v-if="isHydrated"
v-model="form.avatar"
:original="onlineSrc.avatar"
mt--10
rounded-full border="bg-base 4"
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>
<CommonCropImage v-model="form.avatar" />
</div>