From d34581b5f74770694851bbb23852f8d575ae8fe6 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Sat, 12 Oct 2019 19:23:32 +0200
Subject: [PATCH] Improve avatar picker

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/NavBar.vue        |  2 ++
 js/src/components/PictureUpload.vue | 31 ++++++++++++++++++++++-------
 js/src/i18n/en_US.json              |  2 ++
 js/src/i18n/fr_FR.json              |  2 ++
 js/src/views/Event/Edit.vue         |  2 +-
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 67f1fb2c6..07be3fc36 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -187,6 +187,8 @@ nav {
 
   .navbar-item.has-dropdown a.navbar-link figure {
     margin-right: 0.75rem;
+    display: flex;
+    align-items: center;
   }
 
   a.navbar-item:focus-within {
diff --git a/js/src/components/PictureUpload.vue b/js/src/components/PictureUpload.vue
index da1ed36e4..74bcfa7f7 100644
--- a/js/src/components/PictureUpload.vue
+++ b/js/src/components/PictureUpload.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="root">
-    <figure class="image is-128x128">
-      <img class="is-rounded" v-bind:src="imageSrc">
-      <div class="image-placeholder" v-if="!imageSrc"></div>
+    <figure class="image" v-if="imageSrc">
+      <img :src="imageSrc"  />
+    </figure>
+    <figure class="image is-128x128" v-else>
+      <div class="image-placeholder">
+        <span class="has-text-centered">{{ textFallback }}</span>
+      </div>
     </figure>
 
-    <b-upload @input="onFileChanged">
+    <b-upload @input="onFileChanged" :accept="accept">
       <a class="button is-primary">
         <b-icon icon="upload"></b-icon>
         <span>{{ $t('Click to upload') }}</span>
@@ -14,14 +18,16 @@
   </div>
 </template>
 
-<style scoped type="scss">
+<style scoped lang="scss">
   .root {
     display: flex;
     align-items: center;
   }
 
-  .image {
+  figure.image {
     margin-right: 30px;
+    max-height: 200px;
+    max-width: 200px;
   }
 
   .image-placeholder {
@@ -29,15 +35,26 @@
     width: 100%;
     height: 100%;
     border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      flex: 1;
+      color: #eee;
+    }
   }
 </style>
 
 <script lang="ts">
-import { Component, Model, Vue, Watch } from 'vue-property-decorator';
+import { Component, Model, Prop, Vue, Watch } from 'vue-property-decorator';
 
 @Component
 export default class PictureUpload extends Vue {
   @Model('change', { type: File }) readonly pictureFile!: File;
+  @Prop({ type: String, required: false, default: 'image/png,image/jpeg' }) accept;
+  // @ts-ignore
+  @Prop({ type: String, required: false, default() { return this.$t('Avatar'); } }) textFallback!: string;
 
   imageSrc: string | null = null;
 
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 4ba78e570..b572d94ce 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -19,6 +19,7 @@
 	"Are you sure you want to cancel the event creation? You'll lose all modifications.": "Are you sure you want to cancel the event creation? You'll lose all modifications.",
 	"Are you sure you want to cancel the event edition? You'll lose all modifications.": "Are you sure you want to cancel the event edition? You'll lose all modifications.",
 	"Are you sure you want to cancel your participation at event \"{title}\"?": "Are you sure you want to cancel your participation at event \"{title}\"?",
+	"Avatar": "Avatar",
 	"Before you can login, you need to click on the link inside it to validate your account": "Before you can login, you need to click on the link inside it to validate your account",
 	"By {name}": "By {name}",
 	"Cancel creation": "Cancel creation",
@@ -99,6 +100,7 @@
 	"Group name": "Group name",
 	"Group {displayName} created": "Group {displayName} created",
 	"Groups": "Groups",
+	"Headline picture": "Headline picture",
 	"I create an identity": "I create an identity",
 	"I participate": "I participate",
 	"I want to approve every participation request": "I want to approve every participation request",
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 855144503..1c755bd35 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -23,6 +23,7 @@
     "Are you sure you want to cancel the event edition? You'll lose all modifications.": "Étes-vous certain⋅e de vouloir annuler l'édition de l'événement ? Vous allez perdre toutes vos modifications.",
     "Are you sure you want to cancel your participation at event \"{title}\"?": "Êtes-vous certain⋅e de vouloir annuler votre participation à l'événement « {title} » ?",
     "Are you sure you want to delete this event? This action cannot be reverted.": "Êtes-vous certain⋅e de vouloir supprimer cet événement ? Cette action ne peut être annulée.",
+    "Avatar": "Avatar",
     "Before you can login, you need to click on the link inside it to validate your account": "Avant que vous puissiez vous enregistrer, vous devez cliquer sur le lien à l'intérieur pour valider votre compte",
     "By {name}": "Par {name}",
     "Cancel creation": "Annuler la création",
@@ -112,6 +113,7 @@
     "Group {displayName} created": "Groupe {displayName} créé",
     "Group": "Groupe",
     "Groups": "Groupes",
+    "Headline picture": "Image à la une",
     "I create an identity": "Je crée une identité",
     "I participate": "Je participe",
     "I want to approve every participation request": "Je veux approuver chaque demande de participation",
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 27de2111b..686755548 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -13,7 +13,7 @@
           <h2 class="subtitle">
             {{ $t('General information') }}
           </h2>
-          <picture-upload v-model="pictureFile" />
+          <picture-upload v-model="pictureFile" :textFallback="$t('Headline picture')" />
 
           <b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
             <b-input size="is-large" aria-required="true" required v-model="event.title" />