mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-08 19:42:18 +00:00
Compare commits
26 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
83a951b3af | ||
|
|
6762ed25dc | ||
|
|
6ba869234e | ||
|
|
2c04376a61 | ||
|
|
f180f1fff8 | ||
|
|
ab65ca7a13 | ||
|
|
8895b5062a | ||
|
|
2f4aafb1b3 | ||
|
|
be08c8487a | ||
|
|
0d5df91d2d | ||
|
|
72e4067beb | ||
|
|
ba4f888826 | ||
|
|
82b43eb996 | ||
|
|
777132ec40 | ||
|
|
aac0aa755f | ||
|
|
4be77c07ac | ||
|
|
9372906a3e | ||
|
|
e12e521622 | ||
|
|
0082c3a6a8 | ||
|
|
f79973e922 | ||
|
|
59ca45e9b1 | ||
|
|
bb22ec1e88 | ||
|
|
ba315014fa | ||
|
|
8387f56048 | ||
|
|
68acf5f986 | ||
|
|
785dade6b2 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
/app/Console/Commands/SetupDevelopmentEnvironment.php
|
||||
/node_modules
|
||||
/public/hot
|
||||
/public/storage
|
||||
@@ -11,8 +12,10 @@
|
||||
.env.backup
|
||||
.phpunit.result.cache
|
||||
.phpstorm.meta.php
|
||||
.vscode/
|
||||
_ide_helper.php
|
||||
Homestead.json
|
||||
Homestead.yaml
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
prettier.json
|
||||
|
||||
99
README.md
99
README.md
@@ -18,14 +18,13 @@ But, it can't be done without you, development is more and more complicated and
|
||||
- [Installation](#installation)
|
||||
- [PHP Configuration](#php-configuration)
|
||||
- [Chunk Upload](#chunk-upload)
|
||||
- [Nginx Configuration](#nginx-configuration)
|
||||
- [Apache Configuration](#apache-configuration)
|
||||
- [Recover Failed Installation](#installation-failed)
|
||||
- [Update Guide](#update-guide)
|
||||
- [Instructions](#instructions)
|
||||
- [Upgrade Guide](#upgrade-guide)
|
||||
- [Common Instructions](#common-instructions)
|
||||
- [Update from 1.7.8 to 1.7.9](#update-from-178-to-179)
|
||||
- [Update from 1.7.x to 1.7.8](#update-from-17x-to-178)
|
||||
- [Update from 1.6.x to 1.7](#update-from-16x-to-17)
|
||||
- [Nginx Configuration](#nginx-configuration)
|
||||
- [Apache Configuration](#apache-configuration)
|
||||
- [Payments](#payments)
|
||||
- [Get your active plans](#get-your-active-plans)
|
||||
- [Manage Failed Payments](#manage-failed-payments)
|
||||
@@ -71,7 +70,7 @@ But, it can't be done without you, development is more and more complicated and
|
||||
## Installation
|
||||
|
||||
#### 1. Upload files on your server
|
||||
Copy project files to web root folder of your domain. It's mostly located in `html`, `www` or `public_html` folder name.
|
||||
Upload project files to web root folder of your domain. It's mostly located in `html`, `www` or `public_html` folder name.
|
||||
|
||||
#### 2. Configure your web root folder
|
||||
Configure your web server's document root to point to the public directory of the files you previously uploaded. For example, if you've uploaded the files in `html` folder, your domain root directory should be changed to `html/project_files/public` folder or anything else where domain root is in project `/public` directory.
|
||||
@@ -107,9 +106,9 @@ That was the hardest part of installation proces. Please follow instructions in
|
||||
|
||||
#### 7. Set up Cron
|
||||
|
||||
Add the following Cron entry to your server
|
||||
Add the following Cron entry to your server. Just update your php path (if it's different) and project path:
|
||||
```
|
||||
* * * * * cd /path-to-your-project && php artisan schedule:run >> /dev/null 2>&1
|
||||
* * * * * /usr/local/bin/php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1
|
||||
```
|
||||
|
||||
## PHP Configuration
|
||||
@@ -124,10 +123,44 @@ max_execution_time = 3600
|
||||
```
|
||||
|
||||
## Chunk & Multipart Upload
|
||||
VueFileManager in default supporting chunk upload. Default chunk upload size is `128MB`. If you wish change this default value, go to `/config/vuefilemanager.php` and change `chunk_size` attribute.
|
||||
VueFileManager in default supporting chunk upload. Default chunk upload size is `128MB`. If you wish change this default value, go to your `.env` and change `CHUNK_SIZE` attribute.
|
||||
|
||||
When you use external storage, and upload large files, to prevent failing upload process make sure you have enough space in your application space and set higher `max_execution_time` in your php.ini to move your files to external storage.
|
||||
|
||||
## Upgrade Guide
|
||||
|
||||
### Common Instructions
|
||||
`Don't forget create backup of your database before make any changes in your production application. If you serve your files in local storage driver pay attention and don't delete your /storage folder!`
|
||||
|
||||
These instructions is applicable for all updates. Please follow this step:
|
||||
|
||||
- Just rewrite all project files with new excluded `/.env` file and `/storage` folder. These items must be preserved!
|
||||
|
||||
### Update from 1.7.8 to 1.7.9
|
||||
After rewrited old files with new files, log in as admin to the app and go to `your-domain.com/service/upgrade-database`. This will upgrade your database on the background.
|
||||
|
||||
Add the following Cron entry to your server. Just update your php path (if it's different) and project path:
|
||||
```
|
||||
* * * * * /usr/local/bin/php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1
|
||||
|
||||
```
|
||||
|
||||
### Update from 1.7.x to 1.7.8
|
||||
For those who have installed VueFileManager via git or any other repository synchronization tool, dont't forget after updated code run `composer update` command to update your vendors.
|
||||
|
||||
### Update from 1.6.x to 1.7
|
||||
|
||||
For those, who purchase extended licence, place these lines at the end of your `/.env` file:
|
||||
```
|
||||
CASHIER_LOGGER=stack
|
||||
CASHIER_CURRENCY=
|
||||
STRIPE_KEY=
|
||||
STRIPE_SECRET=
|
||||
STRIPE_WEBHOOK_SECRET=
|
||||
CASHIER_PAYMENT_NOTIFICATION=App\Notifications\ConfirmPayment
|
||||
```
|
||||
|
||||
Then go to https://your-domain.com/upgrade and follow the setup wizard instructions.
|
||||
|
||||
## Nginx Configuration
|
||||
If you running VueFileManager undex Nginx, don't forget set this value in your `nginx.conf` file:
|
||||
@@ -190,54 +223,6 @@ Make sure you have enabled mod_rewrite. There is an example config for running V
|
||||
</VirtualHost>
|
||||
```
|
||||
|
||||
## Installation Failed
|
||||
|
||||
What to do when installation fail and you can't continue, at first, try to fix issue why installation fail. Probably missing PHP extension or permissions wasn't set correctly.
|
||||
|
||||
At worst scenarios, to reset Setup Wizard, delete all tables in your previously created database, delete content of `/storage/framework/cache`. Then replace content in your `.env` file from `.env.example` file.
|
||||
|
||||
After these steps, installation will be reseted.
|
||||
|
||||
## Update Guide
|
||||
|
||||
### Instructions
|
||||
`Don't forget create backup of your database and storage before make any changes in your production application.`
|
||||
|
||||
`If you serve your files in local storage driver pay attention and don't delete your /storage folder`
|
||||
|
||||
Follow this steps:
|
||||
|
||||
- Make a backup of the .env config file located on your server.
|
||||
- Upload and replace all the files on your server with what's inside the app folder.
|
||||
- Restore your `.env` config file on your server.
|
||||
|
||||
## Update from 1.7.8 to 1.7.9
|
||||
After uploaded new files, log in as admin to the app and go to `your-domain.com/service/upgrade-database`. This will upgrade your database on the background.
|
||||
|
||||
After that, **update path to your project in command below** and add the following **Cron** entry to your server:
|
||||
```
|
||||
* * * * * cd /path-to-your-project && php artisan schedule:run >> /dev/null 2>&1
|
||||
```
|
||||
|
||||
That's all.
|
||||
|
||||
## Update from 1.7.x to 1.7.8
|
||||
If you are upgrading app to 1.7.7 from 1.7.x, make sure you have copied new /vendor folder or if you are using terminal or git, run `composer update` command to update your vendors.
|
||||
|
||||
## Update from 1.6.x to 1.7
|
||||
|
||||
For those, who purchase extended licence, place these lines at the end of your `/.env` file:
|
||||
```
|
||||
CASHIER_LOGGER=stack
|
||||
CASHIER_CURRENCY=
|
||||
STRIPE_KEY=
|
||||
STRIPE_SECRET=
|
||||
STRIPE_WEBHOOK_SECRET=
|
||||
CASHIER_PAYMENT_NOTIFICATION=App\Notifications\ConfirmPayment
|
||||
```
|
||||
|
||||
Then go to https://your-domain.com/upgrade and follow the setup wizard instructions.
|
||||
|
||||
# Payments
|
||||
VueFileManager is packed with **Stripe** payment options. To configure Stripe, you will be asked in Setup Wizard to set up. Or, if you skip this installation process, you will find stripe set up in you admin `Dashboard / Settings / Payments`.
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
namespace App\Console;
|
||||
|
||||
use App\Console\Commands\Deploy;
|
||||
//use App\Console\Commands\SetupDevelopmentEnvironment;
|
||||
use App\Console\Commands\SetupDevEnvironment;
|
||||
use App\Console\Commands\SetupProductionEnvironment;
|
||||
use App\Console\Commands\UpgradeApp;
|
||||
@@ -20,6 +21,7 @@ class Kernel extends ConsoleKernel
|
||||
*/
|
||||
protected $commands = [
|
||||
Deploy::class,
|
||||
//SetupDevelopmentEnvironment::class,
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
@@ -101,7 +101,7 @@ class FileAccessController extends Controller
|
||||
$shared = get_shared($token);
|
||||
|
||||
// Abort if shared is protected
|
||||
if ((int) $shared->protected) {
|
||||
if ((int)$shared->protected) {
|
||||
abort(403, "Sorry, you don't have permission");
|
||||
}
|
||||
|
||||
@@ -154,7 +154,7 @@ class FileAccessController extends Controller
|
||||
$shared = get_shared($token);
|
||||
|
||||
// Abort if thumbnail is protected
|
||||
if ((int) $shared->protected) {
|
||||
if ((int)$shared->protected) {
|
||||
abort(403, "Sorry, you don't have permission");
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
return [
|
||||
|
||||
'version' => '1.7.9',
|
||||
'version' => '1.7.10',
|
||||
|
||||
// Define size of chunk uploaded by MB. E.g. integer 128 means chunk size will be 128MB.
|
||||
'chunk_size' => env('CHUNK_SIZE', '128'),
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
AddType video/ogg .ogv
|
||||
AddType video/mp4 .mp4
|
||||
AddType video/webm .webm
|
||||
|
||||
<ifModule mod_headers.c>
|
||||
Header set Connection keep-alive
|
||||
</ifModule>
|
||||
|
||||
2
public/chunks/admin-account.js
vendored
2
public/chunks/admin-account.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/admin.js
vendored
2
public/chunks/admin.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/app-appearance.js
vendored
2
public/chunks/app-appearance.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/app-billings.js
vendored
2
public/chunks/app-billings.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/app-email.js
vendored
2
public/chunks/app-email.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/app-index.js
vendored
2
public/chunks/app-index.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/app-others.js
vendored
2
public/chunks/app-others.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/app-payments.js
vendored
2
public/chunks/app-payments.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/app-settings.js
vendored
2
public/chunks/app-settings.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/app-setup.js
vendored
2
public/chunks/app-setup.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/billings-detail.js
vendored
2
public/chunks/billings-detail.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/contact-us.js
vendored
2
public/chunks/contact-us.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/create-new-password.js
vendored
2
public/chunks/create-new-password.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/dashboard.js
vendored
2
public/chunks/dashboard.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/database.js
vendored
2
public/chunks/database.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/dynamic-page.js
vendored
2
public/chunks/dynamic-page.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/environment-setup.js
vendored
2
public/chunks/environment-setup.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/files.js
vendored
2
public/chunks/files.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
public/chunks/forgotten-password.js
vendored
2
public/chunks/forgotten-password.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/installation-disclaimer.js
vendored
2
public/chunks/installation-disclaimer.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/invoices.js
vendored
2
public/chunks/invoices.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/landing-page.js
vendored
2
public/chunks/landing-page.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/not-found-shared.js
vendored
2
public/chunks/not-found-shared.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/page-edit.js
vendored
2
public/chunks/page-edit.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/pages.js
vendored
2
public/chunks/pages.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/plan-create.js
vendored
2
public/chunks/plan-create.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/plan-delete.js
vendored
2
public/chunks/plan-delete.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/plan-settings.js
vendored
2
public/chunks/plan-settings.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/plan-subscribers.js
vendored
2
public/chunks/plan-subscribers.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/plan.js
vendored
2
public/chunks/plan.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/plans.js
vendored
2
public/chunks/plans.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/profile.js
vendored
2
public/chunks/profile.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/purchase-code.js
vendored
2
public/chunks/purchase-code.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
public/chunks/settings-invoices.js
vendored
2
public/chunks/settings-invoices.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/settings-password.js
vendored
2
public/chunks/settings-password.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/settings-payment-methods.js
vendored
2
public/chunks/settings-payment-methods.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/settings-storage.js
vendored
2
public/chunks/settings-storage.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/settings-subscription.js
vendored
2
public/chunks/settings-subscription.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/settings.js
vendored
2
public/chunks/settings.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/setup-wizard.js
vendored
2
public/chunks/setup-wizard.js
vendored
@@ -1 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{556:function(e,t,r){"use strict";r.r(t);var n=r(7);function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var c={name:"SetupWizard",computed:function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},Object(n.b)(["config"])),mounted:function(){"setup-done"!==this.config.installation&&"quiet-update"!==this.config.installation||this.$router.push({name:"SignIn"})}},u=r(0),a=Object(u.a)(c,(function(){var e=this.$createElement;return(this._self._c||e)("router-view")}),[],!1,null,null,null);t.default=a.exports}}]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{oBQg:function(e,t,r){"use strict";r.r(t);var n=r("L2JU");function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var c={name:"SetupWizard",computed:function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},Object(n.b)(["config"])),mounted:function(){"setup-done"!==this.config.installation&&"quiet-update"!==this.config.installation||this.$router.push({name:"SignIn"})}},u=r("KHd+"),a=Object(u.a)(c,(function(){var e=this.$createElement;return(this._self._c||e)("router-view")}),[],!1,null,null,null);t.default=a.exports}}]);
|
||||
2
public/chunks/shared-files.js
vendored
2
public/chunks/shared-files.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/shared-page.js
vendored
2
public/chunks/shared-page.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/sign-in.js
vendored
2
public/chunks/sign-in.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/sign-up.js
vendored
2
public/chunks/sign-up.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/stripe-credentials.js
vendored
2
public/chunks/stripe-credentials.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/subscription-plans.js
vendored
2
public/chunks/subscription-plans.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/subscription-service.js
vendored
2
public/chunks/subscription-service.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/trash.js
vendored
2
public/chunks/trash.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/upgrade-billing.js
vendored
2
public/chunks/upgrade-billing.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/upgrade-plan.js
vendored
2
public/chunks/upgrade-plan.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/upgrade.js
vendored
2
public/chunks/upgrade.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/user-create.js
vendored
2
public/chunks/user-create.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/user-delete.js
vendored
2
public/chunks/user-delete.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/user-detail.js
vendored
2
public/chunks/user-detail.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/user-invoices.js
vendored
2
public/chunks/user-invoices.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/user-password.js
vendored
2
public/chunks/user-password.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/user-storage.js
vendored
2
public/chunks/user-storage.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/user-subscription.js
vendored
2
public/chunks/user-subscription.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/user.js
vendored
2
public/chunks/user.js
vendored
File diff suppressed because one or more lines are too long
2
public/chunks/users.js
vendored
2
public/chunks/users.js
vendored
File diff suppressed because one or more lines are too long
2
public/js/main.js
vendored
2
public/js/main.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,66 +1,66 @@
|
||||
{
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js",
|
||||
"/js/main.js": "/js/main.js",
|
||||
"/css/app.css": "/css/app.css",
|
||||
"/chunks/admin.js": "/chunks/admin.js",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js",
|
||||
"/chunks/app-appearance.js": "/chunks/app-appearance.js",
|
||||
"/chunks/app-billings.js": "/chunks/app-billings.js",
|
||||
"/chunks/app-email.js": "/chunks/app-email.js",
|
||||
"/chunks/app-index.js": "/chunks/app-index.js",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js",
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js",
|
||||
"/chunks/billings-detail.js": "/chunks/billings-detail.js",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js",
|
||||
"/chunks/database.js": "/chunks/database.js",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js",
|
||||
"/chunks/files.js": "/chunks/files.js",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js",
|
||||
"/chunks/landing-page.js": "/chunks/landing-page.js",
|
||||
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js",
|
||||
"/chunks/pages.js": "/chunks/pages.js",
|
||||
"/chunks/plan.js": "/chunks/plan.js",
|
||||
"/chunks/plan-create.js": "/chunks/plan-create.js",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js",
|
||||
"/chunks/plans.js": "/chunks/plans.js",
|
||||
"/chunks/profile.js": "/chunks/profile.js",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js",
|
||||
"/chunks/settings.js": "/chunks/settings.js",
|
||||
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js",
|
||||
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js",
|
||||
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js",
|
||||
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js",
|
||||
"/chunks/shared-files.js": "/chunks/shared-files.js",
|
||||
"/chunks/shared-page.js": "/chunks/shared-page.js",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js",
|
||||
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js",
|
||||
"/chunks/subscription-service.js": "/chunks/subscription-service.js",
|
||||
"/chunks/trash.js": "/chunks/trash.js",
|
||||
"/chunks/upgrade.js": "/chunks/upgrade.js",
|
||||
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js",
|
||||
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js",
|
||||
"/chunks/user.js": "/chunks/user.js",
|
||||
"/chunks/user-create.js": "/chunks/user-create.js",
|
||||
"/chunks/user-delete.js": "/chunks/user-delete.js",
|
||||
"/chunks/user-detail.js": "/chunks/user-detail.js",
|
||||
"/chunks/user-invoices.js": "/chunks/user-invoices.js",
|
||||
"/chunks/user-password.js": "/chunks/user-password.js",
|
||||
"/chunks/user-storage.js": "/chunks/user-storage.js",
|
||||
"/chunks/user-subscription.js": "/chunks/user-subscription.js",
|
||||
"/chunks/users.js": "/chunks/users.js"
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=adad12e7b42316bdd659",
|
||||
"/js/main.js": "/js/main.js?id=5399021dab4b9f990f4d",
|
||||
"/css/app.css": "/css/app.css?id=dbf49843b327d3936c06",
|
||||
"/chunks/admin.js": "/chunks/admin.js?id=5bd95ece632ca142f035",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=b181a9ba45f475b9e004",
|
||||
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=f77c9be4514e7ab0ad0e",
|
||||
"/chunks/app-billings.js": "/chunks/app-billings.js?id=24259b32506484062990",
|
||||
"/chunks/app-email.js": "/chunks/app-email.js?id=471301be8d4dbb371fa0",
|
||||
"/chunks/app-index.js": "/chunks/app-index.js?id=ded9a59aa4d4d8040637",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js?id=d1158ce36ac84d7fb317",
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js?id=c4a896c3218713699b17",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=8499d3cb5a2c547d3d69",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=f8769c14859175aad49b",
|
||||
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=410da17c566b388cb0a5",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js?id=153e8ac7ba24a14f2e1a",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=9e9d35c199787d991445",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js?id=4f379c21c8f1df14cda7",
|
||||
"/chunks/database.js": "/chunks/database.js?id=99736b26537c8bb61a33",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=2e3af103d13536c50757",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=48fa8bb643132a82bdaa",
|
||||
"/chunks/files.js": "/chunks/files.js?id=0a08eb40be8f2c511ded",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=a84f7a6d4e4e05af0701",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=54cf8dbd4d75fd0b2add",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js?id=c20b841c75005fdacde6",
|
||||
"/chunks/landing-page.js": "/chunks/landing-page.js?id=b69d1af44673ddfb69d3",
|
||||
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=286d18bed681c67e5330",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=2ff6bfeb6d9c43014d69",
|
||||
"/chunks/pages.js": "/chunks/pages.js?id=49a51fc783d155aa8132",
|
||||
"/chunks/plan.js": "/chunks/plan.js?id=bbea8c9e9f807d9cedc5",
|
||||
"/chunks/plan-create.js": "/chunks/plan-create.js?id=0149731ddb88c33b066d",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=e63e243dccb487fa18f5",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=83517dd417b8641c60c8",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=26e1aabafdc06d069fa3",
|
||||
"/chunks/plans.js": "/chunks/plans.js?id=0b1d2058ba59c955947b",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=9e3ff146e95d8a719add",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=696427718c821f482c94",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=51495831f7bbad060a00",
|
||||
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=007277c68fce4a7ce5e9",
|
||||
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=82cbe975767641ad178e",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=6e9b879329675433551d",
|
||||
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=9f6fdc546cfa5f98796e",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=9716c15688051b9c9b20",
|
||||
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=e4176c53674c2e6d440f",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855",
|
||||
"/chunks/shared-files.js": "/chunks/shared-files.js?id=bc0b14705784b1ff6c82",
|
||||
"/chunks/shared-page.js": "/chunks/shared-page.js?id=6c9bf5f496f4b8917fef",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=0c9fe096135be58283b6",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=eaa8bc2819a9cc19dbc7",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=d384dddfe76d89164df3",
|
||||
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=d4434431a9c8fa3ffc2b",
|
||||
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=175f558c3e09887846a5",
|
||||
"/chunks/trash.js": "/chunks/trash.js?id=e00ce8bde9ea638f5049",
|
||||
"/chunks/upgrade.js": "/chunks/upgrade.js?id=03eccfa25c668325efd0",
|
||||
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=4921e1ce22bfdab9f014",
|
||||
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7b02fafcca0029762a66",
|
||||
"/chunks/user.js": "/chunks/user.js?id=d842e0d6859c94caa23d",
|
||||
"/chunks/user-create.js": "/chunks/user-create.js?id=4735bda3b876200f0511",
|
||||
"/chunks/user-delete.js": "/chunks/user-delete.js?id=cea21a2d091f1f02e179",
|
||||
"/chunks/user-detail.js": "/chunks/user-detail.js?id=b3f5d20c34a5b0bf9ff6",
|
||||
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=b73fa5a127374d1de1de",
|
||||
"/chunks/user-password.js": "/chunks/user-password.js?id=466b113e32397b2f2f33",
|
||||
"/chunks/user-storage.js": "/chunks/user-storage.js?id=7e19cc06447c776ce504",
|
||||
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=45c971c8c4912d44bc42",
|
||||
"/chunks/users.js": "/chunks/users.js?id=362b167df913626d3d92"
|
||||
}
|
||||
|
||||
6
public/phpinfo.php
Normal file
6
public/phpinfo.php
Normal file
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
// Show all information, defaults to INFO_ALL
|
||||
phpinfo();
|
||||
|
||||
?>
|
||||
@@ -6,6 +6,9 @@
|
||||
|
||||
<div id="application-wrapper" v-if="! isGuestLayout">
|
||||
|
||||
<!-- Full File Preview -->
|
||||
<FileFullPreview />
|
||||
|
||||
<!--Mobile Navigation-->
|
||||
<MobileNavigation />
|
||||
|
||||
@@ -45,6 +48,7 @@
|
||||
|
||||
<script>
|
||||
import ToastrWrapper from '@/components/Others/Notifications/ToastrWrapper'
|
||||
import FileFullPreview from '@/components/FilesView/FileFullPreview'
|
||||
import MobileNavigation from '@/components/Others/MobileNavigation'
|
||||
import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
|
||||
import MobileMenu from '@/components/FilesView/MobileMenu'
|
||||
@@ -64,6 +68,7 @@
|
||||
components: {
|
||||
MobileNavigation,
|
||||
CookieDisclaimer,
|
||||
FileFullPreview,
|
||||
ToastrWrapper,
|
||||
ShareCreate,
|
||||
MobileMenu,
|
||||
@@ -80,27 +85,27 @@
|
||||
]),
|
||||
isGuestLayout() {
|
||||
return (includes([
|
||||
'InstallationDisclaimer',
|
||||
'SubscriptionService',
|
||||
'StripeCredentials',
|
||||
'SubscriptionPlans',
|
||||
'ForgottenPassword',
|
||||
'CreateNewPassword',
|
||||
'EnvironmentSetup',
|
||||
'VerifyByPassword',
|
||||
'SaaSLandingPage',
|
||||
'BillingsDetail',
|
||||
'NotFoundShared',
|
||||
'AdminAccount',
|
||||
'PurchaseCode',
|
||||
'DynamicPage',
|
||||
'SharedPage',
|
||||
'ContactUs',
|
||||
'AppSetup',
|
||||
'Database',
|
||||
'Upgrade',
|
||||
'SignIn',
|
||||
'SignUp',
|
||||
'InstallationDisclaimer',
|
||||
'SubscriptionService',
|
||||
'StripeCredentials',
|
||||
'SubscriptionPlans',
|
||||
'ForgottenPassword',
|
||||
'CreateNewPassword',
|
||||
'EnvironmentSetup',
|
||||
'VerifyByPassword',
|
||||
'SaaSLandingPage',
|
||||
'BillingsDetail',
|
||||
'NotFoundShared',
|
||||
'AdminAccount',
|
||||
'PurchaseCode',
|
||||
'DynamicPage',
|
||||
'SharedPage',
|
||||
'ContactUs',
|
||||
'AppSetup',
|
||||
'Database',
|
||||
'Upgrade',
|
||||
'SignIn',
|
||||
'SignUp',
|
||||
], this.$route.name)
|
||||
)
|
||||
}
|
||||
@@ -147,7 +152,7 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,366 +1,411 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar">
|
||||
<div class="toolbar-wrapper">
|
||||
<div id="desktop-toolbar">
|
||||
<div class="toolbar-wrapper">
|
||||
<!-- Go back-->
|
||||
<div class="toolbar-go-back" v-if="homeDirectory">
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<chevron-left-icon
|
||||
size="17"
|
||||
:class="{ 'is-active': browseHistory.length > 1 }"
|
||||
class="icon-back"
|
||||
></chevron-left-icon>
|
||||
|
||||
<!-- Go back-->
|
||||
<div class="toolbar-go-back" v-if="homeDirectory">
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<chevron-left-icon size="17" :class="{'is-active': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
|
||||
<span class="back-directory-title">
|
||||
{{ directoryName }}
|
||||
</span>
|
||||
|
||||
<span class="back-directory-title">
|
||||
{{ directoryName }}
|
||||
</span>
|
||||
|
||||
<span @click.stop="folderActions" v-if="browseHistory.length > 1 && $isThisLocation(['base', 'public'])" class="folder-options" id="folder-actions">
|
||||
<more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools-->
|
||||
<div class="toolbar-tools">
|
||||
<!--Search bar-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<SearchBar/>
|
||||
</div>
|
||||
|
||||
<!--Files controlls-->
|
||||
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
|
||||
<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 class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
|
||||
<ToolbarButton
|
||||
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-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButton
|
||||
:source="preview"
|
||||
:action="$t('actions.preview')"
|
||||
@click.native="$store.dispatch('changePreviewType')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{ active: fileInfoVisible }"
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
source="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
@click.stop="folderActions"
|
||||
v-if="
|
||||
browseHistory.length > 1 && $isThisLocation(['base', 'public'])
|
||||
"
|
||||
class="folder-options"
|
||||
id="folder-actions"
|
||||
>
|
||||
<more-horizontal-icon
|
||||
size="14"
|
||||
class="icon-more"
|
||||
></more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
<UploadProgress />
|
||||
</div>
|
||||
|
||||
<!-- Tools-->
|
||||
<div class="toolbar-tools">
|
||||
<!--Search bar-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<SearchBar />
|
||||
</div>
|
||||
|
||||
<!--Files controlls-->
|
||||
<div
|
||||
class="toolbar-button-wrapper"
|
||||
v-if="$checkPermission(['master', 'editor'])"
|
||||
>
|
||||
<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
|
||||
class="toolbar-button-wrapper"
|
||||
v-if="$checkPermission(['master', 'editor'])"
|
||||
>
|
||||
<ToolbarButton
|
||||
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-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButton
|
||||
:source="preview"
|
||||
:action="$t('actions.preview')"
|
||||
@click.native="$store.dispatch('changePreviewType')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{ active: fileInfoVisible }"
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
source="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
|
||||
import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
|
||||
import UploadProgress from '@/components/FilesView/UploadProgress'
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
import {last} from 'lodash'
|
||||
import ToolbarButtonUpload from "@/components/FilesView/ToolbarButtonUpload";
|
||||
import { ChevronLeftIcon, MoreHorizontalIcon } from "vue-feather-icons";
|
||||
import UploadProgress from "@/components/FilesView/UploadProgress";
|
||||
import ToolbarButton from "@/components/FilesView/ToolbarButton";
|
||||
import SearchBar from "@/components/FilesView/SearchBar";
|
||||
import { mapGetters } from "vuex";
|
||||
import { events } from "@/bus";
|
||||
import { last } from "lodash";
|
||||
|
||||
export default {
|
||||
name: 'ToolBar',
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
UploadProgress,
|
||||
ToolbarButton,
|
||||
SearchBar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType',
|
||||
'fileInfoVisible',
|
||||
'fileInfoDetail',
|
||||
'currentFolder',
|
||||
'browseHistory',
|
||||
'homeDirectory',
|
||||
]),
|
||||
hasCapacity() {
|
||||
export default {
|
||||
name: "ToolBar",
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
UploadProgress,
|
||||
ToolbarButton,
|
||||
SearchBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"FilePreviewType",
|
||||
"fileInfoVisible",
|
||||
"fileInfoDetail",
|
||||
"currentFolder",
|
||||
"browseHistory",
|
||||
"homeDirectory",
|
||||
]),
|
||||
hasCapacity() {
|
||||
// Check if set storage limitation
|
||||
if (!this.$store.getters.config.storageLimit) return true;
|
||||
|
||||
// Check if set storage limitation
|
||||
if (! this.$store.getters.config.storageLimit)
|
||||
return true
|
||||
// Check if is loaded user
|
||||
if (!this.$store.getters.user) return true;
|
||||
|
||||
// Check if is loaded user
|
||||
if (! this.$store.getters.user )
|
||||
return true
|
||||
// Check if user has storage
|
||||
return (
|
||||
this.$store.getters.user.relationships.storage.data.attributes.used <=
|
||||
100
|
||||
);
|
||||
},
|
||||
directoryName() {
|
||||
return this.currentFolder
|
||||
? this.currentFolder.name
|
||||
: this.homeDirectory.name;
|
||||
},
|
||||
preview() {
|
||||
return this.FilePreviewType === "list" ? "th" : "th-list";
|
||||
},
|
||||
canCreateFolderInView() {
|
||||
return !this.$isThisLocation(["base", "public"]);
|
||||
},
|
||||
canDeleteInView() {
|
||||
return !this.$isThisLocation([
|
||||
"trash",
|
||||
"trash-root",
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
canUploadInView() {
|
||||
return !this.$isThisLocation(["base", "public"]);
|
||||
},
|
||||
canMoveInView() {
|
||||
return !this.$isThisLocation([
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation([
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
// Get previous folder
|
||||
let previousFolder = last(this.browseHistory);
|
||||
|
||||
// Check if user has storage
|
||||
return this.$store.getters.user.relationships.storage.data.attributes.used <= 100
|
||||
},
|
||||
directoryName() {
|
||||
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
|
||||
},
|
||||
preview() {
|
||||
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
|
||||
},
|
||||
canCreateFolderInView() {
|
||||
return ! this.$isThisLocation(['base', 'public'])
|
||||
},
|
||||
canDeleteInView() {
|
||||
return ! this.$isThisLocation(['trash', 'trash-root', 'base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
},
|
||||
canUploadInView() {
|
||||
return ! this.$isThisLocation(['base', 'public'])
|
||||
},
|
||||
canMoveInView() {
|
||||
return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
},
|
||||
canShareInView() {
|
||||
return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
// Get previous folder
|
||||
let previousFolder = last(this.browseHistory)
|
||||
if (!previousFolder) return;
|
||||
|
||||
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() {
|
||||
events.$emit('items:delete')
|
||||
},
|
||||
createFolder() {
|
||||
this.$createFolder()
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
|
||||
} else {
|
||||
events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
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() {
|
||||
events.$emit("items:delete");
|
||||
},
|
||||
createFolder() {
|
||||
this.$createFolder();
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail) {
|
||||
//ADD BY M
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-edit",
|
||||
item: this.fileInfoDetail,
|
||||
});
|
||||
} else {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-create",
|
||||
item: this.fileInfoDetail,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.toolbar-wrapper {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.toolbar-wrapper {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
.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;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-back {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
@include transition(150ms);
|
||||
.icon-more {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
.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 {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
text-align: right;
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
|
||||
&.active {
|
||||
/deep/ svg {
|
||||
line,
|
||||
circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
&.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar-position {
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.toolbar-go-back .back-directory-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
text-align: right;
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@media only screen and (max-width: 960px) {
|
||||
#desktop-toolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
|
||||
&.active {
|
||||
/deep/ svg {
|
||||
line, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.toolbar-go-back {
|
||||
.back-directory-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.toolbar-go-back .back-directory-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
#desktop-toolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
|
||||
.back-directory-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.folder-options {
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
.folder-options {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
96
resources/js/components/FilesView/FileFullPreview.vue
Normal file
96
resources/js/components/FilesView/FileFullPreview.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="showFullPreview"
|
||||
class="file-full-preview-wrapper"
|
||||
id="fileFullPreview"
|
||||
ref="filePreview"
|
||||
tabindex="-1"
|
||||
@click="closeContextMenu"
|
||||
@keydown.esc=";(showFullPreview = false), hideContextMenu()"
|
||||
@keydown.right="next"
|
||||
@keydown.left="prev"
|
||||
>
|
||||
<FilePreviewNavigationPanel />
|
||||
<MediaFullPreview />
|
||||
<FilePreviewActions />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '@/bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import MediaFullPreview from '@/components/FilesView/MediaFullPreview'
|
||||
import FilePreviewActions from '@/components/FilesView/FilePreviewActions'
|
||||
import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel'
|
||||
|
||||
export default {
|
||||
name: 'FileFullPreview',
|
||||
components: {
|
||||
MediaFullPreview,
|
||||
FilePreviewNavigationPanel,
|
||||
FilePreviewActions
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFullPreview: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeContextMenu(event) {
|
||||
if ((event.target.parentElement.id || event.target.id) === 'fast-preview-menu') {
|
||||
return
|
||||
} else {
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
}
|
||||
},
|
||||
next: function() {
|
||||
events.$emit('filePreviewAction:next')
|
||||
},
|
||||
prev: function() {
|
||||
events.$emit('filePreviewAction:prev')
|
||||
},
|
||||
hideContextMenu() {
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
}
|
||||
},
|
||||
|
||||
updated() {
|
||||
//Focus file preview for key binding
|
||||
if (this.showFullPreview) {
|
||||
this.$refs.filePreview.focus()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
events.$on('fileFullPreview:show', () => {
|
||||
this.showFullPreview = true
|
||||
})
|
||||
events.$on('fileFullPreview:hide', () => {
|
||||
this.showFullPreview = false
|
||||
|
||||
events.$emit('hide:mobile-navigation')
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
|
||||
.file-full-preview-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-full-preview-wrapper {
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -101,9 +101,19 @@
|
||||
isFile() {
|
||||
return this.data.type !== 'folder' && this.data.type !== 'image'
|
||||
},
|
||||
isPdf() {
|
||||
return this.data.mimetype === 'pdf'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
},
|
||||
isVideo() {
|
||||
return this.data.type === 'video'
|
||||
},
|
||||
isAudio() {
|
||||
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
|
||||
return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
|
||||
},
|
||||
canEditName() {
|
||||
return !this.$isMobile()
|
||||
&& !this.$isThisLocation(['trash', 'trash-root'])
|
||||
@@ -166,6 +176,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
if (this.$isMobile()) {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
events.$emit('fileFullPreview:show')
|
||||
}
|
||||
}
|
||||
|
||||
// Load file info detail
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
|
||||
@@ -180,11 +196,11 @@
|
||||
return
|
||||
},
|
||||
goToItem() {
|
||||
if (this.isImage) {
|
||||
this.$openImageOnNewTab(this.data.file_url)
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
events.$emit('fileFullPreview:show')
|
||||
}
|
||||
|
||||
if (this.isFile) {
|
||||
if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
|
||||
this.$downloadFile(
|
||||
this.data.file_url,
|
||||
this.data.name + '.' + this.data.mimetype
|
||||
|
||||
@@ -1,473 +1,456 @@
|
||||
<template>
|
||||
<div
|
||||
class="file-wrapper"
|
||||
@click.stop="clickedItem"
|
||||
@dblclick="goToItem"
|
||||
spellcheck="false"
|
||||
>
|
||||
<!--List preview-->
|
||||
<div
|
||||
:draggable="canDrag"
|
||||
@dragstart="$emit('dragstart')"
|
||||
@drop="
|
||||
<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
|
||||
<!--List preview-->
|
||||
<div
|
||||
:draggable="canDrag"
|
||||
@dragstart="$emit('dragstart')"
|
||||
@drop="
|
||||
$emit('drop')
|
||||
area = false
|
||||
"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent="dragEnter"
|
||||
class="file-item"
|
||||
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
|
||||
>
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile" class="file-icon-text">
|
||||
{{ data.mimetype | limitCharacters }}
|
||||
</span>
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent="dragEnter"
|
||||
class="file-item"
|
||||
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
|
||||
>
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile" class="file-icon-text">
|
||||
{{ data.mimetype | limitCharacters }}
|
||||
</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
|
||||
<!--Image thumbnail-->
|
||||
<img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name" />
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
|
||||
</div>
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
<!--Name-->
|
||||
<b
|
||||
ref="name"
|
||||
@input="renameItem"
|
||||
:contenteditable="canEditName"
|
||||
class="name"
|
||||
>
|
||||
{{ itemName }}
|
||||
</b>
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
<!--Name-->
|
||||
<b ref="name" @input="renameItem" :contenteditable="canEditName" class="name">
|
||||
{{ itemName }}
|
||||
</b>
|
||||
|
||||
<div class="item-info">
|
||||
<div class="item-info">
|
||||
<!--Shared Icon-->
|
||||
<div v-if="$checkPermission('master') && data.shared" class="item-shared">
|
||||
<link-icon size="12" class="shared-icon"></link-icon>
|
||||
</div>
|
||||
|
||||
<!--Shared Icon-->
|
||||
<div v-if="$checkPermission('master') && data.shared" class="item-shared">
|
||||
<link-icon size="12" class="shared-icon"></link-icon>
|
||||
</div>
|
||||
<!--Participant owner Icon-->
|
||||
<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
</div>
|
||||
|
||||
<!--Participant owner Icon-->
|
||||
<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
</div>
|
||||
<!--Filesize and timestamp-->
|
||||
<span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
|
||||
|
||||
<!--Filesize and timestamp-->
|
||||
<span v-if="! isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
|
||||
<!--Folder item counts-->
|
||||
<span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Folder item counts-->
|
||||
<span v-if="isFolder" class="item-length">
|
||||
{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Go Next icon-->
|
||||
<div class="actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder )">
|
||||
<!--Go Next icon-->
|
||||
<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder)">
|
||||
<span @click.stop="showItemActions" class="show-actions">
|
||||
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
|
||||
import {debounce} from 'lodash'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
|
||||
import { debounce } from 'lodash'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileItemList',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['FilePreviewType']),
|
||||
isFolder() {
|
||||
return this.data.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type !== 'folder' && this.data.type !== 'image'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
},
|
||||
canEditName() {
|
||||
return !this.$isMobile()
|
||||
&& !this.$isThisLocation(['trash', 'trash-root'])
|
||||
&& !this.$checkPermission('visitor')
|
||||
&& !(this.sharedDetail && this.sharedDetail.type === 'file')
|
||||
},
|
||||
canDrag() {
|
||||
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
|
||||
},
|
||||
timeStamp() {
|
||||
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
|
||||
},
|
||||
folderItems() {
|
||||
return this.data.deleted_at ? this.data.trashed_items : this.data.items
|
||||
},
|
||||
isDeleted() {
|
||||
return this.data.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
limitCharacters(str) {
|
||||
export default {
|
||||
name: 'FileItemList',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
LinkIcon
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['FilePreviewType']),
|
||||
isFolder() {
|
||||
return this.data.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type !== 'folder' && this.data.type !== 'image'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
},
|
||||
isPdf() {
|
||||
return this.data.mimetype === 'pdf'
|
||||
},
|
||||
isVideo() {
|
||||
return this.data.type === 'video'
|
||||
},
|
||||
isAudio() {
|
||||
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
|
||||
return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
|
||||
},
|
||||
canEditName() {
|
||||
return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
|
||||
},
|
||||
canDrag() {
|
||||
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
|
||||
},
|
||||
timeStamp() {
|
||||
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at
|
||||
},
|
||||
folderItems() {
|
||||
return this.data.deleted_at ? this.data.trashed_items : this.data.items
|
||||
},
|
||||
isDeleted() {
|
||||
return this.data.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
limitCharacters(str) {
|
||||
if (str.length > 3) {
|
||||
return str.substring(0, 3) + '...'
|
||||
} else {
|
||||
return str.substring(0, 3)
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isClicked: false,
|
||||
area: false,
|
||||
itemName: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
// Load file info detail
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
|
||||
if (str.length > 3) {
|
||||
return str.substring(0, 3) + '...';
|
||||
} else {
|
||||
return str.substring(0, 3);
|
||||
}
|
||||
events.$emit('mobileMenu:show')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isClicked: false,
|
||||
area: false,
|
||||
itemName: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
// Load file info detail
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
clickedItem(e) {
|
||||
events.$emit('contextMenu:hide')
|
||||
events.$emit('fileItem:deselect')
|
||||
|
||||
//this.isClicked = true
|
||||
// Set clicked item
|
||||
this.isClicked = true
|
||||
|
||||
events.$emit('mobileMenu:show')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
// Open in mobile version on first click
|
||||
if (this.$isMobile() && this.isFolder) {
|
||||
// Go to folder
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
|
||||
}
|
||||
}
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
clickedItem(e) {
|
||||
events.$emit('contextMenu:hide')
|
||||
events.$emit('fileItem:deselect')
|
||||
if (this.$isMobile()) {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
events.$emit('fileFullPreview:show')
|
||||
}
|
||||
}
|
||||
|
||||
// Set clicked item
|
||||
this.isClicked = true
|
||||
// Load file info detail
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
|
||||
// Open in mobile version on first click
|
||||
if (this.$isMobile() && this.isFolder) {
|
||||
// Get target classname
|
||||
let itemClass = e.target.className
|
||||
|
||||
// Go to folder
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
|
||||
}
|
||||
}
|
||||
if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
|
||||
},
|
||||
goToItem() {
|
||||
if (this.isImage || this.isVideo || this.isAudio) {
|
||||
events.$emit('fileFullPreview:show')
|
||||
}
|
||||
|
||||
// Load file info detail
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
|
||||
this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
|
||||
}
|
||||
|
||||
// Get target classname
|
||||
let itemClass = e.target.className
|
||||
if (this.isFolder) {
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
|
||||
}
|
||||
}
|
||||
},
|
||||
renameItem: debounce(function(e) {
|
||||
// Prevent submit empty string
|
||||
if (e.target.innerText.trim() === '') return
|
||||
|
||||
if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass))
|
||||
return
|
||||
},
|
||||
goToItem() {
|
||||
if (this.isImage) {
|
||||
this.$openImageOnNewTab(this.data.file_url)
|
||||
}
|
||||
this.$store.dispatch('renameItem', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
this.itemName = this.data.name
|
||||
|
||||
if (this.isFile) {
|
||||
this.$downloadFile(
|
||||
this.data.file_url,
|
||||
this.data.name + '.' + this.data.mimetype
|
||||
)
|
||||
}
|
||||
events.$on('fileItem:deselect', () => {
|
||||
// Deselect file
|
||||
this.isClicked = false
|
||||
})
|
||||
|
||||
if (this.isFolder) {
|
||||
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
|
||||
}
|
||||
}
|
||||
},
|
||||
renameItem: debounce(function (e) {
|
||||
|
||||
// Prevent submit empty string
|
||||
if (e.target.innerText.trim() === '') return
|
||||
|
||||
this.$store.dispatch('renameItem', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
this.itemName = this.data.name
|
||||
|
||||
events.$on('fileItem:deselect', () => {
|
||||
// Deselect file
|
||||
this.isClicked = false
|
||||
})
|
||||
|
||||
// Change item name
|
||||
events.$on('change:name', (item) => {
|
||||
if (this.data.unique_id == item.unique_id) this.itemName = item.name
|
||||
})
|
||||
},
|
||||
}
|
||||
// Change item name
|
||||
events.$on('change:name', (item) => {
|
||||
if (this.data.unique_id == item.unique_id) this.itemName = item.name
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 6px 12px;
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 6px 12px;
|
||||
|
||||
.icon-action {
|
||||
@include font-size(14);
|
||||
.icon-action {
|
||||
@include font-size(14);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-info {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
.item-info {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.item-shared {
|
||||
display: inline-block;
|
||||
.item-shared {
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
@include font-size(12);
|
||||
font-weight: 400;
|
||||
color: $theme;
|
||||
}
|
||||
.label {
|
||||
@include font-size(12);
|
||||
font-weight: 400;
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.shared-icon {
|
||||
vertical-align: middle;
|
||||
.shared-icon {
|
||||
vertical-align: middle;
|
||||
|
||||
path, circle, line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
path,
|
||||
circle,
|
||||
line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
|
||||
&[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
&[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(52);
|
||||
.folder-icon {
|
||||
@include font-size(52);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
|
||||
&.is-dragenter {
|
||||
border: 2px dashed $theme;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&.is-dragenter {
|
||||
border: 2px dashed $theme;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-wrapper {
|
||||
.icon-item {
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
.folder-icon {
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
.file-icon {
|
||||
.file-item {
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.file-item {
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
78
resources/js/components/FilesView/FilePreviewActions.vue
Normal file
78
resources/js/components/FilesView/FilePreviewActions.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div v-if="filteredFiles.length > 1">
|
||||
<div @click.prevent="prev" class="prev">
|
||||
<chevron-left-icon size="17"></chevron-left-icon>
|
||||
</div>
|
||||
|
||||
<div @click.prevent="next" class="next">
|
||||
<chevron-right-icon size="17"></chevron-right-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '@/bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
|
||||
export default {
|
||||
name: 'FilePreviewActions',
|
||||
components: {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data']),
|
||||
|
||||
filteredFiles() {
|
||||
let filteredData = []
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
filteredData.push(element)
|
||||
}
|
||||
})
|
||||
return filteredData
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
next: function() {
|
||||
events.$emit('filePreviewAction:next')
|
||||
},
|
||||
prev: function() {
|
||||
events.$emit('filePreviewAction:prev')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
.prev,
|
||||
.next {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 53.5%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $text;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
filter: drop-shadow(0px 1px 0 rgba(255, 255, 255, 1));
|
||||
padding: 10px;
|
||||
}
|
||||
.next {
|
||||
right: 0;
|
||||
}
|
||||
.prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.prev,
|
||||
.next {
|
||||
color: $light-text;
|
||||
filter: drop-shadow(0px 1px 0 rgba(17, 19, 20, 1));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
334
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
Normal file
334
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="navigation-panel" v-if="fileInfoDetail">
|
||||
<div class="name-wrapper">
|
||||
<x-icon @click="closeFullPreview" size="22" class="icon-close"></x-icon>
|
||||
<div class="name-count-wrapper">
|
||||
<p class="title">{{ formatedName }}</p>
|
||||
<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + filteredFiles.length }}) </span>
|
||||
</div>
|
||||
<span id="fast-preview-menu" class="fast-menu-icon" @click="menuOpen" v-if="$checkPermission(['master', 'editor'])">
|
||||
<more-horizontal-icon class="more-icon" size="14"> </more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="created-at-wrapper">
|
||||
<p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
|
||||
</div>
|
||||
<div class="navigation-icons">
|
||||
<div class="navigation-tool-wrapper">
|
||||
<ToolbarButton source="download" class="mobile-hide" @click.native="downloadItem" :action="$t('actions.download')" />
|
||||
<ToolbarButton source="share" class="mobile-hide" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem" />
|
||||
<ToolbarButton v-if="this.fileInfoDetail.type === 'image'" source="print" :action="$t('actions.print')" @click.native="printMethod()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '@/bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons'
|
||||
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
|
||||
export default {
|
||||
name: 'FilePreviewNavigationPanel',
|
||||
components: { ToolbarButton, XIcon, MoreHorizontalIcon },
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data']),
|
||||
filteredFiles() {
|
||||
let files = []
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
files.push(element)
|
||||
}
|
||||
})
|
||||
return files
|
||||
},
|
||||
showingImageIndex() {
|
||||
let activeIndex = ''
|
||||
this.filteredFiles.filter((element, index) => {
|
||||
if (element.unique_id == this.fileInfoDetail.unique_id) {
|
||||
activeIndex = index + 1
|
||||
}
|
||||
})
|
||||
return activeIndex
|
||||
},
|
||||
|
||||
formatedName() {
|
||||
//Name length handling
|
||||
let name = this.fileInfoDetail.name
|
||||
let windowWidth = window.innerWidth
|
||||
let nameLength
|
||||
if (windowWidth < 410) {
|
||||
nameLength = 18
|
||||
} else {
|
||||
nameLength = 27
|
||||
}
|
||||
if (name.lastIndexOf('.') > -1) {
|
||||
return _.truncate(name.substring(0, name.lastIndexOf('.')), {
|
||||
length: nameLength
|
||||
})
|
||||
} else {
|
||||
return _.truncate(name, {
|
||||
length: nameLength
|
||||
})
|
||||
}
|
||||
},
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showContextMenu: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
printMethod() {
|
||||
var tab = document.getElementById('image')
|
||||
var win = window.open('', '', 'height=700,width=700')
|
||||
win.document.write(tab.outerHTML)
|
||||
win.document.close()
|
||||
win.print()
|
||||
},
|
||||
downloadItem() {
|
||||
// Download file
|
||||
this.$downloadFile(this.fileInfoDetail.file_url, this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype)
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail.shared) {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-edit',
|
||||
item: this.fileInfoDetail
|
||||
})
|
||||
} else {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-create',
|
||||
item: this.fileInfoDetail
|
||||
})
|
||||
}
|
||||
},
|
||||
menuOpen() {
|
||||
if (this.$isMobile()) {
|
||||
events.$emit('mobileMenu:show', 'showFromMediaPreview')
|
||||
} else {
|
||||
events.$emit('showContextMenuPreview:show', this.fileInfoDetail)
|
||||
}
|
||||
},
|
||||
closeFullPreview() {
|
||||
events.$emit('fileFullPreview:hide')
|
||||
events.$emit('showContextMenuPreview:hide')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.name-wrapper {
|
||||
width: 33%;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
|
||||
.name-count-wrapper {
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
|
||||
.file-count {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
align-self: center;
|
||||
color: $text;
|
||||
}
|
||||
.title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $text;
|
||||
}
|
||||
@media (max-width: 570px) {
|
||||
.title,
|
||||
.file-count {
|
||||
@include font-size(17);
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-close {
|
||||
min-width: 22px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 6px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
color: $text;
|
||||
@include transition(150ms);
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fast-menu-icon {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
.more-icon {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.context-menu {
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
top: 29px;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.created-at-wrapper {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include font-size(11);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-icons {
|
||||
width: 33%;
|
||||
text-align: right;
|
||||
|
||||
.navigation-tool-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-panel {
|
||||
height: 63px;
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
|
||||
.context-menu {
|
||||
|
||||
.name-wrapper {
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation-panel {
|
||||
height: 53px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.created-at-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.name-wrapper {
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.navigation-panel {
|
||||
background-color: $dark_mode_background;
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
.icon-close {
|
||||
color: $dark_mode_text_primary;
|
||||
&:hover {
|
||||
background-color: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
|
||||
.fast-menu-icon:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
|
||||
.name-wrapper {
|
||||
.title,
|
||||
.file-count {
|
||||
color: $dark_mode_text_primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-icons {
|
||||
.button:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
239
resources/js/components/FilesView/MediaFullPreview.vue
Normal file
239
resources/js/components/FilesView/MediaFullPreview.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="media-full-preview" id="mediaPreview" v-if="this.isMedia && fileInfoDetail">
|
||||
<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
|
||||
<div class="file-wrapper">
|
||||
<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail.type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
|
||||
<img v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
|
||||
<div class="video-wrapper" v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
|
||||
<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <spinner class="loading-spinner" v-if="!loaded && fileInfoDetail.type === 'image'" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '@/bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
|
||||
export default {
|
||||
name: 'MediaFullPreview',
|
||||
components: { ToolbarButton, Spinner },
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'data']),
|
||||
|
||||
isMobileDevice() {
|
||||
return this.$isMobile()
|
||||
},
|
||||
|
||||
currentFile: function() {
|
||||
return this.sliderFile[Math.abs(this.currentIndex) % this.sliderFile.length]
|
||||
},
|
||||
isMedia() {
|
||||
return this.fileInfoDetail === 'image' || 'video' || 'audio'
|
||||
},
|
||||
|
||||
canShareInView() {
|
||||
return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 1,
|
||||
sliderFile: []
|
||||
// loaded: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
sliderFile() {
|
||||
//Close file preview after delete all items
|
||||
if (this.sliderFile.length == 0) {
|
||||
events.$emit('fileFullPreview:hide')
|
||||
}
|
||||
},
|
||||
currentFile() {
|
||||
//Handle actual view image in fileInfoDetail
|
||||
if (this.fileInfoDetail) {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
|
||||
events.$emit('actualShowingImage:ContextMenu', this.currentFile)
|
||||
// this.loaded = false
|
||||
}
|
||||
},
|
||||
fileInfoDetail() {
|
||||
//File delete handling - show next image after delete one
|
||||
if (!this.fileInfoDetail) {
|
||||
this.currentIndex = this.currentIndex - 1
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
|
||||
this.sliderFile = []
|
||||
this.filteredFiles()
|
||||
}
|
||||
},
|
||||
data(newValue, oldValue) {
|
||||
//Move item handling
|
||||
if (newValue != oldValue) {
|
||||
this.sliderFile = []
|
||||
this.filteredFiles()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filteredFiles() {
|
||||
this.data.filter((element) => {
|
||||
if (element.type == this.fileInfoDetail.type) {
|
||||
this.sliderFile.push(element)
|
||||
}
|
||||
})
|
||||
this.choseActiveFile()
|
||||
},
|
||||
// onLoaded(event) {
|
||||
// this.loaded = true
|
||||
// },
|
||||
choseActiveFile() {
|
||||
this.sliderFile.forEach((element, index) => {
|
||||
if (element.unique_id == this.fileInfoDetail.unique_id) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.sliderFile.length > 1) {
|
||||
events.$on('filePreviewAction:next', () => {
|
||||
this.currentIndex += 1
|
||||
this.slideType = 'next'
|
||||
if (this.currentIndex > this.sliderFile.length - 1) {
|
||||
this.currentIndex = 0
|
||||
}
|
||||
})
|
||||
events.$on('filePreviewAction:prev', () => {
|
||||
this.slideType = 'prev'
|
||||
this.currentIndex -= 1
|
||||
if (this.currentIndex < 0) {
|
||||
this.currentIndex = this.sliderFile.length - 1
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.filteredFiles()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.media-full-preview {
|
||||
height: calc(100% - 72px);
|
||||
top: 72px;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.navigation-panel {
|
||||
width: 100%;
|
||||
height: 7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
justify-content: space-between;
|
||||
background-color: $light-background;
|
||||
color: $text;
|
||||
.icon-close {
|
||||
color: $text;
|
||||
@include font-size(21);
|
||||
&:hover {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-wrapper-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30px 0px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
|
||||
.file-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.file-shadow {
|
||||
box-shadow: 0 8px 40px rgba(17, 26, 52, 0.15);
|
||||
}
|
||||
|
||||
.file {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.audio {
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
max-width: 1080px;
|
||||
max-height: 100%;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
& {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2560px) {
|
||||
& {
|
||||
max-width: 1080px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 2560px) and (max-width: 3840px) {
|
||||
& {
|
||||
max-width: 1440px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 3840px) {
|
||||
& {
|
||||
max-width: 2160px;
|
||||
}
|
||||
}
|
||||
.video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-wrapper-preview {
|
||||
background-color: $dark_mode_background;
|
||||
.file-wrapper {
|
||||
.file-shadow {
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,75 +1,108 @@
|
||||
<template>
|
||||
<button class="button" :title="action">
|
||||
<corner-down-right-icon v-if="source === 'move'" size="19"></corner-down-right-icon>
|
||||
<folder-plus-icon v-if="source === 'folder-plus'" size="19"></folder-plus-icon>
|
||||
<trash-2-icon v-if="source === 'trash'" size="19"></trash-2-icon>
|
||||
<list-icon v-if="source === 'th-list'" size="19"></list-icon>
|
||||
<info-icon v-if="source === 'info'" size="19"></info-icon>
|
||||
<grid-icon v-if="source === 'th'" size="19"></grid-icon>
|
||||
<link-icon v-if="source === 'share'" size="19"></link-icon>
|
||||
</button>
|
||||
<button class="button" :title="action">
|
||||
<corner-down-right-icon
|
||||
v-if="source === 'move'"
|
||||
size="19"
|
||||
></corner-down-right-icon>
|
||||
<download-cloud-icon
|
||||
v-if="source === 'download'"
|
||||
size="19"
|
||||
></download-cloud-icon>
|
||||
<folder-plus-icon
|
||||
v-if="source === 'folder-plus'"
|
||||
size="19"
|
||||
></folder-plus-icon>
|
||||
<edit-2-icon v-if="source === 'rename'" size="19"></edit-2-icon>
|
||||
<printer-icon v-if="source === 'print'" size="19"></printer-icon>
|
||||
<trash-2-icon v-if="source === 'trash'" size="19"></trash-2-icon>
|
||||
<list-icon v-if="source === 'th-list'" size="19"></list-icon>
|
||||
<info-icon v-if="source === 'info'" size="19"></info-icon>
|
||||
<grid-icon v-if="source === 'th'" size="19"></grid-icon>
|
||||
<link-icon v-if="source === 'share'" size="19"></link-icon>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {FolderPlusIcon, Trash2Icon, GridIcon, ListIcon, InfoIcon, CornerDownRightIcon, LinkIcon} from 'vue-feather-icons'
|
||||
import {
|
||||
FolderPlusIcon,
|
||||
Trash2Icon,
|
||||
GridIcon,
|
||||
ListIcon,
|
||||
Edit2Icon,
|
||||
InfoIcon,
|
||||
CornerDownRightIcon,
|
||||
LinkIcon,
|
||||
DownloadCloudIcon,
|
||||
PrinterIcon,
|
||||
} from "vue-feather-icons";
|
||||
|
||||
export default {
|
||||
name: 'ToolbarButton',
|
||||
props: ['source', 'action'],
|
||||
components: {
|
||||
CornerDownRightIcon,
|
||||
FolderPlusIcon,
|
||||
Trash2Icon,
|
||||
ListIcon,
|
||||
GridIcon,
|
||||
InfoIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: "ToolbarButton",
|
||||
props: ["source", "action"],
|
||||
components: {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
PrinterIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
ListIcon,
|
||||
GridIcon,
|
||||
InfoIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.button {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
@include transition(150ms);
|
||||
background: transparent;
|
||||
.button {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
@include transition(150ms);
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
@include transition(150ms);
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button {
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.button {
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
path,
|
||||
line,
|
||||
polyline,
|
||||
rect,
|
||||
circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -90,6 +90,12 @@
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.select-box {
|
||||
|
||||
.box-item {
|
||||
border-color: $dark_mode_border_color;
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
"move": "Move item",
|
||||
"preview": "Change preview",
|
||||
"share": "Share item",
|
||||
"upload": "Upload file"
|
||||
"upload": "Upload file",
|
||||
"download": "Download item",
|
||||
"print": "Print item"
|
||||
},
|
||||
"activation": {
|
||||
"stripe": {
|
||||
@@ -626,7 +628,7 @@
|
||||
"visitor": "Can only view and download"
|
||||
},
|
||||
"shared_form": {
|
||||
"button_more_options": "More Options",
|
||||
"button_more_options": "Set Expiration",
|
||||
"button_close_options": "Close Options",
|
||||
"button_done": "Awesome, I’m done!",
|
||||
"button_generate": "Generate Link",
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
"move": "Presunúť položku",
|
||||
"preview": "Zmeniť náhľad",
|
||||
"share": "Zdieľať položku",
|
||||
"upload": "Nahrať súbory"
|
||||
"upload": "Nahrať súbory",
|
||||
"download": "Stiahnuť položku",
|
||||
"print": "Vytlačiť položku"
|
||||
},
|
||||
"activation": {
|
||||
"stripe": {
|
||||
|
||||
185
resources/js/main.js
vendored
185
resources/js/main.js
vendored
@@ -1,100 +1,99 @@
|
||||
require('./bootstrap');
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import router from './router'
|
||||
import i18n from './i18n/index.js'
|
||||
import App from './App.vue'
|
||||
import store from './store'
|
||||
import Helpers from './helpers'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
require("./bootstrap");
|
||||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
import router from "./router";
|
||||
import i18n from "./i18n/index.js";
|
||||
import App from "./App.vue";
|
||||
import store from "./store";
|
||||
import Helpers from "./helpers";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import {
|
||||
faLock,
|
||||
faLockOpen,
|
||||
faDownload,
|
||||
faUserFriends,
|
||||
faCheck,
|
||||
faLink,
|
||||
faUserEdit,
|
||||
faUser,
|
||||
faFileAudio,
|
||||
faFileVideo,
|
||||
faSyncAlt,
|
||||
faShare,
|
||||
faHome,
|
||||
faEyeSlash,
|
||||
faBars,
|
||||
faSearch,
|
||||
faEllipsisV,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faChevronDown,
|
||||
faUpload,
|
||||
faFolderPlus,
|
||||
faTh,
|
||||
faThList,
|
||||
faInfo,
|
||||
faFolder,
|
||||
faFile,
|
||||
faFileImage,
|
||||
faTimes,
|
||||
faSort,
|
||||
faTrashAlt,
|
||||
faHdd,
|
||||
faEllipsisH,
|
||||
faPencilAlt,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
faLock,
|
||||
faLockOpen,
|
||||
faDownload,
|
||||
faUserFriends,
|
||||
faCheck,
|
||||
faLink,
|
||||
faUserEdit,
|
||||
faUser,
|
||||
faFileAudio,
|
||||
faFileVideo,
|
||||
faSyncAlt,
|
||||
faShare,
|
||||
faHome,
|
||||
faEyeSlash,
|
||||
faBars,
|
||||
faSearch,
|
||||
faEllipsisV,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faChevronDown,
|
||||
faUpload,
|
||||
faFolderPlus,
|
||||
faTh,
|
||||
faThList,
|
||||
faInfo,
|
||||
faFolder,
|
||||
faFile,
|
||||
faFileImage,
|
||||
faTimes,
|
||||
faSort,
|
||||
faTrashAlt,
|
||||
faHdd,
|
||||
faEllipsisH,
|
||||
faPencilAlt,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
faLock,
|
||||
faLockOpen,
|
||||
faDownload,
|
||||
faUserFriends,
|
||||
faCheck,
|
||||
faLink,
|
||||
faUserEdit,
|
||||
faUser,
|
||||
faFileAudio,
|
||||
faFileVideo,
|
||||
faHdd,
|
||||
faSyncAlt,
|
||||
faShare,
|
||||
faHome,
|
||||
faEyeSlash,
|
||||
faBars,
|
||||
faSearch,
|
||||
faEllipsisV,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faChevronDown,
|
||||
faUpload,
|
||||
faTrashAlt,
|
||||
faFolderPlus,
|
||||
faTh,
|
||||
faThList,
|
||||
faInfo,
|
||||
faFolder,
|
||||
faFile,
|
||||
faFileImage,
|
||||
faTimes,
|
||||
faSort,
|
||||
faEllipsisH,
|
||||
faPencilAlt,
|
||||
)
|
||||
Vue.component('FontAwesomeIcon', FontAwesomeIcon)
|
||||
faLock,
|
||||
faLockOpen,
|
||||
faDownload,
|
||||
faUserFriends,
|
||||
faCheck,
|
||||
faLink,
|
||||
faUserEdit,
|
||||
faUser,
|
||||
faFileAudio,
|
||||
faFileVideo,
|
||||
faHdd,
|
||||
faSyncAlt,
|
||||
faShare,
|
||||
faHome,
|
||||
faEyeSlash,
|
||||
faBars,
|
||||
faSearch,
|
||||
faEllipsisV,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faChevronDown,
|
||||
faUpload,
|
||||
faTrashAlt,
|
||||
faFolderPlus,
|
||||
faTh,
|
||||
faThList,
|
||||
faInfo,
|
||||
faFolder,
|
||||
faFile,
|
||||
faFileImage,
|
||||
faTimes,
|
||||
faSort,
|
||||
faEllipsisH,
|
||||
faPencilAlt
|
||||
);
|
||||
Vue.component("FontAwesomeIcon", FontAwesomeIcon);
|
||||
|
||||
Vue.use(VueRouter)
|
||||
Vue.use(Helpers)
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(Helpers);
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
var vueFileManager = new Vue({
|
||||
i18n,
|
||||
store,
|
||||
router,
|
||||
data: {
|
||||
config,
|
||||
},
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
i18n,
|
||||
store,
|
||||
router,
|
||||
data: {
|
||||
config,
|
||||
},
|
||||
render: (h) => h(App),
|
||||
}).$mount("#app");
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<PageTab :is-loading="isLoading" class="form-fixed-width">
|
||||
|
||||
<!--Stripe Information-->
|
||||
<PageTabGroup v-if="config.stripe_public_key">
|
||||
<PageTabGroup v-if="config.stripe_public_key && payments">
|
||||
<div class="form block-form">
|
||||
<FormLabel>{{ $t('admin_settings.payments.section_payments') }}</FormLabel>
|
||||
<InfoBox>
|
||||
@@ -143,10 +143,7 @@
|
||||
isLoading: true,
|
||||
isError: false,
|
||||
errorMessage: '',
|
||||
payments: {
|
||||
status: 1,
|
||||
configured: undefined,
|
||||
},
|
||||
payments: undefined,
|
||||
stripeCredentials: {
|
||||
key: '',
|
||||
secret: '',
|
||||
@@ -746,8 +743,10 @@
|
||||
.then(response => {
|
||||
this.isLoading = false
|
||||
|
||||
this.payments.configured = parseInt(response.data.payments_configured)
|
||||
this.payments.status = parseInt(response.data.payments_active)
|
||||
this.payments = {
|
||||
configured: parseInt(response.data.payments_configured),
|
||||
status: parseInt(response.data.payments_active),
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
<div class="logo">
|
||||
<a href="https://vuefilemanager.com" target="_blank">
|
||||
<img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager" class="light-mode">
|
||||
<img src="/assets/images/vuefilemanager-horizontal-logo-dark.svg" alt="VueFileManager" class="dark-mode">
|
||||
</a>
|
||||
</div>
|
||||
<div class="metadata">
|
||||
@@ -276,16 +275,6 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.logo {
|
||||
.dark-mode {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.metadata {
|
||||
|
||||
.meta-title {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<!--Create new password-->
|
||||
<AuthContent name="create-new-password" :visible="true">
|
||||
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_create_password.title') }}</h1>
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
<!--Password reset successfully-->
|
||||
<AuthContent name="password-reset-successfully" :visible="false">
|
||||
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<!--Forgotten your password?-->
|
||||
<AuthContent name="forgotten-password" :visible="true">
|
||||
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_forgotten_password.title') }}</h1>
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
<!--Password reset link sended-->
|
||||
<AuthContent name="password-reset-link-sended" :visible="false">
|
||||
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<!--Log In by Email-->
|
||||
<AuthContent name="log-in" :visible="true">
|
||||
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_login.title') }}</h1>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<!--Registration-->
|
||||
<AuthContent name="sign-up" :visible="true">
|
||||
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_registration.title') }}</h1>
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
return this.user.data.attributes.subscription ? 'green' : 'purple'
|
||||
},
|
||||
canShowSubscriptionSettings() {
|
||||
return this.config.isSaaS
|
||||
return this.config.isSaaS && this.config.app_payments_active
|
||||
},
|
||||
canShowUpgradeWarning() {
|
||||
return this.config.storageLimit && this.user.relationships.storage.data.attributes.used > 95
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<!--Password reset link sended-->
|
||||
<AuthContent name="not-found" :visible="true">
|
||||
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_shared_404.title') }}</h1>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div id="shared">
|
||||
<!-- File Preview -->
|
||||
<FileFullPreview />
|
||||
|
||||
<!--Loading Spinenr-->
|
||||
<Spinner v-if="isPageLoading"/>
|
||||
@@ -21,7 +23,7 @@
|
||||
|
||||
<!--Verify share link by password-->
|
||||
<AuthContent class="center" name="password" :visible="true">
|
||||
<img v-if="config.app_logo" class="logo" :src="config.app_logo" :alt="config.app_name">
|
||||
<img v-if="config.app_logo" class="logo" :src="$getImage(config.app_logo)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
|
||||
|
||||
<h1>{{ $t('page_shared.title') }}</h1>
|
||||
@@ -68,6 +70,7 @@
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
|
||||
import FileFullPreview from "@/components/FilesView/FileFullpreview";
|
||||
import FileItemGrid from '@/components/FilesView/FileItemGrid'
|
||||
import FileBrowser from '@/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '@/components/FilesView/ContextMenu'
|
||||
@@ -89,6 +92,7 @@
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
FileFullPreview,
|
||||
DesktopToolbar,
|
||||
FileItemGrid,
|
||||
AuthContent,
|
||||
|
||||
7
webpack.mix.js
vendored
7
webpack.mix.js
vendored
@@ -22,5 +22,12 @@ mix.js('resources/js/main.js', 'public/js')
|
||||
"@": path.resolve(__dirname, "resources/js"),
|
||||
}
|
||||
},
|
||||
output: {
|
||||
chunkFilename: '[name].js?id=[chunkhash]',
|
||||
}
|
||||
})
|
||||
.disableNotifications();
|
||||
|
||||
if (mix.inProduction()) {
|
||||
mix.version();
|
||||
}
|
||||
Reference in New Issue
Block a user