Generate multiple avatar sizes

This commit is contained in:
Čarodej
2021-11-02 16:11:53 +01:00
parent 9b2dbe06c7
commit dc8ec5f20b
18 changed files with 197 additions and 75 deletions
@@ -6,7 +6,7 @@
<td style="width: 300px">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<DatatableCellImage
:image="row.data.relationships.settings.data.attributes.avatar"
:image="row.data.relationships.settings.data.attributes.avatar.sm"
:title="row.data.relationships.settings.data.attributes.name"
:description="row.data.attributes.email"
/>
@@ -3,11 +3,10 @@
<img
:style="{width: size + 'px', height: size + 'px'}"
v-if="member.data.attributes.avatar"
:src="member.data.attributes.avatar"
:alt="member.data.attributes.name"
:src="avatar"
:class="[borderRadius, {'border-3 border-white dark:border-dark-background': isBorder}]"
class=""
>
/>
<div
v-else
class="flex items-center justify-center"
@@ -41,7 +40,6 @@
return this.size > 32 ? 'rounded-xl' : 'rounded-lg'
},
fontSize() {
if (this.size > 42) {
return 'text-lg'
} else if (this.size > 32) {
@@ -50,6 +48,15 @@
return 'text-sm'
}
},
avatar() {
if (this.size > 62) {
return this.member.data.attributes.avatar.md
} else if (this.size > 32) {
return this.member.data.attributes.avatar.sm
} else {
return this.member.data.attributes.avatar.xs
}
},
}
}
</script>
@@ -1,7 +1,7 @@
<template>
<div class="user-avatar" :class="size">
<span v-if="isIncompletePayment || isNearlyFullStorageCapacity" class="notification"></span>
<img :src="user.data.relationships.settings.data.attributes.avatar" :alt="user.data.relationships.settings.data.attributes.name">
<img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">
</div>
</template>
+1 -1
View File
@@ -128,7 +128,7 @@ const mutations = {
state.user.data.relationships.settings.data.attributes.name = name
},
UPDATE_AVATAR(state, avatar) {
state.user.data.relationships.settings.data.attributes.avatar = avatar
state.user.data.relationships.settings.data.attributes.avatar.sm = avatar
},
REMOVE_ITEM_FROM_FAVOURITES(state, item) {
state.user.data.relationships.favourites.data = state.user.data.relationships.favourites.data.filter(folder => folder.data.id !== item.data.id)
+1 -1
View File
@@ -34,7 +34,7 @@
<router-link v-if="row.relationships" :to="{name: 'UserInvoices', params: {id: row.relationships.user.data.id}}">
<DatatableCellImage
image-size="small"
:image="row.relationships.user.data.attributes.avatar"
:image="row.relationships.user.data.attributes.avatar.sm"
:title="row.relationships.user.data.attributes.name"
/>
</router-link>
@@ -10,7 +10,7 @@
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<DatatableCellImage
image-size="small"
:image="row.data.relationships.settings.data.attributes.avatar"
:image="row.data.relationships.settings.data.attributes.avatar.sm"
:title="row.data.relationships.settings.data.attributes.name"
/>
</router-link>
+1 -1
View File
@@ -24,7 +24,7 @@
<td style="min-width: 320px">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
<DatatableCellImage
:image="row.data.relationships.settings.data.attributes.avatar"
:image="row.data.relationships.settings.data.attributes.avatar.sm"
:title="row.data.relationships.settings.data.attributes.name"
:description="row.data.attributes.email"
/>
+1 -1
View File
@@ -8,7 +8,7 @@
<!--User thumbnail-->
<div class="user-thumbnail">
<div class="avatar">
<img :src="user.data.relationships.settings.data.attributes.avatar" :alt="user.data.relationships.settings.data.attributes.name">
<img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">
<!--<img :src="user.data.attributes.avatar" :alt="user.data.attributes.name" class="blurred">-->
</div>
<div class="info">
+4 -4
View File
@@ -34,7 +34,7 @@
<AuthContent name="sign-in" :visible="false">
<div class="user" v-if="checkedAccount">
<img class="user-avatar mx-auto" :src="checkedAccount.avatar" :alt="checkedAccount.name">
<img class="user-avatar mx-auto" :src="checkedAccount.avatar.md" :alt="checkedAccount.name">
<h1>{{ $t('page_sign_in.title', {name: checkedAccount.name}) }}</h1>
<h2>{{ $t('page_sign_in.subtitle') }}:</h2>
</div>
@@ -64,7 +64,7 @@
<AuthContent name="not-verified" :visible="false">
<div class="user" v-if="checkedAccount">
<img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
<img class="user-avatar" :src="checkedAccount.avatar.md" :alt="checkedAccount.name">
<h1>{{ checkedAccount.name }}</h1>
<h2>{{ $t('page_not_verified.subtitle') }}</h2>
</div>
@@ -78,7 +78,7 @@
<AuthContent name="two-factor-authentication" :visible="false">
<div class="user" v-if="checkedAccount">
<img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
<img class="user-avatar" :src="checkedAccount.avatar.md" :alt="checkedAccount.name">
<h1> {{ $t('page_sign_in_2fa_title', {name: checkedAccount.name}) }} </h1>
<h2> {{ $t('page_sign_in_2fa_subtitle') }}:</h2>
</div>
@@ -114,7 +114,7 @@
<AuthContent name="two-factor-recovery" :visible="false">
<div class="user" v-if="checkedAccount">
<img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
<img class="user-avatar" :src="checkedAccount.avatar.md" :alt="checkedAccount.name">
<h1> {{ checkedAccount.name }} </h1>
<h2>{{ $t('page_sign_in.2fa_recovery_subtitle') }}:</h2>
</div>
+1 -1
View File
@@ -26,7 +26,7 @@
<div class="avatar">
<UserImageInput
v-model="avatar"
:avatar="user.data.relationships.settings.data.attributes.avatar"
:avatar="user.data.relationships.settings.data.attributes.avatar.md"
/>
</div>
<div class="info">