nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 16:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI enhancements

Browse Source
This commit is contained in:
Čarodej
2022-02-09 08:40:28 +01:00
parent e7d9fca9c2
commit a9e4daed35
11 changed files with 73 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
resources/js/components/FilesView/ItemGrid.vue
View File

@@ -1,9 +1,9 @@
<template>
<div
:class="{
'bg-light-background dark:bg-dark-foreground': isClicked,
'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover
}"
'bg-light-background dark:bg-dark-foreground': isClicked,
'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover,
}"
class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center sm:h-56 lg:h-60"
:draggable="canDrag"
spellcheck="false"
@@ -15,13 +15,24 @@
<!--Item thumbnail-->
<div class="relative mx-auto">
<!--Emoji Icon-->
<Emoji v-if="entry.data.attributes.emoji" :emoji="entry.data.attributes.emoji" class="mb-10 inline-block scale-150 transform text-5xl" />
<Emoji
v-if="entry.data.attributes.emoji"
:emoji="entry.data.attributes.emoji"
class="mb-10 inline-block scale-150 transform text-5xl"
/>
<!--Folder Icon-->
<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" class="mt-3 mb-5 inline-block scale-150 transform lg:mt-2 lg:mb-8" />
<FolderIcon
v-if="isFolder && !entry.data.attributes.emoji"
:item="entry"
class="mt-3 mb-5 inline-block scale-150 transform lg:mt-2 lg:mb-8"
/>
<!--File Icon-->
<div v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" class="relative mx-auto w-24">
<div
v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)"
class="relative mx-auto w-24"
>
<!--Member thumbnail for team folders-->
<MemberAvatar
v-if="user && canShowAuthor"
@@ -31,11 +42,17 @@
class="absolute right-2 -bottom-5 z-10 z-10 scale-75 transform lg:-bottom-7 lg:scale-100"
/>
<FileIconThumbnail :entry="entry" class="z-0 mt-5 mb-10 scale-125 transform lg:mb-12 lg:mt-6 lg:scale-150" />
<FileIconThumbnail
:entry="entry"
class="z-0 mt-5 mb-10 scale-125 transform lg:mb-12 lg:mt-6 lg:scale-150"
/>
</div>
<!--Image thumbnail-->
<div v-if="isImage && entry.data.attributes.thumbnail" class="relative mb-4 inline-block h-24 w-28 lg:h-28 lg:w-36">
<div
v-if="isImage && entry.data.attributes.thumbnail"
class="relative mb-4 inline-block h-24 w-28 lg:h-28 lg:w-36"
>
<!--Member thumbnail for team folders-->
<MemberAvatar
v-if="user && canShowAuthor"
@@ -45,7 +62,12 @@
class="absolute -right-3 -bottom-2.5 z-10 scale-75 transform lg:scale-100"
/>
<img class="h-full w-full rounded-lg object-cover shadow-lg" :src="entry.data.attributes.thumbnail.sm" :alt="entry.data.attributes.name" loading="lazy" />
<img
class="h-full w-full rounded-lg object-cover shadow-lg"
:src="entry.data.attributes.thumbnail.sm"
:alt="entry.data.attributes.name"
loading="lazy"
/>
</div>
</div>
@@ -53,8 +75,8 @@
<div class="text-center">
<!--Item Title-->
<b
class="tracking-tight inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 md:px-6"
:class="{'hover:underline': canEditName}"
class="inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 tracking-tight md:px-6"
:class="{ 'hover:underline': canEditName }"
ref="name"
@input="renameItem"
@keydown.delete.stop
@@ -72,20 +94,24 @@
</div>
<!--File & Image sub line-->
<small v-if="!isFolder" class="block text-xs text-gray-500">
{{ entry.data.attributes.filesize }}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
<small v-if="!isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
{{ entry.data.attributes.filesize }}
<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
</small>
<!--Folder sub line-->
<small v-if="isFolder" class="block text-xs text-gray-500">
<small v-if="isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
{{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems)
}}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
}}<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
</small>
</div>
</div>
<!-- Mobile item action button-->
<div v-if="mobileHandler && !isMultiSelectMode && $isMobile()" class="relative flex items-center justify-center py-0.5 px-2">
<div
v-if="mobileHandler && !isMultiSelectMode && $isMobile()"
class="relative flex items-center justify-center py-0.5 px-2"
>
<div @mouseup.stop="$openInDetailPanel(entry)" class="hidden p-2.5 sm:block">
<eye-icon size="18" class="vue-feather inline-block opacity-30" />
</div>
@@ -163,14 +189,20 @@ export default {
)
},
folderItems() {
return this.entry.data.attributes.deleted_at ? this.entry.data.attributes.trashed_items : this.entry.data.attributes.items
return this.entry.data.attributes.deleted_at
? this.entry.data.attributes.trashed_items
: this.entry.data.attributes.items
},
canShowAuthor() {
return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) && !this.isFolder && this.user.data.id !== this.entry.data.relationships.owner.data.id
return (
this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) &&
!this.isFolder &&
this.user.data.id !== this.entry.data.relationships.owner.data.id
)
},
canShowLinkIcon() {
return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile'])
},
canShowLinkIcon() {
return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile'])
},
canDrag() {
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
},