deleted file

Version 1.3
- i18n localization support - Added SK, EN language files - Video/Audio preview in file preview panel (Thanks to Joshua Fouyon to participating on this feature) - Drop uploading (You can now drag files from desktop and drop it to VueFileManager) - Fixed bug when rename item in safari browser - Fixed bug when you drag folder from trash to favourites in sidebar panel - small functions and design improvements
2026-04-06 10:43:48 +00:00 · 2020-04-05 12:19:21 +02:00 · 2020-04-03 11:52:54 +02:00 · 2020-04-01 18:47:37 +02:00 · 2020-04-01 18:44:47 +02:00 · 2020-03-29 11:42:32 +02:00
67 changed files with 2659 additions and 1587 deletions
--- a/app/FileManagerFile.php
+++ b/app/FileManagerFile.php
@@ -31,7 +31,7 @@ class FileManagerFile extends Model
     */
    public function getCreatedAtAttribute()
    {
-        return Carbon::create($this->attributes['created_at'])->format('j M Y \a\t H:i');;
+        return format_date($this->attributes['created_at'], __('vuefilemanager.time'));
    }

    /**
@@ -43,7 +43,7 @@ class FileManagerFile extends Model
    {
        if (! $this->attributes['deleted_at']) return null;

-        return Carbon::create($this->attributes['deleted_at'])->format('j M Y at H:i');
+        return format_date($this->attributes['deleted_at'], __('vuefilemanager.time'));
    }

    /**
--- a/app/FileManagerFolder.php
+++ b/app/FileManagerFolder.php
@@ -79,7 +79,7 @@ class FileManagerFolder extends Model
     */
    public function getCreatedAtAttribute()
    {
-        return Carbon::create($this->attributes['created_at'])->format('j M Y \a\t H:i');
+        return format_date($this->attributes['created_at'], __('vuefilemanager.time'));
    }

    /**
@@ -91,7 +91,7 @@ class FileManagerFolder extends Model
    {
        if (! $this->attributes['deleted_at']) return null;

-        return Carbon::create($this->attributes['deleted_at'])->format('j M Y \a\t H:i');
+        return format_date($this->attributes['deleted_at'], __('vuefilemanager.time'));
    }

    /**
--- a/app/Http/Controllers/Auth/AuthController.php
+++ b/app/Http/Controllers/Auth/AuthController.php
@@ -43,7 +43,7 @@ class AuthController extends Controller
        ];

        // Abort with 404, user not found
-        return abort('404', 'We can\'t find a user with that e-mail address.');
+        return abort('404', __('vuefilemanager.user_not_fount'));
    }
    /**
     * Login user
--- a/app/Http/Controllers/FileManagerController.php
+++ b/app/Http/Controllers/FileManagerController.php
@@ -408,8 +408,10 @@ class FileManagerController extends Controller
    public function upload_item(Request $request)
    {
        // Check if user can upload
-        if (config('vuefilemanager.limit_storage_by_capacity') && user_storage_percentage() >= 100)
+        if (config('vuefilemanager.limit_storage_by_capacity') && user_storage_percentage() >= 100) {
+
            abort(423, 'You exceed your storage limit!');
+        }

        // Validate request
        $validator = Validator::make($request->all(), [
@@ -426,7 +428,7 @@ class FileManagerController extends Controller

        // File
        $filename = Str::random() . '-' . str_replace(' ', '', $file->getClientOriginalName());
-        $filetype = 'file';
+        $filetype = get_file_type($file);
        $thumbnail = null;
        $filesize = $file->getSize();
        $directory = 'file-manager';
@@ -440,9 +442,8 @@ class FileManagerController extends Controller
        Storage::disk('local')->putFileAs($directory, $file, $filename, 'public');

        // Create image thumbnail
-        if (substr($file->getMimeType(), 0, 5) == 'image') {
+        if ( $filetype == 'image' ) {

-            $filetype = 'image';
            $thumbnail = 'thumbnail-' . $filename;

            // Create intervention image
@@ -560,6 +561,8 @@ class FileManagerController extends Controller
        $response->header("Content-Type", $type);
        $response->header("Content-Disposition", 'attachment; filename=' . $filename);
        $response->header("Content-Length", $size);
+        $response->header("Accept-Ranges", "bytes");
+        $response->header("Content-Range", "bytes 0-" . $size . "/" . $size);

        return $response;
    }
--- a/app/Http/Controllers/UserAccountController.php
+++ b/app/Http/Controllers/UserAccountController.php
@@ -33,7 +33,6 @@ class UserAccountController extends Controller
            'user'           => $user->only(['name', 'email', 'avatar']),
            'favourites'     => $user->favourites->makeHidden(['pivot']),
            'latest_uploads' => $user->latest_uploads->makeHidden(['user_id', 'basename']),
-
            'storage' => [
                'used'       => Metric::bytes($user->used_capacity)->format(),
                'capacity'   => format_gigabytes(config('vuefilemanager.user_storage_capacity')),
@@ -57,7 +56,7 @@ class UserAccountController extends Controller
        return [
            [
                'unique_id' => 0,
-                'name'      => 'Home',
+                'name'      => __('vuefilemanager.home'),
                'location'  => 'base',
                'folders'  => $folders,
            ]
--- a/app/Http/helpers.php
+++ b/app/Http/helpers.php
@@ -1,6 +1,7 @@
 <?php

 use ByteUnits\Metric;
+use Carbon\Carbon;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 use Intervention\Image\ImageManagerStatic as Image;
@@ -54,7 +55,6 @@ function check_directory($directory)
 */
 function make_single_input($request)
 {
-
    // Create container
    $data = [];

@@ -100,7 +100,8 @@ function get_storage_fill_percentage($used, $capacity)
 *
 * @return string
 */
-function user_storage_percentage() {
+function user_storage_percentage()
+{

    $user = \Illuminate\Support\Facades\Auth::user();

@@ -157,4 +158,44 @@ function filter_folders_ids($folders)
    $folder_unique_ids = recursiveFind($folders->toArray(), 'unique_id');

    return appeared_once($folder_unique_ids);
+}
+
+/**
+ * Format localized date
+ *
+ * @param $date
+ * @param string $format
+ * @return string
+ */
+function format_date($date, $format = '%d. %B. %Y, %H:%M')
+{
+    $start = Carbon::parse($date);
+
+    return $start->formatLocalized($format);
+}
+
+/**
+ * Get file type from mimetype
+ *
+ * @param $file
+ * @return string
+ */
+function get_file_type($file)
+{
+    // Get mimetype from file
+    $mimetype = explode('/', $file->getMimeType());
+
+    switch ($mimetype[0]) {
+        case 'image':
+            return 'image';
+            break;
+        case 'video':
+            return 'video';
+            break;
+        case 'audio':
+            return 'audio';
+            break;
+        default:
+            return 'file';
+    }
 }
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -2,6 +2,8 @@

 namespace App\Providers;

+use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Schema;
 use Illuminate\Support\ServiceProvider;

 class AppServiceProvider extends ServiceProvider
@@ -23,6 +25,11 @@ class AppServiceProvider extends ServiceProvider
     */
    public function boot()
    {
-        //
+        Schema::defaultStringLength(191);
+
+        $get_time_locale = App::getLocale() . '_' . mb_strtoupper(App::getLocale());
+
+        // Set locale for carbon dates
+        setlocale(LC_TIME, $get_time_locale);
    }
 }
--- a/composer.json
+++ b/composer.json
@@ -10,6 +10,7 @@
    "require": {
        "php": "^7.2",
        "askedio/laravel-soft-cascade": "^6.0",
+        "doctrine/dbal": "^2.10",
        "fideloper/proxy": "^4.0",
        "fruitcake/laravel-cors": "^1.0",
        "gabrielelana/byte-units": "^0.5.0",
--- a/composer.lock
+++ b/composer.lock
--- a/database/migrations/2020_04_02_055021_change_type_attribute_in_file_manager_files_table.php
+++ b/database/migrations/2020_04_02_055021_change_type_attribute_in_file_manager_files_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class ChangeTypeAttributeInFileManagerFilesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('file_manager_files', function (Blueprint $table) {
+            DB::statement('ALTER TABLE file_manager_files MODIFY type TEXT;');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('file_manager_files', function (Blueprint $table) {
+            //
+        });
+    }
+}
--- a/database/vue-file-manager-127.0.0.103-04-2020
+++ b/database/vue-file-manager-127.0.0.103-04-2020
@@ -7,7 +7,7 @@
 #
 # Host: 127.0.0.1 (MySQL 5.7.25)
 # Database: file-manager
-# Generation Time: 2020-03-14 17:32:56 +0000
+# Generation Time: 2020-04-03 07:57:39 +0000
 # ************************************************************


@@ -64,7 +64,7 @@ CREATE TABLE `file_manager_files` (
  `basename` text COLLATE utf8mb4_unicode_ci,
  `mimetype` text COLLATE utf8mb4_unicode_ci,
  `filesize` text COLLATE utf8mb4_unicode_ci,
-  `type` enum('image','file') COLLATE utf8mb4_unicode_ci DEFAULT NULL,
+  `type` text COLLATE utf8mb4_unicode_ci,
  `deleted_at` timestamp NULL DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
@@ -122,7 +122,8 @@ VALUES
 	(10,'2019_08_19_000000_create_failed_jobs_table',1),
 	(11,'2020_03_03_065147_add_user_id_to_file_manager_files_table',2),
 	(12,'2020_03_03_065155_add_user_id_to_file_manager_folders_table',2),
-	(13,'2020_03_03_070319_create_favourites_folders_table',3);
+	(13,'2020_03_03_070319_create_favourites_folders_table',3),
+	(14,'2020_04_02_055021_change_type_attribute_in_file_manager_files_table',4);

 /*!40000 ALTER TABLE `migrations` ENABLE KEYS */;
 UNLOCK TABLES;
@@ -249,11 +250,11 @@ DROP TABLE IF EXISTS `users`;

 CREATE TABLE `users` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
-  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `name` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `email` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
  `email_verified_at` timestamp NULL DEFAULT NULL,
-  `password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
-  `avatar` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
+  `password` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
+  `avatar` varchar(191) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -12,20 +12,21 @@
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^5.1",
-        "laravel-mix": "^5.0.1",
+        "laravel-mix": "^5.0.4",
        "resolve-url-loader": "^2.3.1",
        "sass-loader": "^8.0.2",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.26",
-        "@fortawesome/free-solid-svg-icons": "^5.12.0",
+        "@fortawesome/fontawesome-svg-core": "^1.2.28",
+        "@fortawesome/free-solid-svg-icons": "^5.13.0",
        "@fortawesome/vue-fontawesome": "^0.1.9",
        "css-element-queries": "^1.2.3",
        "lodash": "^4.17.15",
        "node-sass": "^4.13.1",
        "vee-validate": "^3.2.5",
        "vue": "^2.6.10",
+        "vue-i18n": "^8.16.0",
        "vuex": "^3.0.1"
    }
 }
--- a/public/.htaccess
+++ b/public/.htaccess
@@ -5,6 +5,13 @@

    RewriteEngine On

+    AddType video/ogg .ogv
+    AddType video/mp4 .mp4
+    AddType video/webm .webm
+    <ifModule mod_headers.c>
+        Header set Connection keep-alive
+    </ifModule>
+
    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
--- a/public/assets/images/app-icon.png
+++ b/public/assets/images/app-icon.png
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1 +1 @@
-@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,900&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap);
--- a/public/js/main.js
+++ b/public/js/main.js
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,249 +1,4 @@
 {
    "/js/main.js": "/js/main.js",
-    "/css/app.css": "/css/app.css",
-    "/js/main.36df5424dd932bd30f74.hot-update.js": "/js/main.36df5424dd932bd30f74.hot-update.js",
-    "/js/main.de09a450b740c9685feb.hot-update.js": "/js/main.de09a450b740c9685feb.hot-update.js",
-    "/js/main.31a3eca7c2342fa121dd.hot-update.js": "/js/main.31a3eca7c2342fa121dd.hot-update.js",
-    "/js/main.42c65585e8023b9698f0.hot-update.js": "/js/main.42c65585e8023b9698f0.hot-update.js",
-    "/js/main.f43b15ea8dc57424419c.hot-update.js": "/js/main.f43b15ea8dc57424419c.hot-update.js",
-    "/js/main.653b4946ab1bc346ca68.hot-update.js": "/js/main.653b4946ab1bc346ca68.hot-update.js",
-    "/js/main.7c243b5d053a8d0dc2b9.hot-update.js": "/js/main.7c243b5d053a8d0dc2b9.hot-update.js",
-    "/js/main.3c227ef426613ed5d773.hot-update.js": "/js/main.3c227ef426613ed5d773.hot-update.js",
-    "/js/main.5bf243e5587d855112c6.hot-update.js": "/js/main.5bf243e5587d855112c6.hot-update.js",
-    "/js/main.f8ba08f1021af3a3529d.hot-update.js": "/js/main.f8ba08f1021af3a3529d.hot-update.js",
-    "/js/main.68b09738fdc75c16500c.hot-update.js": "/js/main.68b09738fdc75c16500c.hot-update.js",
-    "/js/main.6db7b6cf394e21e087fd.hot-update.js": "/js/main.6db7b6cf394e21e087fd.hot-update.js",
-    "/js/main.e6a5b81289b95501bdb1.hot-update.js": "/js/main.e6a5b81289b95501bdb1.hot-update.js",
-    "/js/main.95f2b217e5e1e815d550.hot-update.js": "/js/main.95f2b217e5e1e815d550.hot-update.js",
-    "/js/main.29aae7d3a4bac5cf3715.hot-update.js": "/js/main.29aae7d3a4bac5cf3715.hot-update.js",
-    "/js/main.1ccd2fe6f216173db7ea.hot-update.js": "/js/main.1ccd2fe6f216173db7ea.hot-update.js",
-    "/js/main.41f3eb2dede8f28341e0.hot-update.js": "/js/main.41f3eb2dede8f28341e0.hot-update.js",
-    "/js/main.5c2db1ff09fb420f4a1f.hot-update.js": "/js/main.5c2db1ff09fb420f4a1f.hot-update.js",
-    "/js/main.486fdd73725da4624738.hot-update.js": "/js/main.486fdd73725da4624738.hot-update.js",
-    "/js/main.0b4b61f92bfc8af065df.hot-update.js": "/js/main.0b4b61f92bfc8af065df.hot-update.js",
-    "/js/main.22a296026cdf2e3df0d2.hot-update.js": "/js/main.22a296026cdf2e3df0d2.hot-update.js",
-    "/js/main.99d7e0b721a99851d7de.hot-update.js": "/js/main.99d7e0b721a99851d7de.hot-update.js",
-    "/js/main.28a4d19c7b8e2c29d616.hot-update.js": "/js/main.28a4d19c7b8e2c29d616.hot-update.js",
-    "/js/main.83eff80d8e062bc358d3.hot-update.js": "/js/main.83eff80d8e062bc358d3.hot-update.js",
-    "/js/main.f90e00f0b87eb215ab02.hot-update.js": "/js/main.f90e00f0b87eb215ab02.hot-update.js",
-    "/js/main.3f57f62724e54fede92e.hot-update.js": "/js/main.3f57f62724e54fede92e.hot-update.js",
-    "/js/main.7b8a28e12388efec7afc.hot-update.js": "/js/main.7b8a28e12388efec7afc.hot-update.js",
-    "/js/main.6f9870778c8c1d4ebda5.hot-update.js": "/js/main.6f9870778c8c1d4ebda5.hot-update.js",
-    "/js/main.ee042fe50949a7666b82.hot-update.js": "/js/main.ee042fe50949a7666b82.hot-update.js",
-    "/js/main.927dbadc707e3220b549.hot-update.js": "/js/main.927dbadc707e3220b549.hot-update.js",
-    "/js/main.f4623e08503ea0ad408a.hot-update.js": "/js/main.f4623e08503ea0ad408a.hot-update.js",
-    "/js/main.64e698be82fa86830096.hot-update.js": "/js/main.64e698be82fa86830096.hot-update.js",
-    "/js/main.2f3926c313c008d3e865.hot-update.js": "/js/main.2f3926c313c008d3e865.hot-update.js",
-    "/js/main.c7646fe892e07122fe90.hot-update.js": "/js/main.c7646fe892e07122fe90.hot-update.js",
-    "/js/main.10580c7dacaa2251a774.hot-update.js": "/js/main.10580c7dacaa2251a774.hot-update.js",
-    "/js/main.8038f4e69a18040afbf8.hot-update.js": "/js/main.8038f4e69a18040afbf8.hot-update.js",
-    "/js/main.5d60294395b20ab918d3.hot-update.js": "/js/main.5d60294395b20ab918d3.hot-update.js",
-    "/js/main.e9af313e58f9a16ec648.hot-update.js": "/js/main.e9af313e58f9a16ec648.hot-update.js",
-    "/js/main.056335ccd1446758d9f0.hot-update.js": "/js/main.056335ccd1446758d9f0.hot-update.js",
-    "/js/main.ca5ec6e497226f5d1dab.hot-update.js": "/js/main.ca5ec6e497226f5d1dab.hot-update.js",
-    "/js/main.3c648af049aebd944de1.hot-update.js": "/js/main.3c648af049aebd944de1.hot-update.js",
-    "/js/main.1f0c295e9adb7b4fca6f.hot-update.js": "/js/main.1f0c295e9adb7b4fca6f.hot-update.js",
-    "/js/main.4b33d4e911de5ec0811c.hot-update.js": "/js/main.4b33d4e911de5ec0811c.hot-update.js",
-    "/js/main.587f7df46a60ffc22cd4.hot-update.js": "/js/main.587f7df46a60ffc22cd4.hot-update.js",
-    "/js/main.6bbccb523005ea4d0671.hot-update.js": "/js/main.6bbccb523005ea4d0671.hot-update.js",
-    "/js/main.2f1255acf7e146583b24.hot-update.js": "/js/main.2f1255acf7e146583b24.hot-update.js",
-    "/js/main.adba7d6747f7052a8670.hot-update.js": "/js/main.adba7d6747f7052a8670.hot-update.js",
-    "/js/main.294c9d40e42abf3a56f7.hot-update.js": "/js/main.294c9d40e42abf3a56f7.hot-update.js",
-    "/js/main.eb85de6d925db756b84c.hot-update.js": "/js/main.eb85de6d925db756b84c.hot-update.js",
-    "/js/main.b5a9199ad5bce5aba3f8.hot-update.js": "/js/main.b5a9199ad5bce5aba3f8.hot-update.js",
-    "/js/main.f3311a1aac9906befcc2.hot-update.js": "/js/main.f3311a1aac9906befcc2.hot-update.js",
-    "/js/main.40a07f1a0110e6662abc.hot-update.js": "/js/main.40a07f1a0110e6662abc.hot-update.js",
-    "/js/main.68617f18a1a6ffa23b24.hot-update.js": "/js/main.68617f18a1a6ffa23b24.hot-update.js",
-    "/js/main.aafc6f3248ba60ea15ae.hot-update.js": "/js/main.aafc6f3248ba60ea15ae.hot-update.js",
-    "/js/main.7a2f5f0d468e2faa519d.hot-update.js": "/js/main.7a2f5f0d468e2faa519d.hot-update.js",
-    "/js/main.9b4345e2392947a80d3e.hot-update.js": "/js/main.9b4345e2392947a80d3e.hot-update.js",
-    "/js/main.0a09af37b1d06d149895.hot-update.js": "/js/main.0a09af37b1d06d149895.hot-update.js",
-    "/js/main.4109f0c6cd2b84f785b4.hot-update.js": "/js/main.4109f0c6cd2b84f785b4.hot-update.js",
-    "/js/main.9883b699731ec03a7d5e.hot-update.js": "/js/main.9883b699731ec03a7d5e.hot-update.js",
-    "/js/main.18cb51cfea65a7a264b3.hot-update.js": "/js/main.18cb51cfea65a7a264b3.hot-update.js",
-    "/js/main.ae7f4be4f3f0366f87ce.hot-update.js": "/js/main.ae7f4be4f3f0366f87ce.hot-update.js",
-    "/js/main.c58699bfcbc89ada5e92.hot-update.js": "/js/main.c58699bfcbc89ada5e92.hot-update.js",
-    "/js/main.9450700c3b11fa506614.hot-update.js": "/js/main.9450700c3b11fa506614.hot-update.js",
-    "/js/main.c32f44aac284473fdeac.hot-update.js": "/js/main.c32f44aac284473fdeac.hot-update.js",
-    "/js/main.24514af5bbe024b6ec51.hot-update.js": "/js/main.24514af5bbe024b6ec51.hot-update.js",
-    "/js/main.bbfd2f46936f41f11a3c.hot-update.js": "/js/main.bbfd2f46936f41f11a3c.hot-update.js",
-    "/js/main.425158bb74930c327e37.hot-update.js": "/js/main.425158bb74930c327e37.hot-update.js",
-    "/js/main.ab301d78b46cd83c908e.hot-update.js": "/js/main.ab301d78b46cd83c908e.hot-update.js",
-    "/js/main.08be8ec49ec017b419ba.hot-update.js": "/js/main.08be8ec49ec017b419ba.hot-update.js",
-    "/js/main.5902509e54722435a01b.hot-update.js": "/js/main.5902509e54722435a01b.hot-update.js",
-    "/js/main.9249200d7fa42c288a42.hot-update.js": "/js/main.9249200d7fa42c288a42.hot-update.js",
-    "/js/main.8a48eaa79b89c21215b5.hot-update.js": "/js/main.8a48eaa79b89c21215b5.hot-update.js",
-    "/js/main.73098fb7c47fa3cebe37.hot-update.js": "/js/main.73098fb7c47fa3cebe37.hot-update.js",
-    "/js/main.4a31570dc92456b66580.hot-update.js": "/js/main.4a31570dc92456b66580.hot-update.js",
-    "/js/main.84855cbff31316c3060c.hot-update.js": "/js/main.84855cbff31316c3060c.hot-update.js",
-    "/js/main.1cf56d3b783512ee7678.hot-update.js": "/js/main.1cf56d3b783512ee7678.hot-update.js",
-    "/js/main.80a12b408701dd4794b4.hot-update.js": "/js/main.80a12b408701dd4794b4.hot-update.js",
-    "/js/main.082a390427496610b2a2.hot-update.js": "/js/main.082a390427496610b2a2.hot-update.js",
-    "/js/main.f6e9da1a7704a1d1b96a.hot-update.js": "/js/main.f6e9da1a7704a1d1b96a.hot-update.js",
-    "/js/main.2f90f82e2bab419d7048.hot-update.js": "/js/main.2f90f82e2bab419d7048.hot-update.js",
-    "/js/main.914d1e3a53f5c782f4e4.hot-update.js": "/js/main.914d1e3a53f5c782f4e4.hot-update.js",
-    "/js/main.87ed1b434a045a7d49af.hot-update.js": "/js/main.87ed1b434a045a7d49af.hot-update.js",
-    "/js/main.29c5bd7b7dd8eb64c131.hot-update.js": "/js/main.29c5bd7b7dd8eb64c131.hot-update.js",
-    "/js/main.56efe4a8fe0039b074b8.hot-update.js": "/js/main.56efe4a8fe0039b074b8.hot-update.js",
-    "/js/main.d73188066c126281d0e4.hot-update.js": "/js/main.d73188066c126281d0e4.hot-update.js",
-    "/js/main.4e8ac32986ecec44e495.hot-update.js": "/js/main.4e8ac32986ecec44e495.hot-update.js",
-    "/js/main.424d6c175581040a3d5a.hot-update.js": "/js/main.424d6c175581040a3d5a.hot-update.js",
-    "/js/main.1419778a403719812edf.hot-update.js": "/js/main.1419778a403719812edf.hot-update.js",
-    "/js/main.26bd18af2345a2e7e617.hot-update.js": "/js/main.26bd18af2345a2e7e617.hot-update.js",
-    "/js/main.edf91fc9e80ce289bcfb.hot-update.js": "/js/main.edf91fc9e80ce289bcfb.hot-update.js",
-    "/js/main.e3b8efde1826f4626473.hot-update.js": "/js/main.e3b8efde1826f4626473.hot-update.js",
-    "/js/main.b17fb703155bfb11df2a.hot-update.js": "/js/main.b17fb703155bfb11df2a.hot-update.js",
-    "/js/main.82ba1eaa291963b50d07.hot-update.js": "/js/main.82ba1eaa291963b50d07.hot-update.js",
-    "/js/main.aefc455ee962cf8c9e97.hot-update.js": "/js/main.aefc455ee962cf8c9e97.hot-update.js",
-    "/js/main.3fb21f7e0ceba441ba97.hot-update.js": "/js/main.3fb21f7e0ceba441ba97.hot-update.js",
-    "/js/main.b2c2b800e17c1f5919a6.hot-update.js": "/js/main.b2c2b800e17c1f5919a6.hot-update.js",
-    "/js/main.df8746deb62e689bbecc.hot-update.js": "/js/main.df8746deb62e689bbecc.hot-update.js",
-    "/js/main.44f33233b8062cd41035.hot-update.js": "/js/main.44f33233b8062cd41035.hot-update.js",
-    "/js/main.a0a0931657a1c846edef.hot-update.js": "/js/main.a0a0931657a1c846edef.hot-update.js",
-    "/js/main.f2388f593b13448cf11f.hot-update.js": "/js/main.f2388f593b13448cf11f.hot-update.js",
-    "/js/main.0e3e2d850a78479ef732.hot-update.js": "/js/main.0e3e2d850a78479ef732.hot-update.js",
-    "/js/main.d7c9b886f53f46f5166c.hot-update.js": "/js/main.d7c9b886f53f46f5166c.hot-update.js",
-    "/js/main.fd45c00377ff61f16358.hot-update.js": "/js/main.fd45c00377ff61f16358.hot-update.js",
-    "/js/main.95821f0a8266426f4d27.hot-update.js": "/js/main.95821f0a8266426f4d27.hot-update.js",
-    "/js/main.47ea7a38cbb4ff6dd9ab.hot-update.js": "/js/main.47ea7a38cbb4ff6dd9ab.hot-update.js",
-    "/js/main.12c383f74f8568edceef.hot-update.js": "/js/main.12c383f74f8568edceef.hot-update.js",
-    "/js/main.5e8dedefb4c7eff6d80a.hot-update.js": "/js/main.5e8dedefb4c7eff6d80a.hot-update.js",
-    "/js/main.ee33246cfffafc539e90.hot-update.js": "/js/main.ee33246cfffafc539e90.hot-update.js",
-    "/js/main.6742d157d3503543a405.hot-update.js": "/js/main.6742d157d3503543a405.hot-update.js",
-    "/js/main.1deb0e670326692595ae.hot-update.js": "/js/main.1deb0e670326692595ae.hot-update.js",
-    "/js/main.0935db05580076ac16ff.hot-update.js": "/js/main.0935db05580076ac16ff.hot-update.js",
-    "/js/main.35f63833ff4c5603f8ba.hot-update.js": "/js/main.35f63833ff4c5603f8ba.hot-update.js",
-    "/js/main.f6acb760f78f342f3f64.hot-update.js": "/js/main.f6acb760f78f342f3f64.hot-update.js",
-    "/js/main.02c38d98379e6d0f1d0b.hot-update.js": "/js/main.02c38d98379e6d0f1d0b.hot-update.js",
-    "/js/main.9ea8a46e2bb05fb226d6.hot-update.js": "/js/main.9ea8a46e2bb05fb226d6.hot-update.js",
-    "/js/main.56d081d16b24dc6dc234.hot-update.js": "/js/main.56d081d16b24dc6dc234.hot-update.js",
-    "/js/main.24a0b1aa34e5980a31fd.hot-update.js": "/js/main.24a0b1aa34e5980a31fd.hot-update.js",
-    "/js/main.c365894e991fa325ba1a.hot-update.js": "/js/main.c365894e991fa325ba1a.hot-update.js",
-    "/js/main.a7fa26a0ff81d99c9434.hot-update.js": "/js/main.a7fa26a0ff81d99c9434.hot-update.js",
-    "/js/main.7a3acf4468d4c3e3a237.hot-update.js": "/js/main.7a3acf4468d4c3e3a237.hot-update.js",
-    "/js/main.29f88756cd6e7f338649.hot-update.js": "/js/main.29f88756cd6e7f338649.hot-update.js",
-    "/js/main.65a45c1c59cd899b874b.hot-update.js": "/js/main.65a45c1c59cd899b874b.hot-update.js",
-    "/js/main.b667703e2c093cd8e969.hot-update.js": "/js/main.b667703e2c093cd8e969.hot-update.js",
-    "/js/main.a673b66401a1e25e60e8.hot-update.js": "/js/main.a673b66401a1e25e60e8.hot-update.js",
-    "/js/main.d5783f35338b7f225d15.hot-update.js": "/js/main.d5783f35338b7f225d15.hot-update.js",
-    "/js/main.098853e7c493d33e7ddc.hot-update.js": "/js/main.098853e7c493d33e7ddc.hot-update.js",
-    "/js/main.f3fe08f24e1ae2c57686.hot-update.js": "/js/main.f3fe08f24e1ae2c57686.hot-update.js",
-    "/js/main.f3beba6136c46ad360f5.hot-update.js": "/js/main.f3beba6136c46ad360f5.hot-update.js",
-    "/js/main.1efdaf5af47e6d6d6d06.hot-update.js": "/js/main.1efdaf5af47e6d6d6d06.hot-update.js",
-    "/js/main.ad589cdd48b175d9fa7c.hot-update.js": "/js/main.ad589cdd48b175d9fa7c.hot-update.js",
-    "/js/main.e1020b5ecc38d70c6bc5.hot-update.js": "/js/main.e1020b5ecc38d70c6bc5.hot-update.js",
-    "/js/main.cb79ffb1a1e3e6ce815a.hot-update.js": "/js/main.cb79ffb1a1e3e6ce815a.hot-update.js",
-    "/js/main.4ecc5d25de8475809154.hot-update.js": "/js/main.4ecc5d25de8475809154.hot-update.js",
-    "/js/main.65de52bc3aab3e85787b.hot-update.js": "/js/main.65de52bc3aab3e85787b.hot-update.js",
-    "/js/main.c9ea06012df1ddf208f4.hot-update.js": "/js/main.c9ea06012df1ddf208f4.hot-update.js",
-    "/js/main.6f79c1030d7ca630328b.hot-update.js": "/js/main.6f79c1030d7ca630328b.hot-update.js",
-    "/js/main.24f126dc652f88f2141b.hot-update.js": "/js/main.24f126dc652f88f2141b.hot-update.js",
-    "/js/main.332a087ce57632155a56.hot-update.js": "/js/main.332a087ce57632155a56.hot-update.js",
-    "/js/main.9244960556ba1061ed9c.hot-update.js": "/js/main.9244960556ba1061ed9c.hot-update.js",
-    "/js/main.5edfba5e8c25f560a4d1.hot-update.js": "/js/main.5edfba5e8c25f560a4d1.hot-update.js",
-    "/js/main.411938193b1f3b0eeb71.hot-update.js": "/js/main.411938193b1f3b0eeb71.hot-update.js",
-    "/js/main.fe8be750aaffc4239c5c.hot-update.js": "/js/main.fe8be750aaffc4239c5c.hot-update.js",
-    "/js/main.0f391a33f31d87dcd2e0.hot-update.js": "/js/main.0f391a33f31d87dcd2e0.hot-update.js",
-    "/js/main.3558ef25b7272809d5e1.hot-update.js": "/js/main.3558ef25b7272809d5e1.hot-update.js",
-    "/js/main.6ec6afd2f7afaf27e869.hot-update.js": "/js/main.6ec6afd2f7afaf27e869.hot-update.js",
-    "/js/main.3bb1ce050c9c48c283ce.hot-update.js": "/js/main.3bb1ce050c9c48c283ce.hot-update.js",
-    "/js/main.e36903b50d23cfbcf661.hot-update.js": "/js/main.e36903b50d23cfbcf661.hot-update.js",
-    "/js/main.ea2227ff34f48d5ba61a.hot-update.js": "/js/main.ea2227ff34f48d5ba61a.hot-update.js",
-    "/js/main.c2a5f80d36bc3a684a32.hot-update.js": "/js/main.c2a5f80d36bc3a684a32.hot-update.js",
-    "/js/main.20b7c97aa9ef6cfeec6a.hot-update.js": "/js/main.20b7c97aa9ef6cfeec6a.hot-update.js",
-    "/js/main.866622aa09142f918fa0.hot-update.js": "/js/main.866622aa09142f918fa0.hot-update.js",
-    "/js/main.043b384ebc73467822a9.hot-update.js": "/js/main.043b384ebc73467822a9.hot-update.js",
-    "/js/main.a7ad265532dffe197e49.hot-update.js": "/js/main.a7ad265532dffe197e49.hot-update.js",
-    "/js/main.ec6b71774c45d1248e83.hot-update.js": "/js/main.ec6b71774c45d1248e83.hot-update.js",
-    "/js/main.94d99ffeb5c492acf013.hot-update.js": "/js/main.94d99ffeb5c492acf013.hot-update.js",
-    "/js/main.b9ca1a01e8fc9b7852db.hot-update.js": "/js/main.b9ca1a01e8fc9b7852db.hot-update.js",
-    "/js/main.152e100587403a3671d4.hot-update.js": "/js/main.152e100587403a3671d4.hot-update.js",
-    "/js/main.0692dbe4cfda0bab0801.hot-update.js": "/js/main.0692dbe4cfda0bab0801.hot-update.js",
-    "/js/main.4f4ba4b72f46c0794524.hot-update.js": "/js/main.4f4ba4b72f46c0794524.hot-update.js",
-    "/js/main.e07a96c6849af55655de.hot-update.js": "/js/main.e07a96c6849af55655de.hot-update.js",
-    "/js/main.d7cbc94a638459e4b5eb.hot-update.js": "/js/main.d7cbc94a638459e4b5eb.hot-update.js",
-    "/js/main.80d01b9d919015b07505.hot-update.js": "/js/main.80d01b9d919015b07505.hot-update.js",
-    "/js/main.bba1a3734d9cd9452661.hot-update.js": "/js/main.bba1a3734d9cd9452661.hot-update.js",
-    "/js/main.b713c9c3db3083b822ef.hot-update.js": "/js/main.b713c9c3db3083b822ef.hot-update.js",
-    "/js/main.3811ccb3550ba1a0952d.hot-update.js": "/js/main.3811ccb3550ba1a0952d.hot-update.js",
-    "/js/main.46db9fb909656581a5de.hot-update.js": "/js/main.46db9fb909656581a5de.hot-update.js",
-    "/js/main.ebf08c4ca417a8f1e763.hot-update.js": "/js/main.ebf08c4ca417a8f1e763.hot-update.js",
-    "/js/main.ac4075ec9c765036f162.hot-update.js": "/js/main.ac4075ec9c765036f162.hot-update.js",
-    "/js/main.15f446e25d884898180c.hot-update.js": "/js/main.15f446e25d884898180c.hot-update.js",
-    "/js/main.0d08a535ec91bba93fed.hot-update.js": "/js/main.0d08a535ec91bba93fed.hot-update.js",
-    "/js/main.d84d57d8a92fb421772c.hot-update.js": "/js/main.d84d57d8a92fb421772c.hot-update.js",
-    "/js/main.ab964c97d421f8f7a964.hot-update.js": "/js/main.ab964c97d421f8f7a964.hot-update.js",
-    "/js/main.2109dd98db944799f6c2.hot-update.js": "/js/main.2109dd98db944799f6c2.hot-update.js",
-    "/js/main.eff55a2474844427341b.hot-update.js": "/js/main.eff55a2474844427341b.hot-update.js",
-    "/js/main.f009fcd456f9b665a179.hot-update.js": "/js/main.f009fcd456f9b665a179.hot-update.js",
-    "/js/main.ded98c2171f06bed7fd6.hot-update.js": "/js/main.ded98c2171f06bed7fd6.hot-update.js",
-    "/js/main.4b3d2879d3083a3cc589.hot-update.js": "/js/main.4b3d2879d3083a3cc589.hot-update.js",
-    "/js/main.e41088a9b0e64502279d.hot-update.js": "/js/main.e41088a9b0e64502279d.hot-update.js",
-    "/js/main.57df11b3319382988398.hot-update.js": "/js/main.57df11b3319382988398.hot-update.js",
-    "/js/main.bc564877036d45d2961f.hot-update.js": "/js/main.bc564877036d45d2961f.hot-update.js",
-    "/js/main.6d6e0817676e96f59bc7.hot-update.js": "/js/main.6d6e0817676e96f59bc7.hot-update.js",
-    "/js/main.4a3a761238627697032e.hot-update.js": "/js/main.4a3a761238627697032e.hot-update.js",
-    "/js/main.bd4c1ae712568802b9a7.hot-update.js": "/js/main.bd4c1ae712568802b9a7.hot-update.js",
-    "/js/main.542c87c77cbc8da89222.hot-update.js": "/js/main.542c87c77cbc8da89222.hot-update.js",
-    "/js/main.6d6605d12a8fbf3201b6.hot-update.js": "/js/main.6d6605d12a8fbf3201b6.hot-update.js",
-    "/js/main.3c7f2219eadeab8ead48.hot-update.js": "/js/main.3c7f2219eadeab8ead48.hot-update.js",
-    "/js/main.37a4a867605a3772a3db.hot-update.js": "/js/main.37a4a867605a3772a3db.hot-update.js",
-    "/js/main.cfdbcc4700657bda3a7b.hot-update.js": "/js/main.cfdbcc4700657bda3a7b.hot-update.js",
-    "/js/main.249eba47e32249a07df9.hot-update.js": "/js/main.249eba47e32249a07df9.hot-update.js",
-    "/js/main.558f05e309822ad70122.hot-update.js": "/js/main.558f05e309822ad70122.hot-update.js",
-    "/js/main.54df741b4bc56ae39e55.hot-update.js": "/js/main.54df741b4bc56ae39e55.hot-update.js",
-    "/js/main.9d1a8ce0df5787d2cafc.hot-update.js": "/js/main.9d1a8ce0df5787d2cafc.hot-update.js",
-    "/js/main.7d7fd1f42d0457b148c4.hot-update.js": "/js/main.7d7fd1f42d0457b148c4.hot-update.js",
-    "/js/main.bc7891b203e9f4194c99.hot-update.js": "/js/main.bc7891b203e9f4194c99.hot-update.js",
-    "/js/main.963d2fe31a8e29a670d4.hot-update.js": "/js/main.963d2fe31a8e29a670d4.hot-update.js",
-    "/js/main.44e60a4b5184f05fbd47.hot-update.js": "/js/main.44e60a4b5184f05fbd47.hot-update.js",
-    "/js/main.2f5d2ec57fe32d4c871c.hot-update.js": "/js/main.2f5d2ec57fe32d4c871c.hot-update.js",
-    "/js/main.4d9367a8bd496eb4e40b.hot-update.js": "/js/main.4d9367a8bd496eb4e40b.hot-update.js",
-    "/js/main.0461026179fbc40fff4a.hot-update.js": "/js/main.0461026179fbc40fff4a.hot-update.js",
-    "/js/main.ba653d54085191a1e890.hot-update.js": "/js/main.ba653d54085191a1e890.hot-update.js",
-    "/js/main.5a85f4046db3bb257412.hot-update.js": "/js/main.5a85f4046db3bb257412.hot-update.js",
-    "/js/main.6829c03b048666663da5.hot-update.js": "/js/main.6829c03b048666663da5.hot-update.js",
-    "/js/main.2631d90401c8b27fd104.hot-update.js": "/js/main.2631d90401c8b27fd104.hot-update.js",
-    "/js/main.258bbdc98f9ff318d2c6.hot-update.js": "/js/main.258bbdc98f9ff318d2c6.hot-update.js",
-    "/js/main.72794ef6cad1d9f7bbe0.hot-update.js": "/js/main.72794ef6cad1d9f7bbe0.hot-update.js",
-    "/js/main.048a18e0998f469d7c65.hot-update.js": "/js/main.048a18e0998f469d7c65.hot-update.js",
-    "/js/main.e913cd0ce33fc092f961.hot-update.js": "/js/main.e913cd0ce33fc092f961.hot-update.js",
-    "/js/main.c6f1f32b2464d5f78fef.hot-update.js": "/js/main.c6f1f32b2464d5f78fef.hot-update.js",
-    "/js/main.312fc05b07e823512269.hot-update.js": "/js/main.312fc05b07e823512269.hot-update.js",
-    "/js/main.e58a51e609734fe20fc1.hot-update.js": "/js/main.e58a51e609734fe20fc1.hot-update.js",
-    "/js/main.6a1420dc51c6553b95c5.hot-update.js": "/js/main.6a1420dc51c6553b95c5.hot-update.js",
-    "/js/main.f4f22bb8b34f4892876d.hot-update.js": "/js/main.f4f22bb8b34f4892876d.hot-update.js",
-    "/js/main.d28e2cddacfac4a0cc56.hot-update.js": "/js/main.d28e2cddacfac4a0cc56.hot-update.js",
-    "/js/main.94fbfa0aa93670b84362.hot-update.js": "/js/main.94fbfa0aa93670b84362.hot-update.js",
-    "/js/main.84637dacfaf1ebbbafbb.hot-update.js": "/js/main.84637dacfaf1ebbbafbb.hot-update.js",
-    "/js/main.2bd3c434bce4d2cbc8fd.hot-update.js": "/js/main.2bd3c434bce4d2cbc8fd.hot-update.js",
-    "/js/main.49d02105c8ddd22620f1.hot-update.js": "/js/main.49d02105c8ddd22620f1.hot-update.js",
-    "/js/main.5e6d15ad2b660e2e7c1f.hot-update.js": "/js/main.5e6d15ad2b660e2e7c1f.hot-update.js",
-    "/js/main.fc313528e3059c907504.hot-update.js": "/js/main.fc313528e3059c907504.hot-update.js",
-    "/js/main.bd4674b4a67e2c701e13.hot-update.js": "/js/main.bd4674b4a67e2c701e13.hot-update.js",
-    "/js/main.06eec4d613ba3518d05a.hot-update.js": "/js/main.06eec4d613ba3518d05a.hot-update.js",
-    "/js/main.8d526e129ea1e0343040.hot-update.js": "/js/main.8d526e129ea1e0343040.hot-update.js",
-    "/js/main.d3a79980cfef0c6cc74c.hot-update.js": "/js/main.d3a79980cfef0c6cc74c.hot-update.js",
-    "/js/main.fce072f4dff0e68d2a57.hot-update.js": "/js/main.fce072f4dff0e68d2a57.hot-update.js",
-    "/js/main.97563845b16f45e9a8d1.hot-update.js": "/js/main.97563845b16f45e9a8d1.hot-update.js",
-    "/js/main.ba3d22fd6d9940f71dd8.hot-update.js": "/js/main.ba3d22fd6d9940f71dd8.hot-update.js",
-    "/js/main.2c17142ff0ab23b6d82f.hot-update.js": "/js/main.2c17142ff0ab23b6d82f.hot-update.js",
-    "/js/main.37052661dae06b434627.hot-update.js": "/js/main.37052661dae06b434627.hot-update.js",
-    "/js/main.3bdcd8addd49f70a64f2.hot-update.js": "/js/main.3bdcd8addd49f70a64f2.hot-update.js",
-    "/js/main.d547052fbb0ff2ba0d1e.hot-update.js": "/js/main.d547052fbb0ff2ba0d1e.hot-update.js",
-    "/js/main.59bc62047bf7e6834add.hot-update.js": "/js/main.59bc62047bf7e6834add.hot-update.js",
-    "/js/main.2d5d82b04761b683a9fa.hot-update.js": "/js/main.2d5d82b04761b683a9fa.hot-update.js",
-    "/js/main.64a5b7a80976a7646b66.hot-update.js": "/js/main.64a5b7a80976a7646b66.hot-update.js",
-    "/js/main.410f16eec4fa17aabd85.hot-update.js": "/js/main.410f16eec4fa17aabd85.hot-update.js",
-    "/js/main.325be87c77872931f8f4.hot-update.js": "/js/main.325be87c77872931f8f4.hot-update.js",
-    "/js/main.681dd3757ea03104eb38.hot-update.js": "/js/main.681dd3757ea03104eb38.hot-update.js",
-    "/js/main.cdf420b18a4bab5558c2.hot-update.js": "/js/main.cdf420b18a4bab5558c2.hot-update.js",
-    "/js/main.2e3705b4474fb644fe7a.hot-update.js": "/js/main.2e3705b4474fb644fe7a.hot-update.js",
-    "/js/main.1d27d7234750097930a4.hot-update.js": "/js/main.1d27d7234750097930a4.hot-update.js",
-    "/js/main.4b79dd93b6746dfef172.hot-update.js": "/js/main.4b79dd93b6746dfef172.hot-update.js",
-    "/js/main.08e43801d9ff79a3d91d.hot-update.js": "/js/main.08e43801d9ff79a3d91d.hot-update.js",
-    "/js/main.303e4e90dfdbdfd1b8cd.hot-update.js": "/js/main.303e4e90dfdbdfd1b8cd.hot-update.js",
-    "/js/main.82ea3399e06303901a6b.hot-update.js": "/js/main.82ea3399e06303901a6b.hot-update.js",
-    "/js/main.d06d7a6bf733a980ca4d.hot-update.js": "/js/main.d06d7a6bf733a980ca4d.hot-update.js",
-    "/js/main.ed2bf9003180229090e6.hot-update.js": "/js/main.ed2bf9003180229090e6.hot-update.js"
+    "/css/app.css": "/css/app.css"
 }
--- a/resources/js/components/VueFileManager.vue
+++ b/resources/js/components/VueFileManager.vue
@@ -6,14 +6,20 @@

        <div v-if="isLogged" id="auth">

-            <!--System alerts-->
-            <Alert />
+            <div id="popups">

-            <!--Popup-->
-            <PopupMoveItem />
+                <!--System alerts-->
+                <Alert />

-            <!--Mobile Menu-->
-            <MobileOptionList/>
+                <!--Popup-->
+                <PopupMoveItem />
+
+                <!--Mobile Menu-->
+                <MobileOptionList />
+
+                <!--Background vignette-->
+                <Vignette />
+            </div>

            <div id="application-wrapper">

@@ -34,12 +40,14 @@
    import MobileOptionList from '@/components/VueFileManagerComponents/FilesView/MobileOptionList'
    import PopupMoveItem from '@/components/VueFileManagerComponents/Others/PopupMoveItem'
    import UserSettings from '@/components/VueFileManagerComponents/UserSettings'
+    import Vignette from '@/components/VueFileManagerComponents/Others/Vignette'
    import Alert from '@/components/VueFileManagerComponents/FilesView/Alert'
    import FilesView from '@/components/VueFileManagerComponents/FilesView'
    import Sidebar from '@/components/VueFileManagerComponents/Sidebar'
    import Auth from '@/components/VueFileManagerComponents/Auth'
    import {ResizeSensor} from 'css-element-queries'
    import {mapGetters} from 'vuex'
+    import {events} from "../bus";

    export default {
        name: 'VueFileManager',
@@ -48,6 +56,7 @@
            PopupMoveItem,
            UserSettings,
            FilesView,
+            Vignette,
            Sidebar,
            Alert,
            Auth,
@@ -83,8 +92,6 @@
            // Handle VueFileManager width
            var VueFileManager = document.getElementById('vue-file-manager');
            new ResizeSensor(VueFileManager, this.handleAppResize);
-
-            //events.$emit('popup:move-item')
        }
    }
 </script>
--- a/resources/js/components/VueFileManagerComponents/Auth.vue
+++ b/resources/js/components/VueFileManagerComponents/Auth.vue
@@ -4,23 +4,23 @@
        <!--Log In by Email-->
        <AuthContent name="log-in" :visible="false">
            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Welcome Back!</h1>
-            <h2>Please type your email to log in:</h2>
+            <h1>{{ $t('page_login.title') }}</h1>
+            <h2>{{ $t('page_login.subtitle') }}</h2>

            <ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
                                class="form inline-form">
                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                    v-slot="{ errors }">
-                    <input v-model="loginEmail" placeholder="Type your E-mail" type="email"
+                    <input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
                           :class="{'is-error': errors[0]}"/>
                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                </ValidationProvider>

-                <AuthButton icon="chevron-right" text="Next Step" :loading="isLoading" :disabled="isLoading"/>
+                <AuthButton icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading"/>
            </ValidationObserver>

-            <span v-if="config.userRegistration" class="additional-link">Don’t have an account? <b
-                    @click="goToAuthPage('sign-up')">Register account.</b></span>
+            <span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }} <b
+                    @click="goToAuthPage('sign-up')">{{ $t('page_login.registration_button') }}</b></span>
        </AuthContent>

        <!--Log in By Password-->
@@ -28,166 +28,166 @@

            <div class="user" v-if="checkedAccount">
                <img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
-                <h1>Are You {{ checkedAccount.name }}?</h1>
-                <h2>Confirm you by your password:</h2>
+                <h1>{{ $t('page_sign_in.title', {name: checkedAccount.name}) }}</h1>
+                <h2>{{ $t('page_sign_in.subtitle') }}</h2>
            </div>

            <ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form"
                                class="form inline-form">
                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="User Password" rules="required"
                                    v-slot="{ errors }">
-                    <input v-model="loginPassword" placeholder="Type your password" type="password"
+                    <input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')" type="password"
                           :class="{'is-error': errors[0]}"/>
                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                </ValidationProvider>

-                <AuthButton icon="chevron-right" text="Log In" :loading="isLoading" :disabled="isLoading"/>
+                <AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading"/>
            </ValidationObserver>

-            <span class="additional-link">Forgotten your password? <b @click="goToAuthPage('forgotten-password')">Reset Password.</b></span>
+            <span class="additional-link">{{ $t('page_sign_in.password_reset_text') }} <b @click="goToAuthPage('forgotten-password')">{{ $t('page_sign_in.password_reset_button') }}</b></span>
        </AuthContent>

        <!--Forgotten your password?-->
        <AuthContent name="forgotten-password" :visible="false">
            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Forgotten Password?</h1>
-            <h2>Get reset link with your email:</h2>
+            <h1>{{ $t('page_forgotten_password.title') }}</h1>
+            <h2>{{ $t('page_forgotten_password.subtitle') }}</h2>

            <ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
                                tag="form" class="form inline-form">
                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                    v-slot="{ errors }">
-                    <input v-model="recoverEmail" placeholder="Type your E-mail" type="email"
+                    <input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
                           :class="{'is-error': errors[0]}"/>
                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                </ValidationProvider>

-                <AuthButton icon="chevron-right" text="Get Link" :loading="isLoading" :disabled="isLoading"/>
+                <AuthButton icon="chevron-right" :text="$t('page_forgotten_password.button_get_link')" :loading="isLoading" :disabled="isLoading"/>
            </ValidationObserver>

-            <span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
        </AuthContent>

        <!--Create new password-->
        <AuthContent name="create-new-password" :visible="false">
            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Only One Step to Log In</h1>
-            <h2>Create your new password here:</h2>
+            <h1>{{ $t('page_create_password.title') }}</h1>
+            <h2>{{ $t('page_create_password.subtitle') }}</h2>

            <ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }"
                                tag="form" class="form block-form create-new-password">

                <div class="block-wrapper">
-                    <label>Email:</label>
+                    <label>{{ $t('page_create_password.label_email') }}</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                        v-slot="{ errors }">
-                        <input v-model="recoverPassword.email" placeholder="Type your E-mail" type="email"
+                        <input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email"
                               :class="{'is-error': errors[0]}"/>
                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                    </ValidationProvider>
                </div>

                <div class="block-wrapper">
-                    <label>Your new password:</label>
+                    <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="recoverPassword.newPassword" placeholder="Your new password" type="password"
+                        <input v-model="recoverPassword.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>
                </div>

                <div class="block-wrapper">
-                    <label>Confirm new password:</label>
+                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
                                        rules="required" v-slot="{ errors }">
-                        <input v-model="recoverPassword.newPasswordConfirm" placeholder="Confirm new password"
+                        <input v-model="recoverPassword.newPasswordConfirm" :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>
                </div>

                <div>
-                    <AuthButton icon="chevron-right" text="Update Password" :loading="isLoading" :disabled="isLoading"/>
+                    <AuthButton icon="chevron-right" :text="$t('page_create_password.button_update')" :loading="isLoading" :disabled="isLoading"/>
                </div>
            </ValidationObserver>

-            <span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
        </AuthContent>

        <!--Registration-->
        <AuthContent name="sign-up" :visible="false">
            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Create New Account</h1>
-            <h2>Please fill registration to create account:</h2>
+            <h1>{{ $t('page_registration.title') }}</h1>
+            <h2>{{ $t('page_registration.subtitle') }}</h2>

            <ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
                                class="form block-form">

                <div class="block-wrapper">
-                    <label>Email:</label>
+                    <label>{{ $t('page_registration.label_email') }}</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                        v-slot="{ errors }">
-                        <input v-model="register.email" placeholder="Type your E-mail" type="email"
+                        <input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
                               :class="{'is-error': errors[0]}"/>
                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                    </ValidationProvider>
                </div>

                <div class="block-wrapper">
-                    <label>Full Name:</label>
+                    <label>{{ $t('page_registration.label_name') }}</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
                                        v-slot="{ errors }">
-                        <input v-model="register.name" placeholder="Type your full name" type="text"
+                        <input v-model="register.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>

                <div class="block-wrapper">
-                    <label>Create password:</label>
+                    <label>{{ $t('page_registration.label_pass') }}</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
                                        rules="required" v-slot="{ errors }">
-                        <input v-model="register.password" placeholder="Your new password" type="password"
+                        <input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
                               :class="{'is-error': errors[0]}"/>
                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                    </ValidationProvider>
                </div>

                <div class="block-wrapper">
-                    <label>Confirm password:</label>
+                    <label>{{ $t('page_registration.label_confirm_pass') }}</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
                                        rules="required" v-slot="{ errors }">
-                        <input v-model="register.password_confirmation" placeholder="Confirm your new password"
+                        <input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
                               type="password" :class="{'is-error': errors[0]}"/>
                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                    </ValidationProvider>
                </div>

                <div>
-                    <AuthButton icon="chevron-right" text="Create Account" :loading="isLoading" :disabled="isLoading"/>
+                    <AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
                </div>
            </ValidationObserver>

-            <span class="additional-link">Do you have an account? <b @click="goToAuthPage('log-in')">Log In.</b></span>
+            <span class="additional-link">{{ $t('page_registration.have_an_account') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
        </AuthContent>

        <!--Password reset link sended-->
        <AuthContent name="password-reset-link-sended" :visible="false">
            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Thank you!</h1>
-            <h2>We have e-mailed your password reset link!</h2>
+            <h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
+            <h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>

-            <span class="additional-link">Remember your password? <b @click="goToAuthPage('log-in')">Log In.</b></span>
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
        </AuthContent>

        <!--Password reset successfully-->
        <AuthContent name="password-reset-successfully" :visible="false">
            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>Awesome!</h1>
-            <h2>Your password was reset successfully.</h2>
+            <h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
+            <h2>{{ $t('page_forgotten_password.pass_reseted_subtitle') }}</h2>

-            <AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" text="Sign In"/>
+            <AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" :text="$t('page_forgotten_password.pass_reseted_signin')"/>
        </AuthContent>
    </AuthContentWrapper>
 </template>
@@ -320,7 +320,7 @@
                        if (error.response.status == 400) {

                            this.$refs.sign_in.setErrors({
-                                'User Password': ['Sorry, you passed incorrect password :(']
+                                'User Password': [this.$t('validation_errors.incorrect_password')]
                            });
                        }

@@ -460,7 +460,7 @@
            let pathname = location.pathname.split('/')[1]
            let token = location.search.split('token=')[1]

-            if (pathname === 'create-new-password') {
+            if (pathname === this.$t('routes.create_new_password')) {
                this.recoverPassword.token = token
                this.goToAuthPage('create-new-password')
            } else {
--- a/resources/js/components/VueFileManagerComponents/Auth/AuthContentWrapper.vue
+++ b/resources/js/components/VueFileManagerComponents/Auth/AuthContentWrapper.vue
@@ -5,7 +5,6 @@
 </template>

 <script>
-
    export default {
        name: 'AuthContentWrapper',
    }
@@ -18,8 +17,5 @@
        height: 100%;
        width: 100%;
        display: table;
-        //display: flex;
-        //align-items: center;
-        //justify-content: center;
    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/FilesView.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView.vue
@@ -88,7 +88,6 @@
 <style lang="scss">
    @import "@assets/app.scss";

-
    #files-view {
        font-family: 'Nunito', sans-serif;
        font-size: 16px;
@@ -161,27 +160,21 @@
                                margin-bottom: 10px;
                                height: 90px;

-                                &.file {
-                                    .file-icon {
-                                        @include font-size(75);
-                                    }
-
-                                    .file-icon-text {
-                                        @include font-size(12);
-                                    }
+                                .file-icon {
+                                    @include font-size(75);
                                }

-                                &.folder {
-                                    @include font-size(14);
-
-
-                                    .folder-icon {
-                                        margin-top: 0;
-                                        margin-bottom: 0;
-                                    }
+                                .file-icon-text {
+                                    @include font-size(12);
                                }

-                                &.image img {
+                                .folder-icon {
+                                    @include font-size(75);
+                                    margin-top: 0;
+                                    margin-bottom: 0;
+                                }
+
+                                .image {
                                    width: 90px;
                                    height: 90px;
                                }
--- a/resources/js/components/VueFileManagerComponents/FilesView/Alert.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/Alert.vue
@@ -1,26 +1,23 @@
 <template>
-    <transition name="vignette">
-        <div class="popup" v-show="isVisibleWrapper">
-            <transition name="popup">
-                <div v-show="isVisiblePopup" class="popup-wrapper">
-                    <div class="popup-image">
-                        <span class="emoji">{{ emoji }}</span>
-                    </div>
-                    <div class="popup-content">
-                        <h1 v-if="title" class="title">{{ title }}</h1>
-                        <p v-if="message" class="message">{{ message }}</p>
-                    </div>
-                    <div class="popup-actions">
-                        <ButtonBase
-                                @click.native="closePopup"
-                                :button-style="buttonStyle"
-                                class="action-confirm"
-                        >{{ button }}
-                        </ButtonBase>
-                    </div>
+    <transition name="popup">
+        <div @click.self="closePopup" class="popup" v-if="isVisibleWrapper">
+            <div class="popup-wrapper">
+                <div class="popup-image">
+                    <span class="emoji">{{ emoji }}</span>
                </div>
-            </transition>
-            <div class="popup-vignette" @click="closePopup"></div>
+                <div class="popup-content">
+                    <h1 v-if="title" class="title">{{ title }}</h1>
+                    <p v-if="message" class="message">{{ message }}</p>
+                </div>
+                <div class="popup-actions">
+                    <ButtonBase
+                            @click.native="closePopup"
+                            :button-style="buttonStyle"
+                            class="action-confirm"
+                    >{{ button }}
+                    </ButtonBase>
+                </div>
+            </div>
        </div>
    </transition>
 </template>
@@ -38,7 +35,6 @@
            return {
                isVisibleWrapper: false,
                buttonStyle: undefined,
-                isVisiblePopup: false,
                message: undefined,
                title: undefined,
                button: undefined,
@@ -47,24 +43,18 @@
        },
        methods: {
            closePopup() {
-                // Emit event
-                events.$emit('alert:close')
-
-                // Hide popup wrapper
-                this.isVisibleWrapper = false
-                this.isVisiblePopup = false
+                events.$emit('popup:close')
            }
        },
        mounted() {
            // Show alert
            events.$on('alert:open', args => {
                this.isVisibleWrapper = true
-                this.isVisiblePopup = true

                this.title = args.title
                this.message = args.message

-                this.button = 'That’s horrible!'
+                this.button = this.$t('alerts.error_confirm')
                this.emoji = '😢😢😢'
                this.buttonStyle = 'danger'

@@ -76,12 +66,11 @@
            // Show alert
            events.$on('success:open', args => {
                this.isVisibleWrapper = true
-                this.isVisiblePopup = true

                this.title = args.title
                this.message = args.message

-                this.button = 'Awesome!'
+                this.button = this.$t('alerts.success_confirm')
                this.emoji = '🥳🥳🥳'
                this.buttonStyle = 'theme'

@@ -92,7 +81,6 @@

            // Close popup
            events.$on('popup:close', () => {
-                this.isVisiblePopup = false
                this.isVisibleWrapper = false
            })
        }
@@ -110,15 +98,6 @@
        bottom: 0;
        z-index: 20;
        overflow: auto;
-
-        .popup-vignette {
-            position: absolute;
-            top: 0;
-            right: 0;
-            left: 0;
-            bottom: 0;
-            background: rgba(17, 20, 29, 0.5);
-        }
    }

    .popup-wrapper {
@@ -131,7 +110,7 @@
        transform: translateY(-50%) scale(1);
        margin: 0 auto;
        padding: 40px;
-        box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
+        box-shadow: $light_mode_popup_shadow;
        border-radius: 8px;
        text-align: center;
        background: white;
@@ -180,12 +159,8 @@

    @media (prefers-color-scheme: dark) {

-        .popup .popup-vignette {
-            background: $dark_mode_vignette;
-        }
-
        .popup-wrapper {
-            background: $dark_mode_foreground;
+            background: $dark_mode_background;
        }

        .popup-content {
@@ -211,28 +186,11 @@
    @keyframes popup-in {
        0% {
            opacity: 0;
-            transform: translateY(-50%) scale(0.7);
-        }
-        100% {
-            opacity: 1;
-            transform: translateY(-50%) scale(1);
-        }
-    }
-
-    .vignette-enter-active {
-        animation: vignette-in 0.15s ease;
-    }
-
-    .vignette-leave-active {
-        animation: vignette-in 0.15s 0.15s ease reverse;
-    }
-
-    @keyframes vignette-in {
-        0% {
-            opacity: 0;
+            transform: scale(0.7);
        }
        100% {
            opacity: 1;
+            transform: scale(1);
        }
    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/FilesView/ButtonBase.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/ButtonBase.vue
@@ -16,7 +16,7 @@

    .button-base {
        @include font-size(16);
-        font-weight: 600;
+        font-weight: 700;
        cursor: pointer;
        transition: 0.15s all ease;
        border-radius: 8px;
--- a/resources/js/components/VueFileManagerComponents/FilesView/ButtonUpload.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/ButtonUpload.vue
@@ -35,7 +35,7 @@

    .button-base {
        @include font-size(16);
-        font-weight: 600;
+        font-weight: 700;
        cursor: pointer;
        transition: 0.15s all ease;
        border-radius: 8px;
--- a/resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
@@ -8,20 +8,20 @@
        <ul class="menu-options" id="menu-options-list" ref="list" @click="closeAndResetContextMenu">

            <!--View-->
-            <li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && item.type === 'folder'">{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}</li>
-            <li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">Create Folder</li>
+            <li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && isFolder">{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}</li>
+            <li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">{{ $t('context_menu.create_folder') }}</li>

            <!--Edits-->
-            <li class="menu-option" @click="removeItem" v-if="! $isTrashLocation() && item">Delete</li>
-            <li class="menu-option" @click="moveItem" v-if="! $isTrashLocation() && item">Move</li>
+            <li class="menu-option" @click="removeItem" v-if="! $isTrashLocation() && item">{{ $t('context_menu.delete') }}</li>
+            <li class="menu-option" @click="moveItem" v-if="! $isTrashLocation() && item">{{ $t('context_menu.move') }}</li>

            <!--Trash-->
-            <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">Restore</li>
-            <li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">Empty Trash</li>
+            <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">{{ $t('context_menu.restore') }}</li>
+            <li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">{{ $t('context_menu.empty_trash') }}</li>

            <!--Others-->
-            <li class="menu-option" @click="ItemDetail" v-if="item">Detail</li>
-            <li class="menu-option" @click="downloadItem" v-if="isFile || isImage">Download</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>
 </template>
@@ -34,11 +34,14 @@
        name: 'ContextMenu',
        computed: {
            ...mapGetters(['app']),
+            isFolder() {
+                return this.item && this.item.type === 'folder'
+            },
            isFile() {
-                return this.item && this.item.type === 'file' ? true : false
+                return (this.item && this.item.type !== 'folder') && (this.item && this.item.type !== 'image')
            },
            isImage() {
-                return this.item && this.item.type === 'image' ? true : false
+                return this.item && this.item.type === 'image'
            },
            isInFavourites() {
                return this.app.favourites.find(el => el.unique_id == this.item.unique_id)
@@ -84,7 +87,7 @@
            },
            createFolder() {
                // Create folder
-                this.$createFolder('New Folder')
+                this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
            },
            closeAndResetContextMenu() {
                // Close context menu
@@ -141,8 +144,7 @@
    @import "@assets/app.scss";

    .contextmenu {
-        max-width: 190px;
-        width: 190px;
+        min-width: 190px;
        position: absolute;
        z-index: 99;
        box-shadow: $shadow;
@@ -161,7 +163,8 @@
            padding: 0;

            .menu-option {
-                font-weight: 600;
+                white-space: nowrap;
+                font-weight: 700;
                @include font-size(15);
                padding: 15px 30px;
                cursor: pointer;
--- a/resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
@@ -150,7 +150,7 @@
        vertical-align: middle;
        @include font-size(17);
        color: $text;
-        font-weight: 600;
+        font-weight: 700;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -168,7 +168,7 @@

        .back-directory-title {
            line-height: 1;
-            font-weight: 600;
+            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
--- a/resources/js/components/VueFileManagerComponents/FilesView/EmptyPage.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/EmptyPage.vue
@@ -2,16 +2,16 @@
    <div class="empty-page" v-if="isLoading || isEmpty">
        <div class="empty-state">
            <div class="text-content" v-if="isEmpty && !isLoading">
-                <h1 class="title">There is Nothing</h1>
+                <h1 class="title">{{ $t('empty_page.title') }}</h1>
                <p v-if="! isTrash" class="description">
-                    Upload some files here easily via upload button
+                    {{ $t('empty_page.description') }}
                </p>
                <ButtonUpload
                        v-if="! isTrash"
                        @input.native="$uploadFiles(files)"
                        v-model="files"
                        button-style="theme"
-                >Upload File
+                >{{ $t('empty_page.call_to_action') }}
                </ButtonUpload
                >
            </div>
@@ -78,7 +78,7 @@
        .title {
            @include font-size(24);
            color: $text;
-            font-weight: 600;
+            font-weight: 700;
            margin: 0;
        }

--- a/resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
@@ -1,31 +1,18 @@
 <template>
    <div v-if="fileInfoDetail">
        <div class="file-headline" spellcheck="false">
-            <!--Image thumbnail-->
-            <div v-if="fileInfoDetail.type == 'image'" class="image-preview">
-                <img
-                        @dblclick="$openImageOnNewTab(fileInfoDetail.file_url)"
-                        :src="fileInfoDetail.thumbnail"
-                        :alt="fileInfoDetail.name"
-                />
-            </div>
+
+            <FilePreview />

            <!--File info-->
            <div class="flex">
                <div class="icon">
                    <div class="icon-preview" @dblclick="getItemAction">
-                        <FontAwesomeIcon
-                                v-if="fileInfoDetail.type == 'folder'"
-                                icon="folder"
-                        ></FontAwesomeIcon>
-                        <FontAwesomeIcon
-                                v-if="fileInfoDetail.type == 'file'"
-                                icon="file"
-                        ></FontAwesomeIcon>
-                        <FontAwesomeIcon
-                                v-if="fileInfoDetail.type == 'image'"
-                                icon="file-image"
-                        ></FontAwesomeIcon>
+                        <FontAwesomeIcon v-if="fileInfoDetail.type == 'folder'" icon="folder"></FontAwesomeIcon>
+                        <FontAwesomeIcon v-if="fileInfoDetail.type == 'file'" icon="file"></FontAwesomeIcon>
+                        <FontAwesomeIcon v-if="fileInfoDetail.type == 'image'" icon="file-image"></FontAwesomeIcon>
+                        <FontAwesomeIcon v-if="fileInfoDetail.type == 'video'" icon="file-video"></FontAwesomeIcon>
+                        <FontAwesomeIcon v-if="fileInfoDetail.type == 'audio'" icon="file-audio"></FontAwesomeIcon>
                    </div>
                </div>
                <div class="file-info">
@@ -41,37 +28,47 @@
        <ul class="list-info">
            <!--Filesize-->
            <li v-if="fileInfoDetail.filesize" class="list-info-item">
-                <b>Size</b>
+                <b>{{ $t('file_detail.size') }}</b>
                <span>{{ fileInfoDetail.filesize }}</span>
            </li>

            <!--Latest change-->
            <li v-if="fileInfoDetail.created_at" class="list-info-item">
-                <b>Created at</b>
+                <b>{{ $t('file_detail.created_at') }}</b>
                <span>{{ fileInfoDetail.created_at }}</span>
            </li>

            <!--Parent-->
            <li class="list-info-item">
-                <b>Where</b>
-                <span>{{
-					fileInfoDetail.parent ? fileInfoDetail.parent.name : 'Home'
-				}}</span>
+                <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>
+                </div>
            </li>
        </ul>
    </div>
 </template>

 <script>
+    import FilePreview from '@/components/VueFileManagerComponents/FilesView/FilePreview'
    import {mapGetters} from 'vuex'
    import {debounce} from 'lodash'
+    import {events} from "@/bus"

    export default {
-        name: 'FilesInfoPanel',
+        name: 'FileInfoPanel',
+        components: {
+            FilePreview
+        },
        computed: {
            ...mapGetters(['fileInfoDetail'])
        },
        methods: {
+            moveItem() {
+                // Move item fire popup
+                events.$emit('popup:move-item', this.fileInfoDetail);
+            },
            getItemAction() {
                // Open image on new tab
                if (this.fileInfoDetail.type == 'image') {
@@ -91,7 +88,6 @@
                // Open folder
                if (this.fileInfoDetail.type == 'folder') {
                    // Todo: open folder
-                    console.log('Open folder')
                }
            },
            changeItemName: debounce(function (e) {
@@ -117,20 +113,6 @@
        margin-bottom: 20px;
        border-radius: 8px;

-        .image-preview {
-            width: 100%;
-            display: block;
-            margin-bottom: 7px;
-
-            img {
-                border-radius: 4px;
-                overflow: hidden;
-                width: 100%;
-                object-fit: cover;
-                cursor: pointer;
-            }
-        }
-
        .flex {
            display: flex;
            align-items: top;
@@ -172,8 +154,8 @@
            word-break: break-all;

            .name {
-                @include font-size(16);
-                font-weight: 600;
+                @include font-size(14);
+                font-weight: 700;
                color: $text;
            }

@@ -197,6 +179,16 @@
                padding-top: 0;
            }

+            .action-button {
+                cursor: pointer;
+
+                .icon {
+                    @include font-size(11);
+                    display: inline-block;
+                    margin-right: 2px;
+                }
+            }
+
            b {
                display: block;
                @include font-size(13);
@@ -204,8 +196,8 @@
            }

            span {
-                display: block;
-                @include font-size(16);
+                display: inline-block;
+                @include font-size(14);
                font-weight: bold;
                color: $text;
            }
@@ -236,6 +228,13 @@
                span {
                    color: $dark_mode_text_primary
                }
+
+                .action-button {
+
+                    .icon {
+                        color: $dark_mode_text_primary;
+                    }
+                }
            }
        }
    }
--- a/resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
@@ -7,7 +7,7 @@
    >
        <!--Grid preview-->
        <div
-                draggable="true"
+                :draggable="! isDeleted"
                @dragstart="$emit('dragstart')"
                @drop="
 				$emit('drop')
@@ -19,7 +19,7 @@
                :class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
        >
            <!--Thumbnail for item-->
-            <div class="icon-item" :class="data.type">
+            <div class="icon-item">
                <!--If is file or image, then link item-->
                <span v-if="isFile" class="file-icon-text">{{
 					data.mimetype
@@ -29,15 +29,10 @@
                <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>

                <!--Image thumbnail-->
-                <img v-if="isImage" :src="data.thumbnail" :alt="data.name"/>
+                <img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>

                <!--Else show only folder icon-->
-                <FontAwesomeIcon
-                        v-if="isFolder"
-                        :class="{'is-deleted': isDeleted}"
-                        class="folder-icon"
-                        icon="folder"
-                />
+                <FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
            </div>

            <!--Name-->
@@ -52,12 +47,12 @@
                >

                <!--Other attributes-->
-                <span v-if="isFile || isImage" class="item-size">{{
+                <span v-if="! isFolder" class="item-size">{{
 					data.filesize
 				}}</span>

                <span v-if="isFolder" class="item-length">
-					{{ folderItems == 0 ? 'Empty' : (folderItems + ' item') | pluralize(folderItems) }}
+					{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}
 				</span>
            </div>

@@ -82,13 +77,13 @@
                return this.data.type === 'folder'
            },
            isFile() {
-                return this.data.type === 'file'
+                return this.data.type !== 'folder' && this.data.type !== 'image'
            },
            isImage() {
                return this.data.type === 'image'
            },
            timeStamp() {
-                return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
+                return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
            },
            folderItems() {
                return this.data.deleted_at ? this.data.trashed_items : this.data.items
@@ -97,11 +92,6 @@
                return this.data.deleted_at ? true : false
            }
        },
-        filters: {
-            pluralize(word, amount) {
-                return amount > 1 ? word + 's' : word
-            }
-        },
        data() {
            return {
                isClicked: false,
@@ -212,7 +202,6 @@
        }
    }

-
    .file-wrapper {
        position: relative;
        text-align: center;
@@ -229,7 +218,7 @@
            .item-size,
            .item-length {
                @include font-size(12);
-                font-weight: 100;
+                font-weight: 400;
                color: $text-muted;
                display: block;
            }
@@ -237,6 +226,11 @@
            .name {
                display: block;

+                &[contenteditable] {
+                    -webkit-user-select: text;
+                    user-select: text;
+                }
+
                &[contenteditable='true']:hover {
                    text-decoration: underline;
                }
@@ -244,7 +238,7 @@

            .name {
                color: $text;
-                @include font-size(15);
+                @include font-size(14);
                font-weight: 700;
                max-height: 40px;
                overflow: hidden;
@@ -287,6 +281,7 @@
        }

        .icon-item {
+            text-align: center;
            position: relative;
            height: 110px;
            margin-bottom: 20px;
@@ -308,41 +303,33 @@
                }
            }

-            &.file {
-
-                .file-icon-text {
-                    margin: 5px auto 0;
-                    position: absolute;
-                    text-align: center;
-                    left: 0;
-                    right: 0;
-                    color: $theme;
-                    font-weight: 600;
-                    user-select: none;
-                    max-width: 65px;
-                    max-height: 20px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
+            .file-icon-text {
+                margin: 5px auto 0;
+                position: absolute;
+                text-align: center;
+                left: 0;
+                right: 0;
+                color: $theme;
+                font-weight: 600;
+                user-select: none;
+                max-width: 65px;
+                max-height: 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
            }

-            &.image {
-                img {
-                    max-width: 95%;
-                    object-fit: cover;
-                    user-select: none;
-                    height: 110px;
-                    border-radius: 5px;
-                    margin: 0 auto;
-                }
-            }
-
-            &.folder {
-                align-items: flex-end;
+            .image {
+                max-width: 95%;
+                object-fit: cover;
+                user-select: none;
+                height: 110px;
+                border-radius: 5px;
+                margin: 0 auto;
            }

            .folder-icon {
+                align-items: flex-end;
                @include font-size(80);
                margin: 0 auto;

--- a/resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
@@ -6,7 +6,7 @@
    >
        <!--List preview-->
        <div
-                draggable="true"
+                :draggable="! isDeleted"
                @dragstart="$emit('dragstart')"
                @drop="
 				$emit('drop')
@@ -18,7 +18,7 @@
                :class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
        >
            <!--Thumbnail for item-->
-            <div class="icon-item" :class="data.type">
+            <div class="icon-item">
                <!--If is file or image, then link item-->
                <span v-if="isFile" class="file-icon-text">{{
 					data.mimetype | limitCharacters
@@ -28,15 +28,10 @@
                <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>

                <!--Image thumbnail-->
-                <img v-if="isImage" :src="data.thumbnail" :alt="data.name"/>
+                <img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>

                <!--Else show only folder icon-->
-                <FontAwesomeIcon
-                        v-if="isFolder"
-                        :class="{'is-deleted': isDeleted}"
-                        class="folder-icon"
-                        icon="folder"
-                />
+                <FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
            </div>

            <!--Name-->
@@ -50,10 +45,10 @@
                >{{ itemName }}</span>

                <!--Other attributes-->
-                <span v-if="isFile || isImage" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
+                <span v-if="! isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>

                <span v-if="isFolder" class="item-length">
-					{{ folderItems == 0 ? 'Empty' : (folderItems + ' Item') | pluralize(folderItems) }}, {{ timeStamp }}
+					{{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
 				</span>
            </div>

@@ -81,13 +76,13 @@
                return this.data.type === 'folder'
            },
            isFile() {
-                return this.data.type === 'file'
+                return this.data.type !== 'folder' && this.data.type !== 'image'
            },
            isImage() {
                return this.data.type === 'image'
            },
            timeStamp() {
-                return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
+                return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
            },
            folderItems() {
                return this.data.deleted_at ? this.data.trashed_items : this.data.items
@@ -97,9 +92,6 @@
            }
        },
        filters: {
-            pluralize(word, amount) {
-                return amount > 1 ? word + 's' : word
-            },
            limitCharacters(str) {

                if (str.length > 3) {
@@ -244,14 +236,18 @@
            .item-size,
            .item-length {
                @include font-size(12);
-                font-weight: 100;
+                font-weight: 400;
                color: $text-muted;
                display: block;
            }

            .name {
                white-space: nowrap;
-                //display: inline-block;
+
+                &[contenteditable] {
+                    -webkit-user-select: text;
+                    user-select: text;
+                }

                &[contenteditable='true']:hover {
                    text-decoration: underline;
@@ -260,7 +256,7 @@

            .name {
                color: $text;
-                @include font-size(15);
+                @include font-size(14);
                font-weight: 700;
                max-height: 40px;
                overflow: hidden;
@@ -279,6 +275,7 @@
        }

        .icon-item {
+            text-align: center;
            position: relative;
            flex: 0 0 50px;
            line-height: 0;
@@ -308,38 +305,32 @@
                }
            }

-            &.file {
+            .file-icon-text {
+                line-height: 1;
+                top: 40%;
+                @include font-size(11);
+                margin: 0 auto;
+                position: absolute;
                text-align: center;
-
-                .file-icon-text {
-                    line-height: 1;
-                    top: 40%;
-                    @include font-size(11);
-                    margin: 0 auto;
-                    position: absolute;
-                    text-align: center;
-                    left: 0;
-                    right: 0;
-                    color: $theme;
-                    font-weight: 600;
-                    user-select: none;
-                    max-width: 50px;
-                    max-height: 20px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
+                left: 0;
+                right: 0;
+                color: $theme;
+                font-weight: 600;
+                user-select: none;
+                max-width: 50px;
+                max-height: 20px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
            }

-            &.image {
-                img {
-                    object-fit: cover;
-                    user-select: none;
-                    max-width: 100%;
-                    border-radius: 5px;
-                    width: 50px;
-                    height: 50px;
-                }
+            .image {
+                object-fit: cover;
+                user-select: none;
+                max-width: 100%;
+                border-radius: 5px;
+                width: 50px;
+                height: 50px;
            }
        }

--- a/resources/js/components/VueFileManagerComponents/FilesView/FilePreview.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/FilePreview.vue
@@ -0,0 +1,60 @@
+<template>
+    <div v-if="canBePreview" class="preview">
+        <img v-if="fileInfoDetail.type == 'image'" :src="fileInfoDetail.thumbnail" :alt="fileInfoDetail.name" />
+        <audio v-else-if="fileInfoDetail.type == 'audio'" :src="fileInfoDetail.file_url" controlsList="nodownload" controls></audio>
+        <video v-else-if="fileInfoDetail.type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
+            <source :src="fileInfoDetail.file_url" type="video/mp4">
+        </video>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+    import { includes } from 'lodash'
+
+    export default {
+        name: 'FilePreview',
+        computed: {
+            ...mapGetters(['fileInfoDetail']),
+            canBePreview() {
+                return this.fileInfoDetail && ! includes([
+                    'folder', 'file'
+                ], this.fileInfoDetail.type)
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+
+    .preview {
+        width: 100%;
+        display: block;
+        margin-bottom: 7px;
+
+        img {
+            border-radius: 4px;
+            overflow: hidden;
+            width: 100%;
+            object-fit: cover;
+        }
+
+        audio {
+            width: 100%;
+            &::-webkit-media-controls-panel {
+                background-color: $light_background;
+            }
+
+            &::-webkit-media-controls-play-button {
+                color: $theme;
+            }
+        }
+
+        video {
+            width: 100%;
+            height: auto;
+            border-radius: 3px;
+        }
+    }
+</style>
--- a/resources/js/components/VueFileManagerComponents/FilesView/FilesContainer.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/FilesContainer.vue
@@ -1,5 +1,10 @@
 <template>
-    <div class="file-content" :class="{ 'is-offset': uploadingFilesCount }">
+    <div class="file-content" :class="{ 'is-offset': uploadingFilesCount, 'is-dragging': isDragging }"
+         @dragover.prevent
+         @drop.stop.prevent="dropUpload($event)"
+         @dragover="dragEnter"
+         @dragleave="dragLeave"
+    >
        <div
                class="files-container"
                ref="fileContainer"
@@ -18,7 +23,10 @@
            <MobileActions v-if="$isMinimalScale()" />

            <!--Item previews list-->
-            <div v-if="isList" class="file-list-wrapper">
+            <div
+                    v-if="isList"
+                    class="file-list-wrapper"
+            >
                <transition-group
                        name="file"
                        tag="section"
@@ -27,7 +35,7 @@
                >
                    <FileItemList
                            @dragstart="dragStart(item)"
-                            @drop="dragFinish(item)"
+                            @drop.stop.native.prevent="dragFinish(item, $event)"
                            @contextmenu.native.prevent="contextMenu($event, item)"
                            :data="item"
                            v-for="item in data"
@@ -47,7 +55,7 @@
                >
                    <FileItemGrid
                            @dragstart="dragStart(item)"
-                            @drop="dragFinish(item)"
+                            @drop.native.prevent="dragFinish(item, $event)"
                            @contextmenu.native.prevent="contextMenu($event, item)"
                            :data="item"
                            v-for="item in data"
@@ -63,7 +71,7 @@
            <!--Show empty page if no search results-->
            <EmptyMessage
                    v-if="isSearching && isEmpty"
-                    message="Nothing was found."
+                    :message="$t('messages.nothing_was_found')"
                    icon="eye-slash"
            />
        </div>
@@ -79,7 +87,7 @@
            <!--If file info panel empty show message-->
            <EmptyMessage
                    v-if="!fileInfoDetail"
-                    message="There is nothing to preview."
+                    :message="$t('messages.nothing_to_preview')"
                    icon="eye-slash"
            />
        </div>
@@ -133,10 +141,23 @@
        },
        data() {
            return {
-                draggingId: undefined
+                draggingId: undefined,
+                isDragging: false,
            }
        },
        methods: {
+            dropUpload(event) {
+                // Upload external file
+                this.$uploadExternalFiles(event, this.currentFolder.unique_id)
+
+                this.isDragging = false
+            },
+            dragEnter() {
+                this.isDragging = true
+            },
+            dragLeave() {
+                this.isDragging = false
+            },
            dragStart(data) {

                events.$emit('dragstart', data)
@@ -144,15 +165,26 @@
                // Store dragged folder
                this.draggingId = data
            },
-            dragFinish(data) {
-                // Prevent to drop on file or image
-                if (data.type !== 'folder' || this.draggingId === data) return
+            dragFinish(data, event) {

-                // Move folder to new parent
-                this.moveTo(this.draggingId, data)
-            },
-            moveTo(from_item, to_item) {
-                this.$store.dispatch('moveItem', [from_item, to_item])
+                if (event.dataTransfer.items.length == 0) {
+
+                    // Prevent to drop on file or image
+                    if (data.type !== 'folder' || this.draggingId === data) return
+
+                    // Move folder to new parent
+                    this.$store.dispatch('moveItem', [this.draggingId, data])
+
+                } else {
+
+                    // Get unique_id of current folder
+                    const unique_id = data.type !== 'folder' ? this.currentFolder.unique_id : data.unique_id
+
+                    // Upload external file
+                    this.$uploadExternalFiles(event, unique_id)
+                }
+
+                this.isDragging = false
            },
            contextMenu(event, item) {
                events.$emit('contextMenu:show', event, item)
@@ -225,6 +257,10 @@
    .file-content {
        display: flex;
        flex-wrap: nowrap;
+
+        &.is-dragging {
+            @include transform(scale(0.99));
+        }
    }

    .files-container {
--- a/resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue
@@ -1,10 +1,10 @@
 <template>
    <div id="mobile-actions-wrapper">
        <div class="mobile-actions">
-            <MobileActionButton v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" text="Add Folder"></MobileActionButton>
-            <MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" text="Upload"></MobileActionButtonUpload>
+            <MobileActionButton v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" :text="$t('context_menu.add_folder')"></MobileActionButton>
+            <MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" :text="$t('context_menu.upload')"></MobileActionButtonUpload>
            <MobileActionButton @click.native="switchPreview" :icon="previewIcon" :text="previewText"></MobileActionButton>
-            <MobileActionButton  v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" text="Empty Trash"></MobileActionButton>
+            <MobileActionButton  v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" :text="$t('context_menu.empty_trash')"></MobileActionButton>
        </div>
        <UploadProgress />
    </div>
@@ -31,7 +31,7 @@
                return this.preview_type === 'list' ? 'th' : 'th-list'
            },
            previewText() {
-                return this.preview_type === 'list' ? 'Grid' : 'List'
+                return this.preview_type === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
            }
        },
        methods: {
@@ -40,13 +40,14 @@
            },
            createFolder() {
                if (this.$isMobile()) {
-                    let folderName = prompt('Please enter your new folder name')
+                    // Get folder name
+                    let folderName = prompt(this.$t('popup_create_folder.title'))

                    // Create folder
                    if (folderName) this.$createFolder(folderName)
                } else {
                    // Create folder
-                    this.$createFolder('New Folder')
+                    this.$createFolder(this.$t('popup_create_folder.folder_default_name'))
                }
            },
        }
--- a/resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue
@@ -2,7 +2,7 @@
    <div class="options-wrapper">
        <transition name="context-menu">
            <div
-                    v-show="isVisible"
+                    v-if="isVisible"
                    ref="contextmenu"
                    class="options"
                    @click="closeAndResetContextMenu"
@@ -11,44 +11,44 @@
                    <ul class="menu-options">
                        <li class="menu-option"
                            @click="addToFavourites"
-                            v-if="! $isTrashLocation() && fileInfoDetail && fileInfoDetail.type === 'folder'"
+                            v-if="! $isTrashLocation() && fileInfoDetail && isFolder"
                        >
-                            {{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}
+                            {{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
                        </li>

                        <li class="menu-option"
                            @click="$store.dispatch('restoreItem', fileInfoDetail)"
                            v-if="fileInfoDetail && $isTrashLocation()"
                        >
-                            Restore
+                            {{ $t('context_menu.restore') }}
                        </li>
                        <li
                                class="menu-option"
                                @click="renameItem"
                                v-if="fileInfoDetail"
                        >
-                            Rename
+                            {{ $t('context_menu.rename') }}
                        </li>
                        <li
                                class="menu-option"
                                @click="moveItem"
                                v-if="fileInfoDetail"
                        >
-                            Move
+                            {{ $t('context_menu.move') }}
                        </li>
                        <li
                                class="menu-option"
                                @click="downloadItem"
-                                v-if="isFile || isImage"
+                                v-if="! isFolder"
                        >
-                            Download
+                            {{ $t('context_menu.download') }}
                        </li>
                        <li
                                class="menu-option delete"
                                @click="removeItem"
                                v-if="fileInfoDetail"
                        >
-                            Delete
+                            {{ $t('context_menu.delete') }}
                        </li>
                    </ul>
                </div>
@@ -76,19 +76,13 @@
                return this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)
            },
            isFile() {
-                return this.fileInfoDetail && this.fileInfoDetail.type === 'file'
-                    ? true
-                    : false
+                return (this.fileInfoDetail && this.fileInfoDetail.type !== 'folder') && (this.fileInfoDetail && this.fileInfoDetail.type !== 'image')
            },
            isImage() {
                return this.fileInfoDetail && this.fileInfoDetail.type === 'image'
-                    ? true
-                    : false
            },
            isFolder() {
                return this.fileInfoDetail && this.fileInfoDetail.type === 'folder'
-                    ? true
-                    : false
            }
        },
        data() {
@@ -121,7 +115,7 @@
            },
            renameItem() {
                let itemName = prompt(
-                    'Change your item name',
+                    this.$t('popup_rename.title'),
                    this.fileInfoDetail.name
                )

@@ -149,15 +143,13 @@
            }
        },
        created() {
+
+            // Show context menu
            events.$on('mobileMenu:show', () => {
-                // Show context menu
                this.isVisible = !this.isVisible
            })

-            events.$on('mobileMenu:hide', () => {
-                this.isVisible = false
-            })
-
+            // Hide mobile menu
            events.$on('mobileMenu:hide', () => {
                this.isVisible = false
            })
@@ -169,7 +161,7 @@
    @import "@assets/app.scss";

    .vignette {
-        background: rgba(0, 0, 0, 0.25);
+        background: rgba(0, 0, 0, 0.15);
        position: absolute;
        top: 0;
        right: 0;
@@ -192,26 +184,24 @@
            display: block;
        }

-        .menu-wrapper {
-            margin: 15px;
-        }
-
        .menu-options {
            margin-top: 10px;
            box-shadow: $shadow;
            background: white;
-            border-radius: 8px;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
            list-style: none;
            width: 100%;

            .menu-option {
-                font-weight: 600;
+                font-weight: 700;
+                letter-spacing: 0.15px;
                @include font-size(15);
                cursor: pointer;
                width: 100%;
                padding: 20px 10px;
                text-align: center;
-                border-bottom: 1px solid $light_background;
+                border-bottom: 1px solid $light_mode_border;

                &:last-child {
                    border: none;
@@ -229,10 +219,10 @@
        .options {

            .menu-options {
-                background: $dark_mode_foreground;
+                background: $dark_mode_background;

                .menu-option {
-                    border-color: rgba($dark_mode_background, .5);
+                    border-color: $dark_mode_border_color;
                    color: $dark_mode_text_primary;
                }
            }
@@ -242,12 +232,12 @@
    // Transition
    .context-menu-enter-active,
    .fade-enter-active {
-        transition: all 300ms ease;
+        transition: all 200ms;
    }

    .context-menu-leave-active,
    .fade-leave-active {
-        transition: all 300ms;
+        transition: all 200ms;
    }

    .fade-enter,
--- a/resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
@@ -130,9 +130,9 @@
            text-align: center;
            width: 100%;
            vertical-align: middle;
-            @include font-size(17);
+            @include font-size(16);
            color: $text;
-            font-weight: 600;
+            font-weight: 700;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
--- a/resources/js/components/VueFileManagerComponents/FilesView/ProgressBar.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/ProgressBar.vue
@@ -40,7 +40,7 @@ export default {
 	@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) {

 		.progress-bar {
-			background: $dark_mode_background;
+			background: $dark_mode_foreground;
 		}
 	}
 </style>
--- a/resources/js/components/VueFileManagerComponents/FilesView/SearchBar.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/SearchBar.vue
@@ -5,7 +5,7 @@
                class="query"
                type="text"
                name="query"
-                placeholder="Search files…"
+                :placeholder="$t('inputs.placeholder_search_files')"
        />
        <div class="icon" v-if="!isQuery">
            <FontAwesomeIcon icon="search"></FontAwesomeIcon>
@@ -88,6 +88,7 @@
            &::placeholder {
                color: $text;
                @include font-size(14);
+                font-weight: 400;
            }

            &:focus {
--- a/resources/js/components/VueFileManagerComponents/FilesView/UploadProgress.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/UploadProgress.vue
@@ -2,11 +2,7 @@
    <transition name="info-panel">
        <div v-if="uploadingFilesCount" class="upload-progress">
            <div class="progress-title">
-				<span
-                >Uploading files {{ uploadingFilesCount.current }}/{{
-						uploadingFilesCount.total
-					}}</span
-                >
+				<span>{{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total}) }}</span>
            </div>
            <ProgressBar :progress="uploadingFileProgress"/>
        </div>
--- a/resources/js/components/VueFileManagerComponents/Others/PopupMoveItem.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/PopupMoveItem.vue
@@ -1,42 +1,39 @@
 <template>
-    <transition name="vignette">
-        <div class="popup" v-if="isVisibleWrapper">
-            <transition name="popup">
-                <div v-if="isVisiblePopup" class="popup-wrapper">
+    <transition name="popup">
+        <div class="popup" @click.self="closePopup" v-if="isVisibleWrapper">
+            <div class="popup-wrapper">

-                    <!--Title-->
-                    <div class="popup-header">
-                        <h1 class="title">Move Item</h1>
-                        <!--<p v-if="message" class="message">{{ message }}</p>-->
-                    </div>
+                <!--Title-->
+                <div class="popup-header">
+                    <h1 class="title">{{ $t('popup_move_item.title') }}</h1>
+                    <!--<p v-if="message" class="message">{{ message }}</p>-->
+                </div>

-                    <!--Content-->
-                    <div class="popup-content" v-if="app && pickedItem">
-                        <Spinner v-if="isLoadingTree" />
-                        <div v-if="! isLoadingTree">
-                            <ThumbnailItem class="item-thumbnail" :file="pickedItem" />
-                            <TreeMenu :depth="1" :nodes="items" v-for="items in app.folders" :key="items.unique_id" />
-                        </div>
-                    </div>
-
-                    <!--Actions-->
-                    <div class="actions">
-                        <ButtonBase
-                                class="popup-button"
-                                @click.native="closePopup"
-                                button-style="secondary"
-                        >Cancel
-                        </ButtonBase>
-                        <ButtonBase
-                                class="popup-button"
-                                @click.native="moveItem"
-                                :button-style="selectedFolder ? 'theme' : 'secondary'"
-                        >Move
-                        </ButtonBase>
+                <!--Content-->
+                <div class="popup-content" v-if="app && pickedItem">
+                    <Spinner v-if="isLoadingTree"/>
+                    <div v-if="! isLoadingTree">
+                        <ThumbnailItem class="item-thumbnail" :file="pickedItem"/>
+                        <TreeMenu :depth="1" :nodes="items" v-for="items in app.folders" :key="items.unique_id"/>
                    </div>
                </div>
-            </transition>
-            <div class="popup-vignette" @click="closePopup"></div>
+
+                <!--Actions-->
+                <div class="actions">
+                    <ButtonBase
+                            class="popup-button"
+                            @click.native="closePopup"
+                            button-style="secondary"
+                    >{{ $t('popup_move_item.cancel') }}
+                    </ButtonBase>
+                    <ButtonBase
+                            class="popup-button"
+                            @click.native="moveItem"
+                            :button-style="selectedFolder ? 'theme' : 'secondary'"
+                    >{{ $t('popup_move_item.submit') }}
+                    </ButtonBase>
+                </div>
+            </div>
        </div>
    </transition>
 </template>
@@ -63,7 +60,6 @@
        data() {
            return {
                isVisibleWrapper: false,
-                isVisiblePopup: false,
                selectedFolder: undefined,
                pickedItem: undefined,
                isLoadingTree: true,
@@ -72,36 +68,38 @@
        methods: {
            moveItem() {

+                // Prevent empty submit
                if (! this.selectedFolder) return

                // Move item
                this.$store.dispatch('moveItem', [this.pickedItem, this.selectedFolder])

                // Close popup
-                this.closePopup()
+                events.$emit('popup:close')
            },
            closePopup() {
-
-                // Hide popup wrapper
-                this.isVisibleWrapper = false
-                this.isVisiblePopup = false
-
-                // Clear selected folder
-                this.selectedFolder = undefined
+                events.$emit('popup:close')
            }
        },
        mounted() {

-            events.$on('pick-folder', unique_id => {
-                this.selectedFolder = unique_id
+            // Select folder in tree
+            events.$on('pick-folder', folder => {
+
+                if (folder.unique_id == this.pickedItem.unique_id) {
+                    this.selectedFolder = undefined
+                } else {
+                    this.selectedFolder = folder
+                }
            })

            // Show popup
            events.$on('popup:move-item', item => {

+                // Show tree spinner
                this.isLoadingTree = true

-                // Get folder tree
+                // Get folder tree and hide spinner
                this.$store.dispatch('getFolderTree').then(() => {
                    this.isLoadingTree = false
                }).catch(() => {
@@ -110,14 +108,20 @@

                // Make popup visible
                this.isVisibleWrapper = true
-                this.isVisiblePopup = true

                // Store picked item
                this.pickedItem = item
            })

            // Close popup
-            events.$on('popup:close', () => this.closePopup())
+            events.$on('popup:close', () => {
+
+                // Hide popup wrapper
+                this.isVisibleWrapper = false
+
+                // Clear selected folder
+                this.selectedFolder = undefined
+            })
        }
    }
 </script>
@@ -126,28 +130,19 @@
    @import "@assets/app.scss";

    .popup {
-        position: fixed;
+        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
-        z-index: 999;
-        overflow: auto;
+        z-index: 20;
+        overflow-y: auto;
        display: grid;
        padding: 40px;
-
-        .popup-vignette {
-            position: fixed;
-            top: 0;
-            right: 0;
-            left: 0;
-            bottom: 0;
-            background: rgba(17, 20, 29, 0.5);
-        }
    }

    .popup-wrapper {
-        box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
+        box-shadow: $light_mode_popup_shadow;
        border-radius: 8px;
        background: white;
        margin: auto;
@@ -159,8 +154,8 @@
        padding: 20px;

        .title {
-            @include font-size(20);
-            font-weight: 900;
+            @include font-size(18);
+            font-weight: 700;
            color: $text;
        }

@@ -207,8 +202,12 @@
    // Mobile styles
    .small {

+        .popup {
+            overflow: hidden;
+        }
+
        .popup-wrapper {
-            position: fixed;
+            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
@@ -276,12 +275,9 @@
    // Dark mode
    @media (prefers-color-scheme: dark) {

-        .popup .popup-vignette {
-            background: $dark_mode_vignette;
-        }
-
        .popup-wrapper {
-            background: $dark_mode_foreground;
+            background: $dark_mode_background;
+            box-shadow: $dark_mode_popup_shadow;
        }

        .popup-header {
@@ -295,20 +291,9 @@
        }
    }

-    .vignette-enter-active {
-        animation: vignette-in 0.15s ease;
-    }
-
-    .vignette-leave-active {
-        animation: vignette-in 0.15s 0.15s ease reverse;
-    }
-
-    @keyframes vignette-in {
-        0% {
-            opacity: 0;
-        }
-        100% {
-            opacity: 1;
+    @media (prefers-color-scheme: dark) and (max-width: 690px) {
+        .popup-wrapper {
+            background: $dark_mode_background;
        }
    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/Others/TextLabel.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/TextLabel.vue
@@ -15,10 +15,16 @@

    .text-label {
        @include font-size(10);
-        color: $light_text;
+        color: $theme;
        text-transform: uppercase;
        font-weight: 900;
        display: block;
        margin-bottom: 5px;
    }
+
+    @media (prefers-color-scheme: dark) {
+        .text-label {
+            color: rgba($dark_mode_text_secondary, .4);
+        }
+    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/Others/ThumbnailItem.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/ThumbnailItem.vue
@@ -2,7 +2,7 @@
    <div class="file-item">

        <!--Thumbnail for item-->
-        <div class="icon-item" :class="file.type">
+        <div class="icon-item">

            <!--If is file or image, then link item-->
            <span v-if="isFile" class="file-icon-text">{{ file.mimetype }}</span>
@@ -11,7 +11,7 @@
            <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>

            <!--Image thumbnail-->
-            <img v-if="isImage" :src="file.thumbnail" :alt="file.name"/>
+            <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"/>
@@ -24,7 +24,7 @@
            <span class="name">{{ file.name }}</span>

            <!--Other attributes-->
-            <span class="subtitle">Original Location: {{ currentFolder.name }}</span>
+            <span class="subtitle">{{ $t('item_thumbnail.original_location') }}: {{ currentFolder.name }}</span>
        </div>
    </div>
 </template>
@@ -41,17 +41,12 @@
                return this.file.type === 'folder'
            },
            isFile() {
-                return this.file.type === 'file'
+                return this.file.type !== 'folder' && this.file.type !== 'image'
            },
            isImage() {
                return this.file.type === 'image'
            }
        },
-        filters: {
-            pluralize(word, amount) {
-                return amount > 1 ? word + 's' : word
-            }
-        },
    }
 </script>

@@ -73,7 +68,7 @@

            .subtitle {
                @include font-size(11);
-                font-weight: 100;
+                font-weight: 400;
                color: $text-muted;
                display: block;
            }
@@ -92,6 +87,8 @@
        .icon-item {
            position: relative;
            min-width: 40px;
+            text-align: center;
+            line-height: 0;

            .file-icon {
                @include font-size(35);
@@ -111,39 +108,32 @@
                }
            }

-            &.file {
+            .file-icon-text {
+                line-height: 1;
+                top: 40%;
+                @include font-size(9);
+                margin: 0 auto;
+                position: absolute;
                text-align: center;
-
-                .file-icon-text {
-                    top: 40%;
-                    @include font-size(9);
-                    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;
-                }
+                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 {
-                line-height: 0;
-
-                img {
-                    object-fit: cover;
-                    user-select: none;
-                    max-width: 100%;
-                    border-radius: 5px;
-                    width: 36px;
-                    height: 36px;
-                }
+            .image {
+                object-fit: cover;
+                user-select: none;
+                max-width: 100%;
+                border-radius: 5px;
+                width: 36px;
+                height: 36px;
            }
        }
    }
--- a/resources/js/components/VueFileManagerComponents/Others/TreeMenu.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/TreeMenu.vue
@@ -70,11 +70,12 @@

    .folder-item {
        display: block;
-        padding: 10px 20px;
+        padding: 15px 20px;
        @include transition(150ms);
        cursor: pointer;
        position: relative;
        white-space: nowrap;
+        border-bottom: 1px solid $light_mode_border;

        .icon {
            @include font-size(18);
@@ -114,6 +115,7 @@
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
+            color: $text;
        }

        &:hover {
@@ -139,9 +141,25 @@
    @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_background;
+                background: $dark_mode_foreground;
+            }
+
+            &.is-selected {
+                background: rgba($theme, .1);
+            }
+
+            .icon {
+
+                path {
+                    fill: lighten($dark_mode_foreground, 10%);
+                }
            }

            .icon-chevron {
@@ -157,4 +175,14 @@
        }
    }

+    @media (prefers-color-scheme: dark) and (max-width: 690px) {
+        .folder-item {
+
+            &:hover,
+            &.is-selected {
+                background: rgba($theme, .1);
+            }
+        }
+    }
+
 </style>
--- a/resources/js/components/VueFileManagerComponents/Others/UserImageInput.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/UserImageInput.vue
@@ -48,7 +48,7 @@
                    // Update user avatar
                    this.$updateImage('/user/profile', 'avatar', event.target.files[0])
                } else {
-                    alert('You may have uploaded the wrong file, try again!')
+                    alert( this.$t('validation_errors.wrong_image') )
                }
            }
        },
--- a/resources/js/components/VueFileManagerComponents/Others/Vignette.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/Vignette.vue
@@ -0,0 +1,74 @@
+<template>
+    <transition name="vignette">
+        <div v-if="isVisibleVignette" class="vignette" @click="closePopup"></div>
+    </transition>
+</template>
+
+<script>
+    import {events} from '@/bus'
+
+    export default {
+        name: 'Vignette',
+        data() {
+            return {
+                isVisibleVignette: false,
+            }
+        },
+        methods: {
+            closePopup() {
+                events.$emit('popup:close')
+                events.$emit('mobileMenu:hide')
+            }
+        },
+        created() {
+
+            // Hide vignette
+            events.$on('popup:close', () => this.isVisibleVignette = false)
+
+            // Show vignette
+            events.$on('popup:move-item', () => this.isVisibleVignette = true)
+            events.$on('alert:open', () => this.isVisibleVignette = true)
+            events.$on('success:open', () => this.isVisibleVignette = true)
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .vignette {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 19;
+        background: $light_mode_vignette;
+    }
+
+    // Dark mode
+    @media (prefers-color-scheme: dark) {
+
+        .vignette {
+            background: $dark_mode_vignette;
+        }
+    }
+
+
+    .vignette-enter-active {
+        animation: vignette-in 0.35s ease;
+    }
+
+    .vignette-leave-active {
+        animation: vignette-in 0.15s ease reverse;
+    }
+
+    @keyframes vignette-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+</style>
--- a/resources/js/components/VueFileManagerComponents/Sidebar.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar.vue
@@ -9,11 +9,11 @@

                <!--Locations-->
                <div class="menu-list-wrapper">
-                    <TextLabel>Locations</TextLabel>
+                    <TextLabel>{{ $t('sidebar.locations') }}</TextLabel>
                    <ul class="menu-list">
                        <li class="menu-list-item" @click="goHome">
                            <FontAwesomeIcon class="icon" icon="hdd"/>
-                            <span class="label">Home</span>
+                            <span class="label">{{ $t('locations.home') }}</span>
                        </li>
                        <!--<li class="menu-list-item">
                            <FontAwesomeIcon class="icon" icon="share"/>
@@ -21,7 +21,7 @@
                        </li>-->
                        <li class="menu-list-item" @click="getTrash">
                            <FontAwesomeIcon class="icon" icon="trash-alt"/>
-                            <span class="label">Trash</span>
+                            <span class="label">{{ $t('locations.trash') }}</span>
                        </li>
                    </ul>
                </div>
@@ -33,10 +33,10 @@
                     @drop="dragFinish($event)"
                     :class="{ 'is-dragenter': area }"
                >
-                    <TextLabel>Favourites</TextLabel>
+                    <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">Drag here your favourite
-                            folder.
+                        <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"
@@ -52,9 +52,9 @@

                <!--Last Uploads-->
                <div class="menu-list-wrapper">
-                    <TextLabel>Last Uploads</TextLabel>
+                    <TextLabel>{{ $t('sidebar.latest') }}</TextLabel>

-                    <p class="empty-list" v-if="app.latest_uploads.length == 0">You don't have any latest uploads.</p>
+                    <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>
@@ -64,7 +64,7 @@
            <StorageSize v-if="config.storageLimit"/>

            <div v-if="isSmallAppSize" class="log-out-button">
-                <ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">Log Out</ButtonBase>
+                <ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">{{ $t('context_menu.log_out') }}</ButtonBase>
            </div>
        </div>
    </transition>
@@ -176,8 +176,8 @@

    #sidebar {
        position: relative;
-        flex: 0 0 295px;
-        border-right: 1px solid $light_background;
+        flex: 0 0 265px;
+        background: $light_background;
    }

    .content-scroller {
@@ -198,37 +198,18 @@
    }

    .menu-list-wrapper {
-        margin-bottom: 25px;
+        margin-bottom: 20px;

        .menu-list {

            .menu-list-item {
                display: block;
-                padding: 10px 15px 10px 25px;
+                padding: 8px 15px 8px 25px;
                @include transition(150ms);
                cursor: pointer;
                position: relative;
                white-space: nowrap;

-                &:hover {
-                    background: rgba($theme, .1);
-                    //background: $light_background;
-
-                    .icon {
-                        path {
-                            fill: $theme;
-                        }
-                    }
-
-                    .label {
-                        color: $theme;
-                    }
-
-                    .delete-icon {
-                        display: block;
-                    }
-                }
-
                .icon {
                    @include font-size(13);
                    width: 15px;
@@ -254,7 +235,7 @@
                }

                .label {
-                    @include font-size(15);
+                    @include font-size(14);
                    font-weight: 700;
                    vertical-align: middle;
                    white-space: nowrap;
@@ -263,6 +244,24 @@
                    text-overflow: ellipsis;
                    display: inline-block;
                }
+
+                &:hover {
+                    background: rgba($theme, .1);
+
+                    .icon {
+                        path {
+                            fill: $theme;
+                        }
+                    }
+
+                    .label {
+                        color: $theme;
+                    }
+
+                    .delete-icon {
+                        display: block;
+                    }
+                }
            }
        }

@@ -280,16 +279,27 @@
                border: 2px dashed transparent;

                .menu-list-item {
-                    padding: 10px 13px 10 23px;
+                    padding: 8px 23px;

                    .icon {
-                        @include font-size(20);
+                        margin-right: 5px;
+                        @include font-size(14);
                        width: 20px;

                        path {
                            fill: $theme;
                        }
                    }
+
+                    &:hover {
+                        background: rgba($theme, .1);
+
+                        .icon {
+                            path {
+                                fill: $theme;
+                            }
+                        }
+                    }
                }
            }
        }
@@ -356,7 +366,7 @@
                padding: 10px 26px;

                .label {
-                    @include font-size(16);
+                    @include font-size(14);
                }
            }
        }
@@ -367,8 +377,8 @@
    }

    @media (prefers-color-scheme: dark) {
+
        #sidebar {
-            border-color: $dark_mode_foreground;
            background: $dark_mode_foreground;
        }

@@ -380,18 +390,22 @@
                    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){
+    @media (prefers-color-scheme: dark) and (max-width: 690px) {
        #sidebar {
-            border-color: $dark_mode_background;
            background: $dark_mode_background;
        }
    }
--- a/resources/js/components/VueFileManagerComponents/Sidebar/FileListItemThumbnail.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar/FileListItemThumbnail.vue
@@ -2,7 +2,7 @@
    <div class="file-item">

        <!--Thumbnail for item-->
-        <div class="icon-item" :class="file.type">
+        <div class="icon-item">

            <!--If is file or image, then link item-->
            <span v-if="isFile" class="file-icon-text">{{ file.mimetype }}</span>
@@ -11,10 +11,10 @@
            <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />

            <!--Image thumbnail-->
-            <img v-if="isImage" :src="file.thumbnail" :alt="file.name" />
+            <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" />
+            <FontAwesomeIcon v-if="isFolder" class="folder-icon"  icon="folder" />
        </div>

        <!--Name-->
@@ -24,9 +24,9 @@
            <span class="name" >{{ file.name }}</span>

            <!--Other attributes-->
-            <span v-if="isFile || isImage" class="item-size">{{ file.filesize }}, {{ file.created_at }}</span>
+            <span v-if="! isFolder" class="item-size">{{ file.filesize }}, {{ file.created_at }}</span>

-            <span v-if="isFolder" class="item-length">{{ file.items == 0 ? 'Empty' : (file.items + ' item') | pluralize(file.items) }}, {{ file.created_at }}</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>
@@ -41,28 +41,22 @@ export default {
            return this.file.type === 'folder'
        },
        isFile() {
-            return this.file.type === 'file'
+            return this.file.type !== 'folder' && this.file.type !== 'image'
        },
        isImage() {
            return this.file.type === 'image'
        }
    },
-    filters: {
-        pluralize(word, amount) {
-            return amount > 1 ? word + 's' : word
-        }
-    },
 }
 </script>

 <style scoped lang="scss">
    @import "@assets/app.scss";

-
    .file-item {
        display: flex;
        align-items: center;
-        padding: 8px 15px;
+        padding: 10px 15px;
        @include transition(150ms);
        cursor: pointer;

@@ -85,7 +79,7 @@ export default {
            .item-size,
            .item-length {
                @include font-size(11);
-                font-weight: 100;
+                font-weight: 400;
                color: $text-muted;
                display: block;
            }
@@ -107,6 +101,8 @@ export default {
        .icon-item {
            position: relative;
            min-width: 40px;
+            text-align: center;
+            line-height: 0;

            .file-icon {
                @include font-size(35);
@@ -118,39 +114,32 @@ export default {
                }
            }

-            &.file {
+            .file-icon-text {
+                top: 40%;
+                @include font-size(9);
+                line-height: 1;
+                margin: 0 auto;
+                position: absolute;
                text-align: center;
-
-                .file-icon-text {
-                    top: 40%;
-                    @include font-size(9);
-                    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;
-                }
+                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 {
-                line-height: 0;
-
-                img {
-                    object-fit: cover;
-                    user-select: none;
-                    max-width: 100%;
-                    border-radius: 5px;
-                    width: 36px;
-                    height: 36px;
-                }
+            .image {
+                object-fit: cover;
+                user-select: none;
+                max-width: 100%;
+                border-radius: 5px;
+                width: 36px;
+                height: 36px;
            }
        }
    }
--- a/resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue
@@ -1,8 +1,8 @@
 <template>
    <div class="storage-size" v-if="app">
        <div class="storage-info">
-            <span class="title">Storage</span>
-            <span class="size">{{ app.storage.used }} of {{ app.storage.capacity }} Used</span>
+            <span class="title">{{ $t('storage.title') }}</span>
+            <span class="size">{{ $t('storage.used', {used: app.storage.used, capacity: app.storage.capacity}) }}</span>
        </div>
        <ProgressBar :progress="app.storage.percentage" :class="{'is-exceeded': app.storage.percentage > 100}"/>
    </div>
@@ -74,8 +74,13 @@
            .size {
                @include font-size(10);
            }
+        }
+    }

-            .title {
+    @media (prefers-color-scheme: dark) {
+        .storage-size {
+
+            .storage-info .title {
                color: $dark_mode_text_primary;
            }
        }
--- a/resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
@@ -12,8 +12,8 @@
        <transition name="user-menu">
            <div class="user-menu" v-if="isOpenedMenu">
                <ul class="menu-options" id="menu-options-list" @click="closeMenu">
-                    <li class="menu-option" @click="$goToView('user-settings')">Profile Settings</li>
-                    <li class="menu-option" @click="$store.dispatch('logOut')">Log Out</li>
+                    <li class="menu-option" @click="$goToView('user-settings')">{{ $t('context_menu.profile_settings') }}</li>
+                    <li class="menu-option" @click="$store.dispatch('logOut')">{{ $t('context_menu.log_out') }}</li>
                </ul>
            </div>
        </transition>
@@ -70,12 +70,14 @@
        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);
@@ -103,6 +105,7 @@
            color: $theme;
            display: block;
            margin-top: 2px;
+            font-weight: 600;
        }
    }

@@ -137,7 +140,7 @@
        border-radius: 8px;

        .menu-option {
-            font-weight: 600;
+            font-weight: 700;
            @include font-size(15);
            padding: 15px 30px;
            cursor: pointer;
@@ -156,17 +159,15 @@
        .user-headline {
            position: relative;
            margin-bottom: 40px;
+            background: transparent;
+            padding: 0;
        }
    }

    @media (prefers-color-scheme: dark) {

-        #sidebar {
-            background: $dark_mode_background;
-        }
-
        .user-headline {
-            background: transparent;
+            background: $dark_mode_background;

            &:hover {
                background: transparent;
--- a/resources/js/components/VueFileManagerComponents/UserSettings.vue
+++ b/resources/js/components/VueFileManagerComponents/UserSettings.vue
@@ -1,7 +1,7 @@
 <template>
    <div id="user-settings">

-        <PageHeader title="User Profile" />
+        <PageHeader :title="$t('profile.page_title')" />

        <div class="content-page">
            <div class="avatar-upload">
@@ -10,27 +10,27 @@
                        :avatar="app.user.avatar"
                />
                <div class="info">
-                    <span class="description">Change Your Profile Picture</span>
-                    <span class="supported">Supported formats are .png, .jpg, .jpeg.</span>
+                    <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>Profile Information</ThemeLabel>
+                <ThemeLabel>{{ $t('profile.profile_info') }}</ThemeLabel>
                <div class="block-wrapper">
-                    <label>Email:</label>
+                    <label>{{ $t('page_registration.label_email') }}</label>
                    <div class="input-wrapper">
-                        <input :value="app.user.email" placeholder="Type your E-mail" type="email" disabled/>
+                        <input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
                    </div>
                </div>

                <div class="block-wrapper">
-                    <label>Full Name:</label>
+                    <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="Type your full name" type="text"
+                               :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>
@@ -40,23 +40,23 @@
            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
                                class="form block-form">

-                <ThemeLabel>Change Password</ThemeLabel>
+                <ThemeLabel>{{ $t('profile.change_pass') }}</ThemeLabel>

                <div class="block-wrapper">
-                    <label>Your Password:</label>
+                    <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="New Password" 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>
                </div>

                <div class="block-wrapper">
-                    <label>Repeat Your Password:</label>
+                    <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="Confirm your new password" 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>
@@ -64,7 +64,7 @@

                <div class="block-wrapper">
                    <ButtonBase type="submit" button-style="theme" class="confirm-form">
-                        Store New Password
+                        {{ $t('profile.store_pass') }}
                    </ButtonBase>
                </div>
            </ValidationObserver>
@@ -138,8 +138,8 @@

                        // Show error message
                        events.$emit('success:open', {
-                            title: 'Your password was changed!',
-                            message: 'So now, you have awesome new password.',
+                            title: this.$t('popup_pass_changed.title'),
+                            message: this.$t('popup_pass_changed.message'),
                        })
                    })
                    .catch(error => {
--- a/resources/js/helpers.js
+++ b/resources/js/helpers.js
@@ -19,9 +19,8 @@ const Helpers = {
 			axios.put(this.$store.getters.api + route, {name, value})
 				.catch(error => {
 					events.$emit('alert:open', {
-						title: 'Whooops, something went wrong :(',
-						message:
-							"Something went wrong and we can't continue. Please contact us."
+						title: this.$t('popup_error.title'),
+						message: this.$t('popup_error.message'),
 					})
 				})
 		}, 300)
@@ -42,9 +41,8 @@ const Helpers = {
 			})
 				.catch(error => {
 					events.$emit('alert:open', {
-						title: 'Whooops, something went wrong :(',
-						message:
-							"Something went wrong and we can't continue. Please contact us."
+						title: this.$t('popup_error.title'),
+						message: this.$t('popup_error.message'),
 					})
 				})
 		}
@@ -66,9 +64,8 @@ const Helpers = {
 			if (this.$store.getters.app.storage.percentage >= 100) {
 				events.$emit('alert:open', {
 					emoji: '😬😬😬',
-					title: 'Whooops, you exceed your storage limit :(',
-					message:
-						"Please contact your administrator to change your limit."
+					title: this.$t('popup_exceed_limit.title'),
+					message: this.$t('popup_exceed_limit.message')
 				})

 				return
@@ -117,18 +114,89 @@ const Helpers = {

 						events.$emit('alert:open', {
 							emoji: '😬😬😬',
-							title: 'Whooops, you exceed your storage limit :(',
-							message:
-								"Please contact your administrator to change your limit."
+							title: this.$t('popup_exceed_limit.title'),
+							message: this.$t('popup_exceed_limit.message')
 						})

 					} else {

 						// Show error message
 						events.$emit('alert:open', {
-							title: 'Whooops, something went wrong :(',
-							message:
-								"Something went wrong and we can't continue. Please contact us."
+							title: this.$t('popup_error.title'),
+							message: this.$t('popup_error.message'),
+						})
+					}
+				})
+			}
+		}
+
+		Vue.prototype.$uploadExternalFiles = async function(event, parent_id) {
+
+			// Prevent submit empty files
+			if (event.dataTransfer.items.length == 0) return
+
+			// Get files
+			const files = [...event.dataTransfer.items].map(item => item.getAsFile());
+
+			if (this.$store.getters.app.storage.percentage >= 100) {
+				events.$emit('alert:open', {
+					emoji: '😬😬😬',
+					title: this.$t('popup_exceed_limit.title'),
+					message: this.$t('popup_exceed_limit.message')
+				})
+
+				return
+			}
+			let fileCountSucceed = 1
+
+			store.commit('UPDATE_FILE_COUNT_PROGRESS', {
+				current: fileCountSucceed,
+				total: files.length
+			})
+
+			for (var i = files.length - 1; i >= 0; i--) {
+
+				let formData = new FormData()
+
+				// Append data
+				formData.append('file', files[i])
+
+				// Append form data
+				formData.append('parent_id', parent_id)
+
+				// Upload data
+				await store.dispatch('uploadFiles', formData).then(() => {
+					// Progress file log
+					store.commit('UPDATE_FILE_COUNT_PROGRESS', {
+						current: fileCountSucceed,
+						total: files.length
+					})
+					// Progress file log
+					store.commit('INCREASE_FOLDER_ITEM', parent_id)
+
+					// Uploading finished
+					if (files.length === fileCountSucceed) {
+						store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+					} else {
+						// Add uploaded file
+						fileCountSucceed++
+					}
+				}).catch(error => {
+
+					if (error.response.status == 423) {
+
+						events.$emit('alert:open', {
+							emoji: '😬😬😬',
+							title: this.$t('popup_exceed_limit.title'),
+							message: this.$t('popup_exceed_limit.message')
+						})
+
+					} else {
+
+						// Show error message
+						events.$emit('alert:open', {
+							title: this.$t('popup_error.title'),
+							message: this.$t('popup_error.message'),
 						})
 					}
 				})
@@ -189,9 +257,8 @@ const Helpers = {
 		Vue.prototype.$isSomethingWrong = function() {

 			events.$emit('alert:open', {
-				title: 'Whooops, something went wrong :(',
-				message:
-					"Something went wrong and we can't continue. Please contact us."
+				title: this.$t('popup_error.title'),
+				message: this.$t('popup_error.message'),
 			})
 		}
 	}
--- a/resources/js/i18n/index.js
+++ b/resources/js/i18n/index.js
@@ -0,0 +1,7 @@
+// index.js
+import en from './lang/en.json'
+import sk from './lang/sk.json'
+
+export const languages = {
+    en, sk
+}
--- a/resources/js/i18n/lang/en.json
+++ b/resources/js/i18n/lang/en.json
@@ -0,0 +1,165 @@
+{
+    "routes": {
+        "create_new_password": "create-new-password"
+    },
+    "profile": {
+        "page_title": "User Profile",
+        "store_pass": "Store New Password",
+        "change_pass": "Change Password",
+        "profile_info": "Profile Information",
+        "photo_description": "Change Your Profile Picture",
+        "photo_supported": "Supported formats are .png, .jpg, .jpeg."
+    },
+    "page_registration": {
+        "title": "Create New Account",
+        "subtitle": "Please fill registration to create account:",
+        "label_email": "Email:",
+        "placeholder_email": "Type your E-mail",
+        "label_name": "Full Name:",
+        "placeholder_name": "Type your full name",
+        "label_pass": "Create password:",
+        "placeholder_pass": "Your new password",
+        "label_confirm_pass": "Confirm password:",
+        "placeholder_confirm_pass": "Confirm your new password",
+        "button_create_account": "Create Account",
+        "have_an_account": "Do you have an account?"
+    },
+    "page_create_password": {
+        "title": "Only One Step to Log In",
+        "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"
+    },
+    "page_forgotten_password": {
+        "title": "Forgotten Password?",
+        "subtitle": "Get reset link with your email:",
+        "button_get_link": "Get Link",
+        "password_remember_text": "Remember your password?",
+        "password_remember_button": "Log In.",
+        "pass_sennded_title": "Thank you!",
+        "pass_sennded_subtitle": "We have e-mailed your password reset link!",
+        "pass_reseted_title": "Awesome!",
+        "pass_reseted_subtitle": "Your password was reset successfully.",
+        "pass_reseted_signin": "Sign In"
+    },
+    "page_sign_in": {
+        "title": "Are You {name}?",
+        "subtitle": "Confirm you by your password:",
+        "placeholder_password": "Type your password",
+        "button_log_in": "Log In",
+        "password_reset_text": "Forgotten your password?",
+        "password_reset_button": "Reset Password."
+    },
+    "page_login": {
+        "title": "Welcome Back!",
+        "subtitle": "Please type your email to log in:",
+        "placeholder_email": "Type your E-mail",
+        "button_next": "Next Step",
+        "registration_text": "Don’t have an account?",
+        "registration_button": "Register account."
+    },
+    "uploading": {
+        "progress": "Uploading files {current}/{total}"
+    },
+    "inputs": {
+        "placeholder_search_files": "Search files…"
+    },
+    "messages": {
+        "nothing_to_preview": "There is nothing to preview.",
+        "nothing_was_found": "Nothing was found"
+    },
+    "locations": {
+        "home": "Home",
+        "trash": "Trash"
+    },
+    "file_detail": {
+        "created_at": "Created at",
+        "where": "Where",
+        "size": "Size"
+    },
+    "empty_page": {
+        "description": "Upload some files here easily via upload button",
+        "call_to_action": "Upload File",
+        "title": "There is Nothing"
+    },
+    "alerts": {
+        "error_confirm": "That’s horrible!",
+        "success_confirm": "Awesome!"
+    },
+    "validation_errors": {
+        "wrong_image": "You may have uploaded the wrong file, try again!",
+        "incorrect_password": "Sorry, you passed incorrect password :("
+    },
+    "pronouns": {
+        "of": "of"
+    },
+    "storage": {
+        "used": "{used} of {capacity} Used",
+        "title": "Storage"
+    },
+    "folder": {
+        "item_counts": "{count} Item | {count} Items",
+        "empty": "Empty"
+    },
+    "item_thumbnail": {
+        "original_location": "Original Location",
+        "deleted_at": "Deleted {time}"
+    },
+    "preview_type": {
+        "list": "List",
+        "grid": "Grid"
+    },
+    "context_menu": {
+        "remove_from_favourites": "Remove Favourite",
+        "add_to_favourites": "Add to Favourites",
+        "profile_settings": "Profile Settings",
+        "create_folder": "Create Folder",
+        "empty_trash": "Empty Trash",
+        "add_folder": "Add Folder",
+        "download": "Download",
+        "log_out": "Log Out",
+        "restore": "Restore",
+        "upload": "Upload",
+        "detail": "Detail",
+        "rename": "Rename",
+        "delete": "Delete",
+        "move": "Move"
+    },
+    "sidebar": {
+        "locations": "Locations",
+        "favourites": "Favourites",
+        "favourites_empty": "Drag here your favourite folder.",
+        "latest": "Last Uploads",
+        "latest_empty": "You don't have any latest uploads."
+    },
+    "popup_rename": {
+        "title": "Change your item name"
+    },
+    "popup_create_folder": {
+        "title": "Please enter your new folder name",
+        "folder_default_name": "New Folder"
+    },
+    "popup_move_item": {
+        "submit": "Move Item",
+        "title": "Move Item",
+        "cancel": "Cancel"
+    },
+    "popup_pass_changed": {
+        "title": "Your password was changed!",
+        "message": "So now, you have awesome new password."
+    },
+    "popup_trashed": {
+        "title": "Your trash was erased!",
+        "message": "So now, you have clear and empty trash."
+    },
+    "popup_error": {
+        "title": "Whooops, something went wrong!",
+        "message": "Something went wrong and we can't continue. Please contact us."
+    },
+    "popup_exceed_limit": {
+        "title": "Whooops, you exceed your storage limit :(",
+        "message": "Please contact your administrator to change your limit."
+    }
+}
--- a/resources/js/i18n/lang/sk.json
+++ b/resources/js/i18n/lang/sk.json
@@ -0,0 +1,165 @@
+{
+    "routes": {
+        "create_new_password": "vytvorit-nove-heslo"
+    },
+    "profile": {
+        "page_title": "Uživateľský profil",
+        "store_pass": "Uložiť nové heslo",
+        "change_pass": "Zmeniť heslo",
+        "profile_info": "Profil",
+        "photo_description": "Zmeň svoj avatar",
+        "photo_supported": "Podporované formáty sú .png, .jpg, .jpeg."
+    },
+    "page_registration": {
+        "title": "Vytvorenie nového účtu",
+        "subtitle": "Prosím, vyplňte formulár pre vytvorenie nového účtu:",
+        "label_email": "Email:",
+        "placeholder_email": "Napíš svoj E-mail",
+        "label_name": "Celé meno:",
+        "placeholder_name": "Napíš svoje celé meno",
+        "label_pass": "Vytvorte heslo:",
+        "placeholder_pass": "Vaše nové heslo",
+        "label_confirm_pass": "Potvrďte heslo:",
+        "placeholder_confirm_pass": "Potvrďte nové heslo",
+        "button_create_account": "Vytvoriť účet",
+        "have_an_account": "Máš už účet?"
+    },
+    "page_create_password": {
+        "title": "Iba jeden krok pre prihlásenie",
+        "subtitle": "Vytvorte si nové heslo tu:",
+        "button_update": "Aktualizovať heslo",
+        "label_email": "Email:",
+        "label_new_pass": "Vaše nové heslo",
+        "label_confirm_pass": "Potvrďte nové heslo"
+    },
+    "page_forgotten_password": {
+        "title": "Zabudnuté heslo?",
+        "subtitle": "Získajte resetovací link pre Váš účet:",
+        "button_get_link": "Získať link",
+        "password_remember_text": "Pamätáte si heslo?",
+        "password_remember_button": "Prihlásiť sa.",
+        "pass_sennded_title": "Ďakujeme!",
+        "pass_sennded_subtitle": "Práve sme Vám odoslali link na Váš email!",
+        "pass_reseted_title": "Skvelé!",
+        "pass_reseted_subtitle": "Tvoje heslo bolo obnovené úspešne.",
+        "pass_reseted_signin": "Prihlásiť sa"
+    },
+    "page_sign_in": {
+        "title": "Voláte sa {name}?",
+        "subtitle": "Potvrďte zadaním hesla:",
+        "placeholder_password": "Napíšte svoje heslo",
+        "button_log_in": "Prihlásiť sa",
+        "password_reset_text": "Zabudli ste heslo?",
+        "password_reset_button": "Resetovať heslo."
+    },
+    "page_login": {
+        "title": "Vitaj späť!",
+        "subtitle": "Prosím, vložte svoj email pre prihlásenie:",
+        "placeholder_email": "Napíšte svoj E-mail",
+        "button_next": "Ďalší krok",
+        "registration_text": "Ešte nemáte účet?",
+        "registration_button": "Vytvoriť účet."
+    },
+    "uploading": {
+        "progress": "Nahrávam súbory {current}/{total}"
+    },
+    "inputs": {
+        "placeholder_search_files": "Hľadajte súbory…"
+    },
+    "messages": {
+        "nothing_to_preview": "Tu nie je nič pre zobrazenie.",
+        "nothing_was_found": "Nič sa nenašlo"
+    },
+    "locations": {
+        "home": "Domov",
+        "trash": "Kôš"
+    },
+    "file_detail": {
+        "created_at": "Vytvorené",
+        "where": "Umiestnenie",
+        "size": "Veľkosť"
+    },
+    "empty_page": {
+        "description": "Nahrajte súbory jednoducho cez tlačidlo nahrať",
+        "call_to_action": "Nahrať súbory",
+        "title": "Tu nie je nič"
+    },
+    "alerts": {
+        "error_confirm": "To je hrozné!",
+        "success_confirm": "Skvelé!"
+    },
+    "validation_errors": {
+        "wrong_image": "Zrejme ste vložili zlý obrázok, skúste to znova!",
+        "incorrect_password": "Prepáč, vložili ste nesprávne heslo :("
+    },
+    "pronouns": {
+        "of": "z"
+    },
+    "storage": {
+        "used": "{used} z {capacity} Použité",
+        "title": "Úložisko"
+    },
+    "folder": {
+        "item_counts": "{count} Položka | {count} Položky",
+        "empty": "Prázdne"
+    },
+    "item_thumbnail": {
+        "original_location": "Pôvodné umiestnenie",
+        "deleted_at": "Vymazané {time}"
+    },
+    "preview_type": {
+        "list": "List",
+        "grid": "Mriežka"
+    },
+    "context_menu": {
+        "remove_from_favourites": "Vymazať obľúbené",
+        "add_to_favourites": "Pridať do obľúbených",
+        "profile_settings": "Nastavenia profilu",
+        "create_folder": "Vytvoriť priečinok",
+        "empty_trash": "Vyprázdniť kôš",
+        "add_folder": "Nový priečinok",
+        "download": "Stiahnúť",
+        "log_out": "Odhlásiť sa",
+        "restore": "Obnoviť",
+        "upload": "Nahrať",
+        "detail": "Detail",
+        "rename": "Premenovať",
+        "delete": "Vymazať",
+        "move": "Presunúť"
+    },
+    "sidebar": {
+        "locations": "Umiestnenie",
+        "favourites": "Obľúbené",
+        "favourites_empty": "Presuňte sem svoj obľúbený priečinok.",
+        "latest": "Posledne nahrané",
+        "latest_empty": "Nemáte žiadne nahrané súbory"
+    },
+    "popup_rename": {
+        "title": "Zmeňte názov položky"
+    },
+    "popup_create_folder": {
+        "title": "Prosím, vložte názov nového priečinka",
+        "folder_default_name": "Nový priečinok"
+    },
+    "popup_move_item": {
+        "submit": "Presunúť položku",
+        "title": "Presuňte položku",
+        "cancel": "Zrušiť"
+    },
+    "popup_pass_changed": {
+        "title": "Tvoje heslo bolo zmenené!",
+        "message": "Od teraz máte nové heslo."
+    },
+    "popup_trashed": {
+        "title": "Váš kôš bol vymazaný!",
+        "message": "Od teraz máte prázdny a čistý kôš"
+    },
+    "popup_error": {
+        "title": "Ups, niekde nastala chyba!",
+        "message": "Niečo sa stalo a nemôžme pokračovať. Prosím kontaktuj nás."
+    },
+    "popup_exceed_limit": {
+        "title": "Ups, presiahli ste limit úložiska",
+        "message": "Prosím, kontaktujte administrátora pre navyšenie limitu."
+    }
+}
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -1,12 +1,15 @@
 require('./bootstrap');
 import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import { languages } from './i18n/index.js'
 import App from './App.vue'
 import store from './store/index'
 import Helpers from './helpers'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import axios from 'axios'
 import {
+	faFileAudio,
+	faFileVideo,
 	faSyncAlt,
 	faShare,
 	faHome,
@@ -29,9 +32,12 @@ import {
 	faTrashAlt,
 	faHdd,
 	faEllipsisH,
+	faPencilAlt,
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
+	faFileAudio,
+	faFileVideo,
 	faHdd,
 	faSyncAlt,
 	faShare,
@@ -54,14 +60,24 @@ library.add(
 	faTimes,
 	faSort,
 	faEllipsisH,
+	faPencilAlt,
 )
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)

 Vue.use(Helpers)
+Vue.use(VueI18n)

 Vue.config.productionTip = false

+const messages = Object.assign(languages)
+
+const i18n = new VueI18n({
+	locale: config.locale,
+	messages
+})
+
 var vueFileManager = new Vue({
+	i18n,
 	store,
 	data: {
 		config,
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -1,6 +1,3 @@
-import axios from 'axios'
-import { events } from '@/bus'
-
 const defaultState = {
 	currentView: 'files',
 	appSize: undefined,
--- a/resources/js/store/modules/filesView.js
+++ b/resources/js/store/modules/filesView.js
@@ -62,9 +62,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -100,9 +99,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -112,7 +110,7 @@ const actions = {

        axios
            .delete(context.getters.api + '/empty-trash')
-            .then(response => {
+            .then(() => {
                context.commit('LOADING_STATE', false)
                events.$emit('scrollTop')

@@ -121,16 +119,15 @@ const actions = {

                // Show error message
                events.$emit('success:open', {
-                    title: 'Your trash was erased!',
-                    message: 'So now, you have clear and empty trash.',
+                    title: this.$t('popup_trashed.title'),
+                    message: this.$t('popup_trashed.message'),
                })
            })
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -150,9 +147,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -169,9 +165,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -197,9 +192,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -225,9 +219,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -281,9 +274,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -303,9 +295,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -346,9 +337,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -370,9 +360,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    }
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -41,9 +41,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -57,9 +56,8 @@ const actions = {
            .catch(() => {
                // Show error message
                events.$emit('alert:open', {
-                    title: 'Whooops, something went wrong :(',
-                    message:
-                        "Something went wrong and we can't continue. Please contact us."
+                    title: this.$t('popup_error.title'),
+                    message: this.$t('popup_error.message'),
                })
            })
    },
@@ -77,9 +75,8 @@ const actions = {

                    // Show error message
                    events.$emit('alert:open', {
-                        title: 'Whooops, something went wrong :(',
-                        message:
-                            "Something went wrong and we can't continue. Please contact us."
+                        title: this.$t('popup_error.title'),
+                        message: this.$t('popup_error.message'),
                    })
                })
        })
--- a/resources/lang/en/pagination.php
+++ b/resources/lang/en/pagination.php
@@ -1,19 +0,0 @@
-<?php
-
-return [
-
-    /*
-    |--------------------------------------------------------------------------
-    | Pagination Language Lines
-    |--------------------------------------------------------------------------
-    |
-    | The following language lines are used by the paginator library to build
-    | the simple pagination links. You are free to change them to anything
-    | you want to customize your views to better match your application.
-    |
-    */
-
-    'previous' => '&laquo; Previous',
-    'next' => 'Next &raquo;',
-
-];
--- a/resources/lang/en/vuefilemanager.php
+++ b/resources/lang/en/vuefilemanager.php
@@ -0,0 +1,7 @@
+<?php
+
+    return [
+        'user_not_fount' => 'We can\'t find a user with that e-mail address.',
+        'home'           => 'Home',
+        'time'           => '%d. %B. %Y at %H:%M',
+    ];
--- a/resources/lang/sk/auth.php
+++ b/resources/lang/sk/auth.php
@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed'   => 'Prihlasovacie údaje nie sú správne.',
+    'throttle' => 'Prekročený limit pokusov. Skúste znovu o :seconds sekúnd.',
+
+];
--- a/resources/lang/sk/passwords.php
+++ b/resources/lang/sk/passwords.php
@@ -0,0 +1,20 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reminder Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | has failed, such as for an invalid token or invalid new password.
+    |
+    */
+
+    'reset'     => 'Heslo bolo zmenené!',
+    'sent'      => 'Pripomienka k zmene hesla bola odoslaná!',
+    'throttled' => 'Pred ďalším pokusom chvíľu počkajte.',
+    'token'     => 'Klúč pre obnovu hesla je neplatný.',
+    'user'      => 'Nepodarilo sa nájsť používateľa s touto e-mailovou adresou.',
+];
--- a/resources/lang/sk/validation.php
+++ b/resources/lang/sk/validation.php
@@ -0,0 +1,150 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages.
+    |
+    */
+
+    'accepted'        => ':Attribute musí byť akceptovaný.',
+    'active_url'      => ':Attribute má neplatnú URL adresu.',
+    'after'           => ':Attribute musí byť dátum po :date.',
+    'after_or_equal'  => ':Attribute musí byť dátum po alebo presne :date.',
+    'alpha'           => ':Attribute môže obsahovať len písmená.',
+    'alpha_dash'      => ':Attribute môže obsahovať len písmená, čísla a pomlčky.',
+    'alpha_num'       => ':Attribute môže obsahovať len písmená, čísla.',
+    'array'           => ':Attribute musí byť pole.',
+    'before'          => ':Attribute musí byť dátum pred :date.',
+    'before_or_equal' => ':Attribute musí byť dátum pred alebo presne :date.',
+    'between'         => [
+        'numeric' => ':Attribute musí mať rozsah :min - :max.',
+        'file'    => ':Attribute musí mať rozsah :min - :max kilobajtov.',
+        'string'  => ':Attribute musí mať rozsah :min - :max znakov.',
+        'array'   => ':Attribute musí mať rozsah :min - :max prvkov.',
+    ],
+    'boolean'        => ':Attribute musí byť pravda alebo nepravda.',
+    'confirmed'      => ':Attribute konfirmácia sa nezhoduje.',
+    'date'           => ':Attribute má neplatný dátum.',
+    'date_equals'    => ':Attribute musí byť dátum rovnajúci sa :date.',
+    'date_format'    => ':Attribute sa nezhoduje s formátom :format.',
+    'different'      => ':Attribute a :other musia byť odlišné.',
+    'digits'         => ':Attribute musí mať :digits číslic.',
+    'digits_between' => ':Attribute musí mať rozsah :min až :max číslic.',
+    'dimensions'     => ':Attribute má neplatné rozmery obrázku.',
+    'distinct'       => ':Attribute je duplicitný.',
+    'email'          => ':Attribute má neplatný formát.',
+    'ends_with'      => ':attribute musí obsahovať jednú z týchto hodnôt: :values.',
+    'exists'         => 'označený :attribute je neplatný.',
+    'file'           => ':Attribute musí byť súbor.',
+    'filled'         => ':Attribute je požadované.',
+    'gt'             => [
+        'numeric' => 'Hodnota :attribute musí byť väčšia ako :value.',
+        'file'    => ':Attribute musí mať viac kilobajtov ako :value.',
+        'string'  => ':Attribute musí mať viac znakov ako :value.',
+        'array'   => ':Attribute musí mať viac prvkov ako :value.',
+    ],
+    'gte' => [
+        'numeric' => 'Hodnota :attribute musí byť väčšia alebo rovná ako :value.',
+        'file'    => ':Attribute musí mať rovnaký alebo väčší počet kilobajtov ako :value.',
+        'string'  => ':Attribute musí mať rovnaký alebo väčší počet znakov ako :value.',
+        'array'   => ':Attribute musí mať rovnaký alebo väčší počet prvkov ako :value.',
+    ],
+    'image'    => ':Attribute musí byť obrázok.',
+    'in'       => 'označený :attribute je neplatný.',
+    'in_array' => ':Attribute sa nenachádza v :other.',
+    'integer'  => ':Attribute musí byť celé číslo.',
+    'ip'       => ':Attribute musí byť platná IP adresa.',
+    'ipv4'     => ':Attribute musí byť platná IPv4 adresa.',
+    'ipv6'     => ':Attribute musí byť platná IPv6 adresa.',
+    'json'     => ':Attribute musí byť platný JSON reťazec.',
+    'lt'       => [
+        'numeric' => 'Hodnota :attribute musí byť menšia ako :value.',
+        'file'    => ':Attribute musí mať menej kilobajtov ako :value.',
+        'string'  => ':Attribute musí mať menej znakov ako :value.',
+        'array'   => ':Attribute musí mať menej prvkov ako :value.',
+    ],
+    'lte' => [
+        'numeric' => 'Hodnota :attribute musí byť menšia alebo rovná ako :value.',
+        'file'    => ':Attribute musí mať rovnaký alebo menší počet kilobajtov ako :value.',
+        'string'  => ':Attribute musí mať rovnaký alebo menší počet znakov ako :value.',
+        'array'   => ':Attribute musí mať rovnaký alebo menší počet prvkov ako :value.',
+    ],
+    'max' => [
+        'numeric' => ':Attribute nemôže byť väčší ako :max.',
+        'file'    => ':Attribute nemôže byť väčší ako :max kilobajtov.',
+        'string'  => ':Attribute nemôže byť väčší ako :max znakov.',
+        'array'   => ':Attribute nemôže mať viac ako :max prvkov.',
+    ],
+    'mimes'     => ':Attribute musí byť súbor s koncovkou: :values.',
+    'mimetypes' => ':Attribute musí byť súbor s koncovkou: :values.',
+    'min'       => [
+        'numeric' => ':Attribute musí mať aspoň :min.',
+        'file'    => ':Attribute musí mať aspoň :min kilobajtov.',
+        'string'  => ':Attribute musí mať aspoň :min znakov.',
+        'array'   => ':Attribute musí mať aspoň :min prvkov.',
+    ],
+    'not_in'               => 'označený :attribute je neplatný.',
+    'not_regex'            => ':Attribute má neplatný formát.',
+    'numeric'              => ':Attribute musí byť číslo.',
+    'password'             => 'Heslo nie je správne',
+    'present'              => ':Attribute musí byť odoslaný.',
+    'regex'                => ':Attribute má neplatný formát.',
+    'required'             => ':Attribute je požadované.',
+    'required_if'          => ':Attribute je požadované keď :other je :value.',
+    'required_unless'      => ':Attribute je požadované, okrem prípadu keď :other je v :values.',
+    'required_with'        => ':Attribute je požadované keď :values je prítomné.',
+    'required_with_all'    => ':Attribute je požadované ak :values je nastavené.',
+    'required_without'     => ':Attribute je požadované keď :values nie je prítomné.',
+    'required_without_all' => ':Attribute je požadované ak žiadne z :values nie je nastavené.',
+    'same'                 => ':Attribute a :other sa musia zhodovať.',
+    'size'                 => [
+        'numeric' => ':Attribute musí byť :size.',
+        'file'    => ':Attribute musí mať :size kilobajtov.',
+        'string'  => ':Attribute musí mať :size znakov.',
+        'array'   => ':Attribute musí obsahovať :size prvkov.',
+    ],
+    'starts_with' => ':Attribute musí začínať niektorou z hodnôt: :values',
+    'string'      => ':Attribute musí byť reťazec znakov.',
+    'timezone'    => ':Attribute musí byť platné časové pásmo.',
+    'unique'      => ':Attribute už existuje.',
+    'uploaded'    => 'Nepodarilo sa nahrať :attribute.',
+    'url'         => ':Attribute musí mať formát URL.',
+    'uuid'        => ':Attribute musí byť platné UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap attribute place-holders
+    | with something more reader friendly such as E-Mail Address instead
+    | of "email". This simply helps us make messages a little cleaner.
+    |
+    */
+
+    'attributes' => [
+    ],
+];
--- a/resources/lang/sk/vuefilemanager.php
+++ b/resources/lang/sk/vuefilemanager.php
@@ -0,0 +1,7 @@
+<?php
+
+return [
+    'user_not_fount' => 'Uživateľ s touto emailovou adresou sa nenašiel.',
+    'home'           => 'Domov',
+    'time'           => '%d. %B. %Y o %H:%M',
+];
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,5 +1,5 @@
 // Fonts
-@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;900&display=swap');

 // Variables
@import 'vue-file-manager/_variables';
--- a/resources/sass/vue-file-manager/_variables.scss
+++ b/resources/sass/vue-file-manager/_variables.scss
@@ -1,18 +1,23 @@
 // Colors
-$text: #35495d;
-$text-muted: lighten($text, 25%);
+$text: #1b2539;
+$text-muted: #667b90;

-$border: #F8F8FC;
+$light_mode_border: rgba(0, 0, 0, 0.02);
 $theme: #00BC7E;
 $danger: #d22323;
 $light_text: #A4ADB6;
 $light_background: #f6f6f6;
 $dark_background: #EBEBEB;
 $shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
+$light_mode_popup_shadow: 0 10px 50px rgba(0, 0, 0, .10);
+$light_mode_vignette: rgba(255, 255, 255, 0.80);

 // Dark Mode
 $dark_mode_vignette: rgba(0, 0, 0, 0.3);
 $dark_mode_background: #1a1f25;
-$dark_mode_foreground: #202733;
+$dark_mode_foreground: #1c222d;
 $dark_mode_text_primary: #B8C4D0;
-$dark_mode_text_secondary: #6A8BAD;
+$dark_mode_text_secondary: #667b90;
+$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);
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -10,12 +10,20 @@

    <link rel="icon" href="{{ asset('favicon.ico') }}">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="white">
+    <meta name="apple-mobile-web-app-title" content="{{ config('vuefilemanager.app_name') }}">
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ asset('assets/images/app-icon.png') }}">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="format-detection" content="address=no">
 </head>
 <body>
 <div id="app"></div>

    <script>
        let config = {
+            locale: '{{ \Illuminate\Support\Facades\App::getLocale() }}',
            app_name: '{{ config('vuefilemanager.app_name') }}',
            app_logo: '{{ asset(config('vuefilemanager.app_logo')) }}',
            api: '{{ url('/api') }}',
Author	SHA1	Message	Date
carodej	6235ffd0dc	deleted file	2020-04-05 12:19:21 +02:00
MakingCG	4504276563	Version 1.3 - i18n localization support - Added SK, EN language files - Video/Audio preview in file preview panel (Thanks to Joshua Fouyon to participating on this feature) - Drop uploading (You can now drag files from desktop and drop it to VueFileManager) - Fixed bug when rename item in safari browser - Fixed bug when you drag folder from trash to favourites in sidebar panel - small functions and design improvements	2020-04-03 11:52:54 +02:00
MakingCG	96da39923d	Update app.php	2020-04-01 18:47:37 +02:00
MakingCG	8633650f82	Added i18n support	2020-04-01 18:44:47 +02:00
MakingCG	182091c21a	bugfixes	2020-03-29 11:42:32 +02:00
MakingCG	7bed9ad7b8	bug fixes	2020-03-28 19:30:04 +01:00
MakingCG	7eb4238efd	bug fixes	2020-03-28 19:17:58 +01:00