Rework the ImagePicker component

This commit is contained in:
Johannes Zellner
2025-05-20 14:48:18 +02:00
parent 4615418000
commit d955f0e3d8
4 changed files with 120 additions and 95 deletions
+4 -4
View File
@@ -106,7 +106,7 @@ async function onChangeFallbackEmail(currentFallbackEmail) {
await refreshProfile();
}
async function onAvatarChanged(file) {
async function onAvatarSubmit(file) {
await profileModel.setAvatar(file);
await refreshProfile();
}
@@ -268,9 +268,9 @@ onMounted(async () => {
<Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
</template>
<div style="display: flex; flex-wrap: wrap">
<div style="width: 150px; display: flex; flex-direction: column; justify-content: space-between;">
<ImagePicker :src="user.avatarUrl" fallback-src="/img/background-image-placeholder.svg" :size="512" @changed="onAvatarChanged" display-width="128px"/>
<div style="display: flex; flex-wrap: wrap; gap: 20px">
<div style="width: 128px;">
<ImagePicker :src="user.avatarUrl" fallback-src="/img/background-image-placeholder.svg" :size="512" :save-handler="onAvatarSubmit" display-width="128px"/>
</div>
<div style="flex-grow: 1;">
<SettingsItem>