From b1f2d4e22d398ecf77cdc0ab495cf7bc3ddd6df0 Mon Sep 17 00:00:00 2001
From: JonFreer <j.freer@hotmail.co.uk>
Date: Sun, 13 Aug 2023 17:05:36 +0100
Subject: [PATCH] ui: redesign image upload section

---
 js/src/components/PictureUpload.vue           | 95 +++++++++++--------
 .../views/Account/children/EditIdentity.vue   | 15 +--
 js/src/views/Event/EditView.vue               | 13 ++-
 3 files changed, 69 insertions(+), 54 deletions(-)

diff --git a/js/src/components/PictureUpload.vue b/js/src/components/PictureUpload.vue
index c0a4c94e3..3e5f714fb 100644
--- a/js/src/components/PictureUpload.vue
+++ b/js/src/components/PictureUpload.vue
@@ -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 {
diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue
index 7d12d79d8..19762058a 100644
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -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
diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
index 551ee3959..9a9b1de0e 100644
--- a/js/src/views/Event/EditView.vue
+++ b/js/src/views/Event/EditView.vue
@@ -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')"