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

v1.5-beta.2

Browse Source
This commit is contained in:
carodej
2020-05-19 11:27:47 +02:00
parent 67b9416f64
commit 5df0fa93b3
11 changed files with 113 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/Http/Controllers/FileBrowser/BrowseController.php
View File

@@ -28,17 +28,19 @@ class BrowseController extends Controller
// Get folders and files // Get folders and files
$folders_trashed = FileManagerFolder::onlyTrashed() $folders_trashed = FileManagerFolder::onlyTrashed()
->with(['trashed_folders']) ->with(['trashed_folders', 'parent'])
->where('user_id', $user_id) ->where('user_id', $user_id)
->get(['parent_id', 'unique_id', 'name']); ->get(['parent_id', 'unique_id', 'name']);
$folders = FileManagerFolder::onlyTrashed() $folders = FileManagerFolder::onlyTrashed()
->with(['parent'])
->where('user_id', $user_id) ->where('user_id', $user_id)
->whereIn('unique_id', filter_folders_ids($folders_trashed)) ->whereIn('unique_id', filter_folders_ids($folders_trashed))
->get(); ->get();
// Get files trashed // Get files trashed
$files_trashed = FileManagerFile::onlyTrashed() $files_trashed = FileManagerFile::onlyTrashed()
->with(['parent'])
->where('user_id', $user_id) ->where('user_id', $user_id)
->whereNotIn('folder_id', array_values(array_unique(recursiveFind($folders_trashed->toArray(), 'unique_id')))) ->whereNotIn('folder_id', array_values(array_unique(recursiveFind($folders_trashed->toArray(), 'unique_id'))))
->get(); ->get();
@@ -104,8 +106,8 @@ class BrowseController extends Controller
public function participant_uploads() { public function participant_uploads() {
// Get User // Get User
$uploads = FileManagerFile::where('user_id', Auth::id()) $uploads = FileManagerFile::with(['parent'])->where('user_id', Auth::id())
->whereUserScope('editor')->get(); ->whereUserScope('editor')->orderBy('created_at', 'DESC')->get();
return $uploads; return $uploads;
} }
@@ -127,14 +129,14 @@ class BrowseController extends Controller
// Get folders and files // Get folders and files
$folders = FileManagerFolder::onlyTrashed() $folders = FileManagerFolder::onlyTrashed()
->where('user_id', $user_id)
->with('parent') ->with('parent')
->where('user_id', $user_id)
->where('parent_id', $unique_id) ->where('parent_id', $unique_id)
->get(); ->get();
$files = FileManagerFile::onlyTrashed() $files = FileManagerFile::onlyTrashed()
->where('user_id', $user_id)
->with('parent') ->with('parent')
->where('user_id', $user_id)
->where('folder_id', $unique_id) ->where('folder_id', $unique_id)
->get(); ->get();
@@ -151,6 +153,7 @@ class BrowseController extends Controller
$files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected']) $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected'])
->where('user_id', $user_id) ->where('user_id', $user_id)
->where('folder_id', $unique_id) ->where('folder_id', $unique_id)
->orderBy('created_at', 'DESC')
->get(); ->get();
// Collect folders and files to single array // Collect folders and files to single array

2
app/User.php
View File

@@ -145,7 +145,7 @@ class User extends Authenticatable
*/ */
public function latest_uploads() { public function latest_uploads() {
return $this->hasMany(FileManagerFile::class)->orderBy('created_at', 'DESC')->take(40); return $this->hasMany(FileManagerFile::class)->with(['parent'])->orderBy('created_at', 'DESC')->take(40);
} }
/** /**

2
public/js/main.js vendored
View File

File diff suppressed because one or more lines are too long

110
resources/js/components/FilesView/ContextMenu.vue
View File

@@ -17,14 +17,6 @@
{{ $t('context_menu.restore') }} {{ $t('context_menu.restore') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="$store.dispatch('emptyTrash')">
<div class="icon">
<trash-icon size="17"></trash-icon>
</div>
<div class="text-label">
{{ $t('context_menu.empty_trash') }}
</div>
</li>
<li class="menu-option" @click="deleteItem" v-if="item"> <li class="menu-option" @click="deleteItem" v-if="item">
<div class="icon"> <div class="icon">
<trash-2-icon size="17"></trash-2-icon> <trash-2-icon size="17"></trash-2-icon>
@@ -33,9 +25,17 @@
{{ $t('context_menu.delete') }} {{ $t('context_menu.delete') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="$store.dispatch('emptyTrash')">
<div class="icon">
<trash-icon size="17"></trash-icon>
</div>
<div class="text-label">
{{ $t('context_menu.empty_trash') }}
</div>
</li>
</ul> </ul>
<ul class="menu-option-group"> <ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="item"> <li class="menu-option" @click="ItemDetail">
<div class="icon"> <div class="icon">
<eye-icon size="17"></eye-icon> <eye-icon size="17"></eye-icon>
</div> </div>
@@ -43,7 +43,7 @@
{{ $t('context_menu.detail') }} {{ $t('context_menu.detail') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item"> <li class="menu-option" @click="downloadItem" v-if="! isFolder">
<div class="icon"> <div class="icon">
<download-cloud-icon size="17"></download-cloud-icon> <download-cloud-icon size="17"></download-cloud-icon>
</div> </div>
@@ -56,8 +56,8 @@
<!--ContextMenu for Base location with MASTER permission--> <!--ContextMenu for Base location with MASTER permission-->
<div v-if="$isThisLocation(['shared']) && $checkPermission('master')" id="menu-list" class="menu-options"> <div v-if="$isThisLocation(['shared']) && $checkPermission('master')" id="menu-list" class="menu-options">
<ul class="menu-option-group"> <ul class="menu-option-group" v-if="item && isFolder">
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder"> <li class="menu-option" @click="addToFavourites">
<div class="icon"> <div class="icon">
<star-icon size="17"></star-icon> <star-icon size="17"></star-icon>
</div> </div>
@@ -66,16 +66,8 @@
</div> </div>
</li> </li>
</ul> </ul>
<ul class="menu-option-group"> <ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="deleteItem" v-if="item"> <li class="menu-option" @click="shareItem">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t('context_menu.delete') }}
</div>
</li>
<li class="menu-option" @click="shareItem" v-if="item">
<div class="icon"> <div class="icon">
<link-icon size="17"></link-icon> <link-icon size="17"></link-icon>
</div> </div>
@@ -83,8 +75,16 @@
{{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }} {{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="deleteItem">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t('context_menu.delete') }}
</div>
</li>
</ul> </ul>
<ul class="menu-option-group"> <ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="item"> <li class="menu-option" @click="ItemDetail" v-if="item">
<div class="icon"> <div class="icon">
<eye-icon size="17"></eye-icon> <eye-icon size="17"></eye-icon>
@@ -93,7 +93,7 @@
{{ $t('context_menu.detail') }} {{ $t('context_menu.detail') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item"> <li class="menu-option" @click="downloadItem" v-if="! isFolder">
<div class="icon"> <div class="icon">
<download-cloud-icon size="17"></download-cloud-icon> <download-cloud-icon size="17"></download-cloud-icon>
</div> </div>
@@ -125,8 +125,8 @@
</div> </div>
</li> </li>
</ul> </ul>
<ul class="menu-option-group"> <ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="moveItem" v-if="item"> <li class="menu-option" @click="moveItem">
<div class="icon"> <div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon> <corner-down-right-icon size="17"></corner-down-right-icon>
</div> </div>
@@ -134,7 +134,7 @@
{{ $t('context_menu.move') }} {{ $t('context_menu.move') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="shareItem" v-if="item"> <li class="menu-option" @click="shareItem">
<div class="icon"> <div class="icon">
<link-icon size="17"></link-icon> <link-icon size="17"></link-icon>
</div> </div>
@@ -142,7 +142,7 @@
{{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }} {{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="deleteItem" v-if="item"> <li class="menu-option" @click="deleteItem">
<div class="icon"> <div class="icon">
<trash-2-icon size="17"></trash-2-icon> <trash-2-icon size="17"></trash-2-icon>
</div> </div>
@@ -151,8 +151,8 @@
</div> </div>
</li> </li>
</ul> </ul>
<ul class="menu-option-group"> <ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="item"> <li class="menu-option" @click="ItemDetail">
<div class="icon"> <div class="icon">
<eye-icon size="17"></eye-icon> <eye-icon size="17"></eye-icon>
</div> </div>
@@ -160,7 +160,7 @@
{{ $t('context_menu.detail') }} {{ $t('context_menu.detail') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item"> <li class="menu-option" @click="downloadItem" v-if="! isFolder">
<div class="icon"> <div class="icon">
<download-cloud-icon size="17"></download-cloud-icon> <download-cloud-icon size="17"></download-cloud-icon>
</div> </div>
@@ -183,8 +183,8 @@
</div> </div>
</li> </li>
</ul> </ul>
<ul class="menu-option-group" v-if="item && isFolder"> <ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="moveItem" v-if="item"> <li class="menu-option" @click="moveItem">
<div class="icon"> <div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon> <corner-down-right-icon size="17"></corner-down-right-icon>
</div> </div>
@@ -192,7 +192,7 @@
{{ $t('context_menu.move') }} {{ $t('context_menu.move') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="deleteItem" v-if="item"> <li class="menu-option" @click="deleteItem">
<div class="icon"> <div class="icon">
<trash-2-icon size="17"></trash-2-icon> <trash-2-icon size="17"></trash-2-icon>
</div> </div>
@@ -201,8 +201,8 @@
</div> </div>
</li> </li>
</ul> </ul>
<ul class="menu-option-group" v-if="item && isFolder"> <ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="item"> <li class="menu-option" @click="ItemDetail">
<div class="icon"> <div class="icon">
<eye-icon size="17"></eye-icon> <eye-icon size="17"></eye-icon>
</div> </div>
@@ -210,7 +210,7 @@
{{ $t('context_menu.detail') }} {{ $t('context_menu.detail') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item"> <li class="menu-option" @click="downloadItem" v-if="! isFolder">
<div class="icon"> <div class="icon">
<download-cloud-icon size="17"></download-cloud-icon> <download-cloud-icon size="17"></download-cloud-icon>
</div> </div>
@@ -223,22 +223,24 @@
<!--ContextMenu for Base location with VISITOR permission--> <!--ContextMenu for Base location with VISITOR permission-->
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options"> <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options">
<li class="menu-option" @click="ItemDetail" v-if="item"> <ul class="menu-option-group" v-if="item">
<div class="icon"> <li class="menu-option" @click="ItemDetail">
<eye-icon size="17"></eye-icon> <div class="icon">
</div> <eye-icon size="17"></eye-icon>
<div class="text-label"> </div>
{{ $t('context_menu.detail') }} <div class="text-label">
</div> {{ $t('context_menu.detail') }}
</li> </div>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item"> </li>
<div class="icon"> <li class="menu-option" @click="downloadItem" v-if="! isFolder">
<download-cloud-icon size="17"></download-cloud-icon> <div class="icon">
</div> <download-cloud-icon size="17"></download-cloud-icon>
<div class="text-label"> </div>
{{ $t('context_menu.download') }} <div class="text-label">
</div> {{ $t('context_menu.download') }}
</li> </div>
</li>
</ul>
</div> </div>
</div> </div>
</template> </template>

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

@@ -314,7 +314,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
position: absolute; position: fixed;
overflow-y: auto; overflow-y: auto;
.file-list { .file-list {

1
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -374,6 +374,7 @@
left: 0; left: 0;
right: 0; right: 0;
color: $theme; color: $theme;
@include font-size(12);
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
max-width: 65px; max-width: 65px;

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

@@ -101,7 +101,7 @@
</div> </div>
<!--Mobile for Base location--> <!--Mobile for Base location-->
<div v-if="$isThisLocation(['base', 'latest']) && $checkPermission('master')" class="menu-options"> <div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')" class="menu-options">
<ul class="menu-option-group" v-if="fileInfoDetail && isFolder"> <ul class="menu-option-group" v-if="fileInfoDetail && isFolder">
<li class="menu-option" @click="addToFavourites"> <li class="menu-option" @click="addToFavourites">
<div class="icon"> <div class="icon">

32
resources/js/components/Others/ThumbnailItem.vue
View File

@@ -24,7 +24,7 @@
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<div v-if="info === 'location'"> <div v-if="info === 'location'">
<span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ currentFolder.name }}</span> <span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ itemLocation }}</span>
</div> </div>
<div v-if="info === 'metadata'"> <div v-if="info === 'metadata'">
@@ -56,6 +56,9 @@
isImage() { isImage() {
return this.item.type === 'image' return this.item.type === 'image'
}, },
itemLocation() {
return this.item.parent ? this.item.parent.name : this.$t('locations.home')
}
}, },
} }
</script> </script>
@@ -78,15 +81,9 @@
white-space: nowrap; white-space: nowrap;
.item-size, .item-size,
.item-length { .item-length,
@include font-size(12);
font-weight: 400;
color: $text-muted;
display: block;
}
.subtitle { .subtitle {
@include font-size(11); @include font-size(12);
font-weight: 400; font-weight: 400;
color: $text-muted; color: $text-muted;
display: block; display: block;
@@ -130,7 +127,7 @@
.file-icon-text { .file-icon-text {
line-height: 1; line-height: 1;
top: 40%; top: 40%;
@include font-size(9); @include font-size(8);
margin: 0 auto; margin: 0 auto;
position: absolute; position: absolute;
text-align: center; text-align: center;
@@ -171,13 +168,22 @@
.icon-item .file-icon { .icon-item .file-icon {
path { path {
fill: $dark_mode_background; fill: $dark_mode_foreground;
stroke: #2F3C54; stroke: #2F3C54;
} }
} }
.item-name .name { .item-name {
color: $dark_mode_text_primary;
.name {
color: $dark_mode_text_primary;
}
.item-size,
.item-length,
.subtitle {
color: $dark_mode_text_secondary;
}
} }
} }
} }

2
resources/js/views/FilePages/Files.vue
View File

@@ -51,7 +51,7 @@
<a @click.stop="openFolder(folder)" <a @click.stop="openFolder(folder)"
class="menu-list-item" class="menu-list-item"
:class="{'is-current': currentFolder.unique_id === folder.unique_id}" :class="{'is-current': folder && currentFolder.unique_id === folder.unique_id}"
v-for="folder in app.favourites" v-for="folder in app.favourites"
:key="folder.unique_id"> :key="folder.unique_id">
<div> <div>

39
resources/js/views/User/Storage.vue
View File

@@ -1,19 +1,23 @@
<template> <template>
<div id="user-settings" v-if="storageDetails && storage"> <div id="single-page">
<div id="page-content" v-if="! isLoading">
<MobileHeader/>
<PageHeader :title="$router.currentRoute.meta.title"/>
<MobileHeader/> <div class="content-page">
<PageHeader :title="$router.currentRoute.meta.title"/> <SectionTitle>{{ $t('storage.sec_capacity') }}</SectionTitle>
<StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.used})" :percentage="storage.percentage" :used="$t('storage.total_capacity', {capacity: storage.capacity})"/>
<div class="content-page"> <SectionTitle>{{ $t('storage.sec_details') }}</SectionTitle>
<SectionTitle>{{ $t('storage.sec_capacity') }}</SectionTitle> <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storageDetails.images.percentage" :used="storageDetails.images.used" />
<StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.used})" :percentage="storage.percentage" :used="$t('storage.total_capacity', {capacity: storage.capacity})"/> <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storageDetails.videos.percentage" :used="storageDetails.videos.used" />
<StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storageDetails.audios.percentage" :used="storageDetails.audios.used" />
<SectionTitle>{{ $t('storage.sec_details') }}</SectionTitle> <StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storageDetails.documents.percentage" :used="storageDetails.documents.used" />
<StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storageDetails.images.percentage" :used="storageDetails.images.used" /> <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storageDetails.others.percentage" :used="storageDetails.others.used" />
<StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storageDetails.videos.percentage" :used="storageDetails.videos.used" /> </div>
<StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storageDetails.audios.percentage" :used="storageDetails.audios.used" /> </div>
<StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storageDetails.documents.percentage" :used="storageDetails.documents.used" /> <div id="loader" v-if="isLoading">
<StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storageDetails.others.percentage" :used="storageDetails.others.used" /> <Spinner></Spinner>
</div> </div>
</div> </div>
</template> </template>
@@ -23,7 +27,7 @@
import MobileHeader from '@/components/Mobile/MobileHeader' import MobileHeader from '@/components/Mobile/MobileHeader'
import SectionTitle from '@/components/Others/SectionTitle' import SectionTitle from '@/components/Others/SectionTitle'
import PageHeader from '@/components/Others/PageHeader' import PageHeader from '@/components/Others/PageHeader'
import {mapGetters} from 'vuex' import Spinner from '@/components/FilesView/Spinner'
import axios from 'axios' import axios from 'axios'
export default { export default {
@@ -33,9 +37,11 @@
SectionTitle, SectionTitle,
MobileHeader, MobileHeader,
PageHeader, PageHeader,
Spinner,
}, },
data() { data() {
return { return {
isLoading: true,
storage: undefined, storage: undefined,
storageDetails: undefined storageDetails: undefined
} }
@@ -45,6 +51,7 @@
.then(response => { .then(response => {
this.storage = response.data.data.attributes this.storage = response.data.data.attributes
this.storageDetails = response.data.data.relationships this.storageDetails = response.data.data.relationships
this.isLoading = false
}) })
} }
} }
@@ -54,7 +61,7 @@
@import '@assets/vue-file-manager/_variables'; @import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins'; @import '@assets/vue-file-manager/_mixins';
#user-settings { #single-page {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -72,7 +79,7 @@
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
#user-settings { #single-page {
.content-page { .content-page {
padding-left: 15px; padding-left: 15px;

2
resources/sass/vue-file-manager/_variables.scss vendored
View File

@@ -25,7 +25,7 @@ $dark_mode_vignette: rgba(0, 0, 0, 0.3);
$dark_mode_background: #111314; $dark_mode_background: #111314;
$dark_mode_foreground: #1e2024; $dark_mode_foreground: #1e2024;
$dark_mode_text_primary: #bec6cf; $dark_mode_text_primary: #bec6cf;
$dark_mode_text_secondary: #79848f; $dark_mode_text_secondary: #7d858c;
$dark_mode_vignette: rgba(22, 23, 27, 0.70); $dark_mode_vignette: rgba(22, 23, 27, 0.70);
$dark_mode_popup_shadow: 0 10px 30px rgba(0, 0, 0, .3); $dark_mode_popup_shadow: 0 10px 30px rgba(0, 0, 0, .3);
$dark_mode_border_color: rgba(255, 255, 255, 0.02); $dark_mode_border_color: rgba(255, 255, 255, 0.02);