Team member preview refactoring

resources/js/components/FilesView/AuthorThumbnail.vue

@@ -1,30 +0,0 @@
-<template>
-	<div class="absolute -right-1 -bottom-1">
-		<img
-			v-if="item.data.relationships.user.data.attributes.avatar"
-			class="w-5 h-5 rounded"
-			style="outline: 2px solid white;"
-			:src="item.data.relationships.user.data.attributes.avatar"
-			:alt="item.data.relationships.user.data.attributes.name"
-		>
-		<TypedAvatar
-			v-else
-			:size="22"
-			:letter="item.data.relationships.user.data.attributes.name.substr(0, 1)"
-			:color="item.data.relationships.user.data.attributes.color"
-		/>
-	</div>
-</template>
-<script>
-	import TypedAvatar from "../Others/TypedAvatar"
-
-	export default {
-		name: 'AuthorThumbnail',
-		components: {
-			TypedAvatar
-		},
-		props: [
-			'item',
-		]
-	}
-</script>

resources/js/components/FilesView/FileItemList.vue

@@ -16,7 +16,13 @@
             <!--Thumbnail for item-->
             <div class="icon-item">
 
-				<AuthorThumbnail v-if="canShowAuthor" :item="item" />
+				<MemberAvatar
+					v-if="canShowAuthor"
+					:size="28"
+					:is-border="true"
+					:member="item.data.relationships.user"
+					class="absolute -right-2 -bottom-2"
+				/>
 
                 <!--If is file or image, then link item-->
                 <span v-if="isFile || isVideo || (isImage && !item.data.attributes.thumbnail)" class="file-icon-text text-theme dark-text-theme">
@@ -69,7 +75,7 @@
 import {LinkIcon, MoreVerticalIcon} from 'vue-feather-icons'
 import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
 import CheckBox from '/resources/js/components/FilesView/CheckBox'
-import AuthorThumbnail from "./AuthorThumbnail";
+import MemberAvatar from "./MemberAvatar";
 import {events} from '/resources/js/bus'
 import {debounce} from 'lodash'
 import {mapGetters} from 'vuex'
@@ -82,7 +88,7 @@ export default {
 	],
     components: {
         MoreVerticalIcon,
-		AuthorThumbnail,
+		MemberAvatar,
         FolderIcon,
         CheckBox,
         LinkIcon,

resources/js/components/FilesView/FolderIcon.vue

@@ -14,6 +14,7 @@
 			v-if="!emoji && item.data.attributes.isTeamFolder"
 			:class="[{'is-deleted':isDeleted},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
 			:style="{fill: color}"
+			style="width: 53px; height: 52px"
 		/>
 <!--        <FontAwesomeIcon
             v-if="!emoji"

resources/js/components/FilesView/MemberAvatar.vue

@@ -1,31 +1,44 @@
 <template>
-	<div class="user-preview">
+	<div>
 		<img
 			:style="{width: size + 'px', height: size + 'px'}"
 			v-if="member.data.attributes.avatar"
 			:src="member.data.attributes.avatar"
 			:alt="member.data.attributes.name"
-			class="rounded-xl border-4 border-white"
+			:class="[borderRadius, {'border-3 border-white': isBorder}]"
+			class=""
 		>
-		<TypedAvatar
+		<div
 			v-else
-			:size="size"
-			:letter="member.data.attributes.name.substr(0, 1)"
-			:color="member.data.attributes.color"
-		/>
+			class="flex items-center justify-center"
+			:class="[borderRadius, {'border-3 border-white': isBorder}]"
+			:style="{width: size + 'px', height: size + 'px', background: member.data.attributes.color ? member.data.attributes.color : '#f4f5f6'}"
+		>
+			<span :class="fontSize" class="uppercase font-extrabold">
+				{{ letter }}
+			</span>
+		</div>
 	</div>
 </template>
 <script>
-	import TypedAvatar from "../Others/TypedAvatar"
 
 	export default {
 		name: 'MemberAvatar',
 		props: [
+			'isBorder',
 			'member',
 			'size',
 		],
-		components: {
-			TypedAvatar,
-		},
+		computed: {
+			letter() {
+				return this.member.data.attributes.name.substr(0, 1)
+			},
+			borderRadius() {
+				return this.size > 32 ? 'rounded-xl' : 'rounded-lg'
+			},
+			fontSize() {
+				return this.size > 32 ? 'text-base' : 'text-sm'
+			},
+		}
 	}
 </script>

resources/js/components/Others/TypedAvatar.vue

@@ -1,45 +0,0 @@
-<template>
-	<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px', background: color ? color : '#f4f5f6', borderRadius: borderRadius + 'px'}">
-		<span class="letter" :style="{fontSize: fontSize + 'px'}">
-			{{ letter }}
-		</span>
-	</div>
-</template>
-
-<script>
-export default {
-	name: "TypedAvatar",
-	props: [
-		'letter',
-		'color',
-		'size',
-	],
-	computed: {
-		borderRadius() {
-			return this.size >= 26 ? 10 : 6
-		},
-		fontSize() {
-			return this.size >= 26 ? 14 : 12
-		},
-	}
-}
-</script>
-
-<style scoped lang="scss">
-	@import "resources/sass/vuefilemanager/_variables";
-	@import "resources/sass/vuefilemanager/_mixins";
-
-	.typed-avatar {
-		user-select: none;
-		display: flex;
-		background: #9ad2bf;
-		align-items: center;
-		justify-content: center;
-		border: 2px solid white;
-
-		.letter {
-			font-weight: 800;
-			text-transform: uppercase;
-		}
-	}
-</style>

resources/js/components/Teams/Components/TeamList.vue

@@ -6,8 +6,12 @@
 			</div>
 			<div class="member-preview">
 				<div class="avatar">
-					<img v-if="entry.avatar" :src="entry.avatar" alt="avatar">
-					<TypedAvatar v-else :size="38" :letter="entry.email.substr(0, 1)" :color="entry.color"/>
+					<MemberAvatar
+						class="mr-3 ml-2"
+						:is-border="true"
+						:size="44"
+						:member="$mapIntoMemberResource(entry)"
+					/>
 				</div>
 				<div v-if="entry.type === 'member'" class="info">
 					<b class="title">
@@ -35,7 +39,7 @@
 
 <script>
 	import PermissionToggleButton from "./PermissionToggleButton"
-	import TypedAvatar from "../../Others/TypedAvatar"
+	import MemberAvatar from "../../FilesView/MemberAvatar";
 	import {XIcon} from 'vue-feather-icons'
 	import {mapGetters} from "vuex";
 
@@ -51,7 +55,7 @@
 		},
 		components: {
 			PermissionToggleButton,
-			TypedAvatar,
+			MemberAvatar,
 			XIcon,
 		},
 		data() {
@@ -107,18 +111,6 @@
 			display: flex;
 			align-items: center;
 
-			.avatar {
-				padding: 0 12px;
-
-				img {
-					width: 38px;
-					height: 38px;
-					border-radius: 8px;
-					object-fit: cover;
-					display: block;
-				}
-			}
-
 			.info {
 
 				.title {

resources/js/components/Teams/Components/TeamMembersPreview.vue

@@ -5,15 +5,15 @@
 		</span>
 		<div class="members">
 			<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview">
-				<img v-if="member.data.attributes.avatar" :src="member.data.attributes.avatar" class="member" alt="avatar">
-				<TypedAvatar v-else :size="avatarSize" :letter="member.data.attributes.email.substr(0, 1)" :color="member.data.attributes.color" />
+				<MemberAvatar :is-border="true" :size="34" :member="member" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-	import TypedAvatar from "../../Others/TypedAvatar";
+	import MemberAvatar from "../../FilesView/MemberAvatar"
+
 	export default {
 		name: "TeamMembersPreview",
 		props: [
@@ -22,7 +22,7 @@
 			'avatarSize'
 		],
 		components: {
-			TypedAvatar,
+			MemberAvatar,
 		},
 		computed: {
 			membersCount() {