author thumbnail in file

resources/js/components/FilesView/AuthorThumbnail.vue

@@ -0,0 +1,47 @@
+<template>
+	<div class="user-preview">
+		<img
+			v-if="item.data.relationships.user.data.attributes.avatar"
+			class="user-image"
+			:src="item.data.relationships.user.data.attributes.avatar"
+			alt="item.data.relationships.user.data.attributes.name"
+		>
+		<TypedAvatar
+			v-else
+			:size="24"
+			: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: {type: Function}
+		}
+	}
+</script>
+<style scoped lang="scss">
+@import '/resources/sass/vuefilemanager/_variables';
+@import '/resources/sass/vuefilemanager/_mixins';
+
+.user-preview {
+	position: absolute;
+	right: -5px;
+	bottom: -5px;
+
+	.user-image {
+		width: 22px;
+		height: 22px;
+		outline: 3px solid white;
+		border-radius: 6px;
+	}
+}
+
+</style>

resources/js/components/FilesView/FileItemList.vue

@@ -15,6 +15,9 @@
 
             <!--Thumbnail for item-->
             <div class="icon-item">
+
+				<AuthorThumbnail v-if="canShowAuthor" :item="item" />
+
                 <!--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">
                     {{ item.data.attributes.mimetype | limitCharacters }}
@@ -63,22 +66,23 @@
 </template>
 
 <script>
-import {LinkIcon, UserPlusIcon, MoreVerticalIcon} from 'vue-feather-icons'
+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 {events} from '/resources/js/bus'
 import {debounce} from 'lodash'
 import {mapGetters} from 'vuex'
-import {events} from '/resources/js/bus'
 
 export default {
     name: 'FileItemList',
     props: [
+		'disableHighlight',
 		'item',
-		'disableHighlight'
 	],
     components: {
         MoreVerticalIcon,
-        UserPlusIcon,
+		AuthorThumbnail,
         FolderIcon,
         CheckBox,
         LinkIcon,
@@ -87,8 +91,14 @@ export default {
         ...mapGetters([
             'FilePreviewType',
             'clipboard',
-            'entries'
+            'entries',
+            'user',
         ]),
+		canShowAuthor() {
+			return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders'])
+				&& !this.isFolder
+				&& this.user.data.id !== this.item.data.relationships.user.data.id
+		},
         isClicked() {
             return !this.disableHighlight && this.clipboard.some(element => element.data.id === this.item.data.id)
         },

resources/js/components/Others/TypedAvatar.vue

@@ -1,6 +1,8 @@
 <template>
-	<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px', background: color ? color : '#f4f5f6'}">
-		<span class="letter">{{ letter }}</span>
+	<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>
 
@@ -11,7 +13,15 @@ export default {
 		'letter',
 		'color',
 		'size',
-	]
+	],
+	computed: {
+		borderRadius() {
+			return this.size >= 26 ? 10 : 6
+		},
+		fontSize() {
+			return this.size >= 26 ? 14 : 12
+		},
+	}
 }
 </script>
 
@@ -23,7 +33,6 @@ export default {
 		user-select: none;
 		display: flex;
 		background: #9ad2bf;
-		border-radius: 10px;
 		align-items: center;
 		justify-content: center;
 		border: 2px solid white;