mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-19 03:35:02 +00:00
Generate multiple avatar sizes
This commit is contained in:
@@ -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
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user