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

grid enhancement

Browse Source
This commit is contained in:
Čarodej
2021-10-28 15:23:52 +02:00
parent b53d9fb93a
commit ceb1e5c9dd
6 changed files with 59 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
public/mix-manifest.json
View File

@@ -8,7 +8,7 @@
"/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=1d731f1c4a9daecb2a99",
"/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js": "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js?id=5841d65172536a8a9bdc",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js?id=d7ad2fc844fa24b1fc50",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=e7406b0393c3121649d9",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=9b86c090cfc891b32f70",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=a935f1a48a77c1ab8198",
"/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=90270d0c5aeb5c50dacf",
"/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=6346308235d17373ef7a",
@@ -40,7 +40,7 @@
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=df7397408805a1cc93fa",
"/chunks/files.js": "/chunks/files.js?id=b5a3adaa6057e4cdba19",
"/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js?id=d0a2e05e3e243b2e2c4e",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=a48299a8f27c1c4bd3d2",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=b1be97ce872ed90daff9",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js?id=388926106039c69c8cf8",
"/chunks/files~chunks/shared-with-me~chunks/shared/files~chunks/team-folders.js": "/chunks/files~chunks/shared-with-me~chunks/shared/files~chunks/team-folders.js?id=4b8864f9265f55f61cf7",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=533962a06f477f6e046b",
@@ -60,7 +60,7 @@
"/chunks/plans.js": "/chunks/plans.js?id=6fca685daa45f22e4c8f",
"/chunks/platform.js": "/chunks/platform.js?id=c3c68625fbd7ed182f4a",
"/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=263bfcc367957df73aae",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=81c9f4fb4337832b3e87",
"/chunks/profile.js": "/chunks/profile.js?id=0638997b77c6f1246062",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=58edfb3a35062e1ba4e0",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=dd562240fff9f6e2260a",
@@ -634,5 +634,38 @@
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.dd3e9c8e7d6f85272686.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.dd3e9c8e7d6f85272686.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.bb5b5ae22c458231193e.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.bb5b5ae22c458231193e.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.3484e2ea3a8e39869697.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.3484e2ea3a8e39869697.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.a4cfd5c1582f1682898d.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.a4cfd5c1582f1682898d.hot-update.js"
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.a4cfd5c1582f1682898d.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.a4cfd5c1582f1682898d.hot-update.js",
"/chunks/platform~chunks/shared.7a9d1083d69db658e2ce.hot-update.js": "/chunks/platform~chunks/shared.7a9d1083d69db658e2ce.hot-update.js",
"/chunks/platform~chunks/shared.ec3921d26ac4071e0009.hot-update.js": "/chunks/platform~chunks/shared.ec3921d26ac4071e0009.hot-update.js",
"/chunks/platform~chunks/shared.e7122f6a6484df430265.hot-update.js": "/chunks/platform~chunks/shared.e7122f6a6484df430265.hot-update.js",
"/chunks/platform~chunks/shared.3750ac9fa9c41447031b.hot-update.js": "/chunks/platform~chunks/shared.3750ac9fa9c41447031b.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.1382ebc7e29362feecdf.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.1382ebc7e29362feecdf.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.19ff8c1fee219d671a6e.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.19ff8c1fee219d671a6e.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.576ea674478d6e509502.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.576ea674478d6e509502.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.ff992f58bd763cb6e17f.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.ff992f58bd763cb6e17f.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.fa498019a4423f6d1300.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.fa498019a4423f6d1300.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.30996eec82baad9dd20a.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.30996eec82baad9dd20a.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.035de775b4603c58d42c.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.035de775b4603c58d42c.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.7b94e9e70ba019bf5fb6.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.7b94e9e70ba019bf5fb6.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.b389cf93460dc7ad2daf.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.b389cf93460dc7ad2daf.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.ff2b8dc94d76278bf9a8.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.ff2b8dc94d76278bf9a8.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.15811d653adc83c6b0d5.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.15811d653adc83c6b0d5.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.f48940b5f231674ef75e.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.f48940b5f231674ef75e.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.c8fa0e874c9bb484589e.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.c8fa0e874c9bb484589e.hot-update.js",
"/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.f0e58db38f1346aa8823.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.f0e58db38f1346aa8823.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.6879c8e5036d052e6a99.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.6879c8e5036d052e6a99.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.17786cf397f884be14f9.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.17786cf397f884be14f9.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.4313280d14ac61a2601b.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.4313280d14ac61a2601b.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.0c8d9aba5ca675d2b168.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.0c8d9aba5ca675d2b168.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.0698e1e4235411a04022.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.0698e1e4235411a04022.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.97abc7ec58ac7efdb77f.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.97abc7ec58ac7efdb77f.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.0a06a9e817bb93f1aa31.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.0a06a9e817bb93f1aa31.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.d3a24d60701d246544f0.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.d3a24d60701d246544f0.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.ed5026bf30c823c76a2e.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.ed5026bf30c823c76a2e.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.516b2dc7e6e5e0a2a423.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.516b2dc7e6e5e0a2a423.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.909259fc3d9608c40b35.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.909259fc3d9608c40b35.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.50201c87c0ec9db92ce7.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.50201c87c0ec9db92ce7.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.8209d7190bded8c9eec4.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.8209d7190bded8c9eec4.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.c77bbded474b20b0a1cc.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.c77bbded474b20b0a1cc.hot-update.js",
"/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.86dd4d3af79ab751ca42.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.86dd4d3af79ab751ca42.hot-update.js"
}

17
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -1,6 +1,10 @@
<template>
<div
:class="{'user-dropping-file': isDragging, 'grid content-start xl:grid-cols-6 xl:gap-4 lg:grid-cols-4 lg:gap-2 grid-cols-3': itemViewType === 'grid'}"
:class="{
'user-dropping-file': isDragging,
'grid-view': itemViewType === 'grid' && ! isVisibleSidebar,
'grid-view-sidebar': itemViewType === 'grid' && isVisibleSidebar
}"
class="md:w-full md:overflow-y-auto md:h-full md:px-0 px-4"
@drop.stop.prevent="uploadDroppedItems($event)"
@keydown.delete="deleteItems"
@@ -34,6 +38,7 @@
},
computed: {
...mapGetters([
'isVisibleSidebar',
'currentFolder',
'itemViewType',
'clipboard',
@@ -133,3 +138,13 @@
}
}
</script>
<style>
.grid-view {
@apply grid content-start xl:grid-cols-6 xl:gap-4 lg:grid-cols-4 lg:gap-2 grid-cols-3
}
.grid-view-sidebar {
@apply grid content-start 2xl:grid-cols-5 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-3 xl:gap-4 lg:gap-2
}
</style>

2
resources/js/components/FilesView/FileIconThumbnail.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex items-center justify-center pr-2">
<div class="flex items-center justify-center">
<span class="text-theme dark-text-theme lg:text-xs text-tiny font-semibold absolute z-10 inline-block mx-auto mt-1 w-7 overflow-ellipsis overflow-hidden text-center">
{{ entry.data.attributes.mimetype }}
</span>

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

@@ -17,7 +17,7 @@
<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" class="inline-block transform scale-150 lg:mt-2 lg:mb-8 mt-3 mb-5" />
<!--File Icon-->
<div v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" class="relative">
<div v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" class="relative w-24 mx-auto">
<!--Member thumbnail for team folders-->
<MemberAvatar
@@ -25,7 +25,7 @@
:size="38"
:is-border="true"
:member="entry.data.relationships.user"
class="absolute lg:right-14 lg:-bottom-7 right-6 -bottom-5 z-10 transform lg:scale-100 scale-75"
class="absolute lg:-bottom-7 right-2 -bottom-5 z-10 transform lg:scale-100 scale-75 z-10"
/>
<FileIconThumbnail :entry="entry" class="transform lg:scale-150 scale-125 lg:mb-12 lg:mt-6 mt-5 mb-10 z-0" />
@@ -40,7 +40,7 @@
:size="38"
:is-border="true"
:member="entry.data.relationships.user"
class="absolute -right-3 -bottom-2.5 transform lg:scale-100 scale-75"
class="absolute -right-3 -bottom-2.5 transform lg:scale-100 scale-75 z-10"
/>
<img class="object-cover w-full h-full rounded-lg shadow-lg" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />

2
resources/js/components/FilesView/ItemList.vue
View File

@@ -20,7 +20,7 @@
<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" />
<!--File Icon-->
<FileIconThumbnail v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" />
<FileIconThumbnail v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" />
<!--Image thumbnail-->
<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded ml-0.5" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />

3
resources/js/components/FilesView/MobileToolbar.vue
View File

@@ -6,7 +6,7 @@
<chevron-left-icon size="17" class="icon-back" :class="{'is-visible': isLoadedFolder }" />
<!--Folder Title-->
<div class="directory-name">
<div class="directory-name lg:text-base text-sm">
{{ $getCurrentLocationName() }}
</div>
</div>
@@ -88,7 +88,6 @@
line-height: 1;
width: 100%;
vertical-align: middle;
@include font-size(16);
color: $text;
font-weight: 700;
max-width: 220px;