added file owner into file detail panel

resources/js/components/FilesView/AuthorThumbnail.vue

@@ -4,7 +4,7 @@
 			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"
+			:alt="item.data.relationships.user.data.attributes.name"
 		>
 		<TypedAvatar
 			v-else
@@ -22,9 +22,9 @@
 		components: {
 			TypedAvatar
 		},
-		props: {
-			item: {type: Function}
-		}
+		props: [
+			'item',
+		]
 	}
 </script>
 <style scoped lang="scss">

resources/js/components/FilesView/InfoSidebar.vue

@@ -31,6 +31,17 @@
 		<!--File info-->
         <ListInfo v-if="isSingleFile && !isEmpty">
 
+			<!--Author-->
+            <ListInfoItem
+				v-if="canShowAuthor"
+				:title="$t('Author')"
+			>
+                <div class="author-preview">
+					<MemberAvatar :size="32" :member="singleFile.data.relationships.user" />
+                    <span class="name">{{ singleFile.data.relationships.user.data.attributes.name }}</span>
+                </div>
+            </ListInfoItem>
+
 			<!--Filesize-->
             <ListInfoItem
 				v-if="singleFile.data.attributes.filesize"
@@ -94,21 +105,23 @@
 </template>
 
 <script>
-	import TeamMembersPreview from "../Teams/Components/TeamMembersPreview"
 	import FilePreviewDetail from '/resources/js/components/Others/FilePreviewDetail'
-    import {Edit2Icon, LockIcon, UnlockIcon} from 'vue-feather-icons'
-	import ImageMetaData from '/resources/js/components/FilesView/ImageMetaData'
-    import EmptyMessage from '/resources/js/components/FilesView/EmptyMessage'
-	import TitlePreview from '/resources/js/components/FilesView/TitlePreview'
 	import CopyShareLink from '/resources/js/components/Others/Forms/CopyShareLink'
+	import ImageMetaData from '/resources/js/components/FilesView/ImageMetaData'
+	import EmptyMessage from '/resources/js/components/FilesView/EmptyMessage'
+	import TitlePreview from '/resources/js/components/FilesView/TitlePreview'
+	import TeamMembersPreview from "../Teams/Components/TeamMembersPreview"
 	import ListInfoItem from '/resources/js/components/Others/ListInfoItem'
+	import {Edit2Icon, LockIcon, UnlockIcon} from 'vue-feather-icons'
 	import ListInfo from '/resources/js/components/Others/ListInfo'
-	import {mapGetters} from 'vuex'
 	import {events} from '/resources/js/bus'
+	import {mapGetters} from 'vuex'
+	import MemberAvatar from "./MemberAvatar";
 
 	export default {
 		name: 'InfoSidebar',
 		components: {
+			MemberAvatar,
 			TeamMembersPreview,
 			FilePreviewDetail,
 			ImageMetaData,
@@ -125,6 +138,7 @@
 			...mapGetters([
 				'permissionOptions',
 				'clipboard',
+				'user',
 			]),
 			isEmpty() {
 				return this.clipboard.length === 0
@@ -148,6 +162,10 @@
 
 				return title ? this.$t(title.label) : this.$t('shared.can_download')
 			},
+			canShowAuthor() {
+				return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders'])
+					&& this.user.data.id !== this.clipboard[0].data.relationships.user.data.id
+			},
 		},
 		methods: {
 			openShareOptions() {
@@ -162,6 +180,16 @@
 
 <style scoped lang="scss">
 
+	.author-preview	{
+		display: flex;
+		align-items: center;
+
+		.name {
+			margin-left: 10px;
+			display: block;
+		}
+	}
+
 	.info-wrapper {
 		padding-bottom: 20px;
 		height: 100%;

resources/js/components/FilesView/MemberAvatar.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="user-preview">
+		<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="user-image"
+		>
+		<TypedAvatar
+			v-else
+			:size="size"
+			:letter="member.data.attributes.name.substr(0, 1)"
+			:color="member.data.attributes.color"
+		/>
+	</div>
+</template>
+<script>
+	import TypedAvatar from "../Others/TypedAvatar"
+
+	export default {
+		name: 'MemberAvatar',
+		props: [
+			'member',
+			'size',
+		],
+		components: {
+			TypedAvatar,
+		},
+	}
+</script>
+
+<style lang="scss">
+
+	.user-image {
+		border-radius: 10px;
+	}
+</style>