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 1/3] 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')"

From 1c7383235de1775f311ce0b2e6892c80971d17df Mon Sep 17 00:00:00 2001
From: Jon Freer <j.freer@hotmail.co.uk>
Date: Sun, 13 Aug 2023 17:26:18 +0000
Subject: [PATCH 2/3] Add horizontal tag to form item in profile settings

---
 js/src/views/Account/children/EditIdentity.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue
index 19762058a..c08f07d23 100644
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -8,7 +8,7 @@
         }}</span>
         <span v-else>{{ $t("I create an identity") }}</span>
       </h1>
-      <o-field :label="t('Avatar')">
+      <o-field horizontal :label="t('Avatar')">
         <picture-upload
           v-model="avatarFile"
           :defaultImage="identity.avatar"

From 21149cee656b7abc0b2865e74ce61c787f429b76 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 16 Aug 2023 11:21:25 +0200
Subject: [PATCH 3/3] refactor(front): remove unused CSS code

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/PictureUpload.vue | 29 -----------------------------
 1 file changed, 29 deletions(-)

diff --git a/js/src/components/PictureUpload.vue b/js/src/components/PictureUpload.vue
index 3e5f714fb..da6494752 100644
--- a/js/src/components/PictureUpload.vue
+++ b/js/src/components/PictureUpload.vue
@@ -63,35 +63,6 @@
   </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";