mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,108 +1,81 @@
|
||||
<template>
|
||||
<div class="2xl:w-104 w-96 px-2.5 overflow-y-auto overflow-x-hidden h-screen lg:block hidden">
|
||||
<!--Is empty clipboard-->
|
||||
<div v-if="isEmpty" class="flex items-center justify-center h-full">
|
||||
<div class="text-center">
|
||||
<eye-off-icon size="28" class="vue-feather text-gray-400 inline-block mb-3" />
|
||||
<small class="text-sm block text-gray-400">
|
||||
{{ $t('messages.nothing_to_preview') }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden h-screen w-96 overflow-y-auto overflow-x-hidden px-2.5 lg:block 2xl:w-104">
|
||||
<!--Is empty clipboard-->
|
||||
<div v-if="isEmpty" class="flex h-full items-center justify-center">
|
||||
<div class="text-center">
|
||||
<eye-off-icon size="28" class="vue-feather mb-3 inline-block text-gray-400" />
|
||||
<small class="block text-sm text-gray-400">
|
||||
{{ $t('messages.nothing_to_preview') }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Multiple item selection-->
|
||||
<TitlePreview
|
||||
v-if="! isSingleFile && !isEmpty"
|
||||
class="mb-6"
|
||||
icon="check-square"
|
||||
:title="$t('file_detail.selected_multiple')"
|
||||
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
|
||||
/>
|
||||
<!--Multiple item selection-->
|
||||
<TitlePreview
|
||||
v-if="!isSingleFile && !isEmpty"
|
||||
class="mb-6"
|
||||
icon="check-square"
|
||||
:title="$t('file_detail.selected_multiple')"
|
||||
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
|
||||
/>
|
||||
|
||||
<!--Single file preview-->
|
||||
<!--Single file preview-->
|
||||
<div v-if="isSingleFile && !isEmpty">
|
||||
<FilePreviewDetail />
|
||||
|
||||
<TitlePreview
|
||||
class="mb-6"
|
||||
:icon="clipboard[0].data.type"
|
||||
:title="clipboard[0].data.attributes.name"
|
||||
:subtitle="clipboard[0].data.attributes.mimetype"
|
||||
/>
|
||||
<TitlePreview class="mb-6" :icon="clipboard[0].data.type" :title="clipboard[0].data.attributes.name" :subtitle="clipboard[0].data.attributes.mimetype" />
|
||||
|
||||
<!--Filesize-->
|
||||
<ListInfoItem
|
||||
v-if="singleFile.data.attributes.filesize"
|
||||
:title="$t('file_detail.size')"
|
||||
:content="singleFile.data.attributes.filesize"
|
||||
/>
|
||||
<!--Filesize-->
|
||||
<ListInfoItem v-if="singleFile.data.attributes.filesize" :title="$t('file_detail.size')" :content="singleFile.data.attributes.filesize" />
|
||||
|
||||
<!--Created At-->
|
||||
<ListInfoItem
|
||||
:title="$t('file_detail.created_at')"
|
||||
:content="singleFile.data.attributes.created_at"
|
||||
/>
|
||||
<!--Created At-->
|
||||
<ListInfoItem :title="$t('file_detail.created_at')" :content="singleFile.data.attributes.created_at" />
|
||||
|
||||
<!--Location-->
|
||||
<ListInfoItem
|
||||
v-if="$checkPermission(['master'])"
|
||||
:title="$t('file_detail.where')"
|
||||
>
|
||||
<div @click="$moveFileOrFolder(singleFile)" class="flex items-center cursor-pointer">
|
||||
<span class="inline-block font-bold text-sm">
|
||||
{{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $t('locations.home') }}
|
||||
</span>
|
||||
<!--Location-->
|
||||
<ListInfoItem v-if="$checkPermission(['master'])" :title="$t('file_detail.where')">
|
||||
<div @click="$moveFileOrFolder(singleFile)" class="flex cursor-pointer items-center">
|
||||
<span class="inline-block text-sm font-bold">
|
||||
{{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $t('locations.home') }}
|
||||
</span>
|
||||
<Edit2Icon size="10" class="ml-2" />
|
||||
</div>
|
||||
</ListInfoItem>
|
||||
|
||||
<!--Team-->
|
||||
<ListInfoItem
|
||||
v-if="singleFile.data.attributes.isTeamFolder"
|
||||
:title="$t('Shared with the Team')"
|
||||
>
|
||||
<div class="flex items-center cursor-pointer" @click="$updateTeamFolder(singleFile)">
|
||||
<!--Team-->
|
||||
<ListInfoItem v-if="singleFile.data.attributes.isTeamFolder" :title="$t('Shared with the Team')">
|
||||
<div class="flex cursor-pointer items-center" @click="$updateTeamFolder(singleFile)">
|
||||
<TeamMembersPreview :folder="singleFile" :avatar-size="32" />
|
||||
<Edit2Icon size="10" class="ml-2" />
|
||||
</div>
|
||||
</ListInfoItem>
|
||||
|
||||
<!--Shared-->
|
||||
<ListInfoItem
|
||||
v-if="$checkPermission('master') && singleFile.data.relationships.shared"
|
||||
:title="$t('file_detail.shared')"
|
||||
>
|
||||
<div @click="$shareFileOrFolder(singleFile)" class="flex items-center cursor-pointer mb-2">
|
||||
<span class="inline-block font-bold text-sm">
|
||||
{{ sharedInfo }}
|
||||
</span>
|
||||
<!--Shared-->
|
||||
<ListInfoItem v-if="$checkPermission('master') && singleFile.data.relationships.shared" :title="$t('file_detail.shared')">
|
||||
<div @click="$shareFileOrFolder(singleFile)" class="mb-2 flex cursor-pointer items-center">
|
||||
<span class="inline-block text-sm font-bold">
|
||||
{{ sharedInfo }}
|
||||
</span>
|
||||
<Edit2Icon size="10" class="ml-2" />
|
||||
</div>
|
||||
<div class="flex items-center w-full">
|
||||
<lock-icon v-if="isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer"/>
|
||||
<unlock-icon v-if="! isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer"/>
|
||||
<CopyShareLink :item="singleFile" size="small" class="w-full pl-2.5"/>
|
||||
<div class="flex w-full items-center">
|
||||
<lock-icon v-if="isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" />
|
||||
<unlock-icon v-if="!isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" />
|
||||
<CopyShareLink :item="singleFile" size="small" class="w-full pl-2.5" />
|
||||
</div>
|
||||
</ListInfoItem>
|
||||
|
||||
<!--Author-->
|
||||
<ListInfoItem
|
||||
v-if="canShowAuthor"
|
||||
:title="$t('Author')"
|
||||
>
|
||||
<div class="flex items-center mt-1.5">
|
||||
<MemberAvatar :size="32" :member="singleFile.data.relationships.owner" />
|
||||
<span class="ml-3 block font-bold font-sm">
|
||||
{{ singleFile.data.relationships.owner.data.attributes.name }}
|
||||
</span>
|
||||
<!--Author-->
|
||||
<ListInfoItem v-if="canShowAuthor" :title="$t('Author')">
|
||||
<div class="mt-1.5 flex items-center">
|
||||
<MemberAvatar :size="32" :member="singleFile.data.relationships.owner" />
|
||||
<span class="font-sm ml-3 block font-bold">
|
||||
{{ singleFile.data.relationships.owner.data.attributes.name }}
|
||||
</span>
|
||||
</div>
|
||||
</ListInfoItem>
|
||||
|
||||
<!--Metadata-->
|
||||
<ListInfoItem
|
||||
v-if="canShowMetaData"
|
||||
:title="$t('file_detail_meta.meta_data')"
|
||||
>
|
||||
<!--Metadata-->
|
||||
<ListInfoItem v-if="canShowMetaData" :title="$t('file_detail_meta.meta_data')">
|
||||
<ImageMetaData />
|
||||
</ListInfoItem>
|
||||
</div>
|
||||
@@ -110,64 +83,62 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FilePreviewDetail from "../Others/FilePreviewDetail";
|
||||
import CopyShareLink from "../Others/Forms/CopyShareLink";
|
||||
import {Edit2Icon, LockIcon, UnlockIcon, EyeOffIcon} from 'vue-feather-icons'
|
||||
import ImageMetaData from "./ImageMetaData";
|
||||
import TitlePreview from "./TitlePreview";
|
||||
import TeamMembersPreview from "../Teams/Components/TeamMembersPreview"
|
||||
import ListInfoItem from "../Others/ListInfoItem";
|
||||
import MemberAvatar from "./MemberAvatar"
|
||||
import {mapGetters} from 'vuex'
|
||||
import FilePreviewDetail from '../Others/FilePreviewDetail'
|
||||
import CopyShareLink from '../Others/Forms/CopyShareLink'
|
||||
import { Edit2Icon, LockIcon, UnlockIcon, EyeOffIcon } from 'vue-feather-icons'
|
||||
import ImageMetaData from './ImageMetaData'
|
||||
import TitlePreview from './TitlePreview'
|
||||
import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
|
||||
import ListInfoItem from '../Others/ListInfoItem'
|
||||
import MemberAvatar from './MemberAvatar'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'InfoSidebar',
|
||||
components: {
|
||||
TeamMembersPreview,
|
||||
FilePreviewDetail,
|
||||
ImageMetaData,
|
||||
CopyShareLink,
|
||||
MemberAvatar,
|
||||
TitlePreview,
|
||||
ListInfoItem,
|
||||
UnlockIcon,
|
||||
EyeOffIcon,
|
||||
Edit2Icon,
|
||||
LockIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'permissionOptions',
|
||||
'clipboard',
|
||||
'user',
|
||||
]),
|
||||
isEmpty() {
|
||||
return this.clipboard.length === 0
|
||||
},
|
||||
isSingleFile() {
|
||||
return this.clipboard.length === 1
|
||||
},
|
||||
singleFile() {
|
||||
return this.clipboard[0]
|
||||
},
|
||||
canShowMetaData() {
|
||||
return this.clipboard[0].data.attributes.metadata && this.clipboard[0].data.attributes.metadata.ExifImageWidth
|
||||
},
|
||||
isLocked() {
|
||||
return this.clipboard[0].data.relationships.shared.protected
|
||||
},
|
||||
sharedInfo() {
|
||||
let title = this.permissionOptions.find(option => {
|
||||
return option.value === this.clipboard[0].data.relationships.shared.permission
|
||||
})
|
||||
export default {
|
||||
name: 'InfoSidebar',
|
||||
components: {
|
||||
TeamMembersPreview,
|
||||
FilePreviewDetail,
|
||||
ImageMetaData,
|
||||
CopyShareLink,
|
||||
MemberAvatar,
|
||||
TitlePreview,
|
||||
ListInfoItem,
|
||||
UnlockIcon,
|
||||
EyeOffIcon,
|
||||
Edit2Icon,
|
||||
LockIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permissionOptions', 'clipboard', 'user']),
|
||||
isEmpty() {
|
||||
return this.clipboard.length === 0
|
||||
},
|
||||
isSingleFile() {
|
||||
return this.clipboard.length === 1
|
||||
},
|
||||
singleFile() {
|
||||
return this.clipboard[0]
|
||||
},
|
||||
canShowMetaData() {
|
||||
return this.clipboard[0].data.attributes.metadata && this.clipboard[0].data.attributes.metadata.ExifImageWidth
|
||||
},
|
||||
isLocked() {
|
||||
return this.clipboard[0].data.relationships.shared.protected
|
||||
},
|
||||
sharedInfo() {
|
||||
let title = this.permissionOptions.find((option) => {
|
||||
return option.value === this.clipboard[0].data.relationships.shared.permission
|
||||
})
|
||||
|
||||
return title ? this.$t(title.label) : this.$t('shared.can_download')
|
||||
},
|
||||
canShowAuthor() {
|
||||
return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders'])
|
||||
&& this.clipboard[0].data.type !== 'folder'
|
||||
&& this.user.data.id !== this.clipboard[0].data.relationships.owner.data.id
|
||||
},
|
||||
},
|
||||
}
|
||||
return title ? this.$t(title.label) : this.$t('shared.can_download')
|
||||
},
|
||||
canShowAuthor() {
|
||||
return (
|
||||
this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) &&
|
||||
this.clipboard[0].data.type !== 'folder' &&
|
||||
this.user.data.id !== this.clipboard[0].data.relationships.owner.data.id
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user