mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 20:29:08 +01:00
feat(settings): preview display name and handle
This commit is contained in:
parent
2bbbfd51c1
commit
230c8b68a4
1 changed files with 9 additions and 4 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue