Merge branch 'improve-image-picker' into 'master'

Improve avatar picker

See merge request framasoft/mobilizon!257
This commit is contained in:
Thomas Citharel 2019-10-12 19:36:34 +02:00
commit 2af2f72d2f
5 changed files with 31 additions and 8 deletions

View File

@ -187,6 +187,8 @@ nav {
.navbar-item.has-dropdown a.navbar-link figure { .navbar-item.has-dropdown a.navbar-link figure {
margin-right: 0.75rem; margin-right: 0.75rem;
display: flex;
align-items: center;
} }
a.navbar-item:focus-within { a.navbar-item:focus-within {

View File

@ -1,11 +1,15 @@
<template> <template>
<div class="root"> <div class="root">
<figure class="image is-128x128"> <figure class="image" v-if="imageSrc">
<img class="is-rounded" v-bind:src="imageSrc"> <img :src="imageSrc" />
<div class="image-placeholder" v-if="!imageSrc"></div> </figure>
<figure class="image is-128x128" v-else>
<div class="image-placeholder">
<span class="has-text-centered">{{ textFallback }}</span>
</div>
</figure> </figure>
<b-upload @input="onFileChanged"> <b-upload @input="onFileChanged" :accept="accept">
<a class="button is-primary"> <a class="button is-primary">
<b-icon icon="upload"></b-icon> <b-icon icon="upload"></b-icon>
<span>{{ $t('Click to upload') }}</span> <span>{{ $t('Click to upload') }}</span>
@ -14,14 +18,16 @@
</div> </div>
</template> </template>
<style scoped type="scss"> <style scoped lang="scss">
.root { .root {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.image { figure.image {
margin-right: 30px; margin-right: 30px;
max-height: 200px;
max-width: 200px;
} }
.image-placeholder { .image-placeholder {
@ -29,15 +35,26 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 100%; border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
span {
flex: 1;
color: #eee;
}
} }
</style> </style>
<script lang="ts"> <script lang="ts">
import { Component, Model, Vue, Watch } from 'vue-property-decorator'; import { Component, Model, Prop, Vue, Watch } from 'vue-property-decorator';
@Component @Component
export default class PictureUpload extends Vue { export default class PictureUpload extends Vue {
@Model('change', { type: File }) readonly pictureFile!: File; @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; 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 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 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}\"?", "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", "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}", "By {name}": "By {name}",
"Cancel creation": "Cancel creation", "Cancel creation": "Cancel creation",
@ -99,6 +100,7 @@
"Group name": "Group name", "Group name": "Group name",
"Group {displayName} created": "Group {displayName} created", "Group {displayName} created": "Group {displayName} created",
"Groups": "Groups", "Groups": "Groups",
"Headline picture": "Headline picture",
"I create an identity": "I create an identity", "I create an identity": "I create an identity",
"I participate": "I participate", "I participate": "I participate",
"I want to approve every participation request": "I want to approve every participation request", "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 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 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.", "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", "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}", "By {name}": "Par {name}",
"Cancel creation": "Annuler la création", "Cancel creation": "Annuler la création",
@ -112,6 +113,7 @@
"Group {displayName} created": "Groupe {displayName} créé", "Group {displayName} created": "Groupe {displayName} créé",
"Group": "Groupe", "Group": "Groupe",
"Groups": "Groupes", "Groups": "Groupes",
"Headline picture": "Image à la une",
"I create an identity": "Je crée une identité", "I create an identity": "Je crée une identité",
"I participate": "Je participe", "I participate": "Je participe",
"I want to approve every participation request": "Je veux approuver chaque demande de participation", "I want to approve every participation request": "Je veux approuver chaque demande de participation",

View File

@ -13,7 +13,7 @@
<h2 class="subtitle"> <h2 class="subtitle">
{{ $t('General information') }} {{ $t('General information') }}
</h2> </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-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
<b-input size="is-large" aria-required="true" required v-model="event.title" /> <b-input size="is-large" aria-required="true" required v-model="event.title" />