From d037642f55dd25780e8b61721cbbbdb974d5a11e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sosth=C3=A8ne=20Gu=C3=A9don?= <sosthene@guedon.gdn>
Date: Sun, 13 Aug 2023 16:06:28 +0200
Subject: [PATCH 1/4] Fix jitter when toggling "adapt to system theme"

This patch makes the border around the "dark" and "light" radio button to always be present.
Previously it was not present when the button were disabled because using the system theme,
which caused it to make the elements larger and made them move when toggling "adapt to system theme"

To keep the same meaning as previously, the border is only colored when the button is activated

Fix #1339
---
 js/src/views/Settings/PreferencesView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/src/views/Settings/PreferencesView.vue b/js/src/views/Settings/PreferencesView.vue
index 259220714..919131972 100644
--- a/js/src/views/Settings/PreferencesView.vue
+++ b/js/src/views/Settings/PreferencesView.vue
@@ -23,8 +23,8 @@
           <fieldset>
             <legend class="sr-only">{{ t("Theme") }}</legend>
             <o-radio
-              :class="{ 'border-mbz-bluegreen border-2': theme === 'light' }"
-              class="p-4 bg-white text-zinc-800 rounded-md mt-2 mr-2"
+              :class="{ 'border-mbz-bluegreen': theme === 'light' }"
+              class="p-4 bg-white text-zinc-800 rounded-md mt-2 mr-2 border-2"
               :disabled="systemTheme"
               v-model="theme"
               name="theme"
@@ -32,8 +32,8 @@
               >{{ t("Light") }}</o-radio
             >
             <o-radio
-              :class="{ 'border-mbz-bluegreen border-2': theme === 'dark' }"
-              class="p-4 bg-zinc-800 rounded-md text-white mt-2 ml-2"
+              :class="{ 'border-mbz-bluegreen': theme === 'dark' }"
+              class="p-4 bg-zinc-800 rounded-md text-white mt-2 ml-2 border-2"
               :disabled="systemTheme"
               v-model="theme"
               name="theme"

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 2/4] 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 3/4] 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 4/4] 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";