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

- download multiple files in private folder

Browse Source 
- sorting context menu changes
- download icon active only if files was selected
This commit is contained in:
Peter Papp
2020-12-15 18:05:08 +01:00
parent 372b3aa407
commit 7b27fa70d8
8 changed files with 610 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/Http/Controllers/FileFunctions/EditItemsController.php
View File

@@ -204,9 +204,8 @@ class EditItemsController extends Controller
// Delete item // Delete item
Editor::delete_item($file, $unique_id); Editor::delete_item($file, $unique_id);
// Return response
} }
return response(null, 204); return response(null, 204);
} }
@@ -229,7 +228,6 @@ class EditItemsController extends Controller
return Demo::response_204(); return Demo::response_204();
} }
// Check shared permission // Check shared permission
if (!is_editor($shared)) abort(403); if (!is_editor($shared)) abort(403);
@@ -325,6 +323,25 @@ class EditItemsController extends Controller
*/ */
public function user_zip_multiple_files(Request $request) public function user_zip_multiple_files(Request $request)
{ {
// Check permission to upload for authenticated editor
if ($request->user()->tokenCan('editor')) {
// check if shared_token cookie exist
if (!$request->hasCookie('shared_token')) abort('401');
// Get shared token
$shared = get_shared($request->cookie('shared_token'));
$file_parent_folders = FileManagerFile::whereUserId(Auth::id())
->whereIn('unique_id', $request->input('files'))
->get()
->pluck('folder_id')
->toArray();
// Check access to requested directory
Guardian::check_item_access($file_parent_folders, $shared);
}
// Get requested files // Get requested files
$files = FileManagerFile::whereUserId(Auth::id()) $files = FileManagerFile::whereUserId(Auth::id())
->whereIn('unique_id', $request->input('files')) ->whereIn('unique_id', $request->input('files'))

174
public/mix-manifest.json
View File

@@ -1,65 +1,113 @@
{ {
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=40528aefcf8239019313", "/js/main.js": "/js/main.js",
"/js/main.js": "/js/main.js?id=ec7e3f4ffa00fa8abfa3", "/css/app.css": "/css/app.css",
"/css/app.css": "/css/app.css?id=8f6d5dcb7110a726e142", "/chunks/admin.js": "/chunks/admin.js?id=5807ec412746448047f9",
"/chunks/admin.js": "/chunks/admin.js?id=5c1ef019716afc67775b", "/chunks/admin-account.js": "/chunks/admin-account.js?id=d820e99a25f40cc97570",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=16cd99641f6c1cb6788a", "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js?id=1ad1b7b56512338223eb",
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=3043f5ab051b9cac9ab7", "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js?id=6c02fe91a2e167b63a98",
"/chunks/app-billings.js": "/chunks/app-billings.js?id=b4d28bec8835085f885f", "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js?id=312acc0ff7daa010eea5",
"/chunks/app-email.js": "/chunks/app-email.js?id=24fc0cc212e9b893bb09", "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=03e587de7dd10fba3ead",
"/chunks/app-index.js": "/chunks/app-index.js?id=c1c8101bd90f630ac6bf", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=fd3c7242b5c765b469e4",
"/chunks/app-others.js": "/chunks/app-others.js?id=c73372ee9f62d01c74d1", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=ebb1b6ed1df237b56cd9",
"/chunks/app-payments.js": "/chunks/app-payments.js?id=83608af3a7e34ac062d4", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=9df028786df5d3279ab9",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=466c6bfc5ab7b883e443", "/chunks/app-billings.js": "/chunks/app-billings.js?id=2b87899e656ed382d260",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=652f0ab8a6423dd24906", "/chunks/app-email.js": "/chunks/app-email.js?id=2e5a1b525d335367cfc1",
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=b955f8dcd6890a1b45ca", "/chunks/app-index.js": "/chunks/app-index.js?id=05747ca2c86a1daea9cd",
"/chunks/contact-us.js": "/chunks/contact-us.js?id=a5150dcf81c8e1ab23a4", "/chunks/app-others.js": "/chunks/app-others.js?id=55e1ec30bdca87c1adef",
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=58c543c4f92b5ca9a284", "/chunks/app-payments.js": "/chunks/app-payments.js?id=796c7c2cfb9c6c39c8a7",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=6dfd3a558e6c5d943dbc", "/chunks/app-settings.js": "/chunks/app-settings.js?id=b85ce942737e25c37b8a",
"/chunks/database.js": "/chunks/database.js?id=dbb3c73c995c7ee55015", "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=99eb5ed6af46738c97e0",
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=08a0c2de8f93e0222600", "/chunks/app-setup.js": "/chunks/app-setup.js?id=78bbf0b2065cf270dbe6",
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=3b6455db55e44d265c86", "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=573e29a00589cb5d3489",
"/chunks/files.js": "/chunks/files.js?id=3e7ab3ab0bc78accc9df", "/chunks/contact-us.js": "/chunks/contact-us.js?id=7ded3c3e9668eea6c15c",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=7ff98232e7b4cc5d2c2a", "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js?id=96ac1ede73f3fc9afa37",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=f8a13783dc40aad197b5", "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=278eef02eace89698f20",
"/chunks/invoices.js": "/chunks/invoices.js?id=2bf3d16c86c9a512d7cd", "/chunks/dashboard.js": "/chunks/dashboard.js?id=62896779642616a310ca",
"/chunks/landing-page.js": "/chunks/landing-page.js?id=00d49e4ffb54dc5abb5b", "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~f48e9e59.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~f48e9e59.js?id=ec096692af2fbfca8f8d",
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=53d4f9c58bdac1e568c7", "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=d7795f20187163939276",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=e3dbad6c75184042d2e6", "/chunks/database.js": "/chunks/database.js?id=c7aa7caa9126b1ecdffa",
"/chunks/pages.js": "/chunks/pages.js?id=178f763a036b4ee9a366", "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1d8ee4bfbcde69c97021",
"/chunks/plan.js": "/chunks/plan.js?id=7ea9ddff467ab749441a", "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=86093752b39920044fda",
"/chunks/plan-create.js": "/chunks/plan-create.js?id=b40c3e16a94a55fc9397", "/chunks/files.js": "/chunks/files.js?id=9e2bd0d46dd8654c2cd6",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=61c8edfbdad6904435ed", "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=e285e842f58178d681c4",
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=2be8a0aaf9e6968e158e", "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=7713560e6033e00622f0",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=60b05b4391ec24649eaf", "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=825fdc29b64056380220",
"/chunks/plans.js": "/chunks/plans.js?id=dccd289b5aeda9003aca", "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=06fc72f0d9a057bb8f18",
"/chunks/profile.js": "/chunks/profile.js?id=91714cf4f6ca568515d6", "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=8a5dfc3d2d07db1102db",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=82446c77da50e52cf1bd", "/chunks/invoices.js": "/chunks/invoices.js?id=2352574bc22e5e3f7dac",
"/chunks/settings.js": "/chunks/settings.js?id=0cfc9ad9196a31d29811", "/chunks/landing-page.js": "/chunks/landing-page.js?id=dabf50b10edb2ae2f388",
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=72bc6c0599e6d6095ddd", "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=6666b81edc5ff6f60e82",
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=daad8173619d5d047c0d", "/chunks/page-edit.js": "/chunks/page-edit.js?id=f7e24a5841604313332a",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=9424e701a221958e50e8", "/chunks/pages.js": "/chunks/pages.js?id=7ec1c496031ff8478b51",
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=66ad9cb43ef678407e3e", "/chunks/plan.js": "/chunks/plan.js?id=cc041fb9c2cb9ad8f0ff",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=6af5afc7c03b54e80984", "/chunks/plan-create.js": "/chunks/plan-create.js?id=a66d8ae3a6edd08b755b",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=1be617484ada2cd04bd7", "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=0732885b6e0839afe66e",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855", "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=445ca1affcefaf37cbfc",
"/chunks/shared-files.js": "/chunks/shared-files.js?id=9581a454bbb3b0de5ff1", "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=8372954a6c160302859d",
"/chunks/shared-page.js": "/chunks/shared-page.js?id=0bd5bb1769f850581967", "/chunks/plans.js": "/chunks/plans.js?id=0941e8c0e85e81162cc8",
"/chunks/sign-in.js": "/chunks/sign-in.js?id=ec080714b24154cf1081", "/chunks/profile.js": "/chunks/profile.js?id=b91a5757f57bdaee120d",
"/chunks/sign-up.js": "/chunks/sign-up.js?id=0d8b571bcf5a54f073fd", "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a44394b1fa09f996a9fd",
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=099fd6800da190981a1c", "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=8c92667fa59dc9fd7ac7",
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=a1582c9b65d4b9df716e", "/chunks/settings.js": "/chunks/settings.js?id=0be829a409b9cbcb9bfc",
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=67403d4466f7e7c5701d", "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=25225a758b04d6d48617",
"/chunks/upgrade.js": "/chunks/upgrade.js?id=a414b418fb4f7c37287f", "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=c7499d2d79bf9620dfa5",
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=985dd231a8395f6a01d2", "/chunks/settings-password.js": "/chunks/settings-password.js?id=015ead5623aee1a543cf",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=a66c2011e6e99d0880de", "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=1810248d2c5931651314",
"/chunks/user.js": "/chunks/user.js?id=614b75d3e823cde8ab9f", "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=013b6f15f907caaecd1e",
"/chunks/user-create.js": "/chunks/user-create.js?id=2bd3bf90450c1ae1a9e1", "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=6172a89afe3b27cb76cd",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=08acb6b552540d60131f", "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=99b4f321902fe6b0eb23",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=cf402ad5f8e4a19bfa6c", "/chunks/shared-files.js": "/chunks/shared-files.js?id=403d9e06ee80aa328b4c",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=968a95bf02cb6a5cf064", "/chunks/shared-page.js": "/chunks/shared-page.js?id=9fb03fa225d831805aa9",
"/chunks/user-password.js": "/chunks/user-password.js?id=59afc7db6a7c0b40781e", "/chunks/sign-in.js": "/chunks/sign-in.js?id=ddb0ae9561462e691ce3",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=cb0b4bfb94595993795f", "/chunks/sign-up.js": "/chunks/sign-up.js?id=be89f6dcf7372d23668f",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=893d245c41391543de25", "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=0e09f1509a73646c3198",
"/chunks/users.js": "/chunks/users.js?id=3b3ae7c11ce24170045c" "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=7a4e1ba1d08b0bb37453",
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=f672876adcf877e6e126",
"/chunks/upgrade.js": "/chunks/upgrade.js?id=1c94ed3f8c2c366f730b",
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=638ac716c4995894563c",
"/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=7e805915ede7c330c6d1",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=ecc3c773b7c8ff422cf7",
"/chunks/user.js": "/chunks/user.js?id=1e0f9c8cab76e5ef871f",
"/chunks/user-create.js": "/chunks/user-create.js?id=fb808e071ab049b55490",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=9c7eb4dab2be288cb884",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=43545e2d110b40a47756",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=b05dcb7e7ad2f4959e52",
"/chunks/user-password.js": "/chunks/user-password.js?id=57fe622e9a03e834d6fa",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=76465e9a36a2ab78eff3",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e9528debb38dc1654cef",
"/chunks/users.js": "/chunks/users.js?id=78680d85246eba5b175f",
"/js/main.138977ab51db50b1e0d6.hot-update.js": "/js/main.138977ab51db50b1e0d6.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page.138977ab51db50b1e0d6.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.138977ab51db50b1e0d6.hot-update.js",
"/js/main.f79d973dad947ba37543.hot-update.js": "/js/main.f79d973dad947ba37543.hot-update.js",
"/js/main.2a1f5f7e3104f8dc51a9.hot-update.js": "/js/main.2a1f5f7e3104f8dc51a9.hot-update.js",
"/js/main.cda4897011e093572686.hot-update.js": "/js/main.cda4897011e093572686.hot-update.js",
"/js/main.62bdb842c87c47e6d37e.hot-update.js": "/js/main.62bdb842c87c47e6d37e.hot-update.js",
"/js/main.3d755cdf3323177f13ce.hot-update.js": "/js/main.3d755cdf3323177f13ce.hot-update.js",
"/js/main.10559b412b9fb7bfd166.hot-update.js": "/js/main.10559b412b9fb7bfd166.hot-update.js",
"/js/main.f58f5b02e5cf6f653ea5.hot-update.js": "/js/main.f58f5b02e5cf6f653ea5.hot-update.js",
"/js/main.8ed64bc6a170aa4bd2e6.hot-update.js": "/js/main.8ed64bc6a170aa4bd2e6.hot-update.js",
"/js/main.f8ac5e22a6d71bfd0978.hot-update.js": "/js/main.f8ac5e22a6d71bfd0978.hot-update.js",
"/js/main.1f2d7e5b40fe4a941254.hot-update.js": "/js/main.1f2d7e5b40fe4a941254.hot-update.js",
"/js/main.9c0a6726f0f995811cc7.hot-update.js": "/js/main.9c0a6726f0f995811cc7.hot-update.js",
"/js/main.7857c2b6336a9de7fc73.hot-update.js": "/js/main.7857c2b6336a9de7fc73.hot-update.js",
"/js/main.4b17bcb0a26beb166fe0.hot-update.js": "/js/main.4b17bcb0a26beb166fe0.hot-update.js",
"/js/main.3a7c777e5b583256e03a.hot-update.js": "/js/main.3a7c777e5b583256e03a.hot-update.js",
"/js/main.bebcd363b57c59983d22.hot-update.js": "/js/main.bebcd363b57c59983d22.hot-update.js",
"/js/main.5834aa5a5513c83985d5.hot-update.js": "/js/main.5834aa5a5513c83985d5.hot-update.js",
"/js/main.a8e1e844ed7a2613086a.hot-update.js": "/js/main.a8e1e844ed7a2613086a.hot-update.js",
"/js/main.bc1c6e04747b15c673c4.hot-update.js": "/js/main.bc1c6e04747b15c673c4.hot-update.js",
"/js/main.fc1e6c63d8c30fc8010d.hot-update.js": "/js/main.fc1e6c63d8c30fc8010d.hot-update.js",
"/js/main.6a3b3512fdbcad0e2d03.hot-update.js": "/js/main.6a3b3512fdbcad0e2d03.hot-update.js",
"/js/main.0cc1477ef98bf5094e33.hot-update.js": "/js/main.0cc1477ef98bf5094e33.hot-update.js",
"/js/main.4a23a1a5ef3f895273b7.hot-update.js": "/js/main.4a23a1a5ef3f895273b7.hot-update.js",
"/js/main.6f0af8ec80e294812229.hot-update.js": "/js/main.6f0af8ec80e294812229.hot-update.js",
"/js/main.d5246b544f1783858228.hot-update.js": "/js/main.d5246b544f1783858228.hot-update.js",
"/js/main.c5a05c0e6dbe02fbe138.hot-update.js": "/js/main.c5a05c0e6dbe02fbe138.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page.82a00a98337b338afbf4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.82a00a98337b338afbf4.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page.d1b724e2d9e2e894c272.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.d1b724e2d9e2e894c272.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page.73470bdfdadceeccb801.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.73470bdfdadceeccb801.hot-update.js",
"/js/main.3ccf7899e6a759d4efbf.hot-update.js": "/js/main.3ccf7899e6a759d4efbf.hot-update.js",
"/js/main.140acaffead1ac02280f.hot-update.js": "/js/main.140acaffead1ac02280f.hot-update.js",
"/js/main.f9fc1abb700f6fd824cc.hot-update.js": "/js/main.f9fc1abb700f6fd824cc.hot-update.js",
"/js/main.8e6a6281bbd098e6a6d1.hot-update.js": "/js/main.8e6a6281bbd098e6a6d1.hot-update.js"
} }

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

@@ -450,8 +450,6 @@ export default {
} }
}, },
downloadItem() { downloadItem() {
// Zip and download multiple files
if (this.fileInfoDetail.length > 1) if (this.fileInfoDetail.length > 1)
this.$store.dispatch('downloadFiles') this.$store.dispatch('downloadFiles')
else { else {

695
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -1,269 +1,216 @@
<template> <template>
<div id="desktop-toolbar"> <div id="desktop-toolbar">
<div class="toolbar-wrapper"> <div class="toolbar-wrapper">
<!-- Go back--> <!-- Go back-->
<div class="toolbar-go-back" v-if="homeDirectory"> <div class="toolbar-go-back" v-if="homeDirectory">
<div @click="goBack" class="go-back-button"> <div @click="goBack" class="go-back-button">
<chevron-left-icon <chevron-left-icon size="17" :class="{ 'is-active': browseHistory.length > 1 }" class="icon-back"></chevron-left-icon>
size="17"
:class="{ 'is-active': browseHistory.length > 1 }"
class="icon-back"
></chevron-left-icon>
<span class="back-directory-title"> <span class="back-directory-title">
{{ directoryName }} {{ directoryName }}
</span> </span>
<span <span @click.stop="folderActions" v-if="
@click.stop="folderActions"
v-if="
browseHistory.length > 1 && $isThisLocation(['base', 'public']) browseHistory.length > 1 && $isThisLocation(['base', 'public'])
" " class="folder-options" id="folder-actions">
class="folder-options" <more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
id="folder-actions"
>
<more-horizontal-icon
size="14"
class="icon-more"
></more-horizontal-icon>
</span> </span>
</div> </div>
</div> </div>
<!-- Tools--> <!-- Tools-->
<div class="toolbar-tools"> <div class="toolbar-tools">
<!--Search bar--> <!--Search bar-->
<div class="toolbar-button-wrapper"> <div class="toolbar-button-wrapper">
<SearchBar /> <SearchBar/>
</div> </div>
<!--Files controlls--> <!--Files controlls-->
<div <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
class="toolbar-button-wrapper" <ToolbarButtonUpload :class="{ 'is-inactive': canUploadInView || !hasCapacity }" :action="$t('actions.upload')"/>
v-if="$checkPermission(['master', 'editor'])" <ToolbarButton :class="{ 'is-inactive': canCreateFolderInView }" @click.native="createFolder" source="folder-plus" :action="$t('actions.create_folder')"/>
> </div>
<ToolbarButtonUpload
:class="{ 'is-inactive': canUploadInView || !hasCapacity }"
:action="$t('actions.upload')"
/>
<ToolbarButton
:class="{ 'is-inactive': canCreateFolderInView }"
@click.native="createFolder"
source="folder-plus"
:action="$t('actions.create_folder')"
/>
</div>
<div <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
class="toolbar-button-wrapper" <ToolbarButton source="move" :class="{ 'is-inactive': canMoveInView }" :action="$t('actions.move')" @click.native="moveItem"/>
v-if="$checkPermission(['master', 'editor'])" <ToolbarButton v-if="!$isThisLocation(['public'])" source="share" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem"/>
> <ToolbarButton source="trash" :class="{ 'is-inactive': canDeleteInView }" :action="$t('actions.delete')" @click.native="deleteItem"/>
<ToolbarButton </div>
source="move"
:class="{ 'is-inactive': canMoveInView }"
:action="$t('actions.move')"
@click.native="moveItem"
/>
<ToolbarButton
v-if="!$isThisLocation(['public'])"
source="share"
:class="{ 'is-inactive': canShareInView }"
:action="$t('actions.share')"
@click.native="shareItem"
/>
<ToolbarButton
source="trash"
:class="{ 'is-inactive': canDeleteInView }"
:action="$t('actions.delete')"
@click.native="deleteItem"
/>
</div>
<!--View options--> <!--View options-->
<div class="toolbar-button-wrapper"> <div class="toolbar-button-wrapper">
<ToolbarButton <ToolbarButton source="preview-sorting" class="preview-sorting" :action="$t('actions.sorting_view')" :class="{ active: sortingAndPreview }" @click.native="sortingAndPreview = !sortingAndPreview"/>
source="preview-sorting"
class="preview-sorting"
:action="$t('actions.sorting_view')"
:class="{ active: sortingAndPreview }"
@click.native=" sortingAndPreview = !sortingAndPreview"
/>
<ToolbarButton <ToolbarButton :action="$t('actions.info_panel')" :class="{ active: fileInfoVisible }" @click.native="$store.dispatch('fileInfoToggle')" source="info"/>
:action="$t('actions.info_panel')" </div>
:class="{ active: fileInfoVisible }" </div>
@click.native="$store.dispatch('fileInfoToggle')"
source="info"
/>
</div> </div>
</div> <UploadProgress/>
</div> </div>
<UploadProgress />
</div>
</template> </template>
<script> <script>
import ToolbarButtonUpload from "@/components/FilesView/ToolbarButtonUpload"; import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
import { ChevronLeftIcon, MoreHorizontalIcon } from "vue-feather-icons"; import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import UploadProgress from "@/components/FilesView/UploadProgress"; import UploadProgress from '@/components/FilesView/UploadProgress'
import ToolbarButton from "@/components/FilesView/ToolbarButton"; import ToolbarButton from '@/components/FilesView/ToolbarButton'
import SearchBar from "@/components/FilesView/SearchBar"; import SearchBar from '@/components/FilesView/SearchBar'
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex'
import { events } from "@/bus"; import { events } from '@/bus'
import { last } from "lodash"; import { last } from 'lodash'
export default { export default {
name: "ToolBar", name: 'ToolBar',
components: { components: {
ToolbarButtonUpload, ToolbarButtonUpload,
MoreHorizontalIcon, MoreHorizontalIcon,
ChevronLeftIcon, ChevronLeftIcon,
UploadProgress, UploadProgress,
ToolbarButton, ToolbarButton,
SearchBar, SearchBar
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
"FilePreviewType", 'FilePreviewType',
"fileInfoVisible", 'fileInfoVisible',
"fileInfoDetail", 'fileInfoDetail',
"currentFolder", 'currentFolder',
"browseHistory", 'browseHistory',
"homeDirectory", 'homeDirectory'
]), ]),
hasCapacity() { hasCapacity() {
// Check if set storage limitation // Check if set storage limitation
if (!this.$store.getters.config.storageLimit) return true; if (!this.$store.getters.config.storageLimit) return true
// Check if is loaded user // Check if is loaded user
if (!this.$store.getters.user) return true; if (!this.$store.getters.user) return true
// Check if user has storage // Check if user has storage
return ( return (
this.$store.getters.user.relationships.storage.data.attributes.used <= this.$store.getters.user.relationships.storage.data.attributes.used <=
100 100
); )
}, },
directoryName() { directoryName() {
return this.currentFolder return this.currentFolder
? this.currentFolder.name ? this.currentFolder.name
: this.homeDirectory.name; : this.homeDirectory.name
}, },
preview() { preview() {
return this.FilePreviewType === "list" ? "th" : "th-list"; return this.FilePreviewType === 'list' ? 'th' : 'th-list'
}, },
canCreateFolderInView() { canCreateFolderInView() {
return !this.$isThisLocation(["base", "public"]); return !this.$isThisLocation(['base', 'public'])
}, },
canDeleteInView() { canDeleteInView() {
return !this.$isThisLocation([ return !this.$isThisLocation([
"trash", 'trash',
"trash-root", 'trash-root',
"base", 'base',
"participant_uploads", 'participant_uploads',
"latest", 'latest',
"shared", 'shared',
"public", 'public'
]); ])
}, },
canUploadInView() { canUploadInView() {
return !this.$isThisLocation(["base", "public"]); return !this.$isThisLocation(['base', 'public'])
}, },
canMoveInView() { canMoveInView() {
return !this.$isThisLocation([ return !this.$isThisLocation([
"base", 'base',
"participant_uploads", 'participant_uploads',
"latest", 'latest',
"shared", 'shared',
"public", 'public'
]); ])
}, },
canShareInView() { canShareInView() {
let locations = [ let locations = [
"base", 'base',
"participant_uploads", 'participant_uploads',
"latest", 'latest',
"shared", 'shared',
"public", 'public'
] ]
return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
},
},
data () {
return {
sortingAndPreview: false
}
},
watch: {
sortingAndPreview () {
if(this.sortingAndPreview) {
events.$emit('sortingAndPreview', true)
}
if(!this.sortingAndPreview) { return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
events.$emit('sortingAndPreview', false)
}
}
},
methods: {
goBack() {
// Get previous folder
let previousFolder = last(this.browseHistory);
if (!previousFolder) return;
if (previousFolder.location === "trash-root") {
this.$store.dispatch("getTrash");
} else if (previousFolder.location === "shared") {
this.$store.dispatch("getShared");
} else {
if (this.$isThisLocation("public")) {
this.$store.dispatch("browseShared", [
{ folder: previousFolder, back: true, init: false },
]);
} else {
this.$store.dispatch("getFolder", [
{ folder: previousFolder, back: true, init: false },
]);
} }
}
}, },
folderActions() { data() {
events.$emit("folder:actions", this.currentFolder); return {
}, sortingAndPreview: false
deleteItem() {
this.$store.dispatch('deleteItem')
},
createFolder() {
this.$createFolder();
},
moveItem() {
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
},
shareItem() {
if (this.fileInfoDetail[0]) {
//ADD BY M
if (this.fileInfoDetail[0].shared) {
events.$emit("popup:open", {
name: "share-edit",
item: this.fileInfoDetail[0],
});
} else {
events.$emit("popup:open", {
name: "share-create",
item: this.fileInfoDetail[0],
});
} }
}
}, },
}, watch: {
mounted () { sortingAndPreview() {
events.$on('sortingAndPreview', (state) => { if (this.sortingAndPreview) {
this.sortingAndPreview = state events.$emit('sortingAndPreview', true)
}) }
}
}; if (!this.sortingAndPreview) {
events.$emit('sortingAndPreview', false)
}
}
},
methods: {
goBack() {
// Get previous folder
let previousFolder = last(this.browseHistory)
if (!previousFolder) return
if (previousFolder.location === 'trash-root') {
this.$store.dispatch('getTrash')
} else if (previousFolder.location === 'shared') {
this.$store.dispatch('getShared')
} else {
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [
{ folder: previousFolder, back: true, init: false }
])
} else {
this.$store.dispatch('getFolder', [
{ folder: previousFolder, back: true, init: false }
])
}
}
},
folderActions() {
events.$emit('folder:actions', this.currentFolder)
},
deleteItem() {
this.$store.dispatch('deleteItem')
},
createFolder() {
this.$createFolder()
},
moveItem() {
events.$emit('popup:open', { name: 'move', item: this.fileInfoDetail })
},
shareItem() {
if (this.fileInfoDetail[0]) {
//ADD BY M
if (this.fileInfoDetail[0].shared) {
events.$emit('popup:open', {
name: 'share-edit',
item: this.fileInfoDetail[0]
})
} else {
events.$emit('popup:open', {
name: 'share-create',
item: this.fileInfoDetail[0]
})
}
}
}
},
mounted() {
events.$on('sortingAndPreview', (state) => {
this.sortingAndPreview = state
})
}
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -271,179 +218,179 @@ export default {
@import "@assets/vue-file-manager/_mixins"; @import "@assets/vue-file-manager/_mixins";
.toolbar-wrapper { .toolbar-wrapper {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
display: flex; display: flex;
position: relative; position: relative;
z-index: 2; z-index: 2;
> div { > div {
flex-grow: 1; flex-grow: 1;
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
} }
} }
.directory-name { .directory-name {
vertical-align: middle;
@include font-size(17);
color: $text;
font-weight: 700;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.icon-back {
vertical-align: middle;
cursor: pointer;
margin-right: 6px;
opacity: 0.15;
pointer-events: none;
@include transition(150ms);
&.is-active {
opacity: 1;
pointer-events: initial;
}
}
.toolbar-go-back {
cursor: pointer;
.folder-options {
vertical-align: middle; vertical-align: middle;
margin-left: 6px; @include font-size(17);
padding: 1px 4px; color: $text;
line-height: 0;
border-radius: 3px;
@include transition(150ms);
svg circle {
@include transition(150ms);
}
&:hover {
background: $light_background;
svg circle {
stroke: $theme;
}
}
.icon-more {
vertical-align: middle;
}
}
.back-directory-title {
@include font-size(15);
line-height: 1;
font-weight: 700; font-weight: 700;
max-width: 220px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
}
.icon-back {
vertical-align: middle; vertical-align: middle;
color: $text; cursor: pointer;
} margin-right: 6px;
opacity: 0.15;
pointer-events: none;
@include transition(150ms);
&.is-active {
opacity: 1;
pointer-events: initial;
}
}
.toolbar-go-back {
cursor: pointer;
.folder-options {
vertical-align: middle;
margin-left: 6px;
padding: 1px 4px;
line-height: 0;
border-radius: 3px;
@include transition(150ms);
svg circle {
@include transition(150ms);
}
&:hover {
background: $light_background;
svg circle {
stroke: $theme;
}
}
.icon-more {
vertical-align: middle;
}
}
.back-directory-title {
@include font-size(15);
line-height: 1;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
color: $text;
}
} }
.toolbar-position { .toolbar-position {
text-align: center; text-align: center;
span { span {
@include font-size(17); @include font-size(17);
font-weight: 600; font-weight: 600;
} }
} }
.toolbar-tools { .toolbar-tools {
text-align: right; text-align: right;
.toolbar-button-wrapper { .toolbar-button-wrapper {
margin-left: 28px; margin-left: 28px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&:first-child { &:first-child {
margin-left: 0 !important; margin-left: 0 !important;
}
}
.button {
margin-left: 5px;
&.active {
/deep/ svg {
line,
circle,
rect {
stroke: $theme;
} }
}
&.preview-sorting{
background: $light_background;
}
} }
&.is-inactive { .button {
opacity: 0.25; margin-left: 5px;
pointer-events: none;
}
&:first-child { &.active {
margin-left: 0; /deep/ svg {
line,
circle,
rect {
stroke: $theme;
}
}
&.preview-sorting {
background: $light_background;
}
}
&.is-inactive {
opacity: 0.25;
pointer-events: none;
}
&:first-child {
margin-left: 0;
}
} }
}
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.toolbar-go-back .back-directory-title { .toolbar-go-back .back-directory-title {
max-width: 120px; max-width: 120px;
}
.toolbar-tools {
.button {
margin-left: 0;
height: 40px;
width: 40px;
} }
.toolbar-button-wrapper { .toolbar-tools {
margin-left: 25px; .button {
margin-left: 0;
height: 40px;
width: 40px;
}
.toolbar-button-wrapper {
margin-left: 25px;
}
} }
}
} }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
#desktop-toolbar { #desktop-toolbar {
display: none; display: none;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.toolbar .directory-name { .toolbar .directory-name {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
}
.toolbar-go-back {
.back-directory-title {
color: $dark_mode_text_primary;
} }
.folder-options { .toolbar-go-back {
&:hover { .back-directory-title {
background: $dark_mode_foreground; color: $dark_mode_text_primary;
} }
.folder-options {
&:hover {
background: $dark_mode_foreground;
}
}
} }
}
.active {
.active { &.preview-sorting {
&.preview-sorting{ background: $dark_mode_foreground !important;
background: $dark_mode_foreground !important; }
}
} }
} }
</style> </style>

20
resources/js/components/FilesView/MobileMultiSelectMenu.vue
View File

@@ -5,7 +5,7 @@
<ToolbarButton class="action-btn" v-if="$checkPermission('master') || $checkPermission('editor')" source="trash" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="deleteItem"/> <ToolbarButton class="action-btn" v-if="$checkPermission('master') || $checkPermission('editor')" source="trash" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="deleteItem"/>
<ToolbarButton class="action-btn" source="download" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="downloadItem"/> <ToolbarButton class="action-btn" source="download" :class="{'is-inactive': canDownloadItems}" :action="$t('actions.delete')" @click.native="downloadItem"/>
<ToolbarButton class="action-btn close-icon" source="close" :action="$t('actions.close')" @click.native="closeSelecting"/> <ToolbarButton class="action-btn close-icon" source="close" :action="$t('actions.close')" @click.native="closeSelecting"/>
</div> </div>
@@ -21,7 +21,10 @@ export default {
name: 'MobileMultiSelectMenu', name: 'MobileMultiSelectMenu',
components: { ToolbarButton }, components: { ToolbarButton },
computed: { computed: {
...mapGetters(['fileInfoDetail']) ...mapGetters(['fileInfoDetail']),
canDownloadItems() {
return this.fileInfoDetail.filter(item => item.type === 'folder').length !== 0
}
}, },
data() { data() {
return { return {
@@ -33,14 +36,11 @@ export default {
events.$emit('mobileSelecting:stop') events.$emit('mobileSelecting:stop')
}, },
downloadItem() { downloadItem() {
this.fileInfoDetail.forEach((item , i) => { if (this.fileInfoDetail.length > 1)
setTimeout(() => { this.$store.dispatch('downloadFiles')
this.$downloadFile( else {
item.file_url, this.$downloadFile(this.fileInfoDetail[0].file_url, this.fileInfoDetail[0].name + '.' + this.fileInfoDetail[0].mimetype)
item.name + '.' + item.mimetype }
)
}, i * 100);
})
}, },
moveItem() { moveItem() {
// Open move item popup // Open move item popup

106
resources/js/components/FilesView/MobileSortingAndPreview.vue
View File

@@ -1,60 +1,52 @@
<template> <template>
<transition name="context-menu" class="options-wrapper"> <transition name="context-menu" class="options-wrapper">
<div class="options" v-if="isVisible"> <div class="options" v-if="isVisible">
<div class="menu-options"> <div class="menu-options">
<ul class="menu-option-group">
<ul class="menu-option-group"> <li v-if="isList" class="menu-option" @click="changePreview('grid')">
<li class="menu-option" @click="changePreview('grid')"> <div class="icon">
<div class="icon"> <grid-icon size="17"/>
<grid-icon size="17"/> </div>
</div> <div class="text-label">
<div class="text-label"> {{ $t('preview_sorting.grid_view') }}
{{ $t('preview_sorting.grid_view') }} </div>
</div> </li>
<div class="show-icon" v-if="isGrid"> <li v-if="isGrid" class="menu-option" @click="changePreview('list')">
<check-icon size="17"/> <div class="icon">
</div> <list-icon size="17"/>
</li> </div>
<li class="menu-option" @click="changePreview('list')"> <div class="text-label">
<div class="icon"> {{ $t('preview_sorting.list_view') }}
<list-icon size="17"/> </div>
</div> </li>
<div class="text-label"> </ul>
{{ $t('preview_sorting.list_view') }} <ul class="menu-option-group">
</div> <li class="menu-option" @click="sort('created_at')">
<div class="show-icon" v-if="isList"> <div class="icon">
<check-icon size="17"/> <calendar-icon size="17"/>
</div> </div>
</li> <div class="text-label">
</ul> {{ $t('preview_sorting.sort_date') }}
</div>
<ul class="menu-option-group"> <div class="show-icon">
<li class="menu-option" @click="sort('created_at')"> <arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
<div class="icon"> </div>
<calendar-icon size="17"/> </li>
</div> <li class="menu-option" @click="sort('name')">
<div class="text-label"> <div class="icon">
{{ $t('preview_sorting.sort_date') }} <alphabet-icon size="17" class="alphabet-icon"/>
</div> </div>
<div class="show-icon"> <div class="text-label">
<arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/> {{ $t('preview_sorting.sort_alphabet') }}
</div> </div>
</li> <div class="show-icon">
<li class="menu-option" @click="sort('name')"> <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
<div class="icon"> </div>
<alphabet-icon size="17" class="alphabet-icon"/> </li>
</div> </ul>
<div class="text-label">
{{ $t('preview_sorting.sort_alphabet') }}
</div>
<div class="show-icon">
<arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
</div>
</li>
</ul>
</div>
</div> </div>
</transition> </div>
</transition>
</template> </template>
<script> <script>
@@ -118,11 +110,11 @@ export default {
this.$getDataByLocation() this.$getDataByLocation()
}, },
changePreview(previewType) { changePreview(previewType) {
this.$store.dispatch('changePreviewType', previewType) this.$store.dispatch('changePreviewType', previewType)
this.close() this.close()
}, }
}, },
mounted() { mounted() {

201
resources/js/components/FilesView/SortingAndPreview.vue
View File

@@ -1,31 +1,24 @@
<template> <template>
<div v-if="isVisible" class="sorting-preview" > <div v-if="isVisible" class="sorting-preview">
<div class="menu-options" id="menu-list"> <div class="menu-options" id="menu-list">
<ul class="menu-option-group"> <ul class="menu-option-group">
<li class="menu-option" @click="changePreview('grid')" > <li v-if="isList" class="menu-option" @click="changePreview('grid')">
<div class="icon"> <div class="icon">
<grid-icon size="17"/> <grid-icon size="17"/>
</div> </div>
<div class="text-label"> <div class="text-label">
{{$t('preview_sorting.grid_view')}} {{ $t('preview_sorting.grid_view') }}
</div>
<div class="show-icon" v-if="isGrid">
<check-icon size="17"/>
</div> </div>
</li> </li>
<li class="menu-option" @click="changePreview('list')"> <li v-if="isGrid" class="menu-option" @click="changePreview('list')">
<div class="icon"> <div class="icon">
<list-icon size="17"/> <list-icon size="17"/>
</div> </div>
<div class="text-label"> <div class="text-label">
{{$t('preview_sorting.list_view')}} {{ $t('preview_sorting.list_view') }}
</div>
<div class="show-icon" v-if="isList">
<check-icon size="17"/>
</div> </div>
</li> </li>
</ul> </ul>
<ul class="menu-option-group"> <ul class="menu-option-group">
<li class="menu-option" @click="sort('created_at')"> <li class="menu-option" @click="sort('created_at')">
@@ -33,18 +26,18 @@
<calendar-icon size="17"/> <calendar-icon size="17"/>
</div> </div>
<div class="text-label"> <div class="text-label">
{{$t('preview_sorting.sort_date')}} {{ $t('preview_sorting.sort_date') }}
</div> </div>
<div class="show-icon" > <div class="show-icon">
<arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/> <arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
</div> </div>
</li> </li>
<li class="menu-option" @click="sort('name')" > <li class="menu-option" @click="sort('name')">
<div class="icon"> <div class="icon">
<alphabet-icon size="17" class="alphabet-icon"/> <alphabet-icon size="17" class="alphabet-icon"/>
</div> </div>
<div class="text-label"> <div class="text-label">
{{$t('preview_sorting.sort_alphabet')}} {{ $t('preview_sorting.sort_alphabet') }}
</div> </div>
<div class="show-icon"> <div class="show-icon">
<arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/> <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
@@ -57,83 +50,83 @@
<script> <script>
import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons' import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon' import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { events } from '@/bus' import { events } from '@/bus'
export default { export default {
name:'SortingAndPreview', name: 'SortingAndPreview',
components: { components: {
CalendarIcon, CalendarIcon,
AlphabetIcon, AlphabetIcon,
ArrowUpIcon, ArrowUpIcon,
CheckIcon, CheckIcon,
ListIcon, ListIcon,
GridIcon GridIcon
},
computed: {
...mapGetters(['FilePreviewType']),
isGrid() {
return this.FilePreviewType === 'grid'
}, },
computed: { isList() {
...mapGetters(['FilePreviewType']), return this.FilePreviewType === 'list'
isGrid() {
return this.FilePreviewType === 'grid'
},
isList() {
return this.FilePreviewType === 'list'
},
},
data () {
return {
isVisible: false,
filter: {
sort: 'DESC',
field: undefined,
}
}
},
methods: {
sort (field) {
this.filter.field = field
// Set sorting direction
if (this.filter.sort === 'DESC') {
this.filter.sort = 'ASC'
} else if (this.filter.sort === 'ASC') {
this.filter.sort = 'DESC'
}
// Save to localStorage sorting options
localStorage.setItem('sorting', JSON.stringify({sort: this.filter.sort , field: this.filter.field}))
// Update sorting state in vuex
this.$store.commit('UPDATE_SORTING')
// Get data using the application location
this.$getDataByLocation()
},
changePreview(previewType) {
this.$store.dispatch('changePreviewType' , previewType)
this.isVisible = false
events.$emit('sortingAndPreview', false)
}
},
mounted () {
let sorting = JSON.parse(localStorage.getItem('sorting'))
// Set default sorting if in not setup in LocalStorage
this.filter.sort = sorting ? sorting.sort : 'DESC'
this.filter.field = sorting ? sorting.field : 'created_at'
events.$on('sortingAndPreview', (state) => {
this.isVisible = state
})
} }
},
data() {
return {
isVisible: false,
filter: {
sort: 'DESC',
field: undefined
}
}
},
methods: {
sort(field) {
this.filter.field = field
// Set sorting direction
if (this.filter.sort === 'DESC') {
this.filter.sort = 'ASC'
} else if (this.filter.sort === 'ASC') {
this.filter.sort = 'DESC'
}
// Save to localStorage sorting options
localStorage.setItem('sorting', JSON.stringify({ sort: this.filter.sort, field: this.filter.field }))
// Update sorting state in vuex
this.$store.commit('UPDATE_SORTING')
// Get data using the application location
this.$getDataByLocation()
},
changePreview(previewType) {
this.$store.dispatch('changePreviewType', previewType)
this.isVisible = false
events.$emit('sortingAndPreview', false)
}
},
mounted() {
let sorting = JSON.parse(localStorage.getItem('sorting'))
// Set default sorting if in not setup in LocalStorage
this.filter.sort = sorting ? sorting.sort : 'DESC'
this.filter.field = sorting ? sorting.field : 'created_at'
events.$on('sortingAndPreview', (state) => {
this.isVisible = state
})
} }
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -143,7 +136,8 @@
.show-icon { .show-icon {
margin-left: auto; margin-left: auto;
max-height: 19px; max-height: 19px;
.arrow-down {
.arrow-down {
@include transform(rotate(180deg)); @include transform(rotate(180deg));
} }
} }
@@ -153,14 +147,15 @@
.icon { .icon {
margin-right: 20px; margin-right: 20px;
line-height: 0; line-height: 0;
.alphabet-icon { .alphabet-icon {
/deep/line, /deep/ line,
/deep/polyline { /deep/ polyline {
stroke:$text ; stroke: $text;
} }
} }
} }
.text-label { .text-label {
@@ -221,12 +216,12 @@
} }
path, path,
/deep/line, /deep/ line,
/deep/polyline, /deep/ polyline,
rect, rect,
circle, circle,
polygon { polygon {
stroke: $theme !important; stroke: $theme !important;
} }
} }
} }
@@ -246,16 +241,16 @@
.icon { .icon {
.alphabet-icon { .alphabet-icon {
/deep/line, /deep/ line,
/deep/polyline { /deep/ polyline {
stroke:$dark_mode_text_primary ; stroke: $dark_mode_text_primary;
} }
} }
} }
&:hover { &:hover {
background: rgba($theme, 0.1); background: rgba($theme, 0.1);
} }
} }
} }
} }

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

@@ -19,7 +19,7 @@ $shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
$light_mode_input_background: hsla(210, 10%, 98%, 1); $light_mode_input_background: hsla(210, 10%, 98%, 1);
$light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12); $light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12);
$light_mode_vignette: rgba(255, 255, 255, 0.7); $light_mode_vignette: rgba(9, 8, 12, 0.35);
// Dark Mode // Dark Mode
$dark_mode_vignette: rgba(0, 0, 0, 0.3); $dark_mode_vignette: rgba(0, 0, 0, 0.3);