Improve avatar picker

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-12 19:23:32 +02:00
parent 1596db9d1d
commit c481e818a5
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 31 additions and 8 deletions

View file

@ -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 {

View file

@ -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;

View file

@ -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",

View file

@ -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",

View file

@ -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" />