ui: redesign image upload section

This commit is contained in:
JonFreer 2023-08-13 17:05:36 +01:00 committed by Thomas Citharel
parent da40a63737
commit b1f2d4e22d
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 69 additions and 54 deletions

View file

@ -1,54 +1,65 @@
<template>
<div class="flex items-center">
<figure class="image" v-if="imageSrc && !imagePreviewLoadingError">
<img :src="imageSrc" @error="showImageLoadingError" />
</figure>
<figure class="image is-128x128" v-else>
<div>
<o-upload
rootClass="!flex"
v-if="!imageSrc || imagePreviewLoadingError || pictureTooBig"
@update:modelValue="onFileChanged"
:accept="accept"
drag-drop
>
<div
class="image-placeholder"
:class="{ error: imagePreviewLoadingError }"
class="w-100 rounded text-center p-4 rounded-xl border-dashed border-2 border-gray-600"
>
<span class="has-text-centered" v-if="imagePreviewLoadingError">{{
$t("Error while loading the preview")
}}</span>
<span class="has-text-centered" v-else>{{
textFallbackWithDefault
}}</span>
<span class="mx-auto flex w-fit">
<Upload />
<span class="capitalize"
>{{ $t("Click to upload") }} {{ textFallbackWithDefault }}</span
>
</span>
<p v-if="pictureTooBig" class="text-mbz-danger">
{{
$t(
"The selected picture is too heavy. You need to select a file smaller than {size}.",
{ size: formatBytes(maxSize) }
)
}}
</p>
<span
class="has-text-centered text-mbz-danger"
v-if="imagePreviewLoadingError"
>{{ $t("Error while loading the preview") }}</span
>
</div>
</figure>
</o-upload>
</div>
<div class="flex flex-col">
<p v-if="modelValue" class="inline-flex">
<span class="block truncate max-w-[200px]" :title="modelValue.name">{{
modelValue.name
}}</span>
<span>({{ formatBytes(modelValue.size) }})</span>
</p>
<p v-if="pictureTooBig" class="text-mbz-danger">
{{
$t(
"The selected picture is too heavy. You need to select a file smaller than {size}.",
{ size: formatBytes(maxSize) }
)
}}
</p>
<o-field class="justify-center" variant="primary">
<o-upload @update:modelValue="onFileChanged" :accept="accept" drag-drop>
<span>
<Upload />
<span>{{ $t("Click to upload") }}</span>
</span>
</o-upload>
</o-field>
<div
v-if="
imageSrc &&
!imagePreviewLoadingError &&
!pictureTooBig &&
!imagePreviewLoadingError
"
>
<figure
class="w-fit relative image mx-auto my-4"
v-if="imageSrc && !imagePreviewLoadingError"
>
<img
class="max-h-52 rounded-xl"
:src="imageSrc"
@error="showImageLoadingError"
/>
<o-button
variant="text"
class="!absolute right-1 bottom-1"
variant="danger"
v-if="imageSrc"
@click="removeOrClearPicture"
@keyup.enter="removeOrClearPicture"
>
{{ $t("Clear") }}
</o-button>
</div>
</figure>
</div>
</template>
@ -56,9 +67,9 @@
@use "@/styles/_mixins" as *;
figure.image {
// @include margin-right(30px);
max-height: 200px;
max-width: 200px;
overflow: hidden;
//max-height: 200px;
//max-width: 200px;
//overflow: hidden;
}
.image-placeholder {

View file

@ -8,13 +8,14 @@
}}</span>
<span v-else>{{ $t("I create an identity") }}</span>
</h1>
<picture-upload
v-model="avatarFile"
:defaultImage="identity.avatar"
:maxSize="avatarMaxSize"
class="picture-upload"
/>
<o-field :label="t('Avatar')">
<picture-upload
v-model="avatarFile"
:defaultImage="identity.avatar"
:maxSize="avatarMaxSize"
class="picture-upload"
/>
</o-field>
<o-field
horizontal

View file

@ -9,11 +9,14 @@
<form ref="form">
<h2>{{ t("General information") }}</h2>
<picture-upload
v-model:modelValue="pictureFile"
:textFallback="t('Headline picture')"
:defaultImage="event.picture"
/>
<o-field :label="t('Headline picture')">
<picture-upload
v-model:modelValue="pictureFile"
:textFallback="t('Headline picture')"
:defaultImage="event.picture"
/>
</o-field>
<o-field
:label="t('Title')"