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,86 +1,68 @@
 <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"
+      :accept="accept"
+      drag-drop
+    >
       <div
-        class="image-placeholder"
+        class="w-100 rounded text-center p-4 rounded-xl border-dashed border-2 border-gray-600"
-        :class="{ error: imagePreviewLoadingError }"
       >
-        <span class="has-text-centered" v-if="imagePreviewLoadingError">{{
+        <span class="mx-auto flex w-fit">
-          $t("Error while loading the preview")
+          <Upload />
-        }}</span>
+          <span class="capitalize"
-        <span class="has-text-centered" v-else>{{
+            >{{ $t("Click to upload") }} {{ textFallbackWithDefault }}</span
-          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">
+  <div
-      <p v-if="modelValue" class="inline-flex">
+    v-if="
-        <span class="block truncate max-w-[200px]" :title="modelValue.name">{{
+      imageSrc &&
-          modelValue.name
+      !imagePreviewLoadingError &&
-        }}</span>
+      !pictureTooBig &&
-        <span>({{ formatBytes(modelValue.size) }})</span>
+      !imagePreviewLoadingError
-      </p>
+    "
-      <p v-if="pictureTooBig" class="text-mbz-danger">
+  >
-        {{
+    <figure
-          $t(
+      class="w-fit relative image mx-auto my-4"
-            "The selected picture is too heavy. You need to select a file smaller than {size}.",
+      v-if="imageSrc && !imagePreviewLoadingError"
-            { size: formatBytes(maxSize) }
+    >
-          )
+      <img
-        }}
+        class="max-h-52 rounded-xl"
-      </p>
+        :src="imageSrc"
-      <o-field class="justify-center" variant="primary">
+        @error="showImageLoadingError"
-        <o-upload @update:modelValue="onFileChanged" :accept="accept" drag-drop>
+      />
-          <span>
-            <Upload />
-            <span>{{ $t("Click to upload") }}</span>
-          </span>
-        </o-upload>
-      </o-field>
       <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
+        <picture-upload
-        v-model="avatarFile"
+          v-model="avatarFile"
-        :defaultImage="identity.avatar"
+          :defaultImage="identity.avatar"
-        :maxSize="avatarMaxSize"
+          :maxSize="avatarMaxSize"
-        class="picture-upload"
+          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>
-      <picture-upload
+
-        v-model:modelValue="pictureFile"
+      <o-field :label="t('Headline picture')">
-        :textFallback="t('Headline picture')"
+        <picture-upload
-        :defaultImage="event.picture"
+          v-model:modelValue="pictureFile"
-      />
+          :textFallback="t('Headline picture')"
+          :defaultImage="event.picture"
+        />
+      </o-field>
 
       <o-field
         :label="t('Title')"