mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-06 02:33:48 +00:00
v1.5-alpha.1
This commit is contained in:
carodej
@@ -3,6 +3,7 @@
|
||||
namespace App\Http\Controllers\FileBrowser;
|
||||
|
||||
use App\Http\Requests\FileBrowser\SearchRequest;
|
||||
use App\User;
|
||||
use Illuminate\Support\Facades\Validator;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use App\Http\Controllers\Controller;
|
||||
@@ -80,6 +81,35 @@ class BrowseController extends Controller
|
||||
return collect([$folders, $files])->collapse();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get latest user uploads
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function latest() {
|
||||
|
||||
// Get User
|
||||
$user = User::with(['latest_uploads'])
|
||||
->where('id', Auth::id())
|
||||
->first();
|
||||
|
||||
return $user->latest_uploads->makeHidden(['user_id', 'basename']);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get participant uploads
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function participant_uploads() {
|
||||
|
||||
// Get User
|
||||
$uploads = FileManagerFile::where('user_id', Auth::id())
|
||||
->whereUserScope('editor')->get();
|
||||
|
||||
return $uploads;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get directory with files
|
||||
*
|
||||
|
||||
@@ -6,6 +6,7 @@ use App\Http\Controllers\Controller;
|
||||
use App\Http\Requests\Share\AuthenticateShareRequest;
|
||||
use App\Http\Resources\ShareResource;
|
||||
use App\Http\Tools\Guardian;
|
||||
use http\Env\Response;
|
||||
use Illuminate\Contracts\View\Factory;
|
||||
use Illuminate\Support\Facades\Cookie;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
@@ -32,7 +33,7 @@ class FileSharingController extends Controller
|
||||
$shared = Share::where(\DB::raw('BINARY `token`'), $token)
|
||||
->first();
|
||||
|
||||
if (!$shared) {
|
||||
if (! $shared) {
|
||||
return view("index");
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Http\Controllers\User;
|
||||
|
||||
use App\FileManagerFolder;
|
||||
use App\Http\Tools\Demo;
|
||||
use Illuminate\Contracts\Routing\ResponseFactory;
|
||||
use Illuminate\Support\Facades\Validator;
|
||||
@@ -26,11 +27,17 @@ class AccountController extends Controller
|
||||
->where('id', Auth::id())
|
||||
->first();
|
||||
|
||||
// Get folder tree
|
||||
$tree = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
|
||||
->where('parent_id', 0)
|
||||
->where('user_id', $user->id)
|
||||
->get(['id', 'parent_id', 'unique_id', 'name']);
|
||||
|
||||
return [
|
||||
'user' => $user->only(['name', 'email', 'avatar']),
|
||||
'favourites' => $user->favourites->makeHidden(['pivot']),
|
||||
'latest_uploads' => $user->latest_uploads->makeHidden(['user_id', 'basename']),
|
||||
'storage' => [
|
||||
'tree' => $tree,
|
||||
'storage' => [
|
||||
'used' => Metric::bytes($user->used_capacity)->format(),
|
||||
'capacity' => format_gigabytes(config('vuefilemanager.user_storage_capacity')),
|
||||
'percentage' => get_storage_fill_percentage($user->used_capacity, config('vuefilemanager.user_storage_capacity')),
|
||||
@@ -48,9 +55,9 @@ class AccountController extends Controller
|
||||
{
|
||||
// Validate request
|
||||
$validator = Validator::make($request->all(), [
|
||||
'avatar' => 'file',
|
||||
'name' => 'string',
|
||||
'value' => 'string',
|
||||
'avatar' => 'file',
|
||||
'name' => 'string',
|
||||
'value' => 'string',
|
||||
]);
|
||||
|
||||
// Return error
|
||||
|
||||
@@ -145,7 +145,7 @@ class User extends Authenticatable
|
||||
*/
|
||||
public function latest_uploads() {
|
||||
|
||||
return $this->hasMany(FileManagerFile::class)->orderBy('created_at', 'DESC')->take(7);
|
||||
return $this->hasMany(FileManagerFile::class)->orderBy('created_at', 'DESC')->take(40);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
return [
|
||||
|
||||
'version' => '1.4.2',
|
||||
'version' => '1.5',
|
||||
|
||||
// Your app name
|
||||
'app_name' => 'VueFileManager',
|
||||
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
@@ -1671,6 +1671,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-helper-vue-jsx-merge-props": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
||||
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
|
||||
},
|
||||
"babel-loader": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
|
||||
@@ -10359,6 +10364,14 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
||||
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
||||
},
|
||||
"vue-feather-icons": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-feather-icons/-/vue-feather-icons-5.0.0.tgz",
|
||||
"integrity": "sha512-uvi2l3i0aeRRzG3vX24/AH+8BkcXkSJboAv8XkUZ6aPkEC9n6LXDcKp5/ho+3moVQ9wlga3N6BjL89pmkHBzPw==",
|
||||
"requires": {
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
"node-sass": "^4.14.0",
|
||||
"vee-validate": "^3.3.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-feather-icons": "^5.0.0",
|
||||
"vue-i18n": "^8.17.4",
|
||||
"vue-router": "^3.1.6",
|
||||
"vuex": "^3.3.0"
|
||||
|
||||
2
public/js/main.js
vendored
2
public/js/main.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,4 +1,216 @@
|
||||
{
|
||||
"/js/main.js": "/js/main.js",
|
||||
"/css/app.css": "/css/app.css"
|
||||
"/css/app.css": "/css/app.css",
|
||||
"/js/main.9a4ffec7a76c1b950830.hot-update.js": "/js/main.9a4ffec7a76c1b950830.hot-update.js",
|
||||
"/js/main.c1573e91bed87a15ffef.hot-update.js": "/js/main.c1573e91bed87a15ffef.hot-update.js",
|
||||
"/js/main.2496d75d386d00064417.hot-update.js": "/js/main.2496d75d386d00064417.hot-update.js",
|
||||
"/js/main.013ceb75b1bf0e141b26.hot-update.js": "/js/main.013ceb75b1bf0e141b26.hot-update.js",
|
||||
"/js/main.db3a428e25bff41c3723.hot-update.js": "/js/main.db3a428e25bff41c3723.hot-update.js",
|
||||
"/js/main.46ddf30da37231310b6b.hot-update.js": "/js/main.46ddf30da37231310b6b.hot-update.js",
|
||||
"/js/main.6a3838d1437c8c764776.hot-update.js": "/js/main.6a3838d1437c8c764776.hot-update.js",
|
||||
"/js/main.e0f95966baa9e2d001db.hot-update.js": "/js/main.e0f95966baa9e2d001db.hot-update.js",
|
||||
"/js/main.7a53126cf46010fc1987.hot-update.js": "/js/main.7a53126cf46010fc1987.hot-update.js",
|
||||
"/js/main.05df349f8999d3a70dcc.hot-update.js": "/js/main.05df349f8999d3a70dcc.hot-update.js",
|
||||
"/js/main.b3df17ce1d00b834d523.hot-update.js": "/js/main.b3df17ce1d00b834d523.hot-update.js",
|
||||
"/js/main.a7bdfebc3c7c81757275.hot-update.js": "/js/main.a7bdfebc3c7c81757275.hot-update.js",
|
||||
"/js/main.b4703f4b691febc87771.hot-update.js": "/js/main.b4703f4b691febc87771.hot-update.js",
|
||||
"/js/main.9011812c86e8bda6014e.hot-update.js": "/js/main.9011812c86e8bda6014e.hot-update.js",
|
||||
"/js/main.3736c833209c79dd36f3.hot-update.js": "/js/main.3736c833209c79dd36f3.hot-update.js",
|
||||
"/js/main.c486cae59721fcb8d2e2.hot-update.js": "/js/main.c486cae59721fcb8d2e2.hot-update.js",
|
||||
"/js/main.43677a4bde29458f485d.hot-update.js": "/js/main.43677a4bde29458f485d.hot-update.js",
|
||||
"/js/main.66fc64b7cc4b7123b5aa.hot-update.js": "/js/main.66fc64b7cc4b7123b5aa.hot-update.js",
|
||||
"/js/main.41bae96b129129c8f285.hot-update.js": "/js/main.41bae96b129129c8f285.hot-update.js",
|
||||
"/js/main.db3a48ceef0177374498.hot-update.js": "/js/main.db3a48ceef0177374498.hot-update.js",
|
||||
"/js/main.8fd98bd943661d02f03a.hot-update.js": "/js/main.8fd98bd943661d02f03a.hot-update.js",
|
||||
"/js/main.0c8fb4ef996784ecba37.hot-update.js": "/js/main.0c8fb4ef996784ecba37.hot-update.js",
|
||||
"/js/main.906d9b3d72ff1b1d79a7.hot-update.js": "/js/main.906d9b3d72ff1b1d79a7.hot-update.js",
|
||||
"/js/main.2fcc8cefed2e5702040d.hot-update.js": "/js/main.2fcc8cefed2e5702040d.hot-update.js",
|
||||
"/js/main.75ff3612c2490cb2e40d.hot-update.js": "/js/main.75ff3612c2490cb2e40d.hot-update.js",
|
||||
"/js/main.6a00ba337c54f793bba4.hot-update.js": "/js/main.6a00ba337c54f793bba4.hot-update.js",
|
||||
"/js/main.da006123f1e03d2bcc92.hot-update.js": "/js/main.da006123f1e03d2bcc92.hot-update.js",
|
||||
"/js/main.e219de194687e3d70948.hot-update.js": "/js/main.e219de194687e3d70948.hot-update.js",
|
||||
"/js/main.94b3786c9089a8383469.hot-update.js": "/js/main.94b3786c9089a8383469.hot-update.js",
|
||||
"/js/main.281b345ecdc7ca542158.hot-update.js": "/js/main.281b345ecdc7ca542158.hot-update.js",
|
||||
"/js/main.f4510859f5397aa6a991.hot-update.js": "/js/main.f4510859f5397aa6a991.hot-update.js",
|
||||
"/js/main.fc87ed4e22905cf6e7f0.hot-update.js": "/js/main.fc87ed4e22905cf6e7f0.hot-update.js",
|
||||
"/js/main.e2225b5b67c9eed50400.hot-update.js": "/js/main.e2225b5b67c9eed50400.hot-update.js",
|
||||
"/js/main.65e9e758f35bc6182f74.hot-update.js": "/js/main.65e9e758f35bc6182f74.hot-update.js",
|
||||
"/js/main.ee60d93ee2eeb1869262.hot-update.js": "/js/main.ee60d93ee2eeb1869262.hot-update.js",
|
||||
"/js/main.62e9d4ca11c61479faed.hot-update.js": "/js/main.62e9d4ca11c61479faed.hot-update.js",
|
||||
"/js/main.81a823d8b5035716d6f8.hot-update.js": "/js/main.81a823d8b5035716d6f8.hot-update.js",
|
||||
"/js/main.730819f5aef97dab3c0a.hot-update.js": "/js/main.730819f5aef97dab3c0a.hot-update.js",
|
||||
"/js/main.b50f2feb59558a4d2e8a.hot-update.js": "/js/main.b50f2feb59558a4d2e8a.hot-update.js",
|
||||
"/js/main.2e9b8768c31ca95de317.hot-update.js": "/js/main.2e9b8768c31ca95de317.hot-update.js",
|
||||
"/js/main.8ad2d7f4f8b4ea94c513.hot-update.js": "/js/main.8ad2d7f4f8b4ea94c513.hot-update.js",
|
||||
"/js/main.05a917f18ce609220d68.hot-update.js": "/js/main.05a917f18ce609220d68.hot-update.js",
|
||||
"/js/main.e46948c0117a686a1bad.hot-update.js": "/js/main.e46948c0117a686a1bad.hot-update.js",
|
||||
"/js/main.175b4c582ca1d6d54044.hot-update.js": "/js/main.175b4c582ca1d6d54044.hot-update.js",
|
||||
"/js/main.aa7b63ada5b60d1a06be.hot-update.js": "/js/main.aa7b63ada5b60d1a06be.hot-update.js",
|
||||
"/js/main.175acbe8df535a093bc9.hot-update.js": "/js/main.175acbe8df535a093bc9.hot-update.js",
|
||||
"/js/main.d9c93f3d3c1b48e395c8.hot-update.js": "/js/main.d9c93f3d3c1b48e395c8.hot-update.js",
|
||||
"/js/main.0bf746d0a2700b6a0825.hot-update.js": "/js/main.0bf746d0a2700b6a0825.hot-update.js",
|
||||
"/js/main.6aeea20e4837205d9f71.hot-update.js": "/js/main.6aeea20e4837205d9f71.hot-update.js",
|
||||
"/js/main.75be313981585885c19b.hot-update.js": "/js/main.75be313981585885c19b.hot-update.js",
|
||||
"/js/main.f107c620f8f074c4b0d6.hot-update.js": "/js/main.f107c620f8f074c4b0d6.hot-update.js",
|
||||
"/js/main.bc4702a35db6d7f525c1.hot-update.js": "/js/main.bc4702a35db6d7f525c1.hot-update.js",
|
||||
"/js/main.d047491e33aaf7c4272a.hot-update.js": "/js/main.d047491e33aaf7c4272a.hot-update.js",
|
||||
"/js/main.27762d9425b3e41a56f6.hot-update.js": "/js/main.27762d9425b3e41a56f6.hot-update.js",
|
||||
"/js/main.6b32539c74f058c4202c.hot-update.js": "/js/main.6b32539c74f058c4202c.hot-update.js",
|
||||
"/js/main.f5f68ed520fafa89950c.hot-update.js": "/js/main.f5f68ed520fafa89950c.hot-update.js",
|
||||
"/js/main.1e27c14375907bf60254.hot-update.js": "/js/main.1e27c14375907bf60254.hot-update.js",
|
||||
"/js/main.e9d94282271512dee765.hot-update.js": "/js/main.e9d94282271512dee765.hot-update.js",
|
||||
"/js/main.c26a5d38a19bb110f583.hot-update.js": "/js/main.c26a5d38a19bb110f583.hot-update.js",
|
||||
"/js/main.3be90dc14a32237bbd12.hot-update.js": "/js/main.3be90dc14a32237bbd12.hot-update.js",
|
||||
"/js/main.a184c4223e2290d0e5be.hot-update.js": "/js/main.a184c4223e2290d0e5be.hot-update.js",
|
||||
"/js/main.56d0e49040b82122b25e.hot-update.js": "/js/main.56d0e49040b82122b25e.hot-update.js",
|
||||
"/js/main.f91b6d35b547aa0f4c68.hot-update.js": "/js/main.f91b6d35b547aa0f4c68.hot-update.js",
|
||||
"/js/main.f8fa29ca4f13fffdce5e.hot-update.js": "/js/main.f8fa29ca4f13fffdce5e.hot-update.js",
|
||||
"/js/main.76d04779d7c61cec900e.hot-update.js": "/js/main.76d04779d7c61cec900e.hot-update.js",
|
||||
"/js/main.c2c2271a1f1eb81bc0f9.hot-update.js": "/js/main.c2c2271a1f1eb81bc0f9.hot-update.js",
|
||||
"/js/main.e51b16966f9f48d355e8.hot-update.js": "/js/main.e51b16966f9f48d355e8.hot-update.js",
|
||||
"/js/main.41ae2db21d24f79f1f1a.hot-update.js": "/js/main.41ae2db21d24f79f1f1a.hot-update.js",
|
||||
"/js/main.ca923845d9496ccf9a16.hot-update.js": "/js/main.ca923845d9496ccf9a16.hot-update.js",
|
||||
"/js/main.8ed5245a993756bdd5a9.hot-update.js": "/js/main.8ed5245a993756bdd5a9.hot-update.js",
|
||||
"/js/main.0e60352530acf042bdeb.hot-update.js": "/js/main.0e60352530acf042bdeb.hot-update.js",
|
||||
"/js/main.2d636142b38d4d55cc32.hot-update.js": "/js/main.2d636142b38d4d55cc32.hot-update.js",
|
||||
"/js/main.33bd6a17e1a39b3a64fe.hot-update.js": "/js/main.33bd6a17e1a39b3a64fe.hot-update.js",
|
||||
"/js/main.126d0d04a13f63ffb359.hot-update.js": "/js/main.126d0d04a13f63ffb359.hot-update.js",
|
||||
"/js/main.a82bb0a24bc2dbba24b5.hot-update.js": "/js/main.a82bb0a24bc2dbba24b5.hot-update.js",
|
||||
"/js/main.4b4834fd74ddc582671c.hot-update.js": "/js/main.4b4834fd74ddc582671c.hot-update.js",
|
||||
"/js/main.590c813c8d8ce9325563.hot-update.js": "/js/main.590c813c8d8ce9325563.hot-update.js",
|
||||
"/js/main.713a4650e3653a8083e8.hot-update.js": "/js/main.713a4650e3653a8083e8.hot-update.js",
|
||||
"/js/main.ee26dd2fd8ee88f9eb81.hot-update.js": "/js/main.ee26dd2fd8ee88f9eb81.hot-update.js",
|
||||
"/js/main.09e8cddd553747923c04.hot-update.js": "/js/main.09e8cddd553747923c04.hot-update.js",
|
||||
"/js/main.b265758be1eb7bacf4ce.hot-update.js": "/js/main.b265758be1eb7bacf4ce.hot-update.js",
|
||||
"/js/main.811cd46163a1f38b9581.hot-update.js": "/js/main.811cd46163a1f38b9581.hot-update.js",
|
||||
"/js/main.cdfdb287ad2d56a5d92a.hot-update.js": "/js/main.cdfdb287ad2d56a5d92a.hot-update.js",
|
||||
"/js/main.771b6994f834bd13c5b9.hot-update.js": "/js/main.771b6994f834bd13c5b9.hot-update.js",
|
||||
"/js/main.347f3bb1df2245165ad0.hot-update.js": "/js/main.347f3bb1df2245165ad0.hot-update.js",
|
||||
"/js/main.918351da11b0a9b61ac2.hot-update.js": "/js/main.918351da11b0a9b61ac2.hot-update.js",
|
||||
"/js/main.f3a7f2f99dec221c4fa3.hot-update.js": "/js/main.f3a7f2f99dec221c4fa3.hot-update.js",
|
||||
"/js/main.8e0d48026bea459f7fea.hot-update.js": "/js/main.8e0d48026bea459f7fea.hot-update.js",
|
||||
"/js/main.5938fda9f07c3fe2c8c1.hot-update.js": "/js/main.5938fda9f07c3fe2c8c1.hot-update.js",
|
||||
"/js/main.1890a16b03ca520f0a02.hot-update.js": "/js/main.1890a16b03ca520f0a02.hot-update.js",
|
||||
"/js/main.771c1dbc13bfd10787c4.hot-update.js": "/js/main.771c1dbc13bfd10787c4.hot-update.js",
|
||||
"/js/main.781c07cbda6ffc31dc40.hot-update.js": "/js/main.781c07cbda6ffc31dc40.hot-update.js",
|
||||
"/js/main.4f97e7df7702cda6bf2d.hot-update.js": "/js/main.4f97e7df7702cda6bf2d.hot-update.js",
|
||||
"/js/main.465571060eff0d3fa288.hot-update.js": "/js/main.465571060eff0d3fa288.hot-update.js",
|
||||
"/js/main.1d2e374e3082b5170fce.hot-update.js": "/js/main.1d2e374e3082b5170fce.hot-update.js",
|
||||
"/js/main.18ebf87ae63353c1e063.hot-update.js": "/js/main.18ebf87ae63353c1e063.hot-update.js",
|
||||
"/js/main.d32df851cc5fb8c90157.hot-update.js": "/js/main.d32df851cc5fb8c90157.hot-update.js",
|
||||
"/js/main.e9698a217e749c50f9ab.hot-update.js": "/js/main.e9698a217e749c50f9ab.hot-update.js",
|
||||
"/js/main.230c4d67179a05e1048c.hot-update.js": "/js/main.230c4d67179a05e1048c.hot-update.js",
|
||||
"/js/main.a8954b1fd49d0d6bee63.hot-update.js": "/js/main.a8954b1fd49d0d6bee63.hot-update.js",
|
||||
"/js/main.bd5093999405251d5b34.hot-update.js": "/js/main.bd5093999405251d5b34.hot-update.js",
|
||||
"/js/main.225a11eddb8d0ec2a92f.hot-update.js": "/js/main.225a11eddb8d0ec2a92f.hot-update.js",
|
||||
"/js/main.3636188be5e36d684855.hot-update.js": "/js/main.3636188be5e36d684855.hot-update.js",
|
||||
"/js/main.9cae767dbe2ad8bd70fb.hot-update.js": "/js/main.9cae767dbe2ad8bd70fb.hot-update.js",
|
||||
"/js/main.5b7aab65cd03a9489f9c.hot-update.js": "/js/main.5b7aab65cd03a9489f9c.hot-update.js",
|
||||
"/js/main.39510cc3b23189a7de7d.hot-update.js": "/js/main.39510cc3b23189a7de7d.hot-update.js",
|
||||
"/js/main.8c8334291c620cc95ad8.hot-update.js": "/js/main.8c8334291c620cc95ad8.hot-update.js",
|
||||
"/js/main.74c6814faa0fd4817bc1.hot-update.js": "/js/main.74c6814faa0fd4817bc1.hot-update.js",
|
||||
"/js/main.849ad6dc3cdffe9b1b20.hot-update.js": "/js/main.849ad6dc3cdffe9b1b20.hot-update.js",
|
||||
"/js/main.f395f2fbb2f3b64cc6f1.hot-update.js": "/js/main.f395f2fbb2f3b64cc6f1.hot-update.js",
|
||||
"/js/main.18d0e8348fd8aa793839.hot-update.js": "/js/main.18d0e8348fd8aa793839.hot-update.js",
|
||||
"/js/main.fc377ac6d969c7293455.hot-update.js": "/js/main.fc377ac6d969c7293455.hot-update.js",
|
||||
"/js/main.b22b433586703b7576b4.hot-update.js": "/js/main.b22b433586703b7576b4.hot-update.js",
|
||||
"/js/main.7b47ddfc9f3a3d983cde.hot-update.js": "/js/main.7b47ddfc9f3a3d983cde.hot-update.js",
|
||||
"/js/main.a6f75e262f697452f523.hot-update.js": "/js/main.a6f75e262f697452f523.hot-update.js",
|
||||
"/js/main.e8f47f9fa5312f922155.hot-update.js": "/js/main.e8f47f9fa5312f922155.hot-update.js",
|
||||
"/js/main.73357d64beeae3e97de3.hot-update.js": "/js/main.73357d64beeae3e97de3.hot-update.js",
|
||||
"/js/main.ee16315e9e65b0852dd5.hot-update.js": "/js/main.ee16315e9e65b0852dd5.hot-update.js",
|
||||
"/js/main.88913702eaef335e9e02.hot-update.js": "/js/main.88913702eaef335e9e02.hot-update.js",
|
||||
"/js/main.db6ac98cf398928c2e73.hot-update.js": "/js/main.db6ac98cf398928c2e73.hot-update.js",
|
||||
"/js/main.4f12951001656503a158.hot-update.js": "/js/main.4f12951001656503a158.hot-update.js",
|
||||
"/js/main.2db2982c3308f8cccd4c.hot-update.js": "/js/main.2db2982c3308f8cccd4c.hot-update.js",
|
||||
"/js/main.a86fdc224969debff737.hot-update.js": "/js/main.a86fdc224969debff737.hot-update.js",
|
||||
"/js/main.e6fd5ecac90e63e12a02.hot-update.js": "/js/main.e6fd5ecac90e63e12a02.hot-update.js",
|
||||
"/js/main.d887cfdc43db76b7faa2.hot-update.js": "/js/main.d887cfdc43db76b7faa2.hot-update.js",
|
||||
"/js/main.f13944ff1e78574af5b5.hot-update.js": "/js/main.f13944ff1e78574af5b5.hot-update.js",
|
||||
"/js/main.1605a1b0627d94f11dbc.hot-update.js": "/js/main.1605a1b0627d94f11dbc.hot-update.js",
|
||||
"/js/main.22eb174299088da1c3fa.hot-update.js": "/js/main.22eb174299088da1c3fa.hot-update.js",
|
||||
"/js/main.a5225ccfa63fc20acf67.hot-update.js": "/js/main.a5225ccfa63fc20acf67.hot-update.js",
|
||||
"/js/main.9a90c8e6884fcf574b9a.hot-update.js": "/js/main.9a90c8e6884fcf574b9a.hot-update.js",
|
||||
"/js/main.fd70edb50c7cf7b69785.hot-update.js": "/js/main.fd70edb50c7cf7b69785.hot-update.js",
|
||||
"/js/main.2eeb2743f199bbf38613.hot-update.js": "/js/main.2eeb2743f199bbf38613.hot-update.js",
|
||||
"/js/main.b3736284cc46395265b1.hot-update.js": "/js/main.b3736284cc46395265b1.hot-update.js",
|
||||
"/js/main.66b85201485b4a7421e8.hot-update.js": "/js/main.66b85201485b4a7421e8.hot-update.js",
|
||||
"/js/main.f8e3e20d4767d7c31781.hot-update.js": "/js/main.f8e3e20d4767d7c31781.hot-update.js",
|
||||
"/js/main.19e1852773f997b06d2b.hot-update.js": "/js/main.19e1852773f997b06d2b.hot-update.js",
|
||||
"/js/main.b876869c2a9bbe11f29a.hot-update.js": "/js/main.b876869c2a9bbe11f29a.hot-update.js",
|
||||
"/js/main.d21c32c24c9eb00a499a.hot-update.js": "/js/main.d21c32c24c9eb00a499a.hot-update.js",
|
||||
"/js/main.497bde486c82480961bb.hot-update.js": "/js/main.497bde486c82480961bb.hot-update.js",
|
||||
"/js/main.e36bec81b81e41aca056.hot-update.js": "/js/main.e36bec81b81e41aca056.hot-update.js",
|
||||
"/js/main.512efb656f2451a94ae4.hot-update.js": "/js/main.512efb656f2451a94ae4.hot-update.js",
|
||||
"/js/main.f3dc0ec60d2ab5f95622.hot-update.js": "/js/main.f3dc0ec60d2ab5f95622.hot-update.js",
|
||||
"/js/main.9da7bd56b66dcb221f0d.hot-update.js": "/js/main.9da7bd56b66dcb221f0d.hot-update.js",
|
||||
"/js/main.7754f0dfc22da448a4e6.hot-update.js": "/js/main.7754f0dfc22da448a4e6.hot-update.js",
|
||||
"/js/main.4487182e61023c6ea81e.hot-update.js": "/js/main.4487182e61023c6ea81e.hot-update.js",
|
||||
"/js/main.f004735dd9650ba0cb69.hot-update.js": "/js/main.f004735dd9650ba0cb69.hot-update.js",
|
||||
"/js/main.1140b2605fe4b2e37b5b.hot-update.js": "/js/main.1140b2605fe4b2e37b5b.hot-update.js",
|
||||
"/js/main.971b052f4f90d9abebad.hot-update.js": "/js/main.971b052f4f90d9abebad.hot-update.js",
|
||||
"/js/main.a4ca9ab902b0a36f79da.hot-update.js": "/js/main.a4ca9ab902b0a36f79da.hot-update.js",
|
||||
"/js/main.677e9d63a56b101c8cc5.hot-update.js": "/js/main.677e9d63a56b101c8cc5.hot-update.js",
|
||||
"/js/main.0dc9c63f4e16799a8d7d.hot-update.js": "/js/main.0dc9c63f4e16799a8d7d.hot-update.js",
|
||||
"/js/main.13b1fd1d2a5776adbcc3.hot-update.js": "/js/main.13b1fd1d2a5776adbcc3.hot-update.js",
|
||||
"/js/main.fcd30219a79ae88d35b9.hot-update.js": "/js/main.fcd30219a79ae88d35b9.hot-update.js",
|
||||
"/js/main.7948463ef3bb7055317f.hot-update.js": "/js/main.7948463ef3bb7055317f.hot-update.js",
|
||||
"/js/main.c125e420ab4fe4c9f7d3.hot-update.js": "/js/main.c125e420ab4fe4c9f7d3.hot-update.js",
|
||||
"/js/main.fbcf324618f293514643.hot-update.js": "/js/main.fbcf324618f293514643.hot-update.js",
|
||||
"/js/main.5cf641b4d0bf252e9459.hot-update.js": "/js/main.5cf641b4d0bf252e9459.hot-update.js",
|
||||
"/js/main.5b05d1725e7ea0a4bdc7.hot-update.js": "/js/main.5b05d1725e7ea0a4bdc7.hot-update.js",
|
||||
"/js/main.77c81b5a940ec02ad546.hot-update.js": "/js/main.77c81b5a940ec02ad546.hot-update.js",
|
||||
"/js/main.db4f6f2bf820e0c51e3e.hot-update.js": "/js/main.db4f6f2bf820e0c51e3e.hot-update.js",
|
||||
"/js/main.dc61645ae230a8f1c693.hot-update.js": "/js/main.dc61645ae230a8f1c693.hot-update.js",
|
||||
"/js/main.7725a1c58241a6c96525.hot-update.js": "/js/main.7725a1c58241a6c96525.hot-update.js",
|
||||
"/js/main.40a5066ec9316e75e78e.hot-update.js": "/js/main.40a5066ec9316e75e78e.hot-update.js",
|
||||
"/js/main.97f1c64eab8ba538f510.hot-update.js": "/js/main.97f1c64eab8ba538f510.hot-update.js",
|
||||
"/js/main.6bf46e7d071777d819ac.hot-update.js": "/js/main.6bf46e7d071777d819ac.hot-update.js",
|
||||
"/js/main.d5bce653b584abdec0e5.hot-update.js": "/js/main.d5bce653b584abdec0e5.hot-update.js",
|
||||
"/js/main.a158e667c7e797193ce1.hot-update.js": "/js/main.a158e667c7e797193ce1.hot-update.js",
|
||||
"/js/main.3f419ca1efc24822133c.hot-update.js": "/js/main.3f419ca1efc24822133c.hot-update.js",
|
||||
"/js/main.cd2493fb57be52830881.hot-update.js": "/js/main.cd2493fb57be52830881.hot-update.js",
|
||||
"/js/main.06d9fe7643a92be279ab.hot-update.js": "/js/main.06d9fe7643a92be279ab.hot-update.js",
|
||||
"/js/main.ee38321d3a966fca7d05.hot-update.js": "/js/main.ee38321d3a966fca7d05.hot-update.js",
|
||||
"/js/main.42a81ed8c7e29b5813f1.hot-update.js": "/js/main.42a81ed8c7e29b5813f1.hot-update.js",
|
||||
"/js/main.3360b0fb7831cebd90a5.hot-update.js": "/js/main.3360b0fb7831cebd90a5.hot-update.js",
|
||||
"/js/main.65d9140c15f311c37f83.hot-update.js": "/js/main.65d9140c15f311c37f83.hot-update.js",
|
||||
"/js/main.58cfd53649eace0c70b1.hot-update.js": "/js/main.58cfd53649eace0c70b1.hot-update.js",
|
||||
"/js/main.cb6270bbc347b69aca43.hot-update.js": "/js/main.cb6270bbc347b69aca43.hot-update.js",
|
||||
"/js/main.4697cc6965085628186a.hot-update.js": "/js/main.4697cc6965085628186a.hot-update.js",
|
||||
"/js/main.6dc892cffa3e5926b3c8.hot-update.js": "/js/main.6dc892cffa3e5926b3c8.hot-update.js",
|
||||
"/js/main.f6b489ab9bfe6884487d.hot-update.js": "/js/main.f6b489ab9bfe6884487d.hot-update.js",
|
||||
"/js/main.174349a38afa813b263b.hot-update.js": "/js/main.174349a38afa813b263b.hot-update.js",
|
||||
"/js/main.8a6d60407d80835ecbad.hot-update.js": "/js/main.8a6d60407d80835ecbad.hot-update.js",
|
||||
"/js/main.2746deb0d433bbd85f68.hot-update.js": "/js/main.2746deb0d433bbd85f68.hot-update.js",
|
||||
"/js/main.f85bddc056d7d7b16f99.hot-update.js": "/js/main.f85bddc056d7d7b16f99.hot-update.js",
|
||||
"/js/main.e10202aa85190653ad73.hot-update.js": "/js/main.e10202aa85190653ad73.hot-update.js",
|
||||
"/js/main.15de957e562857d144a5.hot-update.js": "/js/main.15de957e562857d144a5.hot-update.js",
|
||||
"/js/main.75da45714f63bd5486bd.hot-update.js": "/js/main.75da45714f63bd5486bd.hot-update.js",
|
||||
"/js/main.2070d47c01eb224307b4.hot-update.js": "/js/main.2070d47c01eb224307b4.hot-update.js",
|
||||
"/js/main.495ebfa70d0a3166d97b.hot-update.js": "/js/main.495ebfa70d0a3166d97b.hot-update.js",
|
||||
"/js/main.36ff64ad1058f1a77239.hot-update.js": "/js/main.36ff64ad1058f1a77239.hot-update.js",
|
||||
"/js/main.b9ac2ee5ec64a0a63d2d.hot-update.js": "/js/main.b9ac2ee5ec64a0a63d2d.hot-update.js",
|
||||
"/js/main.af2a7936bd8b82ef9d98.hot-update.js": "/js/main.af2a7936bd8b82ef9d98.hot-update.js",
|
||||
"/js/main.267cc5cffe3e293b9d79.hot-update.js": "/js/main.267cc5cffe3e293b9d79.hot-update.js",
|
||||
"/js/main.ea833f8d49e28fcb63f9.hot-update.js": "/js/main.ea833f8d49e28fcb63f9.hot-update.js",
|
||||
"/js/main.0e6735e3a459e47c4f3f.hot-update.js": "/js/main.0e6735e3a459e47c4f3f.hot-update.js",
|
||||
"/js/main.39ffc75da70e1ea506b4.hot-update.js": "/js/main.39ffc75da70e1ea506b4.hot-update.js",
|
||||
"/js/main.c68d38bdcf92538c0303.hot-update.js": "/js/main.c68d38bdcf92538c0303.hot-update.js",
|
||||
"/js/main.a0cdb18827fddb4cd559.hot-update.js": "/js/main.a0cdb18827fddb4cd559.hot-update.js",
|
||||
"/js/main.03aa488609c2be5c87af.hot-update.js": "/js/main.03aa488609c2be5c87af.hot-update.js",
|
||||
"/js/main.09afd8a92a7772f1062e.hot-update.js": "/js/main.09afd8a92a7772f1062e.hot-update.js",
|
||||
"/js/main.f0804ab252dad4e91396.hot-update.js": "/js/main.f0804ab252dad4e91396.hot-update.js",
|
||||
"/js/main.b4cbf800c67983771132.hot-update.js": "/js/main.b4cbf800c67983771132.hot-update.js",
|
||||
"/js/main.b86cc490a20b731241fd.hot-update.js": "/js/main.b86cc490a20b731241fd.hot-update.js",
|
||||
"/js/main.bb077fd5365dc113e5ce.hot-update.js": "/js/main.bb077fd5365dc113e5ce.hot-update.js",
|
||||
"/js/main.3036afc5655ec8f5b6d5.hot-update.js": "/js/main.3036afc5655ec8f5b6d5.hot-update.js",
|
||||
"/js/main.5ae29336999df63d0ed8.hot-update.js": "/js/main.5ae29336999df63d0ed8.hot-update.js",
|
||||
"/js/main.30716b58191d830fb6a7.hot-update.js": "/js/main.30716b58191d830fb6a7.hot-update.js",
|
||||
"/js/main.96730b11d2c8ae2f9757.hot-update.js": "/js/main.96730b11d2c8ae2f9757.hot-update.js",
|
||||
"/js/main.a1edb6896e4b978b22be.hot-update.js": "/js/main.a1edb6896e4b978b22be.hot-update.js",
|
||||
"/js/main.d8e3f00bec4b902263ac.hot-update.js": "/js/main.d8e3f00bec4b902263ac.hot-update.js",
|
||||
"/js/main.917bd2f050edc6b443d9.hot-update.js": "/js/main.917bd2f050edc6b443d9.hot-update.js",
|
||||
"/js/main.e38019d32e49fdfddadc.hot-update.js": "/js/main.e38019d32e49fdfddadc.hot-update.js",
|
||||
"/js/main.d7423441df4bdf0cd124.hot-update.js": "/js/main.d7423441df4bdf0cd124.hot-update.js"
|
||||
}
|
||||
|
||||
@@ -1,57 +1,61 @@
|
||||
<template>
|
||||
<div id="vue-file-manager" :class="appSize">
|
||||
<div id="vue-file-manager" :class="appSize" v-cloak>
|
||||
|
||||
<!--System alerts-->
|
||||
<Alert />
|
||||
<Alert/>
|
||||
|
||||
<div id="application-wrapper" v-if="layout === 'authorized'">
|
||||
|
||||
<MobileNavigation />
|
||||
|
||||
<!--Share Item setup-->
|
||||
<ShareCreate />
|
||||
<ShareEdit />
|
||||
<ShareCreate/>
|
||||
<ShareEdit/>
|
||||
|
||||
<!--Move item setup-->
|
||||
<MoveItem />
|
||||
<MoveItem/>
|
||||
|
||||
<!--Mobile Menu-->
|
||||
<MobileMenu />
|
||||
<MobileMenu/>
|
||||
|
||||
<!--Navigation Sidebar-->
|
||||
<Sidebar/>
|
||||
<MenuBar/>
|
||||
|
||||
<!--File page-->
|
||||
<router-view/>
|
||||
<router-view :class="{'is-scaled-down': isScaledDown}"/>
|
||||
</div>
|
||||
|
||||
<router-view v-if="layout === 'unauthorized'"/>
|
||||
|
||||
<!--Background vignette-->
|
||||
<Vignette />
|
||||
<Vignette/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileNavigation from '@/components/Others/MobileNavigation'
|
||||
import MobileMenu from '@/components/FilesView/MobileMenu'
|
||||
import ShareCreate from '@/components/Others/ShareCreate'
|
||||
import ShareEdit from '@/components/Others/ShareEdit'
|
||||
import MoveItem from '@/components/Others/MoveItem'
|
||||
import Vignette from '@/components/Others/Vignette'
|
||||
import Sidebar from '@/components/Sidebar/Sidebar'
|
||||
import MenuBar from '@/components/Sidebar/MenuBar'
|
||||
import Alert from '@/components/FilesView/Alert'
|
||||
import {ResizeSensor} from 'css-element-queries'
|
||||
import { includes } from 'lodash'
|
||||
import {includes} from 'lodash'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from "./bus"
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
MobileNavigation,
|
||||
ShareCreate,
|
||||
MobileMenu,
|
||||
ShareEdit,
|
||||
MoveItem,
|
||||
Vignette,
|
||||
Sidebar,
|
||||
MenuBar,
|
||||
Alert,
|
||||
},
|
||||
computed: {
|
||||
@@ -66,6 +70,11 @@
|
||||
return 'authorized'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isScaledDown: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAppResize() {
|
||||
let appView = document.getElementById('vue-file-manager')
|
||||
@@ -80,20 +89,41 @@
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
|
||||
// Store config to vuex
|
||||
this.$store.commit('SET_AUTHORIZED', this.$root.$data.config.hasAuthCookie)
|
||||
this.$store.commit('SET_CONFIG', this.$root.$data.config)
|
||||
this.$store.commit('INIT', {
|
||||
authCookie: this.$root.$data.config.hasAuthCookie,
|
||||
config: this.$root.$data.config,
|
||||
rootDirectory: {
|
||||
name: this.$t('locations.home'),
|
||||
location: 'base',
|
||||
unique_id: 0,
|
||||
}
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// Handle VueFileManager width
|
||||
var VueFileManager = document.getElementById('vue-file-manager');
|
||||
new ResizeSensor(VueFileManager, this.handleAppResize);
|
||||
|
||||
// Handle mobile navigation scale animation
|
||||
events.$on('show:mobile-navigation', () => this.isScaledDown = true)
|
||||
events.$on('hide:mobile-navigation', () => this.isScaledDown = false)
|
||||
events.$on('mobileMenu:show', () => this.isScaledDown = true)
|
||||
events.$on('fileItem:deselect', () => this.isScaledDown = false)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap');
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
[v-cloak],
|
||||
[v-cloak] > * {
|
||||
display: none
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
@@ -107,6 +137,25 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#auth {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#vue-file-manager {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.is-scaled-down {
|
||||
@include transform(scale(0.95));
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode support
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
@@ -119,16 +168,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#auth {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#vue-file-manager {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,7 +28,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -19,8 +19,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
#auth {
|
||||
height: 100%;
|
||||
|
||||
@@ -88,7 +88,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
|
||||
@@ -15,10 +15,11 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.button-base {
|
||||
@include font-size(16);
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: 0.15s all ease;
|
||||
|
||||
@@ -31,10 +31,11 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.button-base {
|
||||
@include font-size(16);
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: 0.15s all ease;
|
||||
|
||||
@@ -7,105 +7,270 @@
|
||||
ref="contextmenu"
|
||||
>
|
||||
<!--ContextMenu for trash location-->
|
||||
<ul v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options" ref="list">
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item">
|
||||
{{ $t('context_menu.restore') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="$store.dispatch('emptyTrash')">
|
||||
{{ $t('context_menu.empty_trash') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" id="menu-list" class="menu-options">
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item">
|
||||
<div class="icon">
|
||||
<life-buoy-icon size="17"></life-buoy-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.restore') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="$store.dispatch('emptyTrash')">
|
||||
<div class="icon">
|
||||
<trash-icon size="17"></trash-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.empty_trash') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with MASTER permission-->
|
||||
<ul v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options" ref="list">
|
||||
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
|
||||
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem" v-if="item">
|
||||
{{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['shared']) && $checkPermission('master')" id="menu-list" class="menu-options">
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
|
||||
<div class="icon">
|
||||
<star-icon size="17"></star-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem" v-if="item">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with MASTER permission-->
|
||||
<ul v-if="$isThisLocation(['base']) && $checkPermission('master')" class="menu-options" ref="list">
|
||||
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
|
||||
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="createFolder">
|
||||
{{ $t('context_menu.create_folder') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="moveItem" v-if="item">
|
||||
{{ $t('context_menu.move') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem" v-if="item">
|
||||
{{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')" id="menu-list" class="menu-options">
|
||||
|
||||
<ul class="menu-option-group" v-if="! $isThisLocation(['participant_uploads', 'latest'])">
|
||||
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
|
||||
<div class="icon">
|
||||
<star-icon size="17"></star-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="createFolder">
|
||||
<div class="icon">
|
||||
<folder-plus-icon size="17"></folder-plus-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.create_folder') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="moveItem" v-if="item">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.move') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem" v-if="item">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ item.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with EDITOR permission-->
|
||||
<ul v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" class="menu-options" ref="list">
|
||||
<li class="menu-option" @click="createFolder">
|
||||
{{ $t('context_menu.create_folder') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="moveItem" v-if="item">
|
||||
{{ $t('context_menu.move') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" id="menu-list" class="menu-options">
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="createFolder">
|
||||
<div class="icon">
|
||||
<folder-plus-icon size="17"></folder-plus-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.create_folder') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item && isFolder">
|
||||
<li class="menu-option" @click="moveItem" v-if="item">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.move') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="deleteItem" v-if="item">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group" v-if="item && isFolder">
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with VISITOR permission-->
|
||||
<ul v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" class="menu-options" ref="list">
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options">
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">
|
||||
{{ $t('context_menu.detail') }}
|
||||
<div class="icon">
|
||||
<eye-icon size="17"></eye-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.detail') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
|
||||
{{ $t('context_menu.download') }}
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
TrashIcon,
|
||||
StarIcon,
|
||||
LinkIcon,
|
||||
EyeIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenu',
|
||||
components: {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
TrashIcon,
|
||||
LinkIcon,
|
||||
StarIcon,
|
||||
EyeIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
isFolder() {
|
||||
@@ -145,7 +310,7 @@
|
||||
},
|
||||
addToFavourites() {
|
||||
// Check if folder is in favourites and then add/remove from favourites
|
||||
if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.item.unique_id)) {
|
||||
if (this.app.favourites && !this.app.favourites.find(el => el.unique_id == this.item.unique_id)) {
|
||||
this.$store.dispatch('addToFavourites', this.item)
|
||||
} else {
|
||||
this.$store.dispatch('removeFromFavourites', this.item)
|
||||
@@ -159,6 +324,7 @@
|
||||
)
|
||||
},
|
||||
ItemDetail() {
|
||||
|
||||
// Dispatch load file info detail
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
|
||||
@@ -180,8 +346,20 @@
|
||||
// Reset item container
|
||||
this.item = undefined
|
||||
},
|
||||
showContextMenu(event, item) {
|
||||
let VerticalOffsetArea = item && this.$refs.list.children ? this.$refs.list.children.length * 50 : 50
|
||||
showFolderActionsMenu() {
|
||||
let container = document.getElementById('folder-actions')
|
||||
|
||||
this.positionX = container.offsetLeft + 16
|
||||
this.positionY = container.offsetTop + 30
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
showContextMenu(event) {
|
||||
let parent = document.getElementById('menu-list')
|
||||
let nodesSameClass = parent.getElementsByClassName("menu-option")
|
||||
|
||||
let VerticalOffsetArea = nodesSameClass.length * 50
|
||||
let HorizontalOffsetArea = 190
|
||||
|
||||
let container = document.getElementById('files-view')
|
||||
@@ -220,15 +398,42 @@
|
||||
})
|
||||
|
||||
events.$on('contextMenu:hide', () => (this.closeAndResetContextMenu()))
|
||||
|
||||
events.$on('folder:actions', folder => {
|
||||
|
||||
// Store item
|
||||
this.item = folder
|
||||
|
||||
if (this.isVisible)
|
||||
this.isVisible = false
|
||||
else
|
||||
this.showFolderActionsMenu()
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.menu-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.text-label {
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
min-width: 190px;
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
@@ -239,26 +444,47 @@
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.menu-option-group {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
@include font-size(14);
|
||||
padding: 15px 20px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: $text;
|
||||
|
||||
.menu-option {
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
@include font-size(15);
|
||||
padding: 15px 30px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
color: $text;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
.text-label {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle, polygon {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -268,11 +494,18 @@
|
||||
.contextmenu {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.menu-options .menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
.menu-options {
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_background;
|
||||
.menu-option-group {
|
||||
border-color: $dark_mode_border_color;
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +1,57 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar" v-if="! $isMinimalScale()">
|
||||
<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">
|
||||
<FontAwesomeIcon
|
||||
v-if="browseHistory.length > 0"
|
||||
class="icon-back"
|
||||
icon="chevron-left"
|
||||
></FontAwesomeIcon>
|
||||
<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 @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'])">
|
||||
<div class="toolbar-button-wrapper"
|
||||
v-if="$checkPermission(['master', 'editor'])">
|
||||
<ToolbarButtonUpload
|
||||
source="upload"
|
||||
:class="{'is-inactive': canUploadInView}"
|
||||
:action="$t('actions.upload')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
source="trash-alt"
|
||||
:action="$t('actions.delete')"
|
||||
@click.native="deleteItems"
|
||||
source="move"
|
||||
:class="{'is-inactive': canMoveInView}"
|
||||
action="Move"
|
||||
@click.native="moveItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="! $isThisLocation(['public'])"
|
||||
source="share"
|
||||
:class="{'is-inactive': canShareInView}"
|
||||
action="Share"
|
||||
@click.native="shareItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
source="trash"
|
||||
:class="{'is-inactive': canDeleteInView}"
|
||||
:action="$t('actions.delete')"
|
||||
@click.native="deleteItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{'is-inactive': canCreateFolderInView}"
|
||||
@click.native="createFolder"
|
||||
source="folder-plus"
|
||||
:action="$t('actions.create_folder')"
|
||||
@@ -63,89 +79,108 @@
|
||||
|
||||
<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'
|
||||
|
||||
export default {
|
||||
name: 'ToolBar',
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
UploadProgress,
|
||||
ToolbarButton,
|
||||
SearchBar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType',
|
||||
'fileInfoVisible',
|
||||
'fileInfoDetail',
|
||||
'currentFolder',
|
||||
'browseHistory',
|
||||
'homeDirectory',
|
||||
'FilePreviewType',
|
||||
]),
|
||||
directoryName() {
|
||||
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
|
||||
},
|
||||
previousFolder() {
|
||||
const length = this.browseHistory.length - 2
|
||||
|
||||
return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
|
||||
},
|
||||
preview() {
|
||||
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSidebarMenu: false,
|
||||
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: {
|
||||
showSidebarMenu() {
|
||||
this.isSidebarMenu = ! this.isSidebarMenu
|
||||
events.$emit('show:sidebar')
|
||||
},
|
||||
goBack() {
|
||||
// Get previous folder
|
||||
let previousFolder = last(this.browseHistory)
|
||||
|
||||
if (this.previousFolder.location === 'trash-root') {
|
||||
if (! previousFolder)
|
||||
return
|
||||
|
||||
if (previousFolder.location === 'trash-root') {
|
||||
this.$store.dispatch('getTrash')
|
||||
this.$store.commit('FLUSH_BROWSER_HISTORY')
|
||||
|
||||
} else if (previousFolder.location === 'shared') {
|
||||
this.$store.dispatch('getShared')
|
||||
|
||||
} else {
|
||||
|
||||
if ( this.$isThisLocation('public') ) {
|
||||
this.$store.dispatch('browseShared', [this.previousFolder, true])
|
||||
this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [this.previousFolder, true])
|
||||
this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
|
||||
}
|
||||
}
|
||||
},
|
||||
deleteItems() {
|
||||
folderActions() {
|
||||
events.$emit('folder:actions', this.currentFolder)
|
||||
},
|
||||
deleteItem() {
|
||||
events.$emit('items:delete')
|
||||
},
|
||||
createFolder() {
|
||||
if (! this.$isThisLocation(['trash', 'trash-root']))
|
||||
this.$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})
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Listen for hide sidebar
|
||||
events.$on('show:content', () => {
|
||||
if (this.isSidebarMenu) this.isSidebarMenu = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.toolbar-wrapper {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -171,13 +206,48 @@
|
||||
.icon-back {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
margin-right: 6px;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
@include transition(150ms);
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
cursor: pointer;
|
||||
|
||||
.folder-options {
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-more {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.back-directory-title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
@@ -201,7 +271,7 @@
|
||||
text-align: right;
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 75px;
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -210,8 +280,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 20px;
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
|
||||
&.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
@@ -219,6 +294,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
@@ -229,6 +331,13 @@
|
||||
.back-directory-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.folder-options {
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,27 @@
|
||||
<template>
|
||||
<div class="empty-message">
|
||||
<div class="message">
|
||||
<FontAwesomeIcon class="icon" :icon="icon"/>
|
||||
<eye-off-icon v-if="icon === 'eye-off'" size="36" class="icon"></eye-off-icon>
|
||||
<p>{{ message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { EyeOffIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'EmptyMessage',
|
||||
props: ['icon', 'message']
|
||||
props: ['icon', 'message'],
|
||||
components: {
|
||||
EyeOffIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.empty-message {
|
||||
text-align: center;
|
||||
@@ -35,11 +41,8 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include font-size(36);
|
||||
color: $text;
|
||||
|
||||
path {
|
||||
fill: $text;
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -47,8 +50,9 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.empty-message .message .icon {
|
||||
path {
|
||||
fill: $dark_mode_text_secondary;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
<p v-if="$checkPermission(['master', 'editor'])" class="description">{{ $t('empty_page.description') }}</p>
|
||||
<ButtonUpload
|
||||
v-if="$checkPermission(['master', 'editor'])"
|
||||
@input.native="$uploadFiles"
|
||||
button-style="theme"
|
||||
>
|
||||
{{ $t('empty_page.call_to_action') }}
|
||||
@@ -55,7 +54,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.empty-page {
|
||||
position: absolute;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<MobileToolbar />
|
||||
|
||||
<!--Searchbar-->
|
||||
<SearchBar v-if="$isMinimalScale()" class="mobile-search"/>
|
||||
<SearchBar class="mobile-search" />
|
||||
|
||||
<!--Mobile Actions-->
|
||||
<MobileActions />
|
||||
@@ -77,7 +77,7 @@
|
||||
<FileInfoPanel v-if="fileInfoDetail"/>
|
||||
|
||||
<!--If file info panel empty show message-->
|
||||
<EmptyMessage v-if="!fileInfoDetail" :message="$t('messages.nothing_to_preview')" icon="eye-slash"/>
|
||||
<EmptyMessage v-if="!fileInfoDetail" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -209,7 +209,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.button-upload {
|
||||
display: block;
|
||||
@@ -218,6 +219,7 @@
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
display: none;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -276,11 +278,70 @@
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.file-leave-active {
|
||||
position: absolute;
|
||||
@media only screen and (min-width: 960px) {
|
||||
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 660px) {
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.file-info-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.file-list {
|
||||
|
||||
&.grid {
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
}
|
||||
}
|
||||
|
||||
.files-container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.file-info-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -7,12 +7,15 @@
|
||||
<div class="flex">
|
||||
<div class="icon">
|
||||
<div class="icon-preview">
|
||||
<FontAwesomeIcon :icon="filePreviewIcon"></FontAwesomeIcon>
|
||||
<image-icon v-if="fileType === 'image'" size="21"></image-icon>
|
||||
<video-icon v-if="fileType === 'video'" size="21"></video-icon>
|
||||
<folder-icon v-if="fileType === 'folder'" size="21"></folder-icon>
|
||||
<file-icon v-if="fileType === 'file'" size="21"></file-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<span ref="name" class="name">{{ fileInfoDetail.name }}</span>
|
||||
<span class="mimetype" v-if="fileInfoDetail.mimetype">{{ fileInfoDetail.mimetype }}</span>
|
||||
<span class="mimetype" v-if="fileInfoDetail.mimetype">.{{ fileInfoDetail.mimetype }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,8 +45,8 @@
|
||||
<li v-if="$checkPermission(['master'])" class="list-info-item">
|
||||
<b>{{ $t('file_detail.where') }}</b>
|
||||
<div class="action-button" @click="moveItem">
|
||||
<FontAwesomeIcon class="icon" icon="pencil-alt" />
|
||||
<span>{{ fileInfoDetail.parent ? fileInfoDetail.parent.name : $t('locations.home') }}</span>
|
||||
<edit-2-icon size="10" class="edit-icon"></edit-2-icon>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -51,11 +54,13 @@
|
||||
<li v-if="$checkPermission('master') && fileInfoDetail.shared" class="list-info-item">
|
||||
<b>{{ $t('file_detail.shared') }}</b>
|
||||
<div class="action-button" @click="shareItemOptions">
|
||||
<FontAwesomeIcon class="icon" :icon="sharedIcon" />
|
||||
<span>{{ sharedInfo }}</span>
|
||||
<edit-2-icon size="10" class="edit-icon"></edit-2-icon>
|
||||
</div>
|
||||
<div class="sharelink">
|
||||
<FontAwesomeIcon class="lock-icon" :icon="lockIcon" @click="shareItemOptions" />
|
||||
<lock-icon v-if="isLocked" @click="shareItemOptions" class="lock-icon" size="17"></lock-icon>
|
||||
<unlock-icon v-if="! isLocked" @click="shareItemOptions" class="lock-icon" size="17"></unlock-icon>
|
||||
|
||||
<CopyInput class="copy-sharelink" size="small" :value="fileInfoDetail.shared.link" />
|
||||
</div>
|
||||
</li>
|
||||
@@ -64,6 +69,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Edit2Icon, LockIcon, UnlockIcon, ImageIcon, VideoIcon, FolderIcon, FileIcon } from 'vue-feather-icons'
|
||||
import FilePreview from '@/components/FilesView/FilePreview'
|
||||
import CopyInput from '@/components/Others/Forms/CopyInput'
|
||||
import {mapGetters} from 'vuex'
|
||||
@@ -73,12 +79,20 @@
|
||||
name: 'FileInfoPanel',
|
||||
components: {
|
||||
FilePreview,
|
||||
FolderIcon,
|
||||
UnlockIcon,
|
||||
VideoIcon,
|
||||
CopyInput,
|
||||
ImageIcon,
|
||||
FileIcon,
|
||||
Edit2Icon,
|
||||
LockIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'permissionOptions']),
|
||||
filePreviewIcon() {
|
||||
switch (this.fileInfoDetail.type) {
|
||||
fileType() {
|
||||
return this.fileInfoDetail.type
|
||||
/* switch () {
|
||||
case 'folder':
|
||||
return 'folder'
|
||||
break;
|
||||
@@ -94,7 +108,7 @@
|
||||
case 'file':
|
||||
return 'file-audio'
|
||||
break;
|
||||
}
|
||||
}*/
|
||||
},
|
||||
sharedInfo() {
|
||||
|
||||
@@ -117,8 +131,8 @@
|
||||
return 'download'
|
||||
}
|
||||
},
|
||||
lockIcon() {
|
||||
return this.fileInfoDetail.shared.protected ? 'lock' : 'lock-open'
|
||||
isLocked() {
|
||||
return this.fileInfoDetail.shared.protected
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -135,15 +149,14 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.file-info-content {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.file-headline {
|
||||
background: $light_background;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
@@ -153,37 +166,19 @@
|
||||
}
|
||||
|
||||
.icon-preview {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
/deep/ svg {
|
||||
@include font-size(22);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-info {
|
||||
padding-left: 12px;
|
||||
padding-left: 10px;
|
||||
width: 100%;
|
||||
word-break: break-all;
|
||||
|
||||
@@ -196,7 +191,7 @@
|
||||
}
|
||||
|
||||
.mimetype {
|
||||
@include font-size(14);
|
||||
@include font-size(12);
|
||||
font-weight: 600;
|
||||
color: $theme;
|
||||
display: block;
|
||||
@@ -205,11 +200,10 @@
|
||||
}
|
||||
|
||||
.list-info {
|
||||
padding-left: 12px;
|
||||
|
||||
.list-info-item {
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
padding-top: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
@@ -218,14 +212,9 @@
|
||||
.action-button {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
@include font-size(10);
|
||||
.edit-icon {
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -252,22 +241,10 @@
|
||||
margin-top: 10px;
|
||||
|
||||
.lock-icon {
|
||||
@include font-size(10);
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
width: 15px;
|
||||
margin-right: 9px;
|
||||
cursor: pointer;
|
||||
|
||||
path {
|
||||
fill: $text;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-sharelink {
|
||||
@@ -278,11 +255,6 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.file-headline {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.icon-preview {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
|
||||
@@ -313,14 +285,10 @@
|
||||
|
||||
.lock-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
path, rect {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,12 +52,12 @@
|
||||
|
||||
<!--Shared Icon-->
|
||||
<div v-if="$checkPermission('master') && data.shared" class="item-shared">
|
||||
<FontAwesomeIcon class="shared-icon" icon="share"/>
|
||||
<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">
|
||||
<FontAwesomeIcon class="shared-icon" icon="user-edit"/>
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
</div>
|
||||
|
||||
<!--Filesize-->
|
||||
@@ -79,6 +79,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
|
||||
import {debounce} from 'lodash'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
@@ -86,6 +87,10 @@
|
||||
export default {
|
||||
name: 'FileItemGrid',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType', 'sharedDetail'
|
||||
@@ -155,9 +160,9 @@
|
||||
|
||||
// Go to folder
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [this.data, false])
|
||||
this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [this.data, false])
|
||||
this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
|
||||
}
|
||||
}
|
||||
|
||||
@@ -187,11 +192,11 @@
|
||||
}
|
||||
|
||||
if (this.isFolder) {
|
||||
// Go to folder
|
||||
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [this.data, false])
|
||||
this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [this.data, false])
|
||||
this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -224,7 +229,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
@@ -240,6 +246,7 @@
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
@@ -254,9 +261,9 @@
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(12);
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: $text-muted;
|
||||
color: rgba($text, 0.7);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -275,10 +282,10 @@
|
||||
}
|
||||
|
||||
.shared-icon {
|
||||
@include font-size(9);
|
||||
vertical-align: middle;
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
path, circle, line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -404,6 +411,55 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.file-wrapper {
|
||||
|
||||
.icon-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
.file-wrapper {
|
||||
|
||||
.file-item {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
margin-bottom: 10px;
|
||||
height: 90px;
|
||||
|
||||
.file-icon {
|
||||
@include font-size(75);
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(75);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name .name {
|
||||
@include font-size(13);
|
||||
line-height: .9;
|
||||
max-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-wrapper {
|
||||
|
||||
|
||||
@@ -51,12 +51,12 @@
|
||||
|
||||
<!--Shared Icon-->
|
||||
<div v-if="$checkPermission('master') && data.shared" class="item-shared">
|
||||
<FontAwesomeIcon class="shared-icon" icon="share"/>
|
||||
<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">
|
||||
<FontAwesomeIcon class="shared-icon" icon="user-edit"/>
|
||||
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
|
||||
</div>
|
||||
|
||||
<!--Filesize and timestamp-->
|
||||
@@ -80,6 +80,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
|
||||
import {debounce} from 'lodash'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
@@ -87,6 +88,10 @@
|
||||
export default {
|
||||
name: 'FileItemList',
|
||||
props: ['data'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['FilePreviewType']),
|
||||
isFolder() {
|
||||
@@ -164,9 +169,9 @@
|
||||
|
||||
// Go to folder
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [this.data, false])
|
||||
this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [this.data, false])
|
||||
this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
|
||||
}
|
||||
}
|
||||
|
||||
@@ -194,9 +199,9 @@
|
||||
if (this.isFolder) {
|
||||
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [this.data, false])
|
||||
this.$store.dispatch('browseShared', [{folder: this.data, back: false, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [this.data, false])
|
||||
this.$store.dispatch('getFolder', [{folder: this.data, back: false, init: false}])
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -229,9 +234,11 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
@@ -278,19 +285,19 @@
|
||||
}
|
||||
|
||||
.shared-icon {
|
||||
@include font-size(9);
|
||||
vertical-align: middle;
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
path, circle, line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(12);
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: $text-muted;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
|
||||
.name {
|
||||
@@ -412,6 +419,7 @@
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.file-wrapper {
|
||||
|
||||
.icon-item .file-icon {
|
||||
@@ -437,8 +445,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.item-name .name {
|
||||
color: $dark_mode_text_primary;
|
||||
.item-name {
|
||||
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,7 +26,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.preview {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,24 +1,37 @@
|
||||
<template>
|
||||
<button class="mobile-action-button">
|
||||
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
|
||||
<span class="label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
<div class="flex">
|
||||
<folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon"></folder-plus-icon>
|
||||
<list-icon v-if="icon === 'th-list'" size="15" class="icon"></list-icon>
|
||||
<trash-icon v-if="icon === 'trash'" size="15" class="icon"></trash-icon>
|
||||
<grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
|
||||
<span class="label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'MobileActionButton',
|
||||
props: [
|
||||
'icon'
|
||||
],
|
||||
components: {
|
||||
FolderPlusIcon,
|
||||
TrashIcon,
|
||||
ListIcon,
|
||||
GridIcon,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.mobile-action-button {
|
||||
background: $light_background;
|
||||
@@ -28,6 +41,11 @@
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
@include font-size(14);
|
||||
@@ -44,8 +62,8 @@
|
||||
.mobile-action-button {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.icon path {
|
||||
fill: $theme;
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
@@ -1,31 +1,29 @@
|
||||
<template>
|
||||
<button class="mobile-action-button">
|
||||
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
|
||||
<label label="file" class="label button file-input button-base">
|
||||
<slot></slot>
|
||||
<input
|
||||
accept="*"
|
||||
v-show="false"
|
||||
@change="emmitFiles"
|
||||
id="file"
|
||||
type="file"
|
||||
name="files[]"
|
||||
multiple
|
||||
/>
|
||||
</label>
|
||||
<div class="flex">
|
||||
<upload-cloud-icon class="icon" size="15"></upload-cloud-icon>
|
||||
<label label="file" class="label button file-input button-base">
|
||||
<slot></slot>
|
||||
<input
|
||||
@change="emmitFiles"
|
||||
v-show="false"
|
||||
id="file"
|
||||
type="file"
|
||||
name="files[]"
|
||||
multiple
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UploadCloudIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'MobileActionButtonUpload',
|
||||
props: [
|
||||
'icon'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
files: undefined
|
||||
}
|
||||
components: {
|
||||
UploadCloudIcon,
|
||||
},
|
||||
methods: {
|
||||
emmitFiles(e) {
|
||||
@@ -36,8 +34,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.mobile-action-button {
|
||||
background: $light_background;
|
||||
@@ -47,12 +45,19 @@
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
@@ -63,8 +68,8 @@
|
||||
.mobile-action-button {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.icon path {
|
||||
fill: $theme;
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<div id="mobile-actions-wrapper" v-if="$isMinimalScale()">
|
||||
<div id="mobile-actions-wrapper">
|
||||
|
||||
<!--Actions for trash location with MASTER permission--->
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="mobile-actions">
|
||||
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
|
||||
{{ previewText }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash-alt">
|
||||
<MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
|
||||
{{ $t('context_menu.empty_trash') }}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with MASTER permission-->
|
||||
<div v-if="$isThisLocation(['base', 'shared', 'public']) && $checkPermission(['master', 'editor'])" class="mobile-actions">
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission(['master', 'editor'])" class="mobile-actions">
|
||||
<MobileActionButton @click.native="createFolder" icon="folder-plus">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload @input.native="$uploadFiles" icon="upload">
|
||||
<MobileActionButtonUpload>
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with VISITOR permission-->
|
||||
<div v-if="$isThisLocation(['base', 'shared', 'public']) && $checkPermission('visitor')" class="mobile-actions">
|
||||
<div v-if="($isThisLocation(['base', 'shared', 'public']) && $checkPermission('visitor')) || ($isThisLocation(['latest', 'shared']) && $checkPermission('master'))" class="mobile-actions">
|
||||
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
|
||||
{{ previewText }}
|
||||
</MobileActionButton>
|
||||
@@ -81,10 +81,11 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
#mobile-actions-wrapper {
|
||||
display: none;
|
||||
background: white;
|
||||
position: sticky;
|
||||
top: 35px;
|
||||
@@ -98,6 +99,13 @@
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
#mobile-actions-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#mobile-actions-wrapper {
|
||||
background: $dark_mode_background;
|
||||
|
||||
@@ -9,79 +9,205 @@
|
||||
>
|
||||
<div class="menu-wrapper">
|
||||
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem class="item-thumbnail" :item="fileInfoDetail" info="metadata"/>
|
||||
|
||||
<!--Mobile for trash location-->
|
||||
<ul v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options">
|
||||
<li class="menu-option" @click="$store.dispatch('restoreItem', fileInfoDetail)" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.restore') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
<li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options">
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="$store.dispatch('restoreItem', fileInfoDetail)" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<life-buoy-icon size="17"></life-buoy-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.restore') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group" v-if="! isFolder">
|
||||
<li class="menu-option" @click="downloadItem">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Mobile for Base location-->
|
||||
<ul v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options">
|
||||
<li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
|
||||
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.rename') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
|
||||
{{ fileInfoDetail.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
<li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options">
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
|
||||
<div class="icon">
|
||||
<star-icon size="17"></star-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ isInFavourites ? $t('context_menu.remove_from_favourites') :
|
||||
$t('context_menu.add_to_favourites') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<edit-2-icon size="17"></edit-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.rename') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ fileInfoDetail.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Mobile for Base location-->
|
||||
<ul v-if="$isThisLocation(['base']) && $checkPermission('master')" class="menu-options">
|
||||
<li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
|
||||
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.rename') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.move') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
|
||||
{{ fileInfoDetail.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
<li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['base', 'latest']) && $checkPermission('master')" class="menu-options">
|
||||
<ul class="menu-option-group" v-if="fileInfoDetail && isFolder">
|
||||
<li class="menu-option" @click="addToFavourites">
|
||||
<div class="icon">
|
||||
<star-icon size="17"></star-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ isInFavourites ? $t('context_menu.remove_from_favourites') :
|
||||
$t('context_menu.add_to_favourites') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<edit-2-icon size="17"></edit-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.rename') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.move') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ fileInfoDetail.shared ? $t('context_menu.share_edit') : $t('context_menu.share') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<trash-2-icon size="17"></trash-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.delete') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Mobile for Base location with EDITOR permission-->
|
||||
<ul v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" class="menu-options">
|
||||
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.rename') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
|
||||
{{ $t('context_menu.move') }}
|
||||
</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" class="menu-options">
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<edit-2-icon size="17"></edit-2-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.rename') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
|
||||
<div class="icon">
|
||||
<corner-down-right-icon size="17"></corner-down-right-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.move') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Mobile for Base location with VISITOR permission-->
|
||||
<ul v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" class="menu-options">
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
{{ $t('context_menu.download') }}
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" class="menu-options">
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -92,11 +218,37 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThumbnailItem from '@/components/Others/ThumbnailItem'
|
||||
import {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
TrashIcon,
|
||||
StarIcon,
|
||||
LinkIcon,
|
||||
EyeIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import {events} from '@/bus'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileMenu',
|
||||
components: {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
ThumbnailItem,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
TrashIcon,
|
||||
LinkIcon,
|
||||
StarIcon,
|
||||
EyeIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'app']),
|
||||
isInFavourites() {
|
||||
@@ -194,10 +346,25 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.menu-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.text-label {
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
|
||||
.vignette {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -215,29 +382,46 @@
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
padding: 20px 20px 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
margin-top: 10px;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
.menu-option-group {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15px;
|
||||
@include font-size(15);
|
||||
@include font-size(14);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 20px 10px;
|
||||
padding: 17px 20px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
@@ -253,12 +437,16 @@
|
||||
}
|
||||
|
||||
.options {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.menu-options {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.menu-option {
|
||||
.menu-option-group {
|
||||
border-color: $dark_mode_border_color;
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
<template>
|
||||
<div class="mobile-toolbar" v-if="$isMinimalScale()">
|
||||
<div class="mobile-toolbar">
|
||||
|
||||
<!-- Go back-->
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<FontAwesomeIcon
|
||||
:class="{'is-visible': browseHistory.length > 0}"
|
||||
class="icon-back"
|
||||
icon="chevron-left"
|
||||
></FontAwesomeIcon>
|
||||
<chevron-left-icon size="17" :class="{'is-visible': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
|
||||
</div>
|
||||
|
||||
<!--Folder Title-->
|
||||
@@ -15,8 +11,8 @@
|
||||
|
||||
<!--More Actions-->
|
||||
<div class="more-actions-button">
|
||||
<div class="tap-area" @click="showSidebarMenu" v-if="$checkPermission('master')">
|
||||
<FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
|
||||
<div class="tap-area" @click="showMobileNavigation" v-if="$checkPermission('master')">
|
||||
<menu-icon size="17"></menu-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,15 +22,19 @@
|
||||
import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import { MenuIcon, ChevronLeftIcon } from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
import {last} from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'MobileToolBar',
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
ChevronLeftIcon,
|
||||
ToolbarButton,
|
||||
SearchBar
|
||||
SearchBar,
|
||||
MenuIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
@@ -49,36 +49,30 @@
|
||||
directoryName() {
|
||||
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
|
||||
},
|
||||
previousFolder() {
|
||||
const length = this.browseHistory.length - 2
|
||||
|
||||
return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
|
||||
},
|
||||
isSmallAppSize() {
|
||||
return this.appSize === 'small'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSidebarMenu: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showSidebarMenu() {
|
||||
this.isSidebarMenu = ! this.isSidebarMenu
|
||||
events.$emit('show:sidebar')
|
||||
showMobileNavigation() {
|
||||
events.$emit('show:mobile-navigation')
|
||||
},
|
||||
goBack() {
|
||||
|
||||
if (this.previousFolder.location === 'trash-root') {
|
||||
let previousFolder = last(this.browseHistory)
|
||||
|
||||
if (previousFolder.location === 'trash-root') {
|
||||
this.$store.dispatch('getTrash')
|
||||
this.$store.commit('FLUSH_BROWSER_HISTORY')
|
||||
|
||||
} else if (previousFolder.location === 'shared') {
|
||||
this.$store.dispatch('getShared')
|
||||
|
||||
} else {
|
||||
|
||||
if ( this.$isThisLocation('public') ) {
|
||||
this.$store.dispatch('browseShared', [this.previousFolder, true])
|
||||
this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [this.previousFolder, true])
|
||||
this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -93,13 +87,13 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.mobile-toolbar {
|
||||
background: white;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
display: none;
|
||||
padding: 10px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@@ -121,6 +115,7 @@
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
margin-top: -2px;
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
@@ -154,10 +149,21 @@
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -20px;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.mobile-toolbar {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.mobile-toolbar {
|
||||
@@ -167,8 +173,11 @@
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.more-actions-button svg path {
|
||||
fill: $dark_mode_text_primary;
|
||||
.more-actions-button .tap-area {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<div class="search-bar">
|
||||
<div class="icon" v-if="!isQuery">
|
||||
<search-icon size="19"></search-icon>
|
||||
</div>
|
||||
<div class="icon" v-if="isQuery" @click="resetQuery">
|
||||
<x-icon class="pointer" size="19"></x-icon>
|
||||
</div>
|
||||
<input
|
||||
v-model="query"
|
||||
class="query"
|
||||
@@ -7,22 +13,21 @@
|
||||
name="query"
|
||||
:placeholder="$t('inputs.placeholder_search_files')"
|
||||
/>
|
||||
<div class="icon" v-if="!isQuery">
|
||||
<FontAwesomeIcon icon="search"></FontAwesomeIcon>
|
||||
</div>
|
||||
<div class="icon" v-if="isQuery" @click="resetQuery">
|
||||
<FontAwesomeIcon icon="times" class="pointer"></FontAwesomeIcon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SearchIcon, XIcon } from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'SearchBar',
|
||||
components: {
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['currentFolder']),
|
||||
isQuery() {
|
||||
@@ -52,9 +57,9 @@
|
||||
|
||||
// Get back after delete query to previosly folder
|
||||
if ( this.$isThisLocation('public') ) {
|
||||
this.$store.dispatch('browseShared', [this.currentFolder, true])
|
||||
this.$store.dispatch('browseShared', [{folder: this.currentFolder, back: true, init: false}])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [this.currentFolder, true])
|
||||
this.$store.dispatch('getFolder', [{folder: this.currentFolder, back: true, init: false}])
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,20 +74,20 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
//width: 100%;
|
||||
background: $light_background;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
outline: 0;
|
||||
padding: 9px 20px;
|
||||
font-weight: 100;
|
||||
padding: 9px 20px 9px 43px;
|
||||
font-weight: 400;
|
||||
@include font-size(16);
|
||||
min-width: 380px;
|
||||
min-width: 175px;
|
||||
transition: 0.15s all ease;
|
||||
border: 1px solid white;
|
||||
-webkit-appearance: none;
|
||||
@@ -90,7 +95,7 @@
|
||||
&::placeholder {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -108,8 +113,8 @@
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 10px 15px;
|
||||
left: 0;
|
||||
padding: 11px 15px;
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
@@ -117,11 +122,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.search-bar input {
|
||||
max-width: 190px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.search-bar {
|
||||
|
||||
input {
|
||||
min-width: initial;
|
||||
width: 100%;
|
||||
padding: 9px 20px 9px 30px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 11px 15px 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.search-bar {
|
||||
input {
|
||||
background: $dark_mode_foreground;
|
||||
border-color: $dark_mode_foreground;
|
||||
border-color: transparent;
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
&::placeholder {
|
||||
color: $dark_mode_text_secondary;
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
#loading-bar-spinner.spinner {
|
||||
left: 50%;
|
||||
|
||||
@@ -1,18 +1,36 @@
|
||||
<template>
|
||||
<button class="button" :title="action">
|
||||
<FontAwesomeIcon class="icon" :icon="source"></FontAwesomeIcon>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {FolderPlusIcon, Trash2Icon, GridIcon, ListIcon, InfoIcon, CornerDownRightIcon, LinkIcon} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'ToolbarButton',
|
||||
props: ['source', 'action']
|
||||
props: ['source', 'action'],
|
||||
components: {
|
||||
CornerDownRightIcon,
|
||||
FolderPlusIcon,
|
||||
Trash2Icon,
|
||||
ListIcon,
|
||||
GridIcon,
|
||||
InfoIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.button {
|
||||
height: 42px;
|
||||
@@ -22,42 +40,36 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: $light_background;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
.icon {
|
||||
@include font-size(16);
|
||||
}
|
||||
@include transition(150ms);
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
background: $light_background;
|
||||
|
||||
/deep/ svg path {
|
||||
@include transition;
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
/deep/ svg path {
|
||||
fill: $theme;
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.icon path {
|
||||
fill: $dark_mode_text_primary;
|
||||
.button {
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<label label="file" class="button file-input">
|
||||
<FontAwesomeIcon class="icon" :icon="source"></FontAwesomeIcon>
|
||||
<upload-cloud-icon size="17"></upload-cloud-icon>
|
||||
<input
|
||||
@change="emmitFiles"
|
||||
v-show="false"
|
||||
@@ -8,15 +8,19 @@
|
||||
type="file"
|
||||
name="files[]"
|
||||
multiple
|
||||
:disabled="$isThisLocation(['trash', 'trash-root'])"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { UploadCloudIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'ToolbarButtonUpload',
|
||||
props: ['source', 'action'],
|
||||
props: ['action'],
|
||||
components: {
|
||||
UploadCloudIcon,
|
||||
},
|
||||
methods: {
|
||||
emmitFiles(e) {
|
||||
this.$uploadFiles(e.target.files)
|
||||
@@ -26,7 +30,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.button {
|
||||
height: 42px;
|
||||
@@ -36,7 +41,6 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: $light_background;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@@ -44,26 +48,27 @@
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
background: $light_background;
|
||||
|
||||
/deep/ svg path {
|
||||
@include transition;
|
||||
fill: $theme;
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.icon path {
|
||||
fill: $dark_mode_text_primary;
|
||||
.button {
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.info-panel-enter-active,
|
||||
.info-panel-leave-active {
|
||||
|
||||
115
resources/js/components/Mobile/MenuItemList.vue
Normal file
115
resources/js/components/Mobile/MenuItemList.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<ul class="link-group">
|
||||
<router-link :to="{name: link.routeName}" v-for="(link, i) in navigation" :key="i" :class="link.icon" class="link-item" @click.native="$emit('menu', link.icon)">
|
||||
<div class="menu-icon">
|
||||
<hard-drive-icon v-if="link.icon === 'hard-drive'" size="17"></hard-drive-icon>
|
||||
<share-icon v-if="link.icon === 'share'" size="17"></share-icon>
|
||||
<trash2-icon v-if="link.icon === 'trash'" size="17"></trash2-icon>
|
||||
<power-icon v-if="link.icon === 'power'" size="17"></power-icon>
|
||||
<settings-icon v-if="link.icon === 'settings'" size="17"></settings-icon>
|
||||
<upload-cloud-icon v-if="link.icon === 'latest'" size="17"></upload-cloud-icon>
|
||||
</div>
|
||||
<b class="menu-link">
|
||||
<span>{{ link.title }}</span>
|
||||
<chevron-right-icon size="15" class="arrow-right"></chevron-right-icon>
|
||||
</b>
|
||||
</router-link>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ChevronRightIcon,
|
||||
UploadCloudIcon,
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
Trash2Icon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'MenuBar',
|
||||
components: {
|
||||
ChevronRightIcon,
|
||||
UploadCloudIcon,
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
Trash2Icon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
},
|
||||
props: [
|
||||
'navigation'
|
||||
],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
padding: 17px 0;
|
||||
width: 100%;
|
||||
|
||||
&.power {
|
||||
|
||||
.menu-icon {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
|
||||
svg {
|
||||
margin-top: -1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $text;
|
||||
|
||||
span {
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.link-item {
|
||||
|
||||
.menu-icon {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
108
resources/js/components/Mobile/MobileHeader.vue
Normal file
108
resources/js/components/Mobile/MobileHeader.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<header class="mobile-header">
|
||||
|
||||
<!-- Go back-->
|
||||
<div @click="goBack" class="go-back">
|
||||
<chevron-left-icon size="17" class="icon"></chevron-left-icon>
|
||||
</div>
|
||||
|
||||
<!--Folder Title-->
|
||||
<div class="location-name">{{ $router.currentRoute.meta.title }}</div>
|
||||
|
||||
<!--More Actions-->
|
||||
<div @click="showMobileNavigation" class="mobile-menu">
|
||||
<menu-icon size="17" class="icon"></menu-icon>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {events} from '@/bus'
|
||||
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
MenuIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'MenuBar',
|
||||
components: {
|
||||
ChevronLeftIcon,
|
||||
MenuIcon,
|
||||
},
|
||||
methods: {
|
||||
showMobileNavigation() {
|
||||
events.$emit('show:mobile-navigation')
|
||||
},
|
||||
goBack() {
|
||||
this.$router.back();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.mobile-header {
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
position: sticky;
|
||||
display: none;
|
||||
z-index: 6;
|
||||
top: 0;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.go-back {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.location-name {
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
@include font-size(15);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.mobile-header {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.location-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -15,7 +15,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.action-button {
|
||||
cursor: pointer;
|
||||
|
||||
63
resources/js/components/Others/ContentFileview.vue
Normal file
63
resources/js/components/Others/ContentFileview.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div @click="fileViewClick"
|
||||
@contextmenu.prevent.capture="contextMenu($event, undefined)"
|
||||
id="files-view">
|
||||
<ContextMenu/>
|
||||
<DesktopToolbar/>
|
||||
<FileBrowser/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
|
||||
import FileBrowser from '@/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '@/components/FilesView/ContextMenu'
|
||||
import {ResizeSensor} from 'css-element-queries'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
DesktopToolbar,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config']),
|
||||
},
|
||||
methods: {
|
||||
fileViewClick() {
|
||||
events.$emit('contextMenu:hide')
|
||||
},
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
#files-view {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
min-width: 320px;
|
||||
overflow-x: hidden;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
#files-view {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -2,15 +2,22 @@
|
||||
<div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
|
||||
<input ref="sel" :value="value" id="link-input" type="text" class="input-text" readonly>
|
||||
<div class="icon">
|
||||
<FontAwesomeIcon :icon="isCopiedLink ? 'check' : 'link'"/>
|
||||
<link-icon v-if="! isCopiedLink" size="14"></link-icon>
|
||||
<check-icon v-if="isCopiedLink" size="14"></check-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LinkIcon, CheckIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'CopyInput',
|
||||
props: ['size', 'value'],
|
||||
components: {
|
||||
CheckIcon,
|
||||
LinkIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCopiedLink: false,
|
||||
@@ -40,8 +47,10 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import "@assets/vue-file-manager/_forms.scss";
|
||||
|
||||
// Single page
|
||||
.copy-input {
|
||||
@@ -52,7 +61,6 @@
|
||||
|
||||
.icon {
|
||||
padding: 8px 10px;
|
||||
@include font-size(11);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,9 +89,6 @@
|
||||
.copy-input {
|
||||
input {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
&:disabled {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
<!--If is selected-->
|
||||
<div class="selected" v-if="selected">
|
||||
<div class="option-icon" v-if="selected.icon">
|
||||
<FontAwesomeIcon :icon="selected.icon" />
|
||||
<user-icon v-if="selected.icon === 'user'" size="14"></user-icon>
|
||||
<edit2-icon v-if="selected.icon === 'user-edit'" size="14"></edit2-icon>
|
||||
</div>
|
||||
<span class="option-value">{{ selected.label }}</span>
|
||||
</div>
|
||||
@@ -17,7 +18,7 @@
|
||||
<span class="option-value placehoder">{{ placeholder }}</span>
|
||||
</div>
|
||||
|
||||
<FontAwesomeIcon icon="chevron-down" class="chevron"/>
|
||||
<chevron-down-icon size="19" class="chevron"></chevron-down-icon>
|
||||
</div>
|
||||
|
||||
<!--Options-->
|
||||
@@ -25,7 +26,8 @@
|
||||
<ul class="input-options" v-if="isOpen">
|
||||
<li class="option-item" @click="selectOption(option)" v-for="(option, i) in options" :key="i">
|
||||
<div class="option-icon" v-if="option.icon">
|
||||
<FontAwesomeIcon :icon="option.icon" />
|
||||
<user-icon v-if="option.icon === 'user'" size="14"></user-icon>
|
||||
<edit2-icon v-if="option.icon === 'user-edit'" size="14"></edit2-icon>
|
||||
</div>
|
||||
<span class="option-value">{{ option.label }}</span>
|
||||
</li>
|
||||
@@ -35,9 +37,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ChevronDownIcon, Edit2Icon, UserIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name:'SelectInput',
|
||||
props: ['options', 'isError', 'default', 'placeholder'],
|
||||
components: {
|
||||
Edit2Icon,
|
||||
UserIcon,
|
||||
ChevronDownIcon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selected: undefined,
|
||||
@@ -69,7 +78,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
@@ -77,7 +87,7 @@
|
||||
}
|
||||
|
||||
.input-options {
|
||||
background: $light_background;
|
||||
background: $light_mode_input_background;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
@@ -105,7 +115,7 @@
|
||||
|
||||
.input-area {
|
||||
justify-content: space-between;
|
||||
background: $light_background;
|
||||
background: $light_mode_input_background;
|
||||
border: 1px solid transparent;
|
||||
@include transition(150ms);
|
||||
align-items: center;
|
||||
@@ -138,16 +148,22 @@
|
||||
.option-icon {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
@include font-size(12);
|
||||
@include font-size(10);
|
||||
|
||||
svg {
|
||||
margin-top: -4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.option-value {
|
||||
@include font-size(15);
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
|
||||
&.placehoder {
|
||||
color: $light_text;
|
||||
color: rgba($text, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -39,7 +39,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
|
||||
177
resources/js/components/Others/MobileNavigation.vue
Normal file
177
resources/js/components/Others/MobileNavigation.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="mobile-main-navigation">
|
||||
<transition name="context-menu">
|
||||
<nav v-if="isVisible" class="mobile-navigation">
|
||||
|
||||
<!--User Info-->
|
||||
<div class="user-info">
|
||||
<UserAvatar size="large" />
|
||||
<UserHeadline/>
|
||||
</div>
|
||||
|
||||
<!--Navigation-->
|
||||
<MenuItemList :navigation="navigation" @menu="action" />
|
||||
</nav>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserHeadline from '@/components/Sidebar/UserHeadline'
|
||||
import MenuItemList from '@/components/Mobile/MenuItemList'
|
||||
import UserAvatar from '@/components/Others/UserAvatar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'MenuBar',
|
||||
components: {
|
||||
MenuItemList,
|
||||
UserHeadline,
|
||||
UserAvatar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['app', 'homeDirectory']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
navigation: [
|
||||
{
|
||||
icon: 'hard-drive',
|
||||
title: 'Files',
|
||||
routeName: 'Files',
|
||||
},
|
||||
{
|
||||
icon: 'latest',
|
||||
title: 'Recent Uploads',
|
||||
routeName: 'Files',
|
||||
},
|
||||
{
|
||||
icon: 'share',
|
||||
title: 'Shared Files',
|
||||
routeName: 'SharedFiles',
|
||||
},
|
||||
{
|
||||
icon: 'trash',
|
||||
title: 'Trash',
|
||||
routeName: 'Trash',
|
||||
},
|
||||
{
|
||||
icon: 'settings',
|
||||
title: 'Settings',
|
||||
routeName: 'MobileSettings',
|
||||
},
|
||||
{
|
||||
icon: 'power',
|
||||
title: 'Log Out',
|
||||
routeName: 'LogOut',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
action(name) {
|
||||
|
||||
if (name === 'latest') {
|
||||
this.$store.dispatch('getLatest')
|
||||
}
|
||||
|
||||
if (name === 'hard-drive') {
|
||||
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
|
||||
}
|
||||
|
||||
this.closeAndResetContextMenu()
|
||||
},
|
||||
closeAndResetContextMenu() {
|
||||
this.isVisible = false
|
||||
|
||||
events.$emit('hide:mobile-navigation')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('show:mobile-navigation', () => {
|
||||
this.isVisible = true
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.mobile-navigation {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: white;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
min-height: 440px;
|
||||
max-height: 80%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.vignette {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.mobile-navigation {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.context-menu-enter,
|
||||
.context-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PopupWrapper name="move">
|
||||
<!--Title-->
|
||||
<PopupHeader :title="$t('popup_move_item.title')" />
|
||||
<PopupHeader :title="$t('popup_move_item.title')" icon="move" />
|
||||
|
||||
<!--Content-->
|
||||
<PopupContent type="height-limited" v-if="pickedItem">
|
||||
@@ -123,7 +123,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@@ -36,19 +36,20 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 30px;
|
||||
background: white;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
margin: 20px auto 30px;
|
||||
|
||||
.title {
|
||||
@include font-size(22);
|
||||
@include font-size(18);
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
}
|
||||
@@ -64,6 +65,7 @@
|
||||
|
||||
.page-header {
|
||||
padding: 20px 15px;
|
||||
margin: 0;
|
||||
|
||||
.title {
|
||||
@include font-size(18);
|
||||
@@ -71,6 +73,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
.page-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.page-header {
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.actions {
|
||||
padding: 20px;
|
||||
|
||||
@@ -14,7 +14,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.popup-content {
|
||||
|
||||
|
||||
@@ -1,26 +1,58 @@
|
||||
<template>
|
||||
<div class="popup-header">
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="icon">
|
||||
<corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon"></corner-down-right-icon>
|
||||
<link-icon v-if="icon === 'share'" size="17" class="title-icon"></link-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<x-icon @click="closePopup" size="22" class="close-icon"></x-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CornerDownRightIcon, LinkIcon, XIcon } from 'vue-feather-icons'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'PopupHeader',
|
||||
props: [
|
||||
'title'
|
||||
]
|
||||
'title', 'icon'
|
||||
],
|
||||
components: {
|
||||
CornerDownRightIcon,
|
||||
LinkIcon,
|
||||
XIcon,
|
||||
},
|
||||
methods: {
|
||||
closePopup() {
|
||||
events.$emit('popup:close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.popup-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
line-height: 0;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@include font-size(18);
|
||||
@include font-size(17);
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
}
|
||||
@@ -30,6 +62,27 @@
|
||||
color: #8b8f9a;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
.close-icon {
|
||||
padding: 1px 4px;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
@@ -38,6 +91,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup-header {
|
||||
.title {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition name="popup">
|
||||
<div class="popup" @click.self="closePopup" v-show="isVisibleWrapper">
|
||||
<div class="popup" @click.self="closePopup" v-if="isVisibleWrapper">
|
||||
<div class="popup-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@@ -46,7 +46,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
@@ -129,6 +130,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.popup-wrapper {
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
padding: 25px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_background;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PopupWrapper name="share-create">
|
||||
<!--Title-->
|
||||
<PopupHeader :title="$t('popup_share_create.title', {item: itemTypeTitle})" />
|
||||
<PopupHeader :title="$t('popup_share_create.title', {item: itemTypeTitle})" icon="share" />
|
||||
|
||||
<!--Content-->
|
||||
<PopupContent>
|
||||
@@ -181,8 +181,6 @@
|
||||
|
||||
// Restore data
|
||||
setTimeout(() => {
|
||||
this.isGeneratedShared = false
|
||||
this.shareLink = undefined
|
||||
this.shareOptions = {
|
||||
permission: undefined,
|
||||
password: undefined,
|
||||
@@ -190,6 +188,8 @@
|
||||
type: undefined,
|
||||
unique_id: undefined,
|
||||
}
|
||||
this.isGeneratedShared = false
|
||||
this.shareLink = undefined
|
||||
}, 150)
|
||||
})
|
||||
}
|
||||
@@ -197,8 +197,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.input-wrapper {
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PopupWrapper name="share-edit">
|
||||
<!--Title-->
|
||||
<PopupHeader :title="$t('popup_share_edit.title')" />
|
||||
<PopupHeader :title="$t('popup_share_edit.title')" icon="share" />
|
||||
|
||||
<!--Content-->
|
||||
<PopupContent v-if="pickedItem && pickedItem.shared">
|
||||
@@ -243,8 +243,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.input-wrapper {
|
||||
|
||||
|
||||
@@ -11,17 +11,24 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.text-label {
|
||||
@include font-size(10);
|
||||
color: $theme;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
padding-left: 25px;
|
||||
@include font-size(12);
|
||||
color: #AFAFAF;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.text-label {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.text-label {
|
||||
color: $theme;
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.theme-label {
|
||||
@include font-size(14);
|
||||
color: $theme;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -61,7 +61,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
@@ -104,7 +105,7 @@
|
||||
|
||||
.icon-item {
|
||||
position: relative;
|
||||
min-width: 40px;
|
||||
min-width: 52px;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
|
||||
@@ -150,8 +151,8 @@
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -159,7 +160,7 @@
|
||||
.small {
|
||||
.file-item {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,9 +2,10 @@
|
||||
<!--Folder Icon-->
|
||||
<div class="folder-item-wrapper">
|
||||
|
||||
<div class="folder-item" :class="{'is-selected': isSelected}" @click="showTree" :style="indent">
|
||||
<FontAwesomeIcon class="icon-chevron" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}" icon="chevron-right"/>
|
||||
<FontAwesomeIcon class="icon" :icon="directoryIcon"/>
|
||||
<div class="folder-item" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
|
||||
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
|
||||
<hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon"></hard-drive-icon>
|
||||
<folder-icon v-if="nodes.location !== 'base'" size="17" class="icon"></folder-icon>
|
||||
<span class="label">{{ nodes.name }}</span>
|
||||
</div>
|
||||
|
||||
@@ -14,6 +15,7 @@
|
||||
|
||||
<script>
|
||||
import TreeMenu from '@/components/Others/TreeMenu'
|
||||
import {FolderIcon, ChevronRightIcon, HardDriveIcon} from 'vue-feather-icons'
|
||||
import {events} from "@/bus"
|
||||
|
||||
export default {
|
||||
@@ -22,20 +24,15 @@
|
||||
'nodes', 'depth'
|
||||
],
|
||||
components: {
|
||||
ChevronRightIcon,
|
||||
HardDriveIcon,
|
||||
FolderIcon,
|
||||
TreeMenu,
|
||||
},
|
||||
computed: {
|
||||
indent() {
|
||||
return { paddingLeft: this.depth * 25 + 'px' }
|
||||
return { paddingLeft: this.depth * 20 + 'px' }
|
||||
},
|
||||
directoryIcon() {
|
||||
|
||||
if (this.nodes.location === 'base') {
|
||||
return 'hdd'
|
||||
} else {
|
||||
return 'folder'
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -44,10 +41,12 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFolder() {
|
||||
events.$emit('show-folder-item', this.nodes)
|
||||
events.$emit('pick-folder', this.nodes)
|
||||
},
|
||||
showTree() {
|
||||
this.isVisible = ! this.isVisible
|
||||
|
||||
events.$emit('pick-folder', this.nodes)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -61,36 +60,46 @@
|
||||
|
||||
if (this.nodes.unique_id == node.unique_id) this.isSelected = true
|
||||
})
|
||||
|
||||
// Select clicked folder
|
||||
events.$on('show-folder-item', node => {
|
||||
this.isSelected = false
|
||||
|
||||
if (this.nodes.unique_id == node.unique_id)
|
||||
this.isSelected = true
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.folder-item {
|
||||
user-select: none;
|
||||
display: block;
|
||||
padding: 15px 20px;
|
||||
padding: 8px 23px;
|
||||
@include transition(150ms);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
|
||||
.icon {
|
||||
@include font-size(18);
|
||||
line-height: 0;
|
||||
width: 15px;
|
||||
margin-right: 9px;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
|
||||
path {
|
||||
fill: $text;
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-chevron {
|
||||
.icon-arrow {
|
||||
@include transition(300ms);
|
||||
@include font-size(13);
|
||||
margin-right: 9px;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
opacity: 0;
|
||||
|
||||
@@ -101,14 +110,11 @@
|
||||
&.is-opened {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
|
||||
path {
|
||||
fill: rgba($text, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
@include font-size(15);
|
||||
@include transition(150ms);
|
||||
@include font-size(13);
|
||||
font-weight: 700;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
@@ -118,16 +124,12 @@
|
||||
color: $text;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.icon {
|
||||
path {
|
||||
fill: $theme;
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,33 +143,18 @@
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.folder-item {
|
||||
border-bottom: 1px solid $dark_mode_border_color;
|
||||
|
||||
.label {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-chevron {
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
|
||||
182
resources/js/components/Others/TreeMenuNavigator.vue
Normal file
182
resources/js/components/Others/TreeMenuNavigator.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<transition name="folder">
|
||||
<div class="folder-item-wrapper">
|
||||
|
||||
<div class="folder-item" :class="{'is-selected': isSelected}" :style="indent" @click="getFolder">
|
||||
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow"
|
||||
:class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
|
||||
<folder-icon size="17" class="icon"></folder-icon>
|
||||
<span class="label">{{ nodes.name }}</span>
|
||||
</div>
|
||||
|
||||
<TreeMenuNavigator :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders"
|
||||
:key="item.unique_id"/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
|
||||
import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons'
|
||||
import {events} from "@/bus"
|
||||
|
||||
export default {
|
||||
name: 'TreeMenuNavigator',
|
||||
props: [
|
||||
'nodes', 'depth'
|
||||
],
|
||||
components: {
|
||||
TreeMenuNavigator,
|
||||
ChevronRightIcon,
|
||||
FolderIcon,
|
||||
},
|
||||
computed: {
|
||||
indent() {
|
||||
|
||||
let offset = window.innerWidth <= 1024 ? 17 : 22;
|
||||
|
||||
let value = this.depth == 0 ? offset : offset + (this.depth * 20);
|
||||
|
||||
return {paddingLeft: value + 'px'}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
isSelected: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFolder() {
|
||||
|
||||
events.$emit('show-folder', this.nodes)
|
||||
|
||||
// Get folder content
|
||||
this.$store.dispatch('getFolder', [{folder: this.nodes, back: false, init: false}])
|
||||
},
|
||||
showTree() {
|
||||
this.isVisible = !this.isVisible
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
// Select clicked folder
|
||||
events.$on('show-folder', node => {
|
||||
this.isSelected = false
|
||||
|
||||
if (this.nodes.unique_id == node.unique_id)
|
||||
this.isSelected = true
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.folder-item {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
@include transition(150ms);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
line-height: 0;
|
||||
width: 15px;
|
||||
margin-right: 9px;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow {
|
||||
@include transition(300ms);
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
opacity: 0;
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-opened {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
@include transition(150ms);
|
||||
@include font-size(13);
|
||||
font-weight: 700;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
color: $text;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-selected {
|
||||
|
||||
.icon {
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.folder-item {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.folder-item {
|
||||
|
||||
.label {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) and (max-width: 690px) {
|
||||
.folder-item {
|
||||
|
||||
&:hover,
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
47
resources/js/components/Others/UserAvatar.vue
Normal file
47
resources/js/components/Others/UserAvatar.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="user-avatar" :class="size">
|
||||
<img :src="app.user.avatar" :alt="app.user.name">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'UserAvatar',
|
||||
props: [
|
||||
'size'
|
||||
],
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.user-avatar {
|
||||
line-height: 0;
|
||||
|
||||
img {
|
||||
border-radius: 6px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
|
||||
img {
|
||||
border-radius: 9px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -60,7 +60,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.dropzone {
|
||||
position: relative;
|
||||
@@ -79,12 +80,10 @@
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed $theme;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,7 +34,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.vignette {
|
||||
position: absolute;
|
||||
|
||||
25
resources/js/components/Sidebar/ContentGroup.vue
Normal file
25
resources/js/components/Sidebar/ContentGroup.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="content-group">
|
||||
<TextLabel>{{ title }}</TextLabel>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TextLabel from '@/components/Others/TextLabel'
|
||||
|
||||
export default {
|
||||
name: 'ContentGroup',
|
||||
props: ['title'],
|
||||
components: {
|
||||
TextLabel,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.content-group {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
43
resources/js/components/Sidebar/ContentSidebar.vue
Normal file
43
resources/js/components/Sidebar/ContentSidebar.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<section class="content-sidebar">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ContentSidebar',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.content-sidebar {
|
||||
background: linear-gradient(0deg, rgba(246, 245, 241, 0.4) 0%, rgba(243, 244, 246, 0.4) 100%);
|
||||
user-select: none;
|
||||
padding-top: 25px;
|
||||
overflow-y: auto;
|
||||
flex: 0 0 225px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.content-sidebar {
|
||||
flex: 0 0 205px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
.content-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.content-sidebar {
|
||||
background: rgba($dark_mode_foreground, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<div class="file-item">
|
||||
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile" class="file-icon-text">{{ file.mimetype }}</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img v-if="isImage" class="image" :src="file.thumbnail" :alt="file.name" />
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon v-if="isFolder" class="folder-icon" icon="folder" />
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
|
||||
<!--Name-->
|
||||
<span class="name" >{{ file.name }}</span>
|
||||
|
||||
<!--Other attributes-->
|
||||
<span v-if="! isFolder" class="item-size">{{ file.filesize }}</span>
|
||||
|
||||
<span v-if="isFolder" class="item-length">{{ file.items == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ file.created_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'FileListItemThumbnail',
|
||||
props: ['file'],
|
||||
computed: {
|
||||
isFolder() {
|
||||
return this.file.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.file.type !== 'folder' && this.file.type !== 'image'
|
||||
},
|
||||
isImage() {
|
||||
return this.file.type === 'image'
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
@include transition(150ms);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
position: relative;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
|
||||
.file-icon {
|
||||
@include font-size(35);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
top: 40%;
|
||||
@include font-size(9);
|
||||
line-height: 1;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 20px;
|
||||
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: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.file-item {
|
||||
|
||||
.icon-item .file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.item-name .name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 690px) and (prefers-color-scheme: dark){
|
||||
.file-item {
|
||||
|
||||
.icon-item .file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
resources/js/components/Sidebar/MenuBar.vue
Normal file
216
resources/js/components/Sidebar/MenuBar.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<nav class="menu-bar" v-if="app">
|
||||
|
||||
<!--Navigation Icons-->
|
||||
<div class="icon-navigation menu">
|
||||
|
||||
<router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
|
||||
<UserAvatar />
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home">
|
||||
<div class="button-icon">
|
||||
<hard-drive-icon size="19"></hard-drive-icon>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'SharedFiles'}" :title="$t('locations.shared')" class="icon-navigation-item shared">
|
||||
<div class="button-icon">
|
||||
<share-icon size="19"></share-icon>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Trash'}" :title="$t('locations.trash')" class="icon-navigation-item trash">
|
||||
<div class="button-icon">
|
||||
<trash-2-icon size="19"></trash-2-icon>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Profile'}" :class="{'is-active': $isThisRoute($route, ['Password'])}" class="icon-navigation-item settings">
|
||||
<div class="button-icon">
|
||||
<settings-icon size="19"></settings-icon>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!--User avatar & Logout-->
|
||||
<ul class="icon-navigation logout">
|
||||
<li @click="$store.dispatch('logOut')" class="icon-navigation-item">
|
||||
<div class="button-icon">
|
||||
<power-icon size="19"></power-icon>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserAvatar from '@/components/Others/UserAvatar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
Trash2Icon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'MenuBar',
|
||||
components: {
|
||||
HardDriveIcon,
|
||||
SettingsIcon,
|
||||
UserAvatar,
|
||||
Trash2Icon,
|
||||
PowerIcon,
|
||||
ShareIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('getAppData')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.menu-bar {
|
||||
background: linear-gradient(180deg, rgba(246, 245, 241, 0.8) 0%, rgba(243, 244, 246, 0.8) 100%);
|
||||
user-select: none;
|
||||
padding-top: 25px;
|
||||
display: grid;
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.icon-navigation {
|
||||
text-align: center;
|
||||
|
||||
&.menu {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
&.logout {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.icon-navigation-item {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.user {
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
@include transition(150ms);
|
||||
|
||||
&:hover {
|
||||
background: darken($light_background, 5%);
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
stroke: black;
|
||||
}
|
||||
}
|
||||
|
||||
.router-link-active,
|
||||
.is-active {
|
||||
|
||||
&.home {
|
||||
.button-icon {
|
||||
background: rgba($theme, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.shared {
|
||||
.button-icon {
|
||||
background: rgba($yellow, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.trash {
|
||||
.button-icon {
|
||||
background: rgba($red, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
.button-icon {
|
||||
background: rgba($purple, 0.1);
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.menu-bar {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.icon-navigation {
|
||||
|
||||
.icon-navigation-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
.menu-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.icon-navigation {
|
||||
|
||||
.button-icon {
|
||||
&:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,460 +0,0 @@
|
||||
<template>
|
||||
<transition name="sidebar">
|
||||
<div id="sidebar" v-if="app && (isVisibleSidebar || ! isSmallAppSize)">
|
||||
|
||||
<!--User Headline-->
|
||||
<UserHeadline/>
|
||||
|
||||
<!--Content-->
|
||||
<div class="content-scroller">
|
||||
|
||||
<!--Locations-->
|
||||
<div class="menu-list-wrapper">
|
||||
<TextLabel>{{ $t('sidebar.locations') }}</TextLabel>
|
||||
<ul class="menu-list">
|
||||
<li class="menu-list-item" :class="{'is-active': isBaseLocation}" @click="goHome">
|
||||
<FontAwesomeIcon class="icon" icon="hdd"/>
|
||||
<span class="label">{{ $t('locations.home') }}</span>
|
||||
</li>
|
||||
<li class="menu-list-item" :class="{'is-active': isSharedLocation}" @click="getShared">
|
||||
<FontAwesomeIcon class="icon" icon="share"/>
|
||||
<span class="label">{{ $t('locations.shared') }}</span>
|
||||
</li>
|
||||
<li class="menu-list-item" :class="{'is-active': isTrashLocation}" @click="getTrash">
|
||||
<FontAwesomeIcon class="icon" icon="trash-alt"/>
|
||||
<span class="label">{{ $t('locations.trash') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Favourites-->
|
||||
<div class="menu-list-wrapper favourites"
|
||||
@dragover.prevent="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@drop="dragFinish($event)"
|
||||
:class="{ 'is-dragenter': area }"
|
||||
>
|
||||
<TextLabel>{{ $t('sidebar.favourites') }}</TextLabel>
|
||||
<transition-group tag="ul" class="menu-list" name="folder-item">
|
||||
<li class="empty-list" v-if="app.favourites.length == 0" :key="0">
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</li>
|
||||
|
||||
<li @click.stop="openFolder(folder)" class="menu-list-item" v-for="folder in app.favourites"
|
||||
:key="folder.unique_id">
|
||||
<div>
|
||||
<FontAwesomeIcon class="icon" icon="folder"/>
|
||||
<span class="label">{{ folder.name }}</span>
|
||||
</div>
|
||||
<FontAwesomeIcon @click.stop="removeFavourite(folder)" v-if="! $isMobile()" class="delete-icon" icon="times"/>
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Last Uploads-->
|
||||
<div class="menu-list-wrapper">
|
||||
<TextLabel>{{ $t('sidebar.latest') }}</TextLabel>
|
||||
|
||||
<p class="empty-list" v-if="app.latest_uploads.length == 0">{{ $t('sidebar.latest_empty') }}</p>
|
||||
|
||||
<FileListItemThumbnail @dblclick.native="downloadFile(item)" @click.native="showFileDetail(item)" :file="item" v-for="item in app.latest_uploads" :key="item.unique_id"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Storage Size Info-->
|
||||
<StorageSize v-if="config.storageLimit"/>
|
||||
|
||||
<!--Mobile logout button-->
|
||||
<div v-if="isSmallAppSize" class="log-out-button">
|
||||
<ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">{{ $t('context_menu.log_out') }}</ButtonBase>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileListItemThumbnail from '@/components/Sidebar/FileListItemThumbnail'
|
||||
import UserHeadline from '@/components/Sidebar/UserHeadline'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import StorageSize from '@/components/Sidebar/StorageSize'
|
||||
import TextLabel from '@/components/Others/TextLabel'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
components: {
|
||||
FileListItemThumbnail,
|
||||
UserHeadline,
|
||||
StorageSize,
|
||||
ButtonBase,
|
||||
TextLabel,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['homeDirectory', 'app', 'appSize', 'config', 'currentFolder']),
|
||||
isTrashLocation() {
|
||||
return this.currentFolder && this.currentFolder.location === 'trash-root' || this.currentFolder && this.currentFolder.location === 'trash'
|
||||
},
|
||||
isBaseLocation() {
|
||||
return this.currentFolder && this.currentFolder.location === 'base'
|
||||
},
|
||||
isSharedLocation() {
|
||||
return this.currentFolder && this.currentFolder.location === 'shared'
|
||||
},
|
||||
isSmallAppSize() {
|
||||
return this.appSize === 'small'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
area: false,
|
||||
draggedItem: undefined,
|
||||
isVisibleSidebar: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getShared() {
|
||||
this.$store.dispatch('getShared')
|
||||
},
|
||||
getTrash() {
|
||||
this.$store.dispatch('getTrash')
|
||||
},
|
||||
goHome() {
|
||||
this.$store.commit('FLUSH_BROWSER_HISTORY')
|
||||
this.$store.dispatch('getFolder', [this.homeDirectory, true])
|
||||
},
|
||||
openFolder(folder) {
|
||||
|
||||
// Go to folder
|
||||
this.$store.dispatch('getFolder', [folder, false])
|
||||
},
|
||||
downloadFile(file) {
|
||||
|
||||
this.$downloadFile(file.file_url, file.name + '.' + file.mimetype)
|
||||
},
|
||||
showFileDetail(file) {
|
||||
// Dispatch load file info detail
|
||||
this.$store.dispatch('getFileDetail', file)
|
||||
|
||||
// Show panel if is not open
|
||||
this.$store.dispatch('fileInfoToggle', true)
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.draggedItem && this.draggedItem.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
dragFinish() {
|
||||
this.area = false
|
||||
|
||||
// Check if draged item is folder
|
||||
if (this.draggedItem && this.draggedItem.type !== 'folder') return
|
||||
|
||||
// Check if folder exist in favourites
|
||||
if (this.app.favourites.find(folder => folder.unique_id == this.draggedItem.unique_id)) return
|
||||
|
||||
// Store favourites folder
|
||||
this.$store.dispatch('addToFavourites', this.draggedItem)
|
||||
|
||||
},
|
||||
removeFavourite(folder) {
|
||||
|
||||
// Remove favourites folder
|
||||
this.$store.dispatch('removeFromFavourites', folder)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
// Listen for dragstart folder items
|
||||
events.$on('dragstart', (item) => this.draggedItem = item)
|
||||
|
||||
// Listen for show sidebar
|
||||
events.$on('show:sidebar', () => {
|
||||
this.isVisibleSidebar = !this.isVisibleSidebar
|
||||
})
|
||||
|
||||
// Listen for hide sidebar
|
||||
events.$on('show:content', () => {
|
||||
if (this.isVisibleSidebar) this.isVisibleSidebar = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
#sidebar {
|
||||
position: relative;
|
||||
flex: 0 0 265px;
|
||||
background: $light_background;
|
||||
}
|
||||
|
||||
.content-scroller {
|
||||
bottom: 50px;
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
.menu-list-wrapper:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.text-label {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list-wrapper {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.menu-list {
|
||||
|
||||
.menu-list-item {
|
||||
display: block;
|
||||
padding: 8px 15px 8px 25px;
|
||||
@include transition(150ms);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
@include font-size(13);
|
||||
width: 15px;
|
||||
margin-right: 9px;
|
||||
vertical-align: middle;
|
||||
|
||||
path {
|
||||
fill: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
@include font-size(12);
|
||||
|
||||
path {
|
||||
fill: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
max-width: 210px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.icon {
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.favourites {
|
||||
|
||||
&.is-dragenter {
|
||||
|
||||
.menu-list {
|
||||
border: 2px dashed $theme;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
border: 2px dashed transparent;
|
||||
|
||||
.menu-list-item {
|
||||
padding: 8px 23px;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
@include font-size(14);
|
||||
width: 20px;
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.icon {
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
@include font-size(12);
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-out-button {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
#sidebar {
|
||||
flex: 0 0 265px;
|
||||
}
|
||||
|
||||
.menu-list-wrapper .menu-list .menu-list-item .label {
|
||||
max-width: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.content-scroller {
|
||||
bottom: initial;
|
||||
position: relative;
|
||||
top: initial;
|
||||
overflow-x: initial;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu-list-wrapper {
|
||||
|
||||
&.favourites {
|
||||
|
||||
.menu-list .menu-list-item {
|
||||
padding: 10px 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list .menu-list-item {
|
||||
padding: 10px 26px;
|
||||
|
||||
.label {
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-out-button {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
#sidebar {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
|
||||
.menu-list-wrapper {
|
||||
|
||||
.menu-list .menu-list-item {
|
||||
|
||||
.label {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) and (max-width: 690px) {
|
||||
#sidebar {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.sidebar-enter /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
// Transition
|
||||
.folder-item-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
|
||||
.folder-item-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.folder-item-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.folder-item-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -24,7 +24,8 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.storage-size {
|
||||
position: absolute;
|
||||
|
||||
@@ -1,26 +1,7 @@
|
||||
<template>
|
||||
<div class="user-headline-wrapper" v-if="app">
|
||||
<div class="user-headline" @click="openMenu">
|
||||
<div class="user-avatar">
|
||||
<img :src="app.user.avatar" :alt="app.user.name">
|
||||
</div>
|
||||
<div class="user-name">
|
||||
<b class="name">{{ app.user.name }}</b>
|
||||
<span class="email">{{ app.user.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="user-menu">
|
||||
<div class="user-menu" v-if="isOpenedMenu">
|
||||
<ul class="menu-options" @click="closeMenu">
|
||||
<li class="menu-option">
|
||||
<router-link :to="{name: 'Profile'}">
|
||||
{{ $t('context_menu.profile_settings') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="menu-option" @click="$store.dispatch('logOut')">{{ $t('context_menu.log_out') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="user-meta" v-if="app">
|
||||
<b class="name">{{ app.user.name }}</b>
|
||||
<span class="email">{{ app.user.email }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -31,198 +12,36 @@
|
||||
export default {
|
||||
name: 'UserHeadline',
|
||||
computed: {
|
||||
...mapGetters(['app', 'appSize']),
|
||||
isSmallAppSize() {
|
||||
return this.appSize === 'small'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpenedMenu: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openMenu() {
|
||||
|
||||
// If is mobile, then go to user settings page, else, open menu
|
||||
if ( this.isSmallAppSize ) {
|
||||
|
||||
events.$emit('show:sidebar')
|
||||
this.$router.push({name: 'Profile'})
|
||||
|
||||
} else {
|
||||
|
||||
this.isOpenedMenu = !this.isOpenedMenu
|
||||
}
|
||||
|
||||
},
|
||||
closeMenu() {
|
||||
this.isOpenedMenu = !this.isOpenedMenu
|
||||
},
|
||||
...mapGetters(['app']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.user-headline-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-headline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 15px;
|
||||
padding: 5px;
|
||||
user-select: none;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
@include transition(150ms);
|
||||
background: darken($light_background, 3%);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
|
||||
.name, .email {
|
||||
white-space: nowrap;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.user-meta {
|
||||
padding-left: 20px;
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
@include font-size(17);
|
||||
line-height: 1;
|
||||
color: $text;
|
||||
@include font-size(18);
|
||||
}
|
||||
|
||||
.email {
|
||||
@include font-size(13);
|
||||
color: $theme;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
@include font-size(12);
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
line-height: 0;
|
||||
margin-right: 15px;
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 15px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
|
||||
.menu-option {
|
||||
font-weight: 700;
|
||||
@include font-size(15);
|
||||
padding: 15px 30px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
color: $text;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.user-headline {
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.user-headline {
|
||||
background: $dark_mode_background;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
a {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
.user-menu-enter-active {
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.user-menu-leave-active {
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.user-menu-enter,
|
||||
.user-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-35%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
10
resources/js/helpers.js
vendored
10
resources/js/helpers.js
vendored
@@ -2,6 +2,7 @@ import store from './store/index'
|
||||
import {debounce, includes} from "lodash";
|
||||
import {events} from './bus'
|
||||
import axios from 'axios'
|
||||
import router from '@/router'
|
||||
|
||||
const Helpers = {
|
||||
install(Vue) {
|
||||
@@ -88,6 +89,10 @@ const Helpers = {
|
||||
// Append form data
|
||||
formData.append('parent_id', rootFolder)
|
||||
|
||||
console.log(i);
|
||||
console.log(files[i]);
|
||||
console.log(formData);
|
||||
|
||||
// Upload data
|
||||
await store.dispatch('uploadFiles', formData)
|
||||
.then(() => {
|
||||
@@ -233,6 +238,11 @@ const Helpers = {
|
||||
events.$emit('popup:close')
|
||||
}
|
||||
|
||||
Vue.prototype.$isThisRoute = function(route, locations) {
|
||||
|
||||
return includes(locations, route.name)
|
||||
}
|
||||
|
||||
Vue.prototype.$isThisLocation = function(location) {
|
||||
|
||||
// Get current location
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
"store_pass": "Store New Password",
|
||||
"change_pass": "Change Password",
|
||||
"profile_info": "Profile Information",
|
||||
"photo_description": "Change Your Profile Picture",
|
||||
"photo_description": "Change your avatar",
|
||||
"photo_supported": "Supported formats are .png, .jpg, .jpeg."
|
||||
},
|
||||
"page_registration": {
|
||||
@@ -18,7 +18,7 @@
|
||||
"label_name": "Full Name:",
|
||||
"placeholder_name": "Type your full name",
|
||||
"label_pass": "Create password:",
|
||||
"placeholder_pass": "Your new password",
|
||||
"placeholder_pass": "New password",
|
||||
"label_confirm_pass": "Confirm password:",
|
||||
"placeholder_confirm_pass": "Confirm your new password",
|
||||
"button_create_account": "Create Account",
|
||||
@@ -40,8 +40,8 @@
|
||||
"subtitle": "Create your new password here:",
|
||||
"button_update": "Update Password",
|
||||
"label_email": "Email:",
|
||||
"label_new_pass": "Your new password",
|
||||
"label_confirm_pass": "Confirm new password"
|
||||
"label_new_pass": "New password",
|
||||
"label_confirm_pass": "Confirm password"
|
||||
},
|
||||
"page_forgotten_password": {
|
||||
"title": "Forgotten Password?",
|
||||
@@ -75,7 +75,7 @@
|
||||
"progress": "Uploading files {current}/{total}"
|
||||
},
|
||||
"inputs": {
|
||||
"placeholder_search_files": "Search files…"
|
||||
"placeholder_search_files": "Search files or folders..."
|
||||
},
|
||||
"messages": {
|
||||
"nothing_to_preview": "There is nothing to preview.",
|
||||
|
||||
61
resources/js/router.js
vendored
61
resources/js/router.js
vendored
@@ -8,8 +8,14 @@ import NotFoundShared from './views/Shared/NotFoundShared'
|
||||
import ForgottenPassword from './views/Auth/ForgottenPassword'
|
||||
import CreateNewPassword from './views/Auth/CreateNewPassword'
|
||||
|
||||
import Files from './views/Files'
|
||||
import Profile from './views/Profile'
|
||||
import Settings from './views/Settings'
|
||||
import Profile from './views/User/Profile'
|
||||
import Trash from './views/FilePages/Trash'
|
||||
import Files from './views/FilePages/Files'
|
||||
import Password from './views/User/Password'
|
||||
import SharedFiles from './views/FilePages/SharedFiles'
|
||||
|
||||
import MobileSettings from './views/Mobile/MobileSettings'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
@@ -73,13 +79,58 @@ const router = new Router({
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Profile',
|
||||
path: '/profile',
|
||||
component: Profile,
|
||||
name: 'SharedFiles',
|
||||
path: '/shared-files',
|
||||
component: SharedFiles,
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Trash',
|
||||
path: '/trash',
|
||||
component: Trash,
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
path: '/settings',
|
||||
component: Settings,
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'Profile',
|
||||
path: 'profile',
|
||||
component: Profile,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: 'User Profile'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Password',
|
||||
path: '/settings/password',
|
||||
component: Password,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: 'Change Password'
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'MobileSettings',
|
||||
path: '/settings-mobile',
|
||||
component: MobileSettings,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: 'Settings'
|
||||
},
|
||||
}
|
||||
],
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
|
||||
|
||||
27
resources/js/store/modules/app.js
vendored
27
resources/js/store/modules/app.js
vendored
@@ -3,6 +3,8 @@ const defaultState = {
|
||||
FilePreviewType: localStorage.getItem('preview_type') || 'list',
|
||||
appSize: undefined,
|
||||
config: undefined,
|
||||
authorized: undefined,
|
||||
homeDirectory: undefined,
|
||||
}
|
||||
const actions = {
|
||||
changePreviewType: ({commit, dispatch, state, getters}) => {
|
||||
@@ -14,18 +16,6 @@ const actions = {
|
||||
|
||||
// Change preview
|
||||
commit('CHANGE_PREVIEW', previewType)
|
||||
|
||||
if (getters.currentFolder.location === 'trash-root') {
|
||||
dispatch('getTrash')
|
||||
|
||||
} else {
|
||||
|
||||
if ( getters.currentFolder.location === 'public' ) {
|
||||
dispatch('browseShared', [getters.currentFolder, false, true])
|
||||
} else {
|
||||
dispatch('getFolder', [getters.currentFolder, false, true])
|
||||
}
|
||||
}
|
||||
},
|
||||
fileInfoToggle: (context, visibility = undefined) => {
|
||||
if (!visibility) {
|
||||
@@ -40,6 +30,11 @@ const actions = {
|
||||
},
|
||||
}
|
||||
const mutations = {
|
||||
INIT(state, data) {
|
||||
state.config = data.config
|
||||
state.authorized = data.authCookie
|
||||
state.homeDirectory = data.rootDirectory
|
||||
},
|
||||
FILE_INFO_TOGGLE(state, isVisible) {
|
||||
state.fileInfoPanelVisible = isVisible
|
||||
|
||||
@@ -48,13 +43,12 @@ const mutations = {
|
||||
SET_APP_WIDTH(state, scale) {
|
||||
state.appSize = scale
|
||||
},
|
||||
SET_AUTHORIZED(state, data) {
|
||||
state.authorized = data
|
||||
},
|
||||
CHANGE_PREVIEW(state, type) {
|
||||
state.FilePreviewType = type
|
||||
},
|
||||
SET_CONFIG(state, config) {
|
||||
state.config = config
|
||||
},
|
||||
|
||||
}
|
||||
const getters = {
|
||||
fileInfoVisible: state => state.fileInfoPanelVisible,
|
||||
@@ -62,6 +56,7 @@ const getters = {
|
||||
appSize: state => state.appSize,
|
||||
api: state => state.config.api,
|
||||
config: state => state.config,
|
||||
homeDirectory: state => state.homeDirectory,
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
228
resources/js/store/modules/fileBrowser.js
vendored
228
resources/js/store/modules/fileBrowser.js
vendored
@@ -1,16 +1,13 @@
|
||||
import axios from 'axios'
|
||||
import {events} from '@/bus'
|
||||
import router from '@/router'
|
||||
import {includes} from 'lodash'
|
||||
import i18n from '@/i18n/index'
|
||||
|
||||
const defaultState = {
|
||||
uploadingFilesCount: undefined,
|
||||
fileInfoDetail: undefined,
|
||||
currentFolder: undefined,
|
||||
homeDirectory: undefined,
|
||||
uploadingFileProgress: 0,
|
||||
filesViewWidth: undefined,
|
||||
navigation: undefined,
|
||||
isSearching: false,
|
||||
browseHistory: [],
|
||||
@@ -19,56 +16,45 @@ const defaultState = {
|
||||
}
|
||||
|
||||
const actions = {
|
||||
getFolder: (context, [folder, back = false, init = false]) => {
|
||||
events.$emit('show:content')
|
||||
getFolder: ({commit, getters}, [payload]) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
|
||||
// Go to files view
|
||||
if (!includes(['Files', 'SharedPage'], router.currentRoute.name)) {
|
||||
router.push({name: 'Files'})
|
||||
}
|
||||
|
||||
context.commit('LOADING_STATE', true)
|
||||
context.commit('FLUSH_DATA')
|
||||
if (payload.init)
|
||||
commit('FLUSH_FOLDER_HISTORY')
|
||||
|
||||
// Clear search
|
||||
if (context.state.isSearching) {
|
||||
context.commit('CHANGE_SEARCHING_STATE', false)
|
||||
if (getters.isSearching) {
|
||||
commit('CHANGE_SEARCHING_STATE', false)
|
||||
events.$emit('clear-query')
|
||||
}
|
||||
|
||||
// Create current folder for history
|
||||
let currentFolder = {
|
||||
name: folder.name,
|
||||
unique_id: folder.unique_id,
|
||||
location: folder.deleted_at || folder.location === 'trash' ? 'trash' : 'base'
|
||||
}
|
||||
// Set folder location
|
||||
payload.folder.location = payload.folder.deleted_at || payload.folder.location === 'trash' ? 'trash' : 'base'
|
||||
|
||||
let url = currentFolder.location === 'trash'
|
||||
? '/folders/' + currentFolder.unique_id + '?trash=true'
|
||||
: '/folders/' + currentFolder.unique_id
|
||||
if (! payload.back)
|
||||
commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
|
||||
|
||||
let url = payload.folder.location === 'trash'
|
||||
? '/folders/' + payload.folder.unique_id + '?trash=true'
|
||||
: '/folders/' + payload.folder.unique_id
|
||||
|
||||
axios
|
||||
.get(context.getters.api + url)
|
||||
.get(getters.api + url)
|
||||
.then(response => {
|
||||
context.commit('LOADING_STATE', false)
|
||||
context.commit('GET_DATA', response.data)
|
||||
context.commit('STORE_CURRENT_FOLDER', currentFolder)
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
commit('STORE_CURRENT_FOLDER', payload.folder)
|
||||
|
||||
if (payload.back)
|
||||
commit('REMOVE_BROWSER_HISTORY')
|
||||
|
||||
events.$emit('scrollTop')
|
||||
|
||||
if (back) {
|
||||
context.commit('REMOVE_BROWSER_HISTORY')
|
||||
|
||||
} else {
|
||||
if (!init) context.commit('ADD_BROWSER_HISTORY', currentFolder)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// Redirect if unauthenticated
|
||||
if ([401, 403].includes(error.response.status)) {
|
||||
|
||||
context.commit('SET_AUTHORIZED', false)
|
||||
commit('SET_AUTHORIZED', false)
|
||||
router.push({name: 'SignIn'})
|
||||
|
||||
} else {
|
||||
@@ -81,83 +67,89 @@ const actions = {
|
||||
}
|
||||
})
|
||||
},
|
||||
getShared: (context, back = false) => {
|
||||
events.$emit('show:content')
|
||||
getLatest: ({commit, getters}) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
|
||||
// Go to files view
|
||||
if (router.currentRoute.name !== 'Files') {
|
||||
router.push({name: 'Files'})
|
||||
}
|
||||
|
||||
if (!back) context.commit('FLUSH_BROWSER_HISTORY')
|
||||
context.commit('FLUSH_DATA')
|
||||
context.commit('LOADING_STATE', true)
|
||||
|
||||
// Create shared object for history
|
||||
let trash = {
|
||||
name: 'Shared',
|
||||
commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
|
||||
commit('STORE_CURRENT_FOLDER', {
|
||||
name: 'Latest',
|
||||
unique_id: undefined,
|
||||
location: 'shared',
|
||||
}
|
||||
location: 'latest',
|
||||
})
|
||||
|
||||
axios
|
||||
.get(context.getters.api + '/shared-all')
|
||||
.get(getters.api + '/latest')
|
||||
.then(response => {
|
||||
context.commit('GET_DATA', response.data)
|
||||
context.commit('LOADING_STATE', false)
|
||||
context.commit('STORE_CURRENT_FOLDER', trash)
|
||||
context.commit('ADD_BROWSER_HISTORY', trash)
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
events.$emit('scrollTop')
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
getShared: ({commit, getters}) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
commit('FLUSH_FOLDER_HISTORY')
|
||||
|
||||
let currentFolder = {
|
||||
name: 'Shared',
|
||||
location: 'shared',
|
||||
unique_id: undefined,
|
||||
}
|
||||
|
||||
commit('STORE_CURRENT_FOLDER', currentFolder)
|
||||
|
||||
axios
|
||||
.get(getters.api + '/shared-all')
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
commit('STORE_PREVIOUS_FOLDER', currentFolder)
|
||||
|
||||
events.$emit('scrollTop')
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
getTrash: (context, back = false) => {
|
||||
events.$emit('show:content')
|
||||
getParticipantUploads: ({commit, getters}) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
|
||||
// Go to files view
|
||||
if (router.currentRoute.name !== 'Files') {
|
||||
router.push({name: 'Files'})
|
||||
}
|
||||
commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
|
||||
commit('STORE_CURRENT_FOLDER', {
|
||||
name: 'Participant Uploads',
|
||||
unique_id: undefined,
|
||||
location: 'participant_uploads',
|
||||
})
|
||||
|
||||
if (!back) context.commit('FLUSH_BROWSER_HISTORY')
|
||||
context.commit('FLUSH_DATA')
|
||||
context.commit('LOADING_STATE', true)
|
||||
axios
|
||||
.get(getters.api + '/participant-uploads')
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
|
||||
events.$emit('scrollTop')
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
getTrash: ({commit, getters}) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
commit('FLUSH_FOLDER_HISTORY')
|
||||
|
||||
// Create trash object for history
|
||||
let trash = {
|
||||
name: 'Trash',
|
||||
unique_id: undefined,
|
||||
location: 'trash-root',
|
||||
}
|
||||
|
||||
commit('STORE_CURRENT_FOLDER', trash)
|
||||
|
||||
axios
|
||||
.get(context.getters.api + '/trash')
|
||||
.get(getters.api + '/trash')
|
||||
.then(response => {
|
||||
context.commit('GET_DATA', response.data)
|
||||
context.commit('LOADING_STATE', false)
|
||||
context.commit('STORE_CURRENT_FOLDER', trash)
|
||||
context.commit('ADD_BROWSER_HISTORY', trash)
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
commit('STORE_PREVIOUS_FOLDER', trash)
|
||||
|
||||
events.$emit('scrollTop')
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
getSearchResult: ({commit, getters}, query) => {
|
||||
commit('FLUSH_DATA')
|
||||
commit('LOADING_STATE', true)
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
commit('CHANGE_SEARCHING_STATE', true)
|
||||
|
||||
// Get route
|
||||
@@ -175,30 +167,17 @@ const actions = {
|
||||
params: {query: query}
|
||||
})
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', false)
|
||||
commit('GET_DATA', response.data)
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message'),
|
||||
})
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
getFileDetail: (context, file) => {
|
||||
getFileDetail: ({commit, getters}, file) => {
|
||||
axios
|
||||
.get(context.getters.api + '/file-detail/' + file.unique_id)
|
||||
.get(getters.api + '/file-detail/' + file.unique_id)
|
||||
.then(response => {
|
||||
context.commit('LOAD_FILEINFO_DETAIL', response.data)
|
||||
})
|
||||
.catch(() => {
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message'),
|
||||
})
|
||||
commit('LOAD_FILEINFO_DETAIL', response.data)
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
getFolderTree: ({commit, getters}) => {
|
||||
|
||||
@@ -224,11 +203,7 @@ const actions = {
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
|
||||
// Show error message
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message'),
|
||||
})
|
||||
isSomethingWrong()
|
||||
})
|
||||
})
|
||||
},
|
||||
@@ -238,13 +213,11 @@ const mutations = {
|
||||
UPDATE_FOLDER_TREE(state, tree) {
|
||||
state.navigation = tree
|
||||
},
|
||||
LOADING_STATE(state, val) {
|
||||
state.isLoading = val
|
||||
LOADING_STATE(state, payload) {
|
||||
state.data = payload.data
|
||||
state.isLoading = payload.loading
|
||||
},
|
||||
SET_START_DIRECTORY(state, directory) {
|
||||
state.homeDirectory = directory
|
||||
},
|
||||
FLUSH_BROWSER_HISTORY(state) {
|
||||
FLUSH_FOLDER_HISTORY(state) {
|
||||
state.browseHistory = []
|
||||
},
|
||||
FLUSH_SHARED(state, unique_id) {
|
||||
@@ -252,7 +225,7 @@ const mutations = {
|
||||
if (item.unique_id == unique_id) item.shared = undefined
|
||||
})
|
||||
},
|
||||
ADD_BROWSER_HISTORY(state, folder) {
|
||||
STORE_PREVIOUS_FOLDER(state, folder) {
|
||||
state.browseHistory.push(folder)
|
||||
},
|
||||
REMOVE_BROWSER_HISTORY(state) {
|
||||
@@ -295,12 +268,6 @@ const mutations = {
|
||||
if (item.unique_id == data.item_id) item.shared = data
|
||||
})
|
||||
},
|
||||
FLUSH_DATA(state) {
|
||||
state.data = []
|
||||
},
|
||||
GET_DATA(state, loaded_data) {
|
||||
state.data = loaded_data
|
||||
},
|
||||
ADD_NEW_FOLDER(state, folder) {
|
||||
state.data.unshift(folder)
|
||||
},
|
||||
@@ -318,17 +285,12 @@ const mutations = {
|
||||
STORE_CURRENT_FOLDER(state, folder) {
|
||||
state.currentFolder = folder
|
||||
},
|
||||
SET_FILES_VIEW_SIZE(state, type) {
|
||||
state.filesViewWidth = type
|
||||
},
|
||||
}
|
||||
|
||||
const getters = {
|
||||
uploadingFileProgress: state => state.uploadingFileProgress,
|
||||
uploadingFilesCount: state => state.uploadingFilesCount,
|
||||
fileInfoDetail: state => state.fileInfoDetail,
|
||||
filesViewWidth: state => state.filesViewWidth,
|
||||
homeDirectory: state => state.homeDirectory,
|
||||
currentFolder: state => state.currentFolder,
|
||||
browseHistory: state => state.browseHistory,
|
||||
isSearching: state => state.isSearching,
|
||||
@@ -337,6 +299,14 @@ const getters = {
|
||||
data: state => state.data,
|
||||
}
|
||||
|
||||
// Show error message
|
||||
function isSomethingWrong() {
|
||||
events.$emit('alert:open', {
|
||||
title: i18n.t('popup_error.title'),
|
||||
message: i18n.t('popup_error.message'),
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
state: defaultState,
|
||||
getters,
|
||||
|
||||
43
resources/js/store/modules/fileFunctions.js
vendored
43
resources/js/store/modules/fileFunctions.js
vendored
@@ -1,10 +1,11 @@
|
||||
import i18n from '@/i18n/index'
|
||||
import router from '@/router'
|
||||
import {events} from '@/bus'
|
||||
import {last} from 'lodash'
|
||||
import axios from 'axios'
|
||||
|
||||
const actions = {
|
||||
moveItem: ({commit, getters}, [item_from, to_item]) => {
|
||||
moveItem: ({commit, getters, dispatch}, [item_from, to_item]) => {
|
||||
|
||||
// Get route
|
||||
let route = getters.sharedDetail && ! getters.sharedDetail.protected
|
||||
@@ -19,10 +20,14 @@ const actions = {
|
||||
.then(() => {
|
||||
commit('REMOVE_ITEM', item_from.unique_id)
|
||||
commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
|
||||
|
||||
if (item_from.type === 'folder' && getters.currentFolder.location !== 'public')
|
||||
dispatch('getAppData')
|
||||
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
createFolder: ({commit, getters}, folderName) => {
|
||||
createFolder: ({commit, getters, dispatch}, folderName) => {
|
||||
|
||||
// Get route
|
||||
let route = getters.sharedDetail && ! getters.sharedDetail.protected
|
||||
@@ -36,10 +41,14 @@ const actions = {
|
||||
})
|
||||
.then(response => {
|
||||
commit('ADD_NEW_FOLDER', response.data)
|
||||
|
||||
if ( getters.currentFolder.location !== 'public' ) {
|
||||
dispatch('getAppData')
|
||||
}
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
renameItem: ({commit, getters}, data) => {
|
||||
renameItem: ({commit, getters, dispatch}, data) => {
|
||||
|
||||
// Updated name in favourites panel
|
||||
if (getters.permission === 'master' && data.type === 'folder')
|
||||
@@ -57,6 +66,9 @@ const actions = {
|
||||
})
|
||||
.then(response => {
|
||||
commit('CHANGE_ITEM_NAME', response.data)
|
||||
|
||||
if (data.type === 'folder' && getters.currentFolder.location !== 'public')
|
||||
dispatch('getAppData')
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
@@ -87,9 +99,6 @@ const actions = {
|
||||
|
||||
commit('UPLOADING_FILE_PROGRESS', 0)
|
||||
|
||||
if (getters.permission === 'master')
|
||||
commit('UPDATE_RECENT_UPLOAD', response.data)
|
||||
|
||||
resolve(response)
|
||||
})
|
||||
.catch(error => {
|
||||
@@ -121,7 +130,7 @@ const actions = {
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
deleteItem: ({commit, getters}, data) => {
|
||||
deleteItem: ({commit, getters, dispatch}, data) => {
|
||||
|
||||
// Remove file
|
||||
commit('REMOVE_ITEM', data.unique_id)
|
||||
@@ -131,8 +140,6 @@ const actions = {
|
||||
|
||||
if (data.type === 'folder')
|
||||
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
|
||||
else
|
||||
commit('REMOVE_ITEM_FROM_RECENT_UPLOAD', data.unique_id)
|
||||
}
|
||||
|
||||
// Remove file preview
|
||||
@@ -150,18 +157,30 @@ const actions = {
|
||||
force_delete: data.deleted_at ? true : false
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
// If is folder, update app data
|
||||
if (data.type === 'folder' && data.unique_id === getters.currentFolder.unique_id) {
|
||||
|
||||
if ( getters.currentFolder.location === 'public' ) {
|
||||
dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
|
||||
} else {
|
||||
dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
|
||||
dispatch('getAppData')
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => isSomethingWrong())
|
||||
},
|
||||
emptyTrash: ({commit, getters}) => {
|
||||
|
||||
// Clear file browser
|
||||
commit('FLUSH_DATA')
|
||||
commit('LOADING_STATE', true)
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
|
||||
axios
|
||||
.delete(getters.api + '/empty-trash')
|
||||
.then(() => {
|
||||
commit('LOADING_STATE', false)
|
||||
commit('LOADING_STATE', {loading: false, data: []})
|
||||
events.$emit('scrollTop')
|
||||
|
||||
// Remove file preview
|
||||
|
||||
35
resources/js/store/modules/sharing.js
vendored
35
resources/js/store/modules/sharing.js
vendored
@@ -20,9 +20,11 @@ const defaultState = {
|
||||
sharedFile: undefined,
|
||||
}
|
||||
const actions = {
|
||||
browseShared: ({commit, state, getters}, [folder, back = false, init = false]) => {
|
||||
commit('LOADING_STATE', true)
|
||||
commit('FLUSH_DATA')
|
||||
browseShared: ({commit, getters}, [payload]) => {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
|
||||
if (payload.init)
|
||||
commit('FLUSH_FOLDER_HISTORY')
|
||||
|
||||
// Clear search
|
||||
if (getters.isSearching) {
|
||||
@@ -30,35 +32,26 @@ const actions = {
|
||||
events.$emit('clear-query')
|
||||
}
|
||||
|
||||
// Create current folder for history
|
||||
let currentFolder = {
|
||||
name: folder.name,
|
||||
unique_id: folder.unique_id,
|
||||
location: 'public'
|
||||
}
|
||||
if (! payload.back)
|
||||
commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
|
||||
|
||||
payload.folder.location = 'public'
|
||||
|
||||
let route = getters.sharedDetail.protected
|
||||
? '/api/folders/' + currentFolder.unique_id + '/private'
|
||||
: '/api/folders/' + currentFolder.unique_id + '/public/' + router.currentRoute.params.token +'/'
|
||||
? '/api/folders/' + payload.folder.unique_id + '/private'
|
||||
: '/api/folders/' + payload.folder.unique_id + '/public/' + router.currentRoute.params.token +'/'
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.get(route)
|
||||
.then(response => {
|
||||
|
||||
commit('LOADING_STATE', false)
|
||||
commit('GET_DATA', response.data)
|
||||
commit('STORE_CURRENT_FOLDER', currentFolder)
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
commit('STORE_CURRENT_FOLDER', payload.folder)
|
||||
events.$emit('scrollTop')
|
||||
|
||||
if (back) {
|
||||
if (payload.back)
|
||||
commit('REMOVE_BROWSER_HISTORY')
|
||||
|
||||
} else {
|
||||
if (!init)
|
||||
commit('ADD_BROWSER_HISTORY', currentFolder)
|
||||
}
|
||||
|
||||
resolve(response)
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
7
resources/js/store/modules/userAuth.js
vendored
7
resources/js/store/modules/userAuth.js
vendored
@@ -80,9 +80,6 @@ const mutations = {
|
||||
SET_PERMISSION(state, role) {
|
||||
state.permission = role
|
||||
},
|
||||
SET_AUTHORIZED(state, data) {
|
||||
state.authorized = data
|
||||
},
|
||||
DESTROY_DATA(state) {
|
||||
state.authorized = false
|
||||
state.app = undefined
|
||||
@@ -101,16 +98,12 @@ const mutations = {
|
||||
state.app.user.avatar = avatar
|
||||
},
|
||||
UPDATE_RECENT_UPLOAD(state, file) {
|
||||
|
||||
// Remove last file from altest uploads
|
||||
if (state.app.latest_uploads.length === 7) state.app.latest_uploads.pop()
|
||||
|
||||
// Add new file to latest uploads
|
||||
state.app.latest_uploads.unshift(file)
|
||||
},
|
||||
REMOVE_ITEM_FROM_RECENT_UPLOAD(state, unique_id) {
|
||||
state.app.latest_uploads = state.app.latest_uploads.filter(file => file.unique_id !== unique_id)
|
||||
},
|
||||
REMOVE_ITEM_FROM_FAVOURITES(state, item) {
|
||||
state.app.favourites = state.app.favourites.filter(folder => folder.unique_id !== item.unique_id)
|
||||
},
|
||||
|
||||
@@ -171,7 +171,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
</style>
|
||||
|
||||
@@ -122,7 +122,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
</style>
|
||||
|
||||
@@ -86,8 +86,8 @@
|
||||
return {
|
||||
isLoading: false,
|
||||
checkedAccount: undefined,
|
||||
loginPassword: '',
|
||||
loginEmail: '',
|
||||
loginPassword: 'secret',
|
||||
loginEmail: 'howdy@hi5ve.digital',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -208,7 +208,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
</style>
|
||||
|
||||
@@ -172,7 +172,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
</style>
|
||||
|
||||
178
resources/js/views/FilePages/Files.vue
Normal file
178
resources/js/views/FilePages/Files.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<section id="viewport" v-if="app">
|
||||
|
||||
<ContentSidebar>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup title="Base">
|
||||
<div class="menu-list-wrapper">
|
||||
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['base'])}" @click="goHome">
|
||||
<div class="icon">
|
||||
<home-icon size="17"></home-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Home
|
||||
</div>
|
||||
</a>
|
||||
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['latest'])}"
|
||||
@click="getLatest">
|
||||
<div class="icon">
|
||||
<upload-cloud-icon size="17"></upload-cloud-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Recent Uploads
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup title="Navigator" class="navigator">
|
||||
<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="items" v-for="items in app.tree"
|
||||
:key="items.unique_id"/>
|
||||
</ContentGroup>
|
||||
|
||||
<!--Favourites-->
|
||||
<ContentGroup :title="$t('sidebar.favourites')">
|
||||
|
||||
<div class="menu-list-wrapper favourites"
|
||||
:class="{ 'is-dragenter': area }"
|
||||
@dragover.prevent="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@drop="dragFinish($event)"
|
||||
>
|
||||
<transition-group tag="div" class="menu-list" name="folder-item">
|
||||
<a class="empty-list" v-if="app.favourites.length == 0" :key="0">
|
||||
{{ $t('sidebar.favourites_empty') }}
|
||||
</a>
|
||||
|
||||
<a @click.stop="openFolder(folder)"
|
||||
class="menu-list-item"
|
||||
:class="{'is-current': currentFolder.unique_id === folder.unique_id}"
|
||||
v-for="folder in app.favourites"
|
||||
:key="folder.unique_id">
|
||||
<div>
|
||||
<folder-icon size="17" class="folder-icon"></folder-icon>
|
||||
<span class="label">{{ folder.name }}</span>
|
||||
</div>
|
||||
<x-icon size="17" @click.stop="removeFavourite(folder)" class="delete-icon"></x-icon>
|
||||
</a>
|
||||
</transition-group>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
|
||||
<ContentFileView/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
|
||||
import ContentFileView from '@/components/Others/ContentFileView'
|
||||
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
|
||||
import ContentGroup from '@/components/Sidebar/ContentGroup'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
import {
|
||||
UploadCloudIcon,
|
||||
FolderIcon,
|
||||
HomeIcon,
|
||||
XIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
TreeMenuNavigator,
|
||||
ContentFileView,
|
||||
ContentSidebar,
|
||||
UploadCloudIcon,
|
||||
ContentGroup,
|
||||
FolderIcon,
|
||||
HomeIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['app', 'homeDirectory', 'currentFolder']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
area: false,
|
||||
draggedItem: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLatest() {
|
||||
this.$store.dispatch('getLatest')
|
||||
},
|
||||
goHome() {
|
||||
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
|
||||
},
|
||||
openFolder(folder) {
|
||||
this.$store.dispatch('getFolder', [{folder: folder, back: false, init: false}])
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.draggedItem && this.draggedItem.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
dragFinish() {
|
||||
this.area = false
|
||||
|
||||
// Check if draged item is folder
|
||||
if (this.draggedItem && this.draggedItem.type !== 'folder') return
|
||||
|
||||
// Check if folder exist in favourites
|
||||
if (this.app.favourites.find(folder => folder.unique_id == this.draggedItem.unique_id)) return
|
||||
|
||||
// Store favourites folder
|
||||
this.$store.dispatch('addToFavourites', this.draggedItem)
|
||||
|
||||
},
|
||||
removeFavourite(folder) {
|
||||
this.$store.dispatch('removeFromFavourites', folder)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.goHome()
|
||||
|
||||
// Listen for dragstart folder items
|
||||
events.$on('dragstart', (item) => this.draggedItem = item)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.navigator {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
// Transition
|
||||
.folder-item-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
|
||||
.folder-item-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.folder-item-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.folder-item-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
</style>
|
||||
67
resources/js/views/FilePages/SharedFiles.vue
Normal file
67
resources/js/views/FilePages/SharedFiles.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<section id="viewport">
|
||||
|
||||
<ContentSidebar>
|
||||
|
||||
<!--Navigator-->
|
||||
<ContentGroup title="Base">
|
||||
<div class="menu-list-wrapper">
|
||||
<li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared()">
|
||||
<div class="icon">
|
||||
<link-icon size="17"></link-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
My Shared Items
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-list-item link" :class="{'is-active': $isThisLocation(['participant_uploads'])}" @click="getParticipantUploads()">
|
||||
<div class="icon">
|
||||
<users-icon size="17"></users-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Participant Uploads
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
|
||||
</ContentSidebar>
|
||||
|
||||
<ContentFileView />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentFileView from '@/components/Others/ContentFileView'
|
||||
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
|
||||
import ContentGroup from '@/components/Sidebar/ContentGroup'
|
||||
import {
|
||||
LinkIcon,
|
||||
UsersIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
ContentFileView,
|
||||
ContentSidebar,
|
||||
ContentGroup,
|
||||
LinkIcon,
|
||||
UsersIcon,
|
||||
},
|
||||
methods: {
|
||||
getShared() {
|
||||
this.$store.dispatch('getShared', [{back: false, init: false}])
|
||||
},
|
||||
getParticipantUploads() {
|
||||
this.$store.dispatch('getParticipantUploads')
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getShared()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
51
resources/js/views/FilePages/Trash.vue
Normal file
51
resources/js/views/FilePages/Trash.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<section id="viewport">
|
||||
<ContentSidebar>
|
||||
|
||||
<!--Tools-->
|
||||
<ContentGroup title="Tools" class="navigator">
|
||||
<div class="menu-list-wrapper">
|
||||
<div class="menu-list-item link" @click="emptyTrash()">
|
||||
<div class="icon">
|
||||
<trash-icon size="17"></trash-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Empty Trash
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
<ContentFileView/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentFileView from '@/components/Others/ContentFileView'
|
||||
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
|
||||
import ContentGroup from '@/components/Sidebar/ContentGroup'
|
||||
import {
|
||||
TrashIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
ContentFileView,
|
||||
ContentSidebar,
|
||||
ContentGroup,
|
||||
TrashIcon,
|
||||
},
|
||||
methods: {
|
||||
emptyTrash() {
|
||||
this.$store.dispatch('emptyTrash')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('getTrash')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,253 +0,0 @@
|
||||
<template>
|
||||
<div @click="fileViewClick" @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view" :class="filesViewWidth">
|
||||
<ContextMenu />
|
||||
<DesktopToolbar />
|
||||
<FileBrowser />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
|
||||
import FileBrowser from '@/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '@/components/FilesView/ContextMenu'
|
||||
import {ResizeSensor} from 'css-element-queries'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
DesktopToolbar,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'filesViewWidth']),
|
||||
},
|
||||
methods: {
|
||||
fileViewClick() {
|
||||
events.$emit('contextMenu:hide')
|
||||
},
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
handleContentResize() {
|
||||
let filesView = document.getElementById('files-view')
|
||||
.clientWidth
|
||||
|
||||
if (filesView >= 0 && filesView <= 690)
|
||||
this.$store.commit('SET_FILES_VIEW_SIZE', 'minimal-scale')
|
||||
|
||||
else if (filesView >= 690 && filesView <= 960)
|
||||
this.$store.commit('SET_FILES_VIEW_SIZE', 'compact-scale')
|
||||
|
||||
else if (filesView >= 960)
|
||||
this.$store.commit('SET_FILES_VIEW_SIZE', 'full-scale')
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
let homeDirectory = {
|
||||
name: this.$t('locations.home'),
|
||||
location: 'base',
|
||||
unique_id: 0,
|
||||
}
|
||||
|
||||
// Set start directory
|
||||
this.$store.commit('SET_START_DIRECTORY', homeDirectory)
|
||||
|
||||
// Load folder
|
||||
this.$store.dispatch('getFolder', [homeDirectory, false, true])
|
||||
|
||||
var filesView = document.getElementById('files-view');
|
||||
new ResizeSensor(filesView, this.handleContentResize);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
#files-view {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 16px;
|
||||
//overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
min-width: 320px;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.minimal-scale {
|
||||
padding: 0;
|
||||
|
||||
.mobile-toolbar {
|
||||
padding: 10px 0 5px;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
padding: 25px 15px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
|
||||
.file-list {
|
||||
//height: 100%;
|
||||
|
||||
&.grid {
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
|
||||
.file-wrapper {
|
||||
|
||||
.file-item {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
margin-bottom: 10px;
|
||||
height: 90px;
|
||||
|
||||
.file-icon {
|
||||
@include font-size(75);
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(75);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name .name {
|
||||
@include font-size(13);
|
||||
line-height: 1.2;
|
||||
max-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
.item-name .name {
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
|
||||
input {
|
||||
min-width: initial;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-shared {
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.compact-scale {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
min-width: 190px;
|
||||
}
|
||||
|
||||
.toolbar-go-back span {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.grid .file-wrapper {
|
||||
|
||||
.icon-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full-scale {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
94
resources/js/views/Mobile/MobileSettings.vue
Normal file
94
resources/js/views/Mobile/MobileSettings.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
|
||||
<MobileHeader />
|
||||
|
||||
<nav class="mobile-navigation">
|
||||
|
||||
<!--Navigation-->
|
||||
<MenuItemList :navigation="navigation" />
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuItemList from '@/components/Mobile/MenuItemList'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
|
||||
export default {
|
||||
name: 'MobileSettings',
|
||||
components: {
|
||||
MenuItemList,
|
||||
MobileHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navigation: [
|
||||
{
|
||||
icon: 'hard-drive',
|
||||
title: 'Profile Settings',
|
||||
routeName: 'Profile',
|
||||
},
|
||||
{
|
||||
icon: 'latest',
|
||||
title: 'Password',
|
||||
routeName: 'Password',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-navigation {
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.context-menu-enter,
|
||||
.context-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
</style>
|
||||
70
resources/js/views/Settings.vue
Normal file
70
resources/js/views/Settings.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<section id="viewport">
|
||||
|
||||
<ContentSidebar>
|
||||
|
||||
<!--User Headline-->
|
||||
<UserHeadline class="user-headline"/>
|
||||
|
||||
<!--Locations-->
|
||||
<ContentGroup title="Menu" class="navigator">
|
||||
<div class="menu-list-wrapper">
|
||||
<router-link :to="{name: 'Profile'}" class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<user-icon size="17"></user-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Profile Settings
|
||||
</div>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'Password'}" class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<lock-icon size="17"></lock-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Password
|
||||
</div>
|
||||
</router-link>
|
||||
<!--<router-link :to="{name: 'Profile'}" class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<hard-drive-icon size="17"></hard-drive-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Storage
|
||||
</div>
|
||||
</router-link>-->
|
||||
</div>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
|
||||
<router-view/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
|
||||
import ContentGroup from '@/components/Sidebar/ContentGroup'
|
||||
import UserHeadline from '@/components/Sidebar/UserHeadline'
|
||||
import {
|
||||
UserIcon,
|
||||
LockIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: {
|
||||
ContentSidebar,
|
||||
UserHeadline,
|
||||
ContentGroup,
|
||||
UserIcon,
|
||||
LockIcon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.user-headline {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
</style>
|
||||
@@ -47,7 +47,5 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
</style>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
</div>
|
||||
|
||||
<!--File browser-->
|
||||
<div v-if="currentPage === 'page-files'" id="files-view" :class="filesViewWidth">
|
||||
<div v-if="currentPage === 'page-files'" id="files-view">
|
||||
<div id="single-file" v-if="sharedDetail.type === 'file'">
|
||||
<div class="single-file-wrapper">
|
||||
<FileItemGrid v-if="sharedFile" :data="sharedFile" :context-menu="false"/>
|
||||
@@ -103,7 +103,7 @@
|
||||
Alert,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'filesViewWidth', 'sharedDetail', 'sharedFile', 'appSize']),
|
||||
...mapGetters(['config', 'sharedDetail', 'sharedFile', 'appSize']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -164,16 +164,8 @@
|
||||
location: 'public',
|
||||
}
|
||||
|
||||
// Set start directory
|
||||
this.$store.commit('SET_START_DIRECTORY', homeDirectory)
|
||||
|
||||
// Load folder
|
||||
this.$store.dispatch('browseShared', [homeDirectory, false, true])
|
||||
.then(() => {
|
||||
|
||||
var filesView = document.getElementById('files-view')
|
||||
new ResizeSensor(filesView, this.handleContentResize)
|
||||
})
|
||||
this.$store.dispatch('browseShared', [{folder: homeDirectory, back: false, init: true}])
|
||||
}
|
||||
|
||||
// Get file
|
||||
@@ -190,18 +182,6 @@
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
handleContentResize() {
|
||||
let filesView = document.getElementById('files-view').clientWidth
|
||||
|
||||
if (filesView >= 0 && filesView <= 690)
|
||||
this.$store.commit('SET_FILES_VIEW_SIZE', 'minimal-scale')
|
||||
|
||||
else if (filesView >= 690 && filesView <= 960)
|
||||
this.$store.commit('SET_FILES_VIEW_SIZE', 'compact-scale')
|
||||
|
||||
else if (filesView >= 960)
|
||||
this.$store.commit('SET_FILES_VIEW_SIZE', 'full-scale')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -235,9 +215,10 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_auth-form';
|
||||
@import '@assets/vue-file-manager/_auth';
|
||||
|
||||
#shared {
|
||||
|
||||
@@ -1,52 +1,20 @@
|
||||
<template>
|
||||
<div id="user-settings">
|
||||
|
||||
<PageHeader :title="$t('profile.page_title')" />
|
||||
<MobileHeader />
|
||||
<PageHeader title="Password Settings"/>
|
||||
|
||||
<div class="content-page">
|
||||
<div class="avatar-upload">
|
||||
<UserImageInput
|
||||
v-model="avatar"
|
||||
:avatar="app.user.avatar"
|
||||
/>
|
||||
<div class="info">
|
||||
<span class="description">{{ $t('profile.photo_description') }}</span>
|
||||
<span class="supported">{{ $t('profile.photo_supported') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
|
||||
<ThemeLabel>{{ $t('profile.profile_info') }}</ThemeLabel>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input @keyup="$updateText('/user/profile', 'name', name)" v-model="name"
|
||||
:placeholder="$t('page_registration.placeholder_name')" type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
|
||||
<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
|
||||
class="form block-form">
|
||||
|
||||
<ThemeLabel>{{ $t('profile.change_pass') }}</ThemeLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_create_password.label_new_pass') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password"
|
||||
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
|
||||
type="password"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
@@ -56,7 +24,8 @@
|
||||
<label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="newPasswordConfirmation" :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
|
||||
<input v-model="newPasswordConfirmation"
|
||||
:placeholder="$t('page_create_password.label_confirm_pass')" type="password"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
@@ -75,12 +44,12 @@
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import UserImageInput from '@/components/Others/UserImageInput'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import ThemeLabel from '@/components/Others/ThemeLabel'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
import {events} from '@/bus'
|
||||
import axios from 'axios'
|
||||
|
||||
@@ -90,6 +59,7 @@
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
UserImageInput,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
ButtonBase,
|
||||
ThemeLabel,
|
||||
@@ -98,19 +68,10 @@
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
},
|
||||
watch: {
|
||||
name: debounce(function (val) {
|
||||
if (val === '') return
|
||||
|
||||
this.$store.commit('UPDATE_NAME', val)
|
||||
}, 300),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newPasswordConfirmation: '',
|
||||
newPassword: '',
|
||||
avatar: undefined,
|
||||
name: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -124,9 +85,9 @@
|
||||
// Send request to get user reset link
|
||||
axios
|
||||
.post(this.$store.getters.api + '/user/password', {
|
||||
password: this.newPassword,
|
||||
password_confirmation: this.newPasswordConfirmation,
|
||||
})
|
||||
password: this.newPassword,
|
||||
password_confirmation: this.newPasswordConfirmation,
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
// Reset inputs
|
||||
@@ -155,67 +116,15 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.name = this.app.user.name
|
||||
this.avatar = this.app.user.avatar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.avatar-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.info {
|
||||
margin-left: 25px;
|
||||
|
||||
.description {
|
||||
@include font-size(18);
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.supported {
|
||||
display: block;
|
||||
@include font-size(12);
|
||||
font-weight: 500;
|
||||
color: $light_text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
|
||||
.confirm-form {
|
||||
margin-top: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.block-form {
|
||||
margin-top: 50px;
|
||||
max-width: 700px;
|
||||
|
||||
.block-wrapper {
|
||||
justify-content: flex-start;
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
flex: 0 0 220px;
|
||||
}
|
||||
|
||||
.input-wrapper, input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#user-settings {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
@@ -223,11 +132,12 @@
|
||||
position: relative;
|
||||
|
||||
.content-page {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-bottom: 100px;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,10 +151,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form {
|
||||
.button-base {
|
||||
width: 100%;
|
||||
@@ -256,16 +162,6 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.avatar-upload .info {
|
||||
|
||||
.description {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.supported {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
170
resources/js/views/User/Profile.vue
Normal file
170
resources/js/views/User/Profile.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div id="user-settings" v-if="app">
|
||||
|
||||
<MobileHeader />
|
||||
<PageHeader :title="$t('profile.page_title')" />
|
||||
|
||||
<div class="content-page">
|
||||
<div class="avatar-upload">
|
||||
<UserImageInput
|
||||
v-model="avatar"
|
||||
:avatar="app.user.avatar"
|
||||
/>
|
||||
<div class="info">
|
||||
<span class="description">{{ $t('profile.photo_description') }}</span>
|
||||
<span class="supported">{{ $t('profile.photo_supported') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input @keyup="$updateText('/user/profile', 'name', name)" v-model="name"
|
||||
:placeholder="$t('page_registration.placeholder_name')" type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import UserImageInput from '@/components/Others/UserImageInput'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import ThemeLabel from '@/components/Others/ThemeLabel'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
import {events} from '@/bus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Profile',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
UserImageInput,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
ButtonBase,
|
||||
ThemeLabel,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
},
|
||||
watch: {
|
||||
name: debounce(function (val) {
|
||||
if (val === '') return
|
||||
|
||||
this.$store.commit('UPDATE_NAME', val)
|
||||
}, 300),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
avatar: undefined,
|
||||
name: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.app) {
|
||||
this.name = this.app.user.name
|
||||
this.avatar = this.app.user.avatar
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.avatar-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.info {
|
||||
margin-left: 25px;
|
||||
|
||||
.description {
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.supported {
|
||||
display: block;
|
||||
@include font-size(12);
|
||||
font-weight: 500;
|
||||
color: $light_text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#user-settings {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.content-page {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding-bottom: 100px;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
#user-settings {
|
||||
|
||||
.content-page {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
.button-base {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.avatar-upload .info {
|
||||
|
||||
.description {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.supported {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
205
resources/sass/app.scss
vendored
205
resources/sass/app.scss
vendored
@@ -1,10 +1,13 @@
|
||||
// Fonts
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap');
|
||||
|
||||
// Variables
|
||||
@import 'vue-file-manager/_variables';
|
||||
@import 'vue-file-manager/_mixins';
|
||||
//@import 'vue-file-manager/_forms';
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
#viewport {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@include transition(200ms);
|
||||
}
|
||||
|
||||
#application-wrapper {
|
||||
display: flex;
|
||||
@@ -14,4 +17,196 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list-wrapper {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.menu-list-item {
|
||||
display: block;
|
||||
padding: 12px 15px 12px 25px;
|
||||
text-decoration: none;
|
||||
@include transition(150ms);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
&.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.is-active,
|
||||
&.router-link-exact-active,
|
||||
&:hover {
|
||||
|
||||
svg {
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 12px;
|
||||
line-height: 0;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.text-label {
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
|
||||
.delete-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
line-height: 0;
|
||||
width: 15px;
|
||||
margin-right: 9px;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
|
||||
.label {
|
||||
@include font-size(13);
|
||||
font-weight: 700;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
max-width: 210px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
&.favourites {
|
||||
|
||||
&.is-dragenter .menu-list {
|
||||
border: 2px dashed $theme;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
border: 2px dashed transparent;
|
||||
|
||||
.menu-list-item {
|
||||
padding: 8px 23px;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
width: 20px;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-selected,
|
||||
&.is-current {
|
||||
|
||||
.folder-icon {
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
@include font-size(12);
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
.menu-list-wrapper {
|
||||
|
||||
.menu-list-item {
|
||||
padding: 12px 15px 12px 20px;
|
||||
}
|
||||
|
||||
&.favourites {
|
||||
|
||||
.menu-list .menu-list-item {
|
||||
padding: 8px 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.menu-list-wrapper {
|
||||
|
||||
.menu-list-item {
|
||||
|
||||
&.link {
|
||||
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.label {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
213
resources/sass/vue-file-manager/_auth-form.scss
vendored
Normal file
213
resources/sass/vue-file-manager/_auth-form.scss
vendored
Normal file
@@ -0,0 +1,213 @@
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.form {
|
||||
|
||||
&.inline-form {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
|
||||
.error-message {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.block-form {
|
||||
|
||||
&.create-new-password {
|
||||
.block-wrapper label {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
justify-content: center;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
white-space: nowrap;
|
||||
@include font-size(18);
|
||||
font-weight: 700;
|
||||
padding-right: 20px;
|
||||
width: 200px;
|
||||
text-align: right !important;
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
|
||||
.error-message {
|
||||
@include font-size(14);
|
||||
color: $danger;
|
||||
padding-top: 5px;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="password"],
|
||||
input[type="text"],
|
||||
input[type="email"] {
|
||||
background: $light_background;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.15s all ease;
|
||||
@include font-size(16);
|
||||
border-radius: 8px;
|
||||
padding: 13px 20px;
|
||||
appearance: none;
|
||||
font-weight: 700;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
|
||||
&.is-error {
|
||||
border-color: $danger;
|
||||
box-shadow: 0 0 7px rgba($danger, 0.3);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $light_text;
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $theme;
|
||||
box-shadow: 0 0 7px rgba($theme, 0.3);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: $light_text;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.additional-link {
|
||||
@include font-size(16);
|
||||
margin-top: 50px;
|
||||
display: block;
|
||||
color: $text;
|
||||
|
||||
b, a {
|
||||
color: $theme;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.form {
|
||||
|
||||
.button {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&.block-form {
|
||||
|
||||
.block-wrapper {
|
||||
display: block;
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
text-align: left !important;
|
||||
@include font-size(14);
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 25px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.inline-form {
|
||||
display: block;
|
||||
|
||||
.input-wrapper .error-message {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 14px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
textarea,
|
||||
input[type="password"],
|
||||
input[type="text"],
|
||||
input[type="email"] {
|
||||
padding: 14px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.form {
|
||||
|
||||
&.block-form {
|
||||
|
||||
.block-wrapper label {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="password"],
|
||||
input[type="text"],
|
||||
input[type="email"] {
|
||||
background: $dark_mode_foreground;
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: rgba($dark_mode_text_secondary, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
3
resources/sass/vue-file-manager/_auth.scss
vendored
3
resources/sass/vue-file-manager/_auth.scss
vendored
@@ -1,3 +1,6 @@
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.auth-form {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
|
||||
42
resources/sass/vue-file-manager/_forms.scss
vendored
42
resources/sass/vue-file-manager/_forms.scss
vendored
@@ -1,4 +1,8 @@
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.form {
|
||||
max-width: 700px;
|
||||
|
||||
&.inline-form {
|
||||
display: flex;
|
||||
@@ -18,30 +22,15 @@
|
||||
|
||||
&.block-form {
|
||||
|
||||
&.create-new-password {
|
||||
.block-wrapper label {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
justify-content: center;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
|
||||
label {
|
||||
white-space: nowrap;
|
||||
@include font-size(18);
|
||||
@include font-size(12);
|
||||
color: #AFAFAF;
|
||||
font-weight: 700;
|
||||
padding-right: 20px;
|
||||
width: 200px;
|
||||
text-align: right !important;
|
||||
color: $text;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,16 +59,16 @@ textarea,
|
||||
input[type="password"],
|
||||
input[type="text"],
|
||||
input[type="email"] {
|
||||
background: $light_background;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.15s all ease;
|
||||
@include font-size(16);
|
||||
@include transition(150ms);
|
||||
@include font-size(15);
|
||||
border-radius: 8px;
|
||||
padding: 13px 20px;
|
||||
appearance: none;
|
||||
font-weight: 700;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
background: $light_mode_input_background;
|
||||
|
||||
&.is-error {
|
||||
border-color: $danger;
|
||||
@@ -87,8 +76,9 @@ input[type="email"] {
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $light_text;
|
||||
@include font-size(16);
|
||||
//color: $light_text;
|
||||
color: rgba($text, 0.5);
|
||||
@include font-size(15);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -97,7 +87,7 @@ input[type="email"] {
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: $light_text;
|
||||
background: hsl(0, 0%, 98%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
// Forms
|
||||
.form-wrapper {
|
||||
padding: 0 20px;
|
||||
@@ -34,29 +37,44 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
background: $theme;
|
||||
padding: 14px 18px;
|
||||
background: black;
|
||||
padding: 15px 18px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
@include font-size(16);
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
|
||||
svg path {
|
||||
fill: white;
|
||||
path, polyline {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@include font-size(15);
|
||||
@include font-size(12);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.inline-wrapper {
|
||||
|
||||
&.icon-append {
|
||||
|
||||
.icon {
|
||||
background: rgba($theme, 0.1);
|
||||
|
||||
path, polyline {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
21
resources/sass/vue-file-manager/_variables.scss
vendored
21
resources/sass/vue-file-manager/_variables.scss
vendored
@@ -1,24 +1,31 @@
|
||||
// Colors
|
||||
$text: #1b2539;
|
||||
$text: #1c1d1f;
|
||||
$text-muted: #667b90;
|
||||
|
||||
$theme: #00BC7E;
|
||||
|
||||
$light_mode_border: rgba(0, 0, 0, 0.02);
|
||||
$yellow: #FFBD2D;
|
||||
$pink: #FE66A1;
|
||||
$red: #FE6057;
|
||||
$purple: #9D66FE;
|
||||
|
||||
$light_mode_border: #F8F8F8;
|
||||
$danger: #fd397a;
|
||||
$light_text: #A4ADB6;
|
||||
$light_background: #f6f6f6;
|
||||
$dark_background: #EBEBEB;
|
||||
$shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
|
||||
|
||||
$light_mode_input_background: hsl(0, 0%, 98%);
|
||||
$light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12);
|
||||
$light_mode_vignette: rgba(9, 8, 12, 0.15);
|
||||
$light_mode_vignette: rgba(9, 8, 12, 0.35);
|
||||
|
||||
// Dark Mode
|
||||
$dark_mode_vignette: rgba(0, 0, 0, 0.3);
|
||||
$dark_mode_background: #1a1f25;
|
||||
$dark_mode_foreground: #202733;
|
||||
$dark_mode_text_primary: #B8C4D0;
|
||||
$dark_mode_text_secondary: #667b90;
|
||||
$dark_mode_background: #111314;
|
||||
$dark_mode_foreground: #1e2024;
|
||||
$dark_mode_text_primary: #bec6cf;
|
||||
$dark_mode_text_secondary: #79848f;
|
||||
$dark_mode_vignette: rgba(22, 23, 27, 0.70);
|
||||
$dark_mode_popup_shadow: 0 10px 30px rgba(0, 0, 0, .3);
|
||||
$dark_mode_border_color: rgba(255, 255, 255, 0.02);
|
||||
@@ -34,7 +34,6 @@ Route::group(['middleware' => ['api']], function () {
|
||||
Route::get('/files/{token}/public', 'Sharing\FileSharingController@file_public');
|
||||
Route::get('/shared/{token}', 'FileFunctions\ShareController@show');
|
||||
|
||||
|
||||
// User reset password
|
||||
Route::post('/password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail');
|
||||
Route::post('/password/reset', 'Auth\ResetPasswordController@reset');
|
||||
@@ -54,10 +53,12 @@ Route::group(['middleware' => ['auth:api', 'auth.master', 'scope:master']], func
|
||||
Route::get('/user', 'User\AccountController@user');
|
||||
|
||||
// Browse
|
||||
Route::get('/participant-uploads', 'FileBrowser\BrowseController@participant_uploads');
|
||||
Route::get('/file-detail/{unique_id}', 'FileBrowser\BrowseController@file_detail');
|
||||
Route::get('/navigation', 'FileBrowser\BrowseController@navigation_tree');
|
||||
Route::get('/folders/{unique_id}', 'FileBrowser\BrowseController@folder');
|
||||
Route::get('/shared-all', 'FileBrowser\BrowseController@shared');
|
||||
Route::get('/latest', 'FileBrowser\BrowseController@latest');
|
||||
Route::get('/search', 'FileBrowser\BrowseController@search');
|
||||
Route::get('/trash', 'FileBrowser\BrowseController@trash');
|
||||
|
||||
|
||||
7
webpack.mix.js
vendored
7
webpack.mix.js
vendored
@@ -23,4 +23,11 @@ mix.js('resources/js/main.js', 'public/js')
|
||||
}
|
||||
},
|
||||
})
|
||||
.options({
|
||||
hmrOptions: {
|
||||
//host: '172.20.10.5',
|
||||
//host: '192.168.1.131',
|
||||
port: '8080'
|
||||
},
|
||||
})
|
||||
.disableNotifications();
|
||||
|
||||
Reference in New Issue
Block a user