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

Merge remote-tracking branch 'origin/version-v1.8.1'

Browse Source 
# Conflicts:
#	resources/js/components/FilesView/FileItemGrid.vue
#	resources/js/components/FilesView/FileItemList.vue
#	resources/js/components/Others/ThumbnailItem.vue
This commit is contained in:
Peter Papp
2021-02-20 15:30:44 +01:00
parent a80e4364ae 9dbce7a73a
commit 2dbd9dd62d
26 changed files with 855 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/Http/Controllers/AppFunctionsController.php
View File

@@ -246,4 +246,16 @@ class AppFunctionsController extends Controller
Artisan::call('config:clear'); Artisan::call('config:clear');
Artisan::call('config:cache'); Artisan::call('config:cache');
} }
/**
* Get Emojis List from the server
*
* @return $emojisList
*/
public function get_emojis_list()
{
$emojisList = json_decode(file_get_contents(public_path('assets/emojis.json'), true));
return collect([$emojisList]);
}
} }

24
app/Http/Tools/Editor.php
View File

@@ -33,23 +33,29 @@ class Editor
* @param $unique_id * @param $unique_id
* @param $shared * @param $shared
*/ */
public static function set_folder_icon ($folder_icon, $unique_id, $shared = null) public static function set_folder_icon($folder_icon, $unique_id, $shared = null)
{ {
$user_id = is_null($shared) ? Auth::id() : $shared->user_id; $user_id = is_null($shared) ? Auth::id() : $shared->user_id;
// Get folder // Get folder
$folder = FileManagerFolder::where('user_id', $user_id) $folder = FileManagerFolder::where('user_id', $user_id)
->where('unique_id', $unique_id) ->where('unique_id', $unique_id)
->first(); ->first();
// Set default folder icon
if ($folder_icon === 'default') {
$folder->icon_emoji = null;
$folder->icon_color = null;
}
// If request have emoji set folder icon emoji // If request have emoji set folder icon emoji
if(isset($folder_icon['emoji'])) { if (isset($folder_icon['emoji'])) {
$folder->icon_emoji = $folder_icon['emoji']; $folder->icon_emoji = $folder_icon['emoji'];
$folder->icon_color = null; $folder->icon_color = null;
} }
// If request have color set folder icon color // If request have color set folder icon color
if(isset($folder_icon['color'])) { if (isset($folder_icon['color'])) {
$folder->icon_emoji = null; $folder->icon_emoji = null;
$folder->icon_color = $folder_icon['color']; $folder->icon_color = $folder_icon['color'];
} }
@@ -133,7 +139,7 @@ class Editor
return Zip::create([ return Zip::create([
'user_id' => $shared->user_id ?? Auth::id(), 'user_id' => $shared->user_id ?? Auth::id(),
'shared_token' => $shared->token ?? null, 'shared_token' => $shared->token ?? null,
'basename' => $zip_name, 'basename' => $zip_name,
]); ]);
} }
@@ -451,8 +457,8 @@ class Editor
$limit = get_setting('upload_limit'); $limit = get_setting('upload_limit');
// File size handling // File size handling
if( $limit && $file_size > format_bytes($limit)) abort(413); if ($limit && $file_size > format_bytes($limit)) abort(413);
// If last then process file // If last then process file
if ($request->boolean('is_last')) { if ($request->boolean('is_last')) {

2
config/vuefilemanager.php
View File

@@ -2,7 +2,7 @@
return [ return [
'version' => '1.8.1', 'version' => '1.8.2',
// Define size of chunk uploaded by MB. E.g. integer 128 means chunk size will be 128MB. // Define size of chunk uploaded by MB. E.g. integer 128 means chunk size will be 128MB.
'chunk_size' => env('CHUNK_SIZE', '128'), 'chunk_size' => env('CHUNK_SIZE', '128'),

47
resources/js/store/modules/emojisList.js → public/assets/emojis.json
View File

@@ -1,6 +1,5 @@
const defaultState = { {
"emojisList" :
emojis :
[ [
{ {
"codes": "1F600", "codes": "1F600",
@@ -148,7 +147,7 @@ const defaultState = {
}, },
{ {
"codes": "263A", "codes": "263A",
"char": "☺", "char": "☺️",
"name": "smiling face", "name": "smiling face",
"category": "Smileys & Emotion (face-affection)", "category": "Smileys & Emotion (face-affection)",
"group": "Smileys & Emotion", "group": "Smileys & Emotion",
@@ -13947,14 +13946,13 @@ const defaultState = {
"subgroup": "subdivision-flag" "subgroup": "subdivision-flag"
} }
], ],
"emojisGroups" : [
emojiGroups : [
{ {
"name": "Smileys & Emotion", "name": "Smileys & Emotion",
"emoji": { "emoji": {
"codes": "1F600", "codes": "1F600",
"char": "😀", "char": "😀",
"name": "grinning face", "name": "grinning face"
} }
}, },
{ {
@@ -13962,7 +13960,7 @@ const defaultState = {
"emoji": { "emoji": {
"codes": "1F91A", "codes": "1F91A",
"char": "🤚", "char": "🤚",
"name": "raised back of hand", "name": "raised back of hand"
} }
}, },
{ {
@@ -13970,7 +13968,7 @@ const defaultState = {
"emoji": { "emoji": {
"codes": "1F435", "codes": "1F435",
"char": "🐵", "char": "🐵",
"name": "monkey face", "name": "monkey face"
} }
}, },
{ {
@@ -13978,7 +13976,7 @@ const defaultState = {
"emoji": { "emoji": {
"codes": "1F34F", "codes": "1F34F",
"char": "🍏", "char": "🍏",
"name": "green apple", "name": "green apple"
} }
}, },
{ {
@@ -13986,7 +13984,7 @@ const defaultState = {
"emoji": { "emoji": {
"codes": "1F697", "codes": "1F697",
"char": "🚗", "char": "🚗",
"name": "automobile", "name": "automobile"
} }
}, },
{ {
@@ -13994,7 +13992,7 @@ const defaultState = {
"emoji": { "emoji": {
"codes": "26BD", "codes": "26BD",
"char": "⚽", "char": "⚽",
"name": "soccer ball", "name": "soccer ball"
} }
}, },
{ {
@@ -14002,15 +14000,15 @@ const defaultState = {
"emoji": { "emoji": {
"codes": "231A", "codes": "231A",
"char": "⌚", "char": "⌚",
"name": "watch", "name": "watch"
} }
}, },
{ {
"name": "Symbols", "name": "Symbols",
"emoji": { "emoji": {
"codes": "2764", "codes": "2705",
"char": "❤", "char": "✅",
"name": "red heart", "name": "check mark button"
} }
}, },
{ {
@@ -14018,21 +14016,8 @@ const defaultState = {
"emoji": { "emoji": {
"codes": "1F3F3", "codes": "1F3F3",
"char": "🏳", "char": "🏳",
"name": "white flag", "name": "white flag"
} }
}, }
] ]
}
const getters = {
emojis: state => state.emojis,
emojiGroups: state => state.emojiGroups
}
export default {
state: defaultState,
getters
} }

2
public/chunks/files~chunks/shared-files~chunks/shared-page.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/main.js vendored
View File

File diff suppressed because one or more lines are too long

153
public/mix-manifest.json
View File

@@ -1,65 +1,92 @@
{ {
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=42d1881aa3cd2b5a0e21", "/js/main.js": "/js/main.js",
"/js/main.js": "/js/main.js?id=86eb60282c3151df7fa7", "/css/app.css": "/css/app.css",
"/css/app.css": "/css/app.css?id=dfd52fc997b919cd3686", "/chunks/admin.js": "/chunks/admin.js?id=06067d0f4cff64abd1e4",
"/chunks/admin.js": "/chunks/admin.js?id=7672646537b5813becf0", "/chunks/admin-account.js": "/chunks/admin-account.js?id=fde37ee0820a1d2dc1f9",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=3f5a34aa8341af8d2b4c", "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js?id=1ad1b7b56512338223eb",
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=9ec9a42482cb302a05f6", "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js?id=6c02fe91a2e167b63a98",
"/chunks/app-billings.js": "/chunks/app-billings.js?id=92903bd1d316b3db1dfa", "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js?id=50155ecdafab2d18dda1",
"/chunks/app-email.js": "/chunks/app-email.js?id=9d646578982ba61813b6", "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=ba3c9a7acbaacc20af9e",
"/chunks/app-index.js": "/chunks/app-index.js?id=4623bd961647897a5b81", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=fd3c7242b5c765b469e4",
"/chunks/app-others.js": "/chunks/app-others.js?id=b19a701cdfa06e4817ff", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=60421d0349712350e866",
"/chunks/app-payments.js": "/chunks/app-payments.js?id=11c86d822269f1a1577e", "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=a8bd98f9f181d9ee68fd",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=6784314933372fb1adf0", "/chunks/app-billings.js": "/chunks/app-billings.js?id=97f5c44884d8c2128c56",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=d304bcf7d4157e81f3e2", "/chunks/app-email.js": "/chunks/app-email.js?id=59c27449f65145dc208e",
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=b73a5b6f7d2a448cc5ab", "/chunks/app-index.js": "/chunks/app-index.js?id=a337e0f9b64590a88cc9",
"/chunks/contact-us.js": "/chunks/contact-us.js?id=81906d205ba0107c5105", "/chunks/app-others.js": "/chunks/app-others.js?id=1655c151466b066ee1c5",
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=004908727045abd0852e", "/chunks/app-payments.js": "/chunks/app-payments.js?id=cb8ea484a0e605ace175",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=08e4f7d923ce9e49dcc3", "/chunks/app-settings.js": "/chunks/app-settings.js?id=e8ee87b4fb155d3edb6b",
"/chunks/database.js": "/chunks/database.js?id=b8d8269f77c52f78c784", "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=99eb5ed6af46738c97e0",
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=2e3af103d13536c50757", "/chunks/app-setup.js": "/chunks/app-setup.js?id=777ebaef548d5b4c61be",
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=106f81cefe76c62d476e", "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=0eec974c6f0ee4e6ecab",
"/chunks/files.js": "/chunks/files.js?id=b213d4fe15c2a9933f32", "/chunks/contact-us.js": "/chunks/contact-us.js?id=b243adc35233292f8ad6",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=95ce5e5685dc9315f515", "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js?id=96ac1ede73f3fc9afa37",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=6db12008aa646ad5fb6f", "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=00b75239db203720652c",
"/chunks/invoices.js": "/chunks/invoices.js?id=83389adf0760820af6f5", "/chunks/dashboard.js": "/chunks/dashboard.js?id=887b8d232e3944beebdd",
"/chunks/landing-page.js": "/chunks/landing-page.js?id=546ed735edf0d80c8a7e", "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=d7795f20187163939276",
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=848666d6c49c613f7f99", "/chunks/database.js": "/chunks/database.js?id=212e2d81f6f5c54c2dd2",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=bd41ae13951c2a5025c3", "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1d8ee4bfbcde69c97021",
"/chunks/pages.js": "/chunks/pages.js?id=df7245abef9e3b77a218", "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=374911110bca4e1b3f91",
"/chunks/plan.js": "/chunks/plan.js?id=cfd7b4ee7e21639a837d", "/chunks/files.js": "/chunks/files.js?id=d47d2964ef535ad5754c",
"/chunks/plan-create.js": "/chunks/plan-create.js?id=9bb62af36193ee9648d3", "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=e285e842f58178d681c4",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=7b7601f044e0ef47720b", "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=8780d88f95928a6a6292",
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=8d3e75ff9adb22a25d57", "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=539a5b88c5f32511449e",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=3b4a29497fc878f503db", "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=f430110273d76b28906f",
"/chunks/plans.js": "/chunks/plans.js?id=feb924949bffcdf3d9fb", "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=94c75dac20c4ccf7bde0",
"/chunks/profile.js": "/chunks/profile.js?id=f990697f8d4ff45df434", "/chunks/invoices.js": "/chunks/invoices.js?id=02089f329654fbbc894d",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=5d7406ecd84c676db8fb", "/chunks/landing-page.js": "/chunks/landing-page.js?id=ddac17e6108c6f58f082",
"/chunks/settings.js": "/chunks/settings.js?id=d16d9e2cda6aa3a3f6dc", "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=6666b81edc5ff6f60e82",
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=b05e24dd8be60f62ee27", "/chunks/page-edit.js": "/chunks/page-edit.js?id=7e6363b9a35e62dd560c",
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=72d317b39264987e6ed0", "/chunks/pages.js": "/chunks/pages.js?id=ca712437ecc7e5aeee5c",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=014597c63c94d3ac9f60", "/chunks/plan.js": "/chunks/plan.js?id=cc041fb9c2cb9ad8f0ff",
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=2a0ea9cf661deba6fc13", "/chunks/plan-create.js": "/chunks/plan-create.js?id=24bb1297c55fe70c1dd0",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=b3f25de02dd4ef072df0", "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=e06dc32848cf3bfb9e6b",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=aa3d963f578d7bc5ff88", "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=242cb0706c986d08c484",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855", "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=36a86cf6f3d8a2868504",
"/chunks/shared-files.js": "/chunks/shared-files.js?id=ba10fd3f52a7b62d3092", "/chunks/plans.js": "/chunks/plans.js?id=282268d939f8b52f6acd",
"/chunks/shared-page.js": "/chunks/shared-page.js?id=4489cb4cfa33fb249bea", "/chunks/profile.js": "/chunks/profile.js?id=060bceb3f703969fb135",
"/chunks/sign-in.js": "/chunks/sign-in.js?id=c52ce81c3dad56d7a7d8", "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a44394b1fa09f996a9fd",
"/chunks/sign-up.js": "/chunks/sign-up.js?id=2f12850d320b2413cf54", "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=8c1d40ff91c04fcefcfc",
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=6622381f1d96e8319999", "/chunks/settings.js": "/chunks/settings.js?id=463a3b35eb4020fdcc77",
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=f1b093a3bcfebd5bc8a5", "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=4d1a070566ee2069e1bd",
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=e0e2f821aac16b32da34", "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=603b7f706f34d9c89a62",
"/chunks/upgrade.js": "/chunks/upgrade.js?id=0c8d40bed72e86359529", "/chunks/settings-password.js": "/chunks/settings-password.js?id=0df4bd46f1d3d90e360a",
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=a8db2246f9326e5c5957", "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=37955b9e8262af7fe525",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=f050f10627424b730dc2", "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=013b6f15f907caaecd1e",
"/chunks/user.js": "/chunks/user.js?id=6f2ab796211a3ac8670f", "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=5d702de3662f601fccca",
"/chunks/user-create.js": "/chunks/user-create.js?id=0d630acda4552c315417", "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=99b4f321902fe6b0eb23",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=db041eae3aef3e45197a", "/chunks/shared-files.js": "/chunks/shared-files.js?id=1860b9031f41ed46d0e0",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=8cf2fe554e8d67ac8677", "/chunks/shared-page.js": "/chunks/shared-page.js?id=d8a8c573da5a08b7cd36",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a0613909cb0c21817804", "/chunks/sign-in.js": "/chunks/sign-in.js?id=6b961e6324b09384dfd0",
"/chunks/user-password.js": "/chunks/user-password.js?id=653bba3eb8d117c3a043", "/chunks/sign-up.js": "/chunks/sign-up.js?id=a46f57a34f8f862a24a8",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=630b0ff649e16d3627af", "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=080bade1ed512f512591",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=0b4226ba77f10b83de4a", "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=5b2f00a9e19520adc31e",
"/chunks/users.js": "/chunks/users.js?id=04ca09662595fae56488" "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=1ac6b87f8797b491ef77",
"/chunks/upgrade.js": "/chunks/upgrade.js?id=ac1ff92a934e448ca6b4",
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=198bfc33644f85bfc075",
"/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=7e805915ede7c330c6d1",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=2811533956c0c185714d",
"/chunks/user.js": "/chunks/user.js?id=a400499012c6786a3652",
"/chunks/user-create.js": "/chunks/user-create.js?id=d5066d3ff9d7625ba7f1",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=5d392a3df7b05cf93930",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=fbfe45c7762f7ae123e4",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=97c78350b65914e4b16d",
"/chunks/user-password.js": "/chunks/user-password.js?id=ad772e769a8562c42c17",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=2c5f4cdd17574255ea05",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=d6683735de17fd8c55c8",
"/chunks/users.js": "/chunks/users.js?id=f2359ae7c0c166001c33",
"/js/main.c41bd9830933f33f5154.hot-update.js": "/js/main.c41bd9830933f33f5154.hot-update.js",
"/js/main.e4e2f4ea61f4175a47d4.hot-update.js": "/js/main.e4e2f4ea61f4175a47d4.hot-update.js",
"/js/main.babd439d65b1dacf07cf.hot-update.js": "/js/main.babd439d65b1dacf07cf.hot-update.js",
"/js/main.52108197dc4016d0bc71.hot-update.js": "/js/main.52108197dc4016d0bc71.hot-update.js",
"/js/main.018fd21dce7ceb1ed241.hot-update.js": "/js/main.018fd21dce7ceb1ed241.hot-update.js",
"/js/main.72b0ec723cdca5db9122.hot-update.js": "/js/main.72b0ec723cdca5db9122.hot-update.js",
"/js/main.2e68495208305cac44f2.hot-update.js": "/js/main.2e68495208305cac44f2.hot-update.js",
"/js/main.6369b897ab6b07f0d786.hot-update.js": "/js/main.6369b897ab6b07f0d786.hot-update.js",
"/js/main.5ab4c379744be2c324d1.hot-update.js": "/js/main.5ab4c379744be2c324d1.hot-update.js",
"/js/main.feda625971e97712ef2d.hot-update.js": "/js/main.feda625971e97712ef2d.hot-update.js",
"/js/main.144a805684f83ce48646.hot-update.js": "/js/main.144a805684f83ce48646.hot-update.js",
"/js/main.990467b660b644a8fe17.hot-update.js": "/js/main.990467b660b644a8fe17.hot-update.js",
"/js/main.fdc8bca39b6526ca96e4.hot-update.js": "/js/main.fdc8bca39b6526ca96e4.hot-update.js",
"/js/main.2316091690becaa56d4b.hot-update.js": "/js/main.2316091690becaa56d4b.hot-update.js"
} }

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

@@ -34,7 +34,7 @@
@dragstart="dragStart(item)" @dragstart="dragStart(item)"
@drop.stop.native.prevent="dragFinish(item, $event)" @drop.stop.native.prevent="dragFinish(item, $event)"
@contextmenu.native.prevent="contextMenu($event, item)" @contextmenu.native.prevent="contextMenu($event, item)"
:data="item" :item="item"
v-for="item in data" v-for="item in data"
:key="item.unique_id" :key="item.unique_id"
class="file-item" class="file-item"
@@ -55,7 +55,7 @@
@dragstart="dragStart(item)" @dragstart="dragStart(item)"
@drop.native.prevent="dragFinish(item, $event)" @drop.native.prevent="dragFinish(item, $event)"
@contextmenu.native.prevent="contextMenu($event, item)" @contextmenu.native.prevent="contextMenu($event, item)"
:data="item" :item="item"
v-for="item in data" v-for="item in data"
:key="item.unique_id" :key="item.unique_id"
class="file-item" class="file-item"

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

@@ -8,52 +8,48 @@
<div class="icon-item"> <div class="icon-item">
<!-- MultiSelecting for the mobile version --> <!-- MultiSelecting for the mobile version -->
<div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="multiSelectMode"> <div :class="{'check-select-folder' : this.item.type === 'folder', 'check-select' : this.item.type !== 'folder'}" v-if="multiSelectMode">
<div class="select-box" :class="{'select-box-active' : isClicked } "> <div class="select-box" :class="{'select-box-active' : isClicked } ">
<CheckIcon v-if="isClicked" class="icon" size="17"/> <CheckIcon v-if="isClicked" class="icon" size="17"/>
</div> </div>
</div> </div>
<!--If is file or image, then link item--> <!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text"> <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
{{ data.mimetype }} {{ item.mimetype }}
</span> </span>
<!--Folder thumbnail--> <!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/> <FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/>
<!--Image thumbnail--> <!--Image thumbnail-->
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/> <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<!-- If folder have set emoji -->
<Emoji class="emoji" v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="80" />
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder"/>
</div> </div>
<!--Name--> <!--Name-->
<div class="item-name"> <div class="item-name">
<!--Name--> <!--Name-->
<b :ref="this.data.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name"> <b :ref="this.item.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }} {{ itemName }}
</b> </b>
<div class="item-info"> <div class="item-info">
<!--Shared Icon--> <!--Shared Icon-->
<div v-if="$checkPermission('master') && data.shared" class="item-shared"> <div v-if="$checkPermission('master') && item.shared" class="item-shared">
<link-icon size="12" class="shared-icon"></link-icon> <link-icon size="12" class="shared-icon"></link-icon>
</div> </div>
<!--Participant owner Icon--> <!--Participant owner Icon-->
<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared"> <div v-if="$checkPermission('master') && item.user_scope !== 'master'" class="item-shared">
<user-plus-icon size="12" class="shared-icon"></user-plus-icon> <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
</div> </div>
<!--Filesize--> <!--Filesize-->
<span v-if="! isFolder" class="item-size">{{ data.filesize }}</span> <span v-if="! isFolder" class="item-size">{{ item.filesize }}</span>
<!--Folder item counts--> <!--Folder item counts-->
<span v-if="isFolder" class="item-length"> <span v-if="isFolder" class="item-length">
@@ -62,7 +58,7 @@
</div> </div>
</div> </div>
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || multiSelectMode ) && canShowMobileOptions"> <span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! multiSelectMode && canShowMobileOptions">
<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon> <FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
</span> </span>
</div> </div>
@@ -71,61 +67,60 @@
<script> <script>
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons' import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
import Emoji from '@/components/Others/Emoji' import FolderIcon from '@/components/FilesView/FolderIcon'
import { debounce } from 'lodash' import { debounce } from 'lodash'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { events } from '@/bus' import { events } from '@/bus'
export default { export default {
name: 'FileItemGrid', name: 'FileItemGrid',
props: ['data'], props: ['item'],
components: { components: {
UserPlusIcon, UserPlusIcon,
CheckIcon, CheckIcon,
LinkIcon, LinkIcon,
Emoji FolderIcon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'FilePreviewType', 'sharedDetail', 'fileInfoDetail' 'FilePreviewType', 'sharedDetail', 'fileInfoDetail', 'data'
]), ]),
folderIconHandle(){ folderEmojiOrColor(){
// If folder have set some color // If folder have set some color
if(this.data.icon_color) { if(this.item.icon_color) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs[`folder${this.data.unique_id}`].firstElementChild.style.fill = `${this.data.icon_color}` this.$refs[`folder${this.item.unique_id}`].firstElementChild.style.fill = `${this.item.icon_color}`
}) })
return false return false
} }
// If folder have set some emoji // If folder have set some emoji
if(this.data.icon_emoji) if(this.item.icon_emoji)
return this.data.icon_emoji return this.item.icon_emoji
}, },
...mapGetters({ allData: 'data' }),
isClicked() { isClicked() {
return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id) return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
}, },
isFolder() { isFolder() {
return this.data.type === 'folder' return this.item.type === 'folder'
}, },
isFile() { isFile() {
return this.data.type !== 'folder' && this.data.type !== 'image' return this.item.type !== 'folder' && this.item.type !== 'image'
}, },
isPdf() { isPdf() {
return this.data.mimetype === 'pdf' return this.item.mimetype === 'pdf'
}, },
isImage() { isImage() {
return this.data.type === 'image' return this.item.type === 'image'
}, },
isVideo() { isVideo() {
return this.data.type === 'video' return this.item.type === 'video'
}, },
isAudio() { isAudio() {
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac'] let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio' return mimetypes.includes(this.item.mimetype) && this.item.type === 'audio'
}, },
canEditName() { canEditName() {
return !this.$isMobile() return !this.$isMobile()
@@ -140,13 +135,13 @@ export default {
return !this.isDeleted && this.$checkPermission(['master', 'editor']) return !this.isDeleted && this.$checkPermission(['master', 'editor'])
}, },
timeStamp() { timeStamp() {
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at return this.item.deleted_at ? this.$t('item_thumbnail.deleted_at', this.item.deleted_at) : this.item.created_at
}, },
folderItems() { folderItems() {
return this.data.deleted_at ? this.data.trashed_items : this.data.items return this.item.deleted_at ? this.item.trashed_items : this.item.items
}, },
isDeleted() { isDeleted() {
return this.data.deleted_at ? true : false return this.item.deleted_at ? true : false
} }
}, },
data() { data() {
@@ -163,12 +158,12 @@ export default {
showItemActions() { showItemActions() {
// Load file info detail // Load file info detail
this.$store.commit('CLEAR_FILEINFO_DETAIL') this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.commit('GET_FILEINFO_DETAIL', this.item)
events.$emit('mobileMenu:show') events.$emit('mobileMenu:show')
}, },
dragEnter() { dragEnter() {
if (this.data.type !== 'folder') return if (this.item.type !== 'folder') return
this.area = true this.area = true
}, },
@@ -185,15 +180,15 @@ export default {
if (e.ctrlKey || e.metaKey && !e.shiftKey) { if (e.ctrlKey || e.metaKey && !e.shiftKey) {
// Click + Ctrl // Click + Ctrl
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) { if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data) this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else { } else {
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.commit('GET_FILEINFO_DETAIL', this.item)
} }
} else if (e.shiftKey) { } else if (e.shiftKey) {
// Click + Shift // Click + Shift
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1]) let lastItem = this.data.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
let clickedItem = this.allData.indexOf(this.data) let clickedItem = this.data.indexOf(this.item)
// If Click + Shift + Ctrl dont remove already selected items // If Click + Shift + Ctrl dont remove already selected items
if (!e.ctrlKey && !e.metaKey) { if (!e.ctrlKey && !e.metaKey) {
@@ -203,18 +198,18 @@ export default {
//Shift selecting from top to bottom //Shift selecting from top to bottom
if (lastItem < clickedItem) { if (lastItem < clickedItem) {
for (let i = lastItem; i <= clickedItem; i++) { for (let i = lastItem; i <= clickedItem; i++) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i]) this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
} }
//Shift selecting from bottom to top //Shift selecting from bottom to top
} else { } else {
for (let i = lastItem; i >= clickedItem; i--) { for (let i = lastItem; i >= clickedItem; i--) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i]) this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
} }
} }
} else { } else {
// Click // Click
this.$store.commit('CLEAR_FILEINFO_DETAIL') this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.commit('GET_FILEINFO_DETAIL', this.item)
} }
} }
@@ -223,29 +218,25 @@ export default {
if (this.$isMobile() && this.isFolder) { if (this.$isMobile() && this.isFolder) {
// Go to folder // Go to folder
if (this.$isThisLocation('public')) { if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }]) this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
} else { } else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }]) this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
} }
} }
if (this.$isMobile()) { if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio) { if (this.isImage || this.isVideo || this.isAudio) {
this.$store.commit('CLEAR_FILEINFO_DETAIL') this.$store.commit('GET_FILEINFO_DETAIL', this.item)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('fileFullPreview:show') events.$emit('fileFullPreview:show')
}else {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
} }
} }
} }
if (this.multiSelectMode && this.$isMobile()) { if (this.multiSelectMode && this.$isMobile()) {
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) { if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data) this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else { } else {
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.commit('GET_FILEINFO_DETAIL', this.item)
} }
} }
// Get target classname // Get target classname
@@ -263,7 +254,7 @@ export default {
events.$emit('fileFullPreview:show') events.$emit('fileFullPreview:show')
} else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) { } else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype) this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
} else if (this.isFolder) { } else if (this.isFolder) {
@@ -271,9 +262,9 @@ export default {
this.$store.commit('CLEAR_FILEINFO_DETAIL') this.$store.commit('CLEAR_FILEINFO_DETAIL')
if (this.$isThisLocation('public')) { if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }]) this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
} else { } else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }]) this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
} }
} }
}, },
@@ -283,18 +274,18 @@ export default {
if (e.target.innerText.trim() === '') return if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', { this.$store.dispatch('renameItem', {
unique_id: this.data.unique_id, unique_id: this.item.unique_id,
type: this.data.type, type: this.item.type,
name: e.target.innerText name: e.target.innerText
}) })
}, 300) }, 300)
}, },
created() { created() {
this.itemName = this.data.name this.itemName = this.item.name
events.$on('newFolder:focus', (unique_id) => { events.$on('newFolder:focus', (unique_id) => {
if(this.data.unique_id == unique_id) { if(this.item.unique_id == unique_id && !this.$isMobile()) {
this.$refs[unique_id].focus() this.$refs[unique_id].focus()
document.execCommand('selectAll') document.execCommand('selectAll')
} }
@@ -311,7 +302,7 @@ export default {
}) })
// Change item name // Change item name
events.$on('change:name', (item) => { events.$on('change:name', (item) => {
if (this.data.unique_id == item.unique_id) this.itemName = item.name if (this.item.unique_id == item.unique_id) this.itemName = item.name
}) })
} }
} }
@@ -485,9 +476,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
.emoji {
margin: 0 auto;
}
.file-link { .file-link {
display: block; display: block;
@@ -531,19 +519,13 @@ export default {
pointer-events: none; pointer-events: none;
} }
.folder-icon { .folder {
align-items: flex-end; width: 80px;
@include font-size(80); height: 80px;
margin: 0 auto; margin: auto;
path { /deep/ .folder-icon {
fill: $theme; @include font-size(80)
}
&.is-deleted {
path {
fill: $dark_background;
}
} }
} }
} }
@@ -577,11 +559,17 @@ export default {
.file-icon-text { .file-icon-text {
@include font-size(12); @include font-size(12);
} }
.folder-icon { .folder {
@include font-size(75); width: 75px;
height: 75px;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
/deep/ .folder-icon {
@include font-size(75)
}
} }
.image { .image {
@@ -623,15 +611,6 @@ export default {
stroke: #2F3C54; stroke: #2F3C54;
} }
} }
.folder-icon {
&.is-deleted {
path {
fill: lighten($dark_mode_foreground, 5%);
}
}
}
} }
.file-item { .file-item {

147
resources/js/components/FilesView/FileItemList.vue
View File

@@ -21,43 +21,39 @@
<!--Thumbnail for item--> <!--Thumbnail for item-->
<div class="icon-item"> <div class="icon-item">
<!--If is file or image, then link item--> <!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text"> <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
{{ data.mimetype | limitCharacters }} {{ item.mimetype | limitCharacters }}
</span> </span>
<!--Folder thumbnail--> <!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/> <FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/>
<!--Image thumbnail--> <!--Image thumbnail-->
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/> <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<!-- If folder have set emoji -->
<Emoji v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="52" />
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder" />
</div> </div>
<!--Name--> <!--Name-->
<div class="item-name"> <div class="item-name">
<b :ref="this.data.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name"> <b :ref="this.item.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
{{ itemName }} {{ itemName }}
</b> </b>
<div class="item-info"> <div class="item-info">
<!--Shared Icon--> <!--Shared Icon-->
<div v-if="$checkPermission('master') && data.shared" class="item-shared"> <div v-if="$checkPermission('master') && item.shared" class="item-shared">
<link-icon size="12" class="shared-icon"></link-icon> <link-icon size="12" class="shared-icon"></link-icon>
</div> </div>
<!--Participant owner Icon--> <!--Participant owner Icon-->
<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared"> <div v-if="$checkPermission('master') && item.user_scope !== 'master'" class="item-shared">
<user-plus-icon size="12" class="shared-icon"></user-plus-icon> <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
</div> </div>
<!--Filesize and timestamp--> <!--Filesize and timestamp-->
<span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span> <span v-if="!isFolder" class="item-size">{{ item.filesize }}, {{ timeStamp }}</span>
<!--Folder item counts--> <!--Folder item counts-->
<span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span> <span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
@@ -66,7 +62,7 @@
<!--Show item actions--> <!--Show item actions-->
<transition name="slide-from-right"> <transition name="slide-from-right">
<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder || mobileMultiSelect)"> <div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
<span @click.stop="showItemActions" class="show-actions"> <span @click.stop="showItemActions" class="show-actions">
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon> <FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
</span> </span>
@@ -78,59 +74,43 @@
<script> <script>
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons' import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
import Emoji from '@/components/Others/Emoji' import FolderIcon from '@/components/FilesView/FolderIcon'
import { debounce } from 'lodash' import { debounce } from 'lodash'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { events } from '@/bus' import { events } from '@/bus'
export default { export default {
name: 'FileItemList', name: 'FileItemList',
props: ['data'], props: ['item'],
components: { components: {
UserPlusIcon, UserPlusIcon,
LinkIcon, LinkIcon,
FolderIcon,
CheckIcon, CheckIcon,
Emoji
}, },
computed: { computed: {
...mapGetters(['FilePreviewType', 'fileInfoDetail']), ...mapGetters(['FilePreviewType', 'fileInfoDetail', 'data']),
...mapGetters({ allData: 'data' }),
folderIconHandle(){
// If folder have set some icon color
if(this.data.icon_color) {
this.$nextTick(() => {
this.$refs[`folder${this.data.unique_id}`].firstElementChild.style.fill = `${this.data.icon_color}`
})
return false
}
// If folder have set some emoji
if(this.data.icon_emoji)
return this.data.icon_emoji
},
isClicked() { isClicked() {
return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id) return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
}, },
isFolder() { isFolder() {
return this.data.type === 'folder' return this.item.type === 'folder'
}, },
isFile() { isFile() {
return this.data.type !== 'folder' && this.data.type !== 'image' return this.item.type !== 'folder' && this.item.type !== 'image'
}, },
isImage() { isImage() {
return this.data.type === 'image' return this.item.type === 'image'
}, },
isPdf() { isPdf() {
return this.data.mimetype === 'pdf' return this.item.mimetype === 'pdf'
}, },
isVideo() { isVideo() {
return this.data.type === 'video' return this.item.type === 'video'
}, },
isAudio() { isAudio() {
let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac'] let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio' return mimetypes.includes(this.item.mimetype) && this.item.type === 'audio'
}, },
canEditName() { canEditName() {
return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file') return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
@@ -139,13 +119,13 @@ export default {
return !this.isDeleted && this.$checkPermission(['master', 'editor']) return !this.isDeleted && this.$checkPermission(['master', 'editor'])
}, },
timeStamp() { timeStamp() {
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at return this.item.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.item.deleted_at }) : this.item.created_at
}, },
folderItems() { folderItems() {
return this.data.deleted_at ? this.data.trashed_items : this.data.items return this.item.deleted_at ? this.item.trashed_items : this.item.items
}, },
isDeleted() { isDeleted() {
return this.data.deleted_at ? true : false return this.item.deleted_at ? true : false
} }
}, },
filters: { filters: {
@@ -172,12 +152,12 @@ export default {
showItemActions() { showItemActions() {
// Load file info detail // Load file info detail
this.$store.commit('CLEAR_FILEINFO_DETAIL') this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.commit('GET_FILEINFO_DETAIL', this.item)
events.$emit('mobileMenu:show') events.$emit('mobileMenu:show')
}, },
dragEnter() { dragEnter() {
if (this.data.type !== 'folder') return if (this.item.type !== 'folder') return
this.area = true this.area = true
}, },
@@ -195,15 +175,15 @@ export default {
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) { if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
// Click + Ctrl // Click + Ctrl
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) { if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data) this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else { } else {
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.commit('GET_FILEINFO_DETAIL', this.item)
} }
} else if (e.shiftKey) { } else if (e.shiftKey) {
// Click + Shift // Click + Shift
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1]) let lastItem = this.data.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
let clickedItem = this.allData.indexOf(this.data) let clickedItem = this.data.indexOf(this.item)
// If Click + Shift + Ctrl dont remove already selected items // If Click + Shift + Ctrl dont remove already selected items
if (!e.ctrlKey && !e.metaKey) { if (!e.ctrlKey && !e.metaKey) {
@@ -213,18 +193,18 @@ export default {
//Shift selecting from top to bottom //Shift selecting from top to bottom
if (lastItem < clickedItem) { if (lastItem < clickedItem) {
for (let i = lastItem; i <= clickedItem; i++) { for (let i = lastItem; i <= clickedItem; i++) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i]) this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
} }
//Shift selecting from bottom to top //Shift selecting from bottom to top
} else { } else {
for (let i = lastItem; i >= clickedItem; i--) { for (let i = lastItem; i >= clickedItem; i--) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i]) this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
} }
} }
} else { } else {
// Click // Click
this.$store.commit('CLEAR_FILEINFO_DETAIL') this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.commit('GET_FILEINFO_DETAIL', this.item)
} }
} }
@@ -233,29 +213,25 @@ export default {
if (this.$isMobile() && this.isFolder) { if (this.$isMobile() && this.isFolder) {
// Go to folder // Go to folder
if (this.$isThisLocation('public')) { if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }]) this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
} else { } else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }]) this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
} }
} }
if (this.$isMobile()) { if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio) { if (this.isImage || this.isVideo || this.isAudio) {
this.$store.commit('CLEAR_FILEINFO_DETAIL') this.$store.commit('GET_FILEINFO_DETAIL', this.item)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('fileFullPreview:show') events.$emit('fileFullPreview:show')
} else {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
} }
} }
} }
if (this.mobileMultiSelect && this.$isMobile()) { if (this.mobileMultiSelect && this.$isMobile()) {
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) { if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data) this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
} else { } else {
this.$store.commit('GET_FILEINFO_DETAIL', this.data) this.$store.commit('GET_FILEINFO_DETAIL', this.item)
} }
} }
@@ -269,7 +245,7 @@ export default {
events.$emit('fileFullPreview:show') events.$emit('fileFullPreview:show')
} else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) { } else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype) this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
} else if (this.isFolder) { } else if (this.isFolder) {
@@ -277,9 +253,9 @@ export default {
this.$store.commit('CLEAR_FILEINFO_DETAIL') this.$store.commit('CLEAR_FILEINFO_DETAIL')
if (this.$isThisLocation('public')) { if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }]) this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
} else { } else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }]) this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
} }
} }
}, },
@@ -288,19 +264,19 @@ export default {
if (e.target.innerText.trim() === '') return if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', { this.$store.dispatch('renameItem', {
unique_id: this.data.unique_id, unique_id: this.item.unique_id,
type: this.data.type, type: this.item.type,
name: e.target.innerText name: e.target.innerText
}) })
}, 300) }, 300)
}, },
created() { created() {
this.itemName = this.data.name this.itemName = this.item.name
events.$on('newFolder:focus', (unique_id) => { events.$on('newFolder:focus', (unique_id) => {
if(this.data.unique_id == unique_id) { if(this.item.unique_id == unique_id && !this.$isMobile()) {
this.$refs[unique_id].focus() this.$refs[unique_id].focus()
document.execCommand('selectAll') document.execCommand('selectAll')
} }
@@ -318,7 +294,7 @@ export default {
// Change item name // Change item name
events.$on('change:name', (item) => { events.$on('change:name', (item) => {
if (this.data.unique_id == item.unique_id) this.itemName = item.name if (this.item.unique_id == item.unique_id) this.itemName = item.name
}) })
} }
} }
@@ -480,18 +456,13 @@ export default {
flex: 0 0 50px; flex: 0 0 50px;
line-height: 0; line-height: 0;
margin-right: 20px; margin-right: 20px;
.folder {
width: 52px;
height: 52px;
.folder-icon { /deep/ .folder-icon {
@include font-size(52); @include font-size(52)
path {
fill: $theme;
}
&.is-deleted {
path {
fill: $dark_background;
}
} }
} }
@@ -589,14 +560,6 @@ export default {
stroke: #2f3c54; stroke: #2f3c54;
} }
} }
.folder-icon {
&.is-deleted {
path {
fill: lighten($dark_mode_foreground, 5%);
}
}
}
} }
.file-item { .file-item {

116
resources/js/components/FilesView/FolderIcon.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<div :class="[{'is-apple': $isApple()}, location]">
<Emoji
v-if="emoji"
:emoji="emoji"
class="emoji-icon"
/>
<FontAwesomeIcon
v-if="!emoji"
:class="[{ 'is-deleted': isDeleted },{'default-color' : ! color && ! isDeleted}, 'folder-icon' ]"
:style="{fill: color}"
icon="folder"
/>
</div>
</template>
<script>
import Emoji from '@/components/Others/Emoji'
export default {
name: 'FolderIcon',
props: [
'item',
'folderIcon',
'location'
],
components: {
Emoji
},
computed: {
isDeleted() {
return this.item.deleted_at ? true : false
},
emoji() {
// Return emoji if is changed from rename popup
if (this.folderIcon)
return this.folderIcon.emoji ? this.folderIcon.emoji : false
// Return emoji if is already set
return this.item.icon_emoji ? this.item.icon_emoji : false
},
color() {
// Return color if is changed from rename popup
if (this.folderIcon)
return this.folderIcon.color ? this.folderIcon.color : false
// Return color if is already set
return this.item.icon_color ? this.item.icon_color : false
}
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
// Locations
.file-item-list {
&.is-apple .emoji-icon {
font-size: 50px;
line-height: 1.1;
}
}
.file-item-grid {
&.is-apple .emoji-icon {
font-size: 80px;
line-height: 1.1;
}
}
.thumbnail-item {
&.is-apple .emoji-icon {
font-size: 36px;
line-height: 1.1;
}
}
.emoji-picker-preview {
&.is-apple .emoji-icon {
font-size: 22px;
line-height: 1.1;
}
}
.default-color {
path {
fill: $theme !important;
}
}
.folder-icon {
path {
fill: inherit;
}
&.is-deleted {
path {
fill: $dark_background;
}
}
}
@media (prefers-color-scheme: dark) {
.folder-icon {
&.is-deleted {
path {
fill: lighten($dark_mode_foreground, 5%);
}
}
}
}
</style>

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

@@ -29,8 +29,8 @@
</li> </li>
</ul> </ul>
<ul class="menu-option-group" v-if="!isFolder"> <ul class="menu-option-group" >
<li class="menu-option" @click="downloadItem"> <li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon"> <div class="icon">
<download-cloud-icon size="17"></download-cloud-icon> <download-cloud-icon size="17"></download-cloud-icon>
</div> </div>
@@ -38,6 +38,15 @@
{{ $t('context_menu.download') }} {{ $t('context_menu.download') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul> </ul>
</div> </div>
@@ -98,6 +107,15 @@
{{ $t('context_menu.download') }} {{ $t('context_menu.download') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul> </ul>
</div> </div>
@@ -166,6 +184,15 @@
{{ $t('context_menu.download') }} {{ $t('context_menu.download') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul> </ul>
</div> </div>
@@ -207,6 +234,15 @@
{{ $t('context_menu.download') }} {{ $t('context_menu.download') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul> </ul>
</div> </div>
@@ -221,6 +257,15 @@
{{ $t('context_menu.download') }} {{ $t('context_menu.download') }}
</div> </div>
</li> </li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -239,6 +284,7 @@ import {
CornerDownRightIcon, CornerDownRightIcon,
DownloadCloudIcon, DownloadCloudIcon,
FolderPlusIcon, FolderPlusIcon,
PaperclipIcon,
LifeBuoyIcon, LifeBuoyIcon,
Trash2Icon, Trash2Icon,
Edit2Icon, Edit2Icon,
@@ -256,6 +302,7 @@ export default {
CornerDownRightIcon, CornerDownRightIcon,
DownloadCloudIcon, DownloadCloudIcon,
FolderPlusIcon, FolderPlusIcon,
PaperclipIcon,
ThumbnailItem, ThumbnailItem,
LifeBuoyIcon, LifeBuoyIcon,
Trash2Icon, Trash2Icon,
@@ -297,6 +344,9 @@ export default {
} }
}, },
methods: { methods: {
downloadFolder(){
this.$store.dispatch( 'downloadFolder' , this.fileInfoDetail[0] )
},
moveItem() { moveItem() {
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] }) events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
}, },

8
resources/js/components/Others/CreateFolder.vue
View File

@@ -79,16 +79,16 @@
this.$store.dispatch('createFolder', this.name) this.$store.dispatch('createFolder', this.name)
this.$closePopup() this.$closePopup()
this.name = undefined
} }
}, },
}, },
mounted() { mounted() {
events.$on('popup:open', ({name}) => { events.$on('popup:open', ({name}) => {
if (name === 'create-folder') if (name === 'create-folder' && ! this.$isMobile())
this.$nextTick(() => { this.$nextTick(() => this.$refs.input.focus())
this.$refs.input.focus()
})
}) })
} }
} }

78
resources/js/components/Others/Emoji.vue
View File

@@ -1,25 +1,69 @@
<template> <template>
<div v-show="transferEmoji" :style="{width: `${size}px`, height: `${size}px`}" v-html="transferEmoji"/> <div :class="[location, 'emoji-container', {'is-apple': $isApple}]">
<span v-if="!$isApple()" class="twemoji-emoji emoji-icon" v-html="transferEmoji"></span>
<span v-if="$isApple()" class="apple-emoji emoji-icon">{{ this.emoji.char }}</span>
</div>
</template> </template>
<script> <script>
import twemoji from 'twemoji' import twemoji from 'twemoji'
export default {
name: 'Emoji', export default {
props: ['emoji', 'size'], name: 'Emoji',
computed: { props: [
transferEmoji () { 'emoji',
'location',
// Transfer single emoji to twemoji ],
return twemoji.parse(this.emoji.char, { computed: {
folder: 'svg', transferEmoji() {
ext: '.svg', return twemoji.parse(this.emoji.char, {
attributes: () => ({ folder: 'svg',
loading: 'lazy', ext: '.svg',
}) attributes: () => ({
loading: 'lazy'
}) })
} })
}, }
} },
}
</script> </script>
<style lang="scss" scoped>
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.emoji-container {
font-size: inherit;
.emoji-icon {
font-size: inherit;
}
}
.emoji-picker {
.apple-emoji {
font-size: 34px;
line-height: 1.1;
font-family: "Apple Color Emoji";
}
}
.emoji-picker-preview {
.apple-emoji {
font-size: 28px;
line-height: 0.85;
font-family: "Apple Color Emoji";
}
}
@media only screen and (max-width: 690px) {
.groups-list .emoji-picker {
.apple-emoji {
font-size: 34px;
line-height: 1.1;
}
}
}
</style>

14
resources/js/components/Others/RenameItem.vue
View File

@@ -24,9 +24,9 @@
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span> <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider> </ValidationProvider>
<!--<SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" :unique_id="pickedItem.unique_id" />--> <SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" :unique_id="pickedItem.unique_id" />
<!-- <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton> --> <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
</ValidationObserver> </ValidationObserver>
@@ -92,8 +92,6 @@ export default {
methods: { methods: {
moreOptions() { moreOptions() {
this.isMoreOptions = !this.isMoreOptions this.isMoreOptions = !this.isMoreOptions
this.setFolderIcon = undefined
}, },
changeName() { changeName() {
if (this.pickedItem.name && this.pickedItem.name !== '') { if (this.pickedItem.name && this.pickedItem.name !== '') {
@@ -122,9 +120,9 @@ export default {
if (args.name !== 'rename-item') return if (args.name !== 'rename-item') return
this.$nextTick(() => { if (! this.$isMobile()) {
this.$refs.input.focus() this.$nextTick(() => this.$refs.input.focus())
}) }
this.isMoreOptions = false this.isMoreOptions = false
@@ -135,7 +133,7 @@ export default {
}) })
events.$on('setFolderIcon', (icon) => { events.$on('setFolderIcon', (icon) => {
this.setFolderIcon = !icon ? undefined : icon.value this.setFolderIcon = icon.value
}) })
} }
} }

447
resources/js/components/Others/SetFolderIcon.vue
View File

@@ -1,196 +1,247 @@
<template> <template>
<div class="set-folder-icon"> <TabWrapper class="set-folder-icon">
<TabWrapper > <!-- Emojis -->
<TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<div class="select-emoji-wrapper">
<label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
<!-- Emojis --> <!-- Selected Emoji input -->
<TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji"> <div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
<div class="select-emoji-wrapper">
<label class="main-label">Pick Yout Emoji Icon:</label>
<!-- Selected Emoji input --> <!-- If is emoji selected -->
<div @click.stop="openMenu" class="select-input-wrapper"> <div class="select-input" v-if="selectedEmoji">
<div @click.stop="resetEmoji" class="select-input-icon-wrapper">
<div class="select-input" v-if="selectedEmoji">
<Emoji class="emoji-preview" :emoji="selectedEmoji" size="25"></Emoji>
<span>{{selectedEmoji.name}}</span>
</div>
<div class="not-selected" v-if="! selectedEmoji">
<span> {{$t('popup_rename.set_emoji_input_placeholder')}}</span>
</div>
<chevron-down-icon v-if="!selectOpen" size="19"/>
<div v-if="selectOpen" @click="resetEmoji" class="select-input-icon-wrapper">
<x-icon size="14" class="select-input-icon"/> <x-icon size="14" class="select-input-icon"/>
</div> </div>
<Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
<span>{{ selectedEmoji.name }}</span>
</div> </div>
<!-- Emojis List --> <!-- If is emoji not selected -->
<transition v-if="selectOpen" name="slide-in"> <div class="not-selected" v-if="! selectedEmoji">
<div class="emoji-wrapper"> <span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
<input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" > </div>
<chevron-down-icon class="row-icon" size="19"/>
</div>
<!-- Emojis List -->
<transition name="slide-in">
<div v-if="selectOpen">
<!-- Spinner -->
<div v-if="!loadedList" class="emoji-wrapper">
<Spinner/>
</div>
<!-- List -->
<div v-if="loadedList && emojis" class="emoji-wrapper">
<!-- Search input -->
<input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')">
<!-- Navigation of Emojis Groups --> <!-- Navigation of Emojis Groups -->
<ul v-show="searchInput.length < 1" class="groups-list"> <ul v-show="searchInput.length < 1" class="groups-list">
<li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojiGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}"> <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.emojisGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
<Emoji :emoji="group.emoji" size="33"/> <Emoji :emoji="group.emoji" location="emoji-picker" />
</li> </li>
</ul> </ul>
<!-- All Emojis --> <!-- All Emojis -->
<div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper"> <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper">
<div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`"> <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`">
<label class="group-name-label">{{name}}</label> <label class="group-name-label">{{ name }}</label>
<ul class="options-list"> <ul class="options-list">
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option"> <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
<Emoji :emoji="emoji" size="33"/> <Emoji :emoji="emoji" location="emoji-picker" />
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- Searched emojis --> <!-- Searched emojis -->
<div v-if="searchInput.length > 0" class="group-wrapper"> <div v-if="searchInput.length > 0" class="group-wrapper">
<div class="options-wrapper"> <div class="options-wrapper">
<ul class="options-list"> <ul class="options-list">
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option" > <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
<Emoji :emoji="emoji" size="33"/> <Emoji :emoji="emoji" location="emoji-picker" />
</li> </li>
</ul> </ul>
<span class="not-found" v-if="filteredEmojis.length === 0"> {{$t('popup_rename.emoji_list_not_found')}}</span> <span class="not-found" v-if="filteredEmojis.length === 0"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
</div> </div>
</div> </div>
</div> </div>
</div>
</transition>
</div>
</TabOption>
</transition> <!-- Colors -->
</div> <TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
</TabOption> <div class="color-pick-wrapper">
<label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
<!-- Colors --> <ul class="color-wrapper">
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder"> <li v-for="(color, i) in colors" :key="i" @click="setIcon({'color': color})" class="single-color">
<div class="color-pick-wrapper"> <check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
<label class="main-label">{{$t('popup_rename.color_pick_label')}}</label> <span :style="{background:color}" class="color-box"></span>
<ul class="color-wrapper"> </li>
<li v-for="(color, index) in colors" </ul>
:key="index" </div>
@click="setIcon({'color': color})" </TabOption>
class="single-color" </TabWrapper>
:class="{'active-color': color === selectedColor }"
:style="{background:color}" />
</ul>
</div>
</TabOption>
</TabWrapper>
</div>
</template> </template>
<script> <script>
import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon } from 'vue-feather-icons' import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon, CheckIcon } from 'vue-feather-icons'
import TabWrapper from '@/components/Others/TabWrapper' import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption' import TabOption from '@/components/Others/TabOption'
import Spinner from '@/components/FilesView/Spinner'
import Emoji from '@/components/Others/Emoji' import Emoji from '@/components/Others/Emoji'
import lodash from 'lodash' import { groupBy } from 'lodash'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { events } from '@/bus' import { events } from '@/bus'
export default { export default {
name: "SetFolderIcon", name: 'SetFolderIcon',
props: ['folderData', 'unique_id'], props: ['folderData', 'unique_id'],
components: { components: {
ChevronDownIcon , ChevronDownIcon,
TabWrapper, TabWrapper,
TabOption,
FolderIcon, FolderIcon,
SmileIcon, SmileIcon,
CheckIcon,
TabOption,
Spinner,
XIcon, XIcon,
Emoji Emoji
}, },
computed: { computed: {
...mapGetters(['emojis', 'emojiGroups']), ...mapGetters(['emojis']),
allEmoji() { allEmoji() {
return _.groupBy(this.emojis, 'group') return groupBy(this.emojis.emojisList, 'group')
}, }
}, },
data () { data() {
return { return {
selectedEmoji: undefined, selectedEmoji: undefined,
selectedColor: undefined, selectedColor: undefined,
searchInput: '', searchInput: '',
filteredEmojis: [], filteredEmojis: [],
selectOpen: false, selectOpen: false,
loadedList: false,
groupInView: 'Smileys & Emotion', groupInView: 'Smileys & Emotion',
colors: [ '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', colors: [
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#41B883',
'#80B300', '#809900', '#E6B3B3', '#6680B3' ] '#FE6F6F',
'#FE6F91',
'#FE6FC0',
'#FE6FF0',
'#DD6FFE',
'#AD6FFE',
'#7D6FFE',
'#6F90FE',
'#6FC0FE',
'#6FF0FE',
'#6FFEDD',
'#6FFEAD',
'#6FFE7D',
'#90FE6F',
'#C0FE6F',
'#F0FE6F',
'#FEDD6F',
'#FEAD6F',
'#FE7D6F',
'#4c4c4c',
'#06070B',
]
} }
}, },
methods: { methods: {
checkGroupInView: _.debounce(function() { checkGroupInView: _.debounce(function() {
this.emojiGroups.forEach(group => { this.emojis.emojisGroups.forEach(group => {
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect() let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect() let groupBox = document.getElementById('group-box').getBoundingClientRect()
// Check if the group is in the viewport of group-box // Check if the group is in the viewport of group-box
if(element.top < groupBox.top && element.bottom > groupBox.top){ if (element.top < groupBox.top && element.bottom > groupBox.top) {
this.groupInView = group.name this.groupInView = group.name
} }
}) })
}, 200), }, 200),
scrollToGroup( name ) { scrollToGroup(name) {
let group = document.getElementById(`group-${name}`) let group = document.getElementById(`group-${name}`)
group.scrollIntoView({ behavior: "smooth" }) group.scrollIntoView({ behavior: 'smooth' })
this.groupInView = name this.groupInView = name
}, },
filterEmojis: _.debounce(function( emoji ){ filterEmojis: _.debounce(function(emoji) {
this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput)) this.filteredEmojis = this.emojis.emojisList.filter(emoji => emoji.name.includes(this.searchInput))
}, 800), }, 800),
openMenu() { openMenu() {
this.selectOpen = ! this.selectOpen this.selectOpen = !this.selectOpen
//Load emojis
if (this.selectOpen) {
this.$store.dispatch('getEmojisList').then((loaded) => {
this.loadedList = loaded
})
}
if (!this.selectOpen)
this.loadedList = false
this.searchInput = '' this.searchInput = ''
this.groupInView = 'Smileys & Emotion' this.groupInView = 'Smileys & Emotion'
}, },
setIcon( value ) { setIcon(value) {
if(value.emoji){ // Set emoji
if (value.emoji) {
this.selectedEmoji = value.emoji this.selectedEmoji = value.emoji
this.selectedColor = undefined this.selectedColor = undefined
} }
if(value.color) { // Set color
if (value.color) {
this.selectedColor = value.color this.selectedColor = value.color
this.selectedEmoji = undefined this.selectedEmoji = undefined
} }
events.$emit('setFolderIcon', { 'value':value, 'unique_id':this.unique_id }) events.$emit('setFolderIcon', { 'value': value })
this.selectOpen = false this.selectOpen = false
}, },
resetEmoji(){ resetEmoji() {
this.selectedEmoji = undefined this.selectedEmoji = undefined
events.$emit('setFolderIcon', undefined) events.$emit('setFolderIcon', { 'value': 'default' })
} }
}, },
mounted () { mounted() {
this.selectOpen = false this.selectOpen = false
// If folder have already set some emoji set this emoji to selected emoji
this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
// If folder have already set some color set this color to selected color
this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
events.$on('unClick', () => { events.$on('unClick', () => {
this.selectOpen = false this.selectOpen = false
this.loadedList = false
}) })
} }
} }
@@ -202,30 +253,42 @@ export default {
.color-pick-wrapper { .color-pick-wrapper {
.color-wrapper { .color-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(auto-fill, 32px);
justify-content: space-between;
gap: 7px;
.single-color { .single-color {
width: 40px; height: 31px;
height: 40px;
list-style: none; list-style: none;
margin: 8px;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
&.active-color { .color-icon {
border: 2px solid $text; z-index: 2;
polyline {
stroke: white;
}
} }
&:hover { .color-box {
border: 2px solid $text; width: 100%;
height: 100%;
position: absolute;
display: block;
} }
} }
} }
} }
.select-emoji-wrapper{ .select-emoji-wrapper {
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -237,7 +300,7 @@ export default {
} }
.emoji-wrapper { .emoji-wrapper {
height: 350px; height: 400px;
width: 100%; width: 100%;
position: absolute; position: absolute;
border: 1px solid transparent; border: 1px solid transparent;
@@ -247,38 +310,36 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
z-index: 10;
top: 152px; top: 152px;
.loader {
width: 100%;
height: 100%;
position: relative;
}
.groups-list { .groups-list {
display: flex; display: grid;
flex-direction: row; grid-template-columns: repeat(9, auto);
flex-wrap: wrap; justify-content: space-between;
margin-bottom: 20px; overflow-x: auto;
overflow-y: hidden;
height: 90px;
.active { .active {
background: $light_background;
border-radius: 8px;
}
.group-option {
width: 45px;
height: 45px;
list-style: none;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background; background: $light_background;
border-radius: 8px; border-radius: 8px;
} }
.group-option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background;
border-radius: 8px;
}
}
} }
}
.emoji-input { .emoji-input {
width: 100%; width: 100%;
@@ -311,14 +372,15 @@ export default {
&:last-child { &:last-child {
margin-bottom: 0px; margin-bottom: 0px;
} }
.options-list {
display: grid;
grid-template-columns: repeat(auto-fill, 45px);
justify-content: space-between;
width: 100%;
}
.options-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.group-name-label { .group-name-label {
width: 100%; width: 100%;
@include font-size(14); @include font-size(14);
@@ -326,7 +388,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
} }
.option { .option {
list-style: none; list-style: none;
width: 45px; width: 45px;
height: 45px; height: 45px;
@@ -339,18 +401,16 @@ export default {
} }
} }
.not-found { .not-found {
align-self: center; align-self: center;
margin:auto; margin: auto;
font-weight: 700; font-weight: 700;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
background:$light_background ; background: $light_background;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
} }
} }
} }
} }
@@ -364,28 +424,19 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border: 1px solid transparent;
@include transition(150ms);
.select-input-icon-wrapper { .row-icon {
width: 22px; @include transition(150ms);
height: 22px; }
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: $light_background !important;
.select-input-icon { &.active-menu {
line { border-color: $theme;
stroke: $theme; box-shadow: 0 0 7px rgba($theme, 0.3);
}
}
}
.select-input-icon { .row-icon {
line { transform: rotate(180deg);
stroke: $text;
}
} }
} }
@@ -397,7 +448,35 @@ export default {
align-items: center; align-items: center;
.emoji-preview { .emoji-preview {
margin-left: 5px;
margin-right: 10px; margin-right: 10px;
width: 22px;
height: 22px;
}
.select-input-icon-wrapper {
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
margin-left: -7px;
&:hover {
.select-input-icon {
line {
stroke: $theme;
}
}
}
.select-input-icon {
line {
stroke: $text;
}
}
} }
} }
@@ -410,60 +489,76 @@ export default {
} }
} }
.wrapper {
margin-bottom: 10px;
}
.set-folder-icon { .set-folder-icon {
position: relative; position: relative;
} }
.slide-in-enter-active { .slide-in-enter-active {
transition: all 5s ease; transition: all 150ms ease;
} }
.slide-in-enter .slide-in-enter {
{
opacity: 0; opacity: 0;
transform: translateY(-50px); transform: translateY(-210px);
}
.slide-in-enter-to {
transform: translateY(-134px);
}
@media (max-width: 690px) {
.emoji-wrapper {
height: 300px;
}
}
@media (max-width: 336px) {
.emoji-wrapper {
top: 173px;
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.color-pick-wrapper{ .color-pick-wrapper {
.color-wrapper{ .color-wrapper {
.single-color { .single-color {
&.active-color { &.active-color {
border: 2px solid ; border: 2px solid;
} }
&:hover { &:hover {
border: 2px solid $dark_mode_text_primary; border: 2px solid $dark_mode_text_primary;
} }
} }
} }
} }
.emoji-wrapper { .emoji-wrapper {
background: $dark_mode_background; background: $dark_mode_background;
.emoji-input { .emoji-input {
background: $dark_mode_foreground ; background: $dark_mode_foreground;
} }
.groups-list{
.active{ .groups-list {
.active {
background: $dark_mode_foreground !important; background: $dark_mode_foreground !important;
} }
.group-option { .group-option {
&:hover { &:hover {
background: $dark_mode_foreground !important; background: $dark_mode_foreground !important;
} }
} }
} }
.options-wrapper { .options-wrapper {
.option { .option {
&:hover { &:hover {
background: $dark_mode_foreground !important; background: $dark_mode_foreground !important;
} }
} }
.not-found { .not-found {
background: $dark_mode_foreground !important; background: $dark_mode_foreground !important;
} }
@@ -472,25 +567,27 @@ export default {
.select-input-wrapper { .select-input-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
.not-selected { .not-selected {
span { span {
color:$dark_mode_text_secondary; color: $dark_mode_text_secondary;
} }
} }
.select-input-icon-wrapper { .select-input-icon-wrapper {
&:hover { &:hover {
background: rgba($theme, 0.1) !important;
.select-input-icon { .select-input-icon {
line { line {
stroke: $theme !important; stroke: $theme !important;
} }
} }
} }
.select-input-icon { .select-input-icon {
line { line {
stroke:$dark_mode_text_primary !important; stroke: $dark_mode_text_primary !important;
} }
} }
} }
} }
} }

3
resources/js/components/Others/TabWrapper.vue
View File

@@ -89,11 +89,12 @@
.tab-icon { .tab-icon {
margin-right: 10px; margin-right: 10px;
path, path,
circle, circle,
line, line,
polyline { polyline {
color: $theme !important; stroke: $theme !important;
} }
} }
} }

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

@@ -5,20 +5,16 @@
<div class="icon-item"> <div class="icon-item">
<!--If is file or image, then link item--> <!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">{{ item.mimetype }}</span> <span v-if="isFile || (isImage && !item.thumbnail) " class="file-icon-text">{{ item.mimetype }}</span>
<!--Folder thumbnail--> <!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/> <FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" :class="{'file-icon-mobile' : $isMobile()}" icon="file"/>
<!--Image thumbnail--> <!--Image thumbnail-->
<img v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/> <img v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<!-- If folder have set emoji -->
<Emoji v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="36"/>
<!--Else show only folder icon--> <!--Else show only folder icon-->
<FontAwesomeIcon ref="folderIcon" v-if="isFolder && !folderIconHandle" class="folder-icon" icon="folder"/> <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder" />
</div> </div>
<!--Name--> <!--Name-->
@@ -45,37 +41,14 @@
<script> <script>
import {mapGetters} from 'vuex' import {mapGetters} from 'vuex'
import Emoji from '@/components/Others/Emoji' import FolderIcon from '@/components/FilesView/FolderIcon'
export default { export default {
name: 'ThumbnailItem', name: 'ThumbnailItem',
props: ['item', 'info', 'setFolderIcon'], props: ['item', 'info', 'setFolderIcon'],
components: {Emoji}, components: {FolderIcon},
computed: { computed: {
...mapGetters(['currentFolder']), ...mapGetters(['currentFolder']),
folderIconHandle(){
// Set icon folder if set folder from rename popup
if(this.setFolderIcon){
return this.setFolderIcon.emoji
? this.setFolderIcon.emoji
: this.$nextTick(() => {
this.$refs.folderIcon.firstElementChild.style.fill = `${this.setFolderIcon.color}`
})
}
// If folder have already set some icon
if(!this.setFolderIcon && (this.item.icon_emoji || this.item.icon_color)){
return this.item.icon_emoji
? this.item.icon_emoji
: this.$nextTick(() => {
this.$refs.folderIcon.firstElementChild.style.fill = `${this.item.icon_color}`
})
}
},
isFolder() { isFolder() {
return this.item.type === 'folder' return this.item.type === 'folder'
}, },
@@ -137,7 +110,6 @@
justify-content: center; justify-content: center;
line-height: 0; line-height: 0;
.file-icon { .file-icon {
@include font-size(35); @include font-size(35);
@@ -148,11 +120,12 @@
} }
} }
.folder-icon { .folder {
@include font-size(36); width: 36px;
height: 36px;
path { /deep/ .folder-icon {
fill: $theme; @include font-size(36);
} }
} }
@@ -202,6 +175,13 @@
} }
} }
.icon-item .file-icon-mobile {
path {
fill: $dark_mode_background !important;
// stroke: ;
}
}
.item-name { .item-name {
.name { .name {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;

16
resources/js/helpers.js vendored
View File

@@ -352,6 +352,22 @@ const Helpers = {
body.classList.add('windows') body.classList.add('windows')
} }
} }
Vue.prototype.$isApple = function() {
const toMatch = [
/iPhone/i,
/iPad/i,
/iPod/i,
/iOS/i,
/macOS/i,
/Macintosh/i
]
// Check if device is iOS
return toMatch.some(toMatchItem => {
return navigator.userAgent.match(toMatchItem)
})
}
} }
} }

9
resources/js/i18n/lang/cn.json
View File

@@ -584,7 +584,14 @@
"popup_rename": { "popup_rename": {
"title": "Rename Your {item}", "title": "Rename Your {item}",
"label": "Edit Name", "label": "Edit Name",
"placeholder": "Type your title" "placeholder": "Type your title",
"tab_emoji_title": "Emoji as an Icon",
"tab_color_title": "Folder Color",
"select_emoji_label": "Pick Your Emoji Icon",
"color_pick_label": "Pick Your Color",
"set_emoji_input_placeholder": "Emojis List...",
"search_emoji_input_placeholder": "Search your emoji...",
"emoji_list_not_found": "Not Found"
}, },
"popup_set_card": { "popup_set_card": {
"message": "您的卡将被设置为默认卡，并且在以后的结算中始终会收取费用。", "message": "您的卡将被设置为默认卡，并且在以后的结算中始终会收取费用。",

6
resources/js/i18n/lang/en.json
View File

@@ -583,11 +583,11 @@
"placeholder": "Type your title", "placeholder": "Type your title",
"tab_emoji_title": "Emoji as an Icon", "tab_emoji_title": "Emoji as an Icon",
"tab_color_title": "Folder Color", "tab_color_title": "Folder Color",
"select_emoji_label": "Pick Your Emoji Icon",
"color_pick_label": "Pick Your Color",
"set_emoji_input_placeholder": "Emojis List...", "set_emoji_input_placeholder": "Emojis List...",
"search_emoji_input_placeholder": "Search your emoji...", "search_emoji_input_placeholder": "Search your emoji...",
"emoji_list_not_found": "Not Found", "emoji_list_not_found": "Not Found"
"color_pick_label": "Pick Your Color:"
}, },
"popup_create_folder": { "popup_create_folder": {
"folder_default_name": "New Folder", "folder_default_name": "New Folder",

9
resources/js/i18n/lang/sk.json
View File

@@ -586,7 +586,14 @@
"popup_rename": { "popup_rename": {
"title": "Zmeňte názov {item}", "title": "Zmeňte názov {item}",
"label": "Zmeniť názov", "label": "Zmeniť názov",
"placeholder": "Napíš názov..." "placeholder": "Napíš názov...",
"tab_emoji_title": "Emodži ako ikona",
"tab_color_title": "Farba priečinka",
"select_emoji_label": "Vyberte emodži ikonu",
"color_pick_label": "Vyberte si farbu",
"set_emoji_input_placeholder": "Emodži zoznam ...",
"search_emoji_input_placeholder": "Vyhľadajte svoje emodži...",
"emoji_list_not_found": "Nenájdené"
}, },
"popup_set_card": { "popup_set_card": {
"message": "Vaša karta bude nastavená ako predvolená a bude vám z nej vždy stiahnutá čiastka za nasledujúce obdobie fakturácie.", "message": "Vaša karta bude nastavená ako predvolená a bude vám z nej vždy stiahnutá čiastka za nasledujúce obdobie fakturácie.",

2
resources/js/store/index.js vendored
View File

@@ -3,7 +3,6 @@ import Vue from 'vue'
import fileFunctions from './modules/fileFunctions' import fileFunctions from './modules/fileFunctions'
import fileBrowser from './modules/fileBrowser' import fileBrowser from './modules/fileBrowser'
import emojisList from './modules/emojisList'
import userAuth from './modules/userAuth' import userAuth from './modules/userAuth'
import sharing from './modules/sharing' import sharing from './modules/sharing'
import app from './modules/app' import app from './modules/app'
@@ -14,7 +13,6 @@ export default new Vuex.Store({
modules: { modules: {
fileFunctions, fileFunctions,
fileBrowser, fileBrowser,
emojisList,
userAuth, userAuth,
sharing, sharing,
app, app,

20
resources/js/store/modules/app.js vendored
View File

@@ -8,6 +8,7 @@ const defaultState = {
authorized: undefined, authorized: undefined,
homeDirectory: undefined, homeDirectory: undefined,
requestedPlan: undefined, requestedPlan: undefined,
emojis: undefined,
sorting: { sorting: {
sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC', sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at', field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
@@ -967,6 +968,21 @@ const defaultState = {
] ]
} }
const actions = { const actions = {
getEmojisList: ({commit}) => {
return new Promise((resolve, reject) => {
axios.get('/api/emojis-list')
.then((response) => {
commit('LOAD_EMOJIS_LIST', response.data[0])
})
.catch(() => Vue.prototype.$isSomethingWrong())
.finally(() => {
resolve(true)
})
})
},
changePreviewType: ({commit, state}, preview) => { changePreviewType: ({commit, state}, preview) => {
// Get preview type // Get preview type
@@ -991,6 +1007,9 @@ const actions = {
}, },
} }
const mutations = { const mutations = {
LOAD_EMOJIS_LIST(state, data) {
state.emojis = data
},
UPDATE_SORTING(state) { UPDATE_SORTING(state) {
state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
@@ -1035,6 +1054,7 @@ const getters = {
timezones: state=> state.timezones, timezones: state=> state.timezones,
api: state => state.config.api, api: state => state.config.api,
config: state => state.config, config: state => state.config,
emojis: state => state.emojis,
index: state => state.index, index: state => state.index,
roles: state => state.roles, roles: state => state.roles,
sorting: (state) => { sorting: (state) => {

7
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -45,7 +45,10 @@ const actions = {
? '/api/zip/public/' + router.currentRoute.params.token ? '/api/zip/public/' + router.currentRoute.params.token
: '/api/zip' : '/api/zip'
commit('ZIPPING_FILE_STATUS', true) commit('PROCESSING_POPUP', {
title: i18n.t('popup_zipping.title'),
message: i18n.t('popup_zipping.message'),
})
axios.post(route, { axios.post(route, {
files: files files: files
@@ -57,7 +60,7 @@ const actions = {
Vue.prototype.$isSomethingWrong() Vue.prototype.$isSomethingWrong()
}) })
.finally(() => { .finally(() => {
commit('ZIPPING_FILE_STATUS', false) commit('PROCESSING_POPUP', undefined)
}) })
}, },
moveItem: ({ commit, getters, dispatch }, { to_item, noSelectedItem }) => { moveItem: ({ commit, getters, dispatch }, { to_item, noSelectedItem }) => {

3
routes/api.php
View File

@@ -193,4 +193,7 @@ Route::group(['middleware' => ['auth:api', 'auth.shared', 'auth.master', 'scope:
Route::get('/zip-folder/{unique_id}', 'FileFunctions\EditItemsController@user_zip_folder'); Route::get('/zip-folder/{unique_id}', 'FileFunctions\EditItemsController@user_zip_folder');
Route::post('/upload', 'FileFunctions\EditItemsController@user_upload'); Route::post('/upload', 'FileFunctions\EditItemsController@user_upload');
Route::post('/move', 'FileFunctions\EditItemsController@user_move'); Route::post('/move', 'FileFunctions\EditItemsController@user_move');
//Get Emojis List
Route::get('/emojis-list', 'AppFunctionsController@get_emojis_list');
}); });