Improve avatar picker

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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 {

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;