Merge branch 'mobilizon-fork-ui-image-upload' into 'main'

ui: redesign image upload section

See merge request framasoft/mobilizon!1430

js/src/components/PictureUpload.vue

@@ -1,29 +1,21 @@
 <template>
-  <div class="flex items-center">
+  <div>
-    <figure class="image" v-if="imageSrc && !imagePreviewLoadingError">
+    <o-upload
-      <img :src="imageSrc" @error="showImageLoadingError" />
+      rootClass="!flex"
-    </figure>
+      v-if="!imageSrc || imagePreviewLoadingError || pictureTooBig"
-    <figure class="image is-128x128" v-else>
+      @update:modelValue="onFileChanged"
-      <div
+      :accept="accept"
-        class="image-placeholder"
+      drag-drop
-        :class="{ error: imagePreviewLoadingError }"
     >
-        <span class="has-text-centered" v-if="imagePreviewLoadingError">{{
+      <div
-          $t("Error while loading the preview")
+        class="w-100 rounded text-center p-4 rounded-xl border-dashed border-2 border-gray-600"
-        }}</span>
+      >
-        <span class="has-text-centered" v-else>{{
+        <span class="mx-auto flex w-fit">
-          textFallbackWithDefault
+          <Upload />
-        }}</span>
+          <span class="capitalize"
-      </div>
+            >{{ $t("Click to upload") }} {{ textFallbackWithDefault }}</span
-    </figure>
+          >
-
+        </span>
-    <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(
@@ -32,55 +24,45 @@
             )
           }}
         </p>
-      <o-field class="justify-center" variant="primary">
+        <span
-        <o-upload @update:modelValue="onFileChanged" :accept="accept" drag-drop>
+          class="has-text-centered text-mbz-danger"
-          <span>
+          v-if="imagePreviewLoadingError"
-            <Upload />
+          >{{ $t("Error while loading the preview") }}</span
-            <span>{{ $t("Click to upload") }}</span>
+        >
-          </span>
+      </div>
     </o-upload>
-      </o-field>
+  </div>
+
+  <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>
 
-<style scoped lang="scss">
-@use "@/styles/_mixins" as *;
-figure.image {
-  // @include margin-right(30px);
-  max-height: 200px;
-  max-width: 200px;
-  overflow: hidden;
-}
-
-.image-placeholder {
-  background-color: grey;
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &.error {
-    border: 2px solid red;
-  }
-
-  span {
-    flex: 1;
-    color: #eee;
-  }
-}
-</style>
-
 <script lang="ts" setup>
 import { IMedia } from "@/types/media.model";
 import { computed, ref, watch } from "vue";

js/src/views/Account/children/EditIdentity.vue

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

js/src/views/Event/EditView.vue

@@ -9,11 +9,14 @@
 
     <form ref="form">
       <h2>{{ t("General information") }}</h2>
+
+      <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')"