mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
Merge remote-tracking branch 'origin/version-v1.8.1'
# 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
@@ -246,4 +246,16 @@ class AppFunctionsController extends Controller
|
||||
Artisan::call('config:clear');
|
||||
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]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,23 +33,29 @@ class Editor
|
||||
* @param $unique_id
|
||||
* @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;
|
||||
|
||||
// Get folder
|
||||
$folder = FileManagerFolder::where('user_id', $user_id)
|
||||
->where('unique_id', $unique_id)
|
||||
->first();
|
||||
|
||||
->where('unique_id', $unique_id)
|
||||
->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(isset($folder_icon['emoji'])) {
|
||||
if (isset($folder_icon['emoji'])) {
|
||||
$folder->icon_emoji = $folder_icon['emoji'];
|
||||
$folder->icon_color = null;
|
||||
}
|
||||
|
||||
// If request have color set folder icon color
|
||||
if(isset($folder_icon['color'])) {
|
||||
if (isset($folder_icon['color'])) {
|
||||
$folder->icon_emoji = null;
|
||||
$folder->icon_color = $folder_icon['color'];
|
||||
}
|
||||
@@ -133,7 +139,7 @@ class Editor
|
||||
return Zip::create([
|
||||
'user_id' => $shared->user_id ?? Auth::id(),
|
||||
'shared_token' => $shared->token ?? null,
|
||||
'basename' => $zip_name,
|
||||
'basename' => $zip_name,
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -451,8 +457,8 @@ class Editor
|
||||
$limit = get_setting('upload_limit');
|
||||
|
||||
// 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 ($request->boolean('is_last')) {
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
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.
|
||||
'chunk_size' => env('CHUNK_SIZE', '128'),
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
const defaultState = {
|
||||
|
||||
emojis :
|
||||
{
|
||||
"emojisList" :
|
||||
[
|
||||
{
|
||||
"codes": "1F600",
|
||||
@@ -148,7 +147,7 @@ const defaultState = {
|
||||
},
|
||||
{
|
||||
"codes": "263A",
|
||||
"char": "☺",
|
||||
"char": "☺️",
|
||||
"name": "smiling face",
|
||||
"category": "Smileys & Emotion (face-affection)",
|
||||
"group": "Smileys & Emotion",
|
||||
@@ -13947,14 +13946,13 @@ const defaultState = {
|
||||
"subgroup": "subdivision-flag"
|
||||
}
|
||||
],
|
||||
|
||||
emojiGroups : [
|
||||
"emojisGroups" : [
|
||||
{
|
||||
"name": "Smileys & Emotion",
|
||||
"emoji": {
|
||||
"codes": "1F600",
|
||||
"char": "😀",
|
||||
"name": "grinning face",
|
||||
"name": "grinning face"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -13962,7 +13960,7 @@ const defaultState = {
|
||||
"emoji": {
|
||||
"codes": "1F91A",
|
||||
"char": "🤚",
|
||||
"name": "raised back of hand",
|
||||
"name": "raised back of hand"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -13970,7 +13968,7 @@ const defaultState = {
|
||||
"emoji": {
|
||||
"codes": "1F435",
|
||||
"char": "🐵",
|
||||
"name": "monkey face",
|
||||
"name": "monkey face"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -13978,7 +13976,7 @@ const defaultState = {
|
||||
"emoji": {
|
||||
"codes": "1F34F",
|
||||
"char": "🍏",
|
||||
"name": "green apple",
|
||||
"name": "green apple"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -13986,7 +13984,7 @@ const defaultState = {
|
||||
"emoji": {
|
||||
"codes": "1F697",
|
||||
"char": "🚗",
|
||||
"name": "automobile",
|
||||
"name": "automobile"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -13994,7 +13992,7 @@ const defaultState = {
|
||||
"emoji": {
|
||||
"codes": "26BD",
|
||||
"char": "⚽",
|
||||
"name": "soccer ball",
|
||||
"name": "soccer ball"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -14002,15 +14000,15 @@ const defaultState = {
|
||||
"emoji": {
|
||||
"codes": "231A",
|
||||
"char": "⌚",
|
||||
"name": "watch",
|
||||
"name": "watch"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Symbols",
|
||||
"emoji": {
|
||||
"codes": "2764",
|
||||
"char": "❤",
|
||||
"name": "red heart",
|
||||
"codes": "2705",
|
||||
"char": "✅",
|
||||
"name": "check mark button"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -14018,21 +14016,8 @@ const defaultState = {
|
||||
"emoji": {
|
||||
"codes": "1F3F3",
|
||||
"char": "🏳",
|
||||
"name": "white flag",
|
||||
"name": "white flag"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const getters = {
|
||||
emojis: state => state.emojis,
|
||||
emojiGroups: state => state.emojiGroups
|
||||
|
||||
}
|
||||
|
||||
export default {
|
||||
state: defaultState,
|
||||
getters
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
2
public/js/main.js
vendored
2
public/js/main.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,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?id=86eb60282c3151df7fa7",
|
||||
"/css/app.css": "/css/app.css?id=dfd52fc997b919cd3686",
|
||||
"/chunks/admin.js": "/chunks/admin.js?id=7672646537b5813becf0",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=3f5a34aa8341af8d2b4c",
|
||||
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=9ec9a42482cb302a05f6",
|
||||
"/chunks/app-billings.js": "/chunks/app-billings.js?id=92903bd1d316b3db1dfa",
|
||||
"/chunks/app-email.js": "/chunks/app-email.js?id=9d646578982ba61813b6",
|
||||
"/chunks/app-index.js": "/chunks/app-index.js?id=4623bd961647897a5b81",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js?id=b19a701cdfa06e4817ff",
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js?id=11c86d822269f1a1577e",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=6784314933372fb1adf0",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=d304bcf7d4157e81f3e2",
|
||||
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=b73a5b6f7d2a448cc5ab",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js?id=81906d205ba0107c5105",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=004908727045abd0852e",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js?id=08e4f7d923ce9e49dcc3",
|
||||
"/chunks/database.js": "/chunks/database.js?id=b8d8269f77c52f78c784",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=2e3af103d13536c50757",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=106f81cefe76c62d476e",
|
||||
"/chunks/files.js": "/chunks/files.js?id=b213d4fe15c2a9933f32",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=95ce5e5685dc9315f515",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=6db12008aa646ad5fb6f",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js?id=83389adf0760820af6f5",
|
||||
"/chunks/landing-page.js": "/chunks/landing-page.js?id=546ed735edf0d80c8a7e",
|
||||
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=848666d6c49c613f7f99",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=bd41ae13951c2a5025c3",
|
||||
"/chunks/pages.js": "/chunks/pages.js?id=df7245abef9e3b77a218",
|
||||
"/chunks/plan.js": "/chunks/plan.js?id=cfd7b4ee7e21639a837d",
|
||||
"/chunks/plan-create.js": "/chunks/plan-create.js?id=9bb62af36193ee9648d3",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=7b7601f044e0ef47720b",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=8d3e75ff9adb22a25d57",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=3b4a29497fc878f503db",
|
||||
"/chunks/plans.js": "/chunks/plans.js?id=feb924949bffcdf3d9fb",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=f990697f8d4ff45df434",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=5d7406ecd84c676db8fb",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=d16d9e2cda6aa3a3f6dc",
|
||||
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=b05e24dd8be60f62ee27",
|
||||
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=72d317b39264987e6ed0",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=014597c63c94d3ac9f60",
|
||||
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=2a0ea9cf661deba6fc13",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=b3f25de02dd4ef072df0",
|
||||
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=aa3d963f578d7bc5ff88",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855",
|
||||
"/chunks/shared-files.js": "/chunks/shared-files.js?id=ba10fd3f52a7b62d3092",
|
||||
"/chunks/shared-page.js": "/chunks/shared-page.js?id=4489cb4cfa33fb249bea",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=c52ce81c3dad56d7a7d8",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=2f12850d320b2413cf54",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=6622381f1d96e8319999",
|
||||
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=f1b093a3bcfebd5bc8a5",
|
||||
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=e0e2f821aac16b32da34",
|
||||
"/chunks/upgrade.js": "/chunks/upgrade.js?id=0c8d40bed72e86359529",
|
||||
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=a8db2246f9326e5c5957",
|
||||
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=f050f10627424b730dc2",
|
||||
"/chunks/user.js": "/chunks/user.js?id=6f2ab796211a3ac8670f",
|
||||
"/chunks/user-create.js": "/chunks/user-create.js?id=0d630acda4552c315417",
|
||||
"/chunks/user-delete.js": "/chunks/user-delete.js?id=db041eae3aef3e45197a",
|
||||
"/chunks/user-detail.js": "/chunks/user-detail.js?id=8cf2fe554e8d67ac8677",
|
||||
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a0613909cb0c21817804",
|
||||
"/chunks/user-password.js": "/chunks/user-password.js?id=653bba3eb8d117c3a043",
|
||||
"/chunks/user-storage.js": "/chunks/user-storage.js?id=630b0ff649e16d3627af",
|
||||
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=0b4226ba77f10b83de4a",
|
||||
"/chunks/users.js": "/chunks/users.js?id=04ca09662595fae56488"
|
||||
"/js/main.js": "/js/main.js",
|
||||
"/css/app.css": "/css/app.css",
|
||||
"/chunks/admin.js": "/chunks/admin.js?id=06067d0f4cff64abd1e4",
|
||||
"/chunks/admin-account.js": "/chunks/admin-account.js?id=fde37ee0820a1d2dc1f9",
|
||||
"/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/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/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-appearance.js": "/chunks/app-appearance.js?id=ba3c9a7acbaacc20af9e",
|
||||
"/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-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-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-billings.js": "/chunks/app-billings.js?id=97f5c44884d8c2128c56",
|
||||
"/chunks/app-email.js": "/chunks/app-email.js?id=59c27449f65145dc208e",
|
||||
"/chunks/app-index.js": "/chunks/app-index.js?id=a337e0f9b64590a88cc9",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js?id=1655c151466b066ee1c5",
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js?id=cb8ea484a0e605ace175",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=e8ee87b4fb155d3edb6b",
|
||||
"/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/app-setup.js": "/chunks/app-setup.js?id=777ebaef548d5b4c61be",
|
||||
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=0eec974c6f0ee4e6ecab",
|
||||
"/chunks/contact-us.js": "/chunks/contact-us.js?id=b243adc35233292f8ad6",
|
||||
"/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js?id=96ac1ede73f3fc9afa37",
|
||||
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=00b75239db203720652c",
|
||||
"/chunks/dashboard.js": "/chunks/dashboard.js?id=887b8d232e3944beebdd",
|
||||
"/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/database.js": "/chunks/database.js?id=212e2d81f6f5c54c2dd2",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1d8ee4bfbcde69c97021",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=374911110bca4e1b3f91",
|
||||
"/chunks/files.js": "/chunks/files.js?id=d47d2964ef535ad5754c",
|
||||
"/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/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=8780d88f95928a6a6292",
|
||||
"/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=539a5b88c5f32511449e",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=f430110273d76b28906f",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=94c75dac20c4ccf7bde0",
|
||||
"/chunks/invoices.js": "/chunks/invoices.js?id=02089f329654fbbc894d",
|
||||
"/chunks/landing-page.js": "/chunks/landing-page.js?id=ddac17e6108c6f58f082",
|
||||
"/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=6666b81edc5ff6f60e82",
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=7e6363b9a35e62dd560c",
|
||||
"/chunks/pages.js": "/chunks/pages.js?id=ca712437ecc7e5aeee5c",
|
||||
"/chunks/plan.js": "/chunks/plan.js?id=cc041fb9c2cb9ad8f0ff",
|
||||
"/chunks/plan-create.js": "/chunks/plan-create.js?id=24bb1297c55fe70c1dd0",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=e06dc32848cf3bfb9e6b",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=242cb0706c986d08c484",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=36a86cf6f3d8a2868504",
|
||||
"/chunks/plans.js": "/chunks/plans.js?id=282268d939f8b52f6acd",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=060bceb3f703969fb135",
|
||||
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a44394b1fa09f996a9fd",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=8c1d40ff91c04fcefcfc",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=463a3b35eb4020fdcc77",
|
||||
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=4d1a070566ee2069e1bd",
|
||||
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=603b7f706f34d9c89a62",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=0df4bd46f1d3d90e360a",
|
||||
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=37955b9e8262af7fe525",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=013b6f15f907caaecd1e",
|
||||
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=5d702de3662f601fccca",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=99b4f321902fe6b0eb23",
|
||||
"/chunks/shared-files.js": "/chunks/shared-files.js?id=1860b9031f41ed46d0e0",
|
||||
"/chunks/shared-page.js": "/chunks/shared-page.js?id=d8a8c573da5a08b7cd36",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=6b961e6324b09384dfd0",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=a46f57a34f8f862a24a8",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=080bade1ed512f512591",
|
||||
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=5b2f00a9e19520adc31e",
|
||||
"/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"
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.stop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:data="item"
|
||||
:item="item"
|
||||
v-for="item in data"
|
||||
:key="item.unique_id"
|
||||
class="file-item"
|
||||
@@ -55,7 +55,7 @@
|
||||
@dragstart="dragStart(item)"
|
||||
@drop.native.prevent="dragFinish(item, $event)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:data="item"
|
||||
:item="item"
|
||||
v-for="item in data"
|
||||
:key="item.unique_id"
|
||||
class="file-item"
|
||||
|
||||
@@ -8,52 +8,48 @@
|
||||
<div class="icon-item">
|
||||
|
||||
<!-- 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 } ">
|
||||
<CheckIcon v-if="isClicked" class="icon" size="17"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
|
||||
{{ data.mimetype }}
|
||||
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
|
||||
{{ item.mimetype }}
|
||||
</span>
|
||||
|
||||
<!--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-->
|
||||
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.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"/>
|
||||
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder"/>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-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 }}
|
||||
</b>
|
||||
|
||||
<div class="item-info">
|
||||
|
||||
<!--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>
|
||||
</div>
|
||||
|
||||
<!--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>
|
||||
</div>
|
||||
|
||||
<!--Filesize-->
|
||||
<span v-if="! isFolder" class="item-size">{{ data.filesize }}</span>
|
||||
<span v-if="! isFolder" class="item-size">{{ item.filesize }}</span>
|
||||
|
||||
<!--Folder item counts-->
|
||||
<span v-if="isFolder" class="item-length">
|
||||
@@ -62,7 +58,7 @@
|
||||
</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>
|
||||
</span>
|
||||
</div>
|
||||
@@ -71,61 +67,60 @@
|
||||
|
||||
<script>
|
||||
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 { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileItemGrid',
|
||||
props: ['data'],
|
||||
props: ['item'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
CheckIcon,
|
||||
LinkIcon,
|
||||
Emoji
|
||||
FolderIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType', 'sharedDetail', 'fileInfoDetail'
|
||||
'FilePreviewType', 'sharedDetail', 'fileInfoDetail', 'data'
|
||||
]),
|
||||
folderIconHandle(){
|
||||
folderEmojiOrColor(){
|
||||
|
||||
// If folder have set some color
|
||||
if(this.data.icon_color) {
|
||||
if(this.item.icon_color) {
|
||||
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
|
||||
}
|
||||
|
||||
// If folder have set some emoji
|
||||
if(this.data.icon_emoji)
|
||||
return this.data.icon_emoji
|
||||
if(this.item.icon_emoji)
|
||||
return this.item.icon_emoji
|
||||
|
||||
},
|
||||
...mapGetters({ allData: 'data' }),
|
||||
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() {
|
||||
return this.data.type === 'folder'
|
||||
return this.item.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type !== 'folder' && this.data.type !== 'image'
|
||||
return this.item.type !== 'folder' && this.item.type !== 'image'
|
||||
},
|
||||
isPdf() {
|
||||
return this.data.mimetype === 'pdf'
|
||||
return this.item.mimetype === 'pdf'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
return this.item.type === 'image'
|
||||
},
|
||||
isVideo() {
|
||||
return this.data.type === 'video'
|
||||
return this.item.type === 'video'
|
||||
},
|
||||
isAudio() {
|
||||
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() {
|
||||
return !this.$isMobile()
|
||||
@@ -140,13 +135,13 @@ export default {
|
||||
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
|
||||
},
|
||||
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() {
|
||||
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() {
|
||||
return this.data.deleted_at ? true : false
|
||||
return this.item.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -163,12 +158,12 @@ export default {
|
||||
showItemActions() {
|
||||
// Load file info 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')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
if (this.item.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
@@ -185,15 +180,15 @@ export default {
|
||||
|
||||
if (e.ctrlKey || e.metaKey && !e.shiftKey) {
|
||||
// Click + Ctrl
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
|
||||
} else {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
} else if (e.shiftKey) {
|
||||
// Click + Shift
|
||||
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
|
||||
let clickedItem = this.allData.indexOf(this.data)
|
||||
let lastItem = this.data.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
|
||||
let clickedItem = this.data.indexOf(this.item)
|
||||
|
||||
// If Click + Shift + Ctrl dont remove already selected items
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
@@ -203,18 +198,18 @@ export default {
|
||||
//Shift selecting from top to bottom
|
||||
if (lastItem < clickedItem) {
|
||||
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
|
||||
} else {
|
||||
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 {
|
||||
// Click
|
||||
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) {
|
||||
// Go to folder
|
||||
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 {
|
||||
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.isImage || this.isVideo || this.isAudio) {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
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.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
|
||||
} else {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
}
|
||||
// Get target classname
|
||||
@@ -263,7 +254,7 @@ export default {
|
||||
events.$emit('fileFullPreview:show')
|
||||
|
||||
} 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) {
|
||||
|
||||
@@ -271,9 +262,9 @@ export default {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
|
||||
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 {
|
||||
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
|
||||
|
||||
this.$store.dispatch('renameItem', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
unique_id: this.item.unique_id,
|
||||
type: this.item.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
this.itemName = this.data.name
|
||||
this.itemName = this.item.name
|
||||
|
||||
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()
|
||||
document.execCommand('selectAll')
|
||||
}
|
||||
@@ -311,7 +302,7 @@ export default {
|
||||
})
|
||||
// Change item name
|
||||
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;
|
||||
align-items: center;
|
||||
|
||||
.emoji {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.file-link {
|
||||
display: block;
|
||||
@@ -531,19 +519,13 @@ export default {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
align-items: flex-end;
|
||||
@include font-size(80);
|
||||
margin: 0 auto;
|
||||
.folder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: auto;
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(80)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -577,11 +559,17 @@ export default {
|
||||
.file-icon-text {
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(75);
|
||||
.folder {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(75)
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
@@ -623,15 +611,6 @@ export default {
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
|
||||
@@ -21,43 +21,39 @@
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
|
||||
{{ data.mimetype | limitCharacters }}
|
||||
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
|
||||
{{ item.mimetype | limitCharacters }}
|
||||
</span>
|
||||
|
||||
<!--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-->
|
||||
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.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"/>
|
||||
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder" />
|
||||
</div>
|
||||
|
||||
<!--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 }}
|
||||
</b>
|
||||
|
||||
<div class="item-info">
|
||||
<!--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>
|
||||
</div>
|
||||
|
||||
<!--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>
|
||||
</div>
|
||||
|
||||
<!--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-->
|
||||
<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-->
|
||||
<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">
|
||||
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
|
||||
</span>
|
||||
@@ -78,59 +74,43 @@
|
||||
|
||||
<script>
|
||||
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 { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileItemList',
|
||||
props: ['data'],
|
||||
props: ['item'],
|
||||
components: {
|
||||
UserPlusIcon,
|
||||
LinkIcon,
|
||||
FolderIcon,
|
||||
CheckIcon,
|
||||
Emoji
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['FilePreviewType', 'fileInfoDetail']),
|
||||
...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
|
||||
|
||||
},
|
||||
...mapGetters(['FilePreviewType', 'fileInfoDetail', 'data']),
|
||||
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() {
|
||||
return this.data.type === 'folder'
|
||||
return this.item.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type !== 'folder' && this.data.type !== 'image'
|
||||
return this.item.type !== 'folder' && this.item.type !== 'image'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
return this.item.type === 'image'
|
||||
},
|
||||
isPdf() {
|
||||
return this.data.mimetype === 'pdf'
|
||||
return this.item.mimetype === 'pdf'
|
||||
},
|
||||
isVideo() {
|
||||
return this.data.type === 'video'
|
||||
return this.item.type === 'video'
|
||||
},
|
||||
isAudio() {
|
||||
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() {
|
||||
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'])
|
||||
},
|
||||
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() {
|
||||
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() {
|
||||
return this.data.deleted_at ? true : false
|
||||
return this.item.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
@@ -172,12 +152,12 @@ export default {
|
||||
showItemActions() {
|
||||
// Load file info 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')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
if (this.item.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
@@ -195,15 +175,15 @@ export default {
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
// Click + Ctrl
|
||||
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
|
||||
} else {
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
}
|
||||
} else if (e.shiftKey) {
|
||||
// Click + Shift
|
||||
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
|
||||
let clickedItem = this.allData.indexOf(this.data)
|
||||
let lastItem = this.data.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
|
||||
let clickedItem = this.data.indexOf(this.item)
|
||||
|
||||
// If Click + Shift + Ctrl dont remove already selected items
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
@@ -213,18 +193,18 @@ export default {
|
||||
//Shift selecting from top to bottom
|
||||
if (lastItem < clickedItem) {
|
||||
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
|
||||
} else {
|
||||
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 {
|
||||
// Click
|
||||
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) {
|
||||
// Go to folder
|
||||
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 {
|
||||
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.isImage || this.isVideo || this.isAudio) {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
|
||||
this.$store.commit('GET_FILEINFO_DETAIL', this.item)
|
||||
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.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
|
||||
} 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')
|
||||
|
||||
} 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) {
|
||||
|
||||
@@ -277,9 +253,9 @@ export default {
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
|
||||
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 {
|
||||
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
|
||||
|
||||
this.$store.dispatch('renameItem', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
unique_id: this.item.unique_id,
|
||||
type: this.item.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
|
||||
this.itemName = this.data.name
|
||||
this.itemName = this.item.name
|
||||
|
||||
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()
|
||||
document.execCommand('selectAll')
|
||||
}
|
||||
@@ -318,7 +294,7 @@ export default {
|
||||
|
||||
// Change item name
|
||||
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;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(52);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(52)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -589,14 +560,6 @@ export default {
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
|
||||
116
resources/js/components/FilesView/FolderIcon.vue
Normal file
116
resources/js/components/FilesView/FolderIcon.vue
Normal 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>
|
||||
@@ -29,8 +29,8 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group" v-if="!isFolder">
|
||||
<li class="menu-option" @click="downloadItem">
|
||||
<ul class="menu-option-group" >
|
||||
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
|
||||
<div class="icon">
|
||||
<download-cloud-icon size="17"></download-cloud-icon>
|
||||
</div>
|
||||
@@ -38,6 +38,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@@ -98,6 +107,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@@ -166,6 +184,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@@ -207,6 +234,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@@ -221,6 +257,15 @@
|
||||
{{ $t('context_menu.download') }}
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -239,6 +284,7 @@ import {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
PaperclipIcon,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
@@ -256,6 +302,7 @@ export default {
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
PaperclipIcon,
|
||||
ThumbnailItem,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
@@ -297,6 +344,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadFolder(){
|
||||
this.$store.dispatch( 'downloadFolder' , this.fileInfoDetail[0] )
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
|
||||
},
|
||||
|
||||
@@ -79,16 +79,16 @@
|
||||
this.$store.dispatch('createFolder', this.name)
|
||||
|
||||
this.$closePopup()
|
||||
|
||||
this.name = undefined
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on('popup:open', ({name}) => {
|
||||
|
||||
if (name === 'create-folder')
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus()
|
||||
})
|
||||
if (name === 'create-folder' && ! this.$isMobile())
|
||||
this.$nextTick(() => this.$refs.input.focus())
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,69 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import twemoji from 'twemoji'
|
||||
export default {
|
||||
name: 'Emoji',
|
||||
props: ['emoji', 'size'],
|
||||
computed: {
|
||||
transferEmoji () {
|
||||
|
||||
// Transfer single emoji to twemoji
|
||||
return twemoji.parse(this.emoji.char, {
|
||||
folder: 'svg',
|
||||
ext: '.svg',
|
||||
attributes: () => ({
|
||||
loading: 'lazy',
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'Emoji',
|
||||
props: [
|
||||
'emoji',
|
||||
'location',
|
||||
],
|
||||
computed: {
|
||||
transferEmoji() {
|
||||
return twemoji.parse(this.emoji.char, {
|
||||
folder: 'svg',
|
||||
ext: '.svg',
|
||||
attributes: () => ({
|
||||
loading: 'lazy'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
@@ -24,9 +24,9 @@
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</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>
|
||||
|
||||
@@ -92,8 +92,6 @@ export default {
|
||||
methods: {
|
||||
moreOptions() {
|
||||
this.isMoreOptions = !this.isMoreOptions
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
},
|
||||
changeName() {
|
||||
if (this.pickedItem.name && this.pickedItem.name !== '') {
|
||||
@@ -122,9 +120,9 @@ export default {
|
||||
|
||||
if (args.name !== 'rename-item') return
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus()
|
||||
})
|
||||
if (! this.$isMobile()) {
|
||||
this.$nextTick(() => this.$refs.input.focus())
|
||||
}
|
||||
|
||||
this.isMoreOptions = false
|
||||
|
||||
@@ -135,7 +133,7 @@ export default {
|
||||
})
|
||||
|
||||
events.$on('setFolderIcon', (icon) => {
|
||||
this.setFolderIcon = !icon ? undefined : icon.value
|
||||
this.setFolderIcon = icon.value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,196 +1,247 @@
|
||||
<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 -->
|
||||
<TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
|
||||
<div class="select-emoji-wrapper">
|
||||
<label class="main-label">Pick Yout Emoji Icon:</label>
|
||||
<!-- Selected Emoji input -->
|
||||
<div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
|
||||
|
||||
<!-- Selected Emoji input -->
|
||||
<div @click.stop="openMenu" class="select-input-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">
|
||||
<!-- If is emoji selected -->
|
||||
<div class="select-input" v-if="selectedEmoji">
|
||||
<div @click.stop="resetEmoji" class="select-input-icon-wrapper">
|
||||
<x-icon size="14" class="select-input-icon"/>
|
||||
</div>
|
||||
<Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
|
||||
<span>{{ selectedEmoji.name }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Emojis List -->
|
||||
<transition v-if="selectOpen" name="slide-in">
|
||||
<div class="emoji-wrapper">
|
||||
<input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
|
||||
<!-- If is emoji not selected -->
|
||||
<div class="not-selected" v-if="! selectedEmoji">
|
||||
<span> {{ $t('popup_rename.set_emoji_input_placeholder') }}</span>
|
||||
</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 -->
|
||||
<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}">
|
||||
<Emoji :emoji="group.emoji" size="33"/>
|
||||
<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" location="emoji-picker" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- All Emojis -->
|
||||
<div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box" class="group-wrapper">
|
||||
<!-- All Emojis -->
|
||||
<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}`">
|
||||
<label class="group-name-label">{{name}}</label>
|
||||
<label class="group-name-label">{{ name }}</label>
|
||||
<ul class="options-list">
|
||||
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
|
||||
<Emoji :emoji="emoji" size="33"/>
|
||||
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option">
|
||||
<Emoji :emoji="emoji" location="emoji-picker" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Searched emojis -->
|
||||
|
||||
<!-- Searched emojis -->
|
||||
<div v-if="searchInput.length > 0" class="group-wrapper">
|
||||
<div class="options-wrapper">
|
||||
<ul class="options-list">
|
||||
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option" >
|
||||
<Emoji :emoji="emoji" size="33"/>
|
||||
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
|
||||
<Emoji :emoji="emoji" location="emoji-picker" />
|
||||
</li>
|
||||
</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>
|
||||
</transition>
|
||||
</div>
|
||||
</TabOption>
|
||||
|
||||
</transition>
|
||||
</div>
|
||||
</TabOption>
|
||||
|
||||
<!-- Colors -->
|
||||
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
|
||||
<div class="color-pick-wrapper">
|
||||
<label class="main-label">{{$t('popup_rename.color_pick_label')}}</label>
|
||||
<ul class="color-wrapper">
|
||||
<li v-for="(color, index) in colors"
|
||||
:key="index"
|
||||
@click="setIcon({'color': color})"
|
||||
class="single-color"
|
||||
:class="{'active-color': color === selectedColor }"
|
||||
:style="{background:color}" />
|
||||
</ul>
|
||||
</div>
|
||||
</TabOption>
|
||||
</TabWrapper>
|
||||
</div>
|
||||
<!-- Colors -->
|
||||
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
|
||||
<div class="color-pick-wrapper">
|
||||
<label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
|
||||
<ul class="color-wrapper">
|
||||
<li v-for="(color, i) in colors" :key="i" @click="setIcon({'color': color})" class="single-color">
|
||||
<check-icon v-if="color === selectedColor" class="color-icon" size="22"/>
|
||||
<span :style="{background:color}" class="color-box"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</TabOption>
|
||||
</TabWrapper>
|
||||
</template>
|
||||
|
||||
<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 TabOption from '@/components/Others/TabOption'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import Emoji from '@/components/Others/Emoji'
|
||||
import lodash from 'lodash'
|
||||
import { groupBy } from 'lodash'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: "SetFolderIcon",
|
||||
name: 'SetFolderIcon',
|
||||
props: ['folderData', 'unique_id'],
|
||||
components: {
|
||||
ChevronDownIcon ,
|
||||
ChevronDownIcon,
|
||||
TabWrapper,
|
||||
TabOption,
|
||||
FolderIcon,
|
||||
SmileIcon,
|
||||
CheckIcon,
|
||||
TabOption,
|
||||
Spinner,
|
||||
XIcon,
|
||||
Emoji
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['emojis', 'emojiGroups']),
|
||||
...mapGetters(['emojis']),
|
||||
allEmoji() {
|
||||
return _.groupBy(this.emojis, 'group')
|
||||
},
|
||||
return groupBy(this.emojis.emojisList, 'group')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
selectedEmoji: undefined,
|
||||
selectedColor: undefined,
|
||||
searchInput: '',
|
||||
filteredEmojis: [],
|
||||
selectOpen: false,
|
||||
loadedList: false,
|
||||
groupInView: 'Smileys & Emotion',
|
||||
colors: [ '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
|
||||
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
|
||||
'#80B300', '#809900', '#E6B3B3', '#6680B3' ]
|
||||
colors: [
|
||||
'#41B883',
|
||||
'#FE6F6F',
|
||||
'#FE6F91',
|
||||
'#FE6FC0',
|
||||
'#FE6FF0',
|
||||
'#DD6FFE',
|
||||
'#AD6FFE',
|
||||
'#7D6FFE',
|
||||
'#6F90FE',
|
||||
'#6FC0FE',
|
||||
'#6FF0FE',
|
||||
'#6FFEDD',
|
||||
'#6FFEAD',
|
||||
'#6FFE7D',
|
||||
'#90FE6F',
|
||||
'#C0FE6F',
|
||||
'#F0FE6F',
|
||||
'#FEDD6F',
|
||||
'#FEAD6F',
|
||||
'#FE7D6F',
|
||||
'#4c4c4c',
|
||||
'#06070B',
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkGroupInView: _.debounce(function() {
|
||||
|
||||
this.emojiGroups.forEach(group => {
|
||||
this.emojis.emojisGroups.forEach(group => {
|
||||
|
||||
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
|
||||
let groupBox = document.getElementById('group-box').getBoundingClientRect()
|
||||
|
||||
// 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
|
||||
}
|
||||
})
|
||||
|
||||
}, 200),
|
||||
scrollToGroup( name ) {
|
||||
scrollToGroup(name) {
|
||||
|
||||
let group = document.getElementById(`group-${name}`)
|
||||
|
||||
group.scrollIntoView({ behavior: "smooth" })
|
||||
group.scrollIntoView({ behavior: 'smooth' })
|
||||
|
||||
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),
|
||||
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.groupInView = 'Smileys & Emotion'
|
||||
},
|
||||
setIcon( value ) {
|
||||
setIcon(value) {
|
||||
|
||||
if(value.emoji){
|
||||
// Set emoji
|
||||
if (value.emoji) {
|
||||
this.selectedEmoji = value.emoji
|
||||
this.selectedColor = undefined
|
||||
}
|
||||
|
||||
if(value.color) {
|
||||
|
||||
// Set color
|
||||
if (value.color) {
|
||||
this.selectedColor = value.color
|
||||
this.selectedEmoji = undefined
|
||||
}
|
||||
|
||||
events.$emit('setFolderIcon', { 'value':value, 'unique_id':this.unique_id })
|
||||
|
||||
events.$emit('setFolderIcon', { 'value': value })
|
||||
|
||||
this.selectOpen = false
|
||||
},
|
||||
resetEmoji(){
|
||||
resetEmoji() {
|
||||
|
||||
this.selectedEmoji = undefined
|
||||
|
||||
events.$emit('setFolderIcon', undefined)
|
||||
events.$emit('setFolderIcon', { 'value': 'default' })
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
mounted() {
|
||||
|
||||
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', () => {
|
||||
|
||||
this.selectOpen = false
|
||||
|
||||
this.loadedList = false
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -202,30 +253,42 @@ export default {
|
||||
|
||||
.color-pick-wrapper {
|
||||
.color-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 32px);
|
||||
justify-content: space-between;
|
||||
gap: 7px;
|
||||
|
||||
.single-color {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
height: 31px;
|
||||
list-style: none;
|
||||
margin: 8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.active-color {
|
||||
border: 2px solid $text;
|
||||
.color-icon {
|
||||
z-index: 2;
|
||||
|
||||
polyline {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 2px solid $text;
|
||||
.color-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-emoji-wrapper{
|
||||
.select-emoji-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -237,7 +300,7 @@ export default {
|
||||
}
|
||||
|
||||
.emoji-wrapper {
|
||||
height: 350px;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
border: 1px solid transparent;
|
||||
@@ -247,38 +310,36 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
top: 152px;
|
||||
|
||||
.loader {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.groups-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, auto);
|
||||
justify-content: space-between;
|
||||
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;
|
||||
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 {
|
||||
width: 100%;
|
||||
@@ -311,14 +372,15 @@ export default {
|
||||
|
||||
&:last-child {
|
||||
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 {
|
||||
width: 100%;
|
||||
@include font-size(14);
|
||||
@@ -326,7 +388,7 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.option {
|
||||
.option {
|
||||
list-style: none;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
@@ -339,18 +401,16 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.not-found {
|
||||
.not-found {
|
||||
align-self: center;
|
||||
margin:auto;
|
||||
margin: auto;
|
||||
font-weight: 700;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
background:$light_background ;
|
||||
background: $light_background;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -364,28 +424,19 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
@include transition(150ms);
|
||||
|
||||
.select-input-icon-wrapper {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background: $light_background !important;
|
||||
.row-icon {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
.select-input-icon {
|
||||
line {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active-menu {
|
||||
border-color: $theme;
|
||||
box-shadow: 0 0 7px rgba($theme, 0.3);
|
||||
|
||||
.select-input-icon {
|
||||
line {
|
||||
stroke: $text;
|
||||
}
|
||||
.row-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -397,7 +448,35 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.emoji-preview {
|
||||
margin-left: 5px;
|
||||
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 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slide-in-enter-active {
|
||||
transition: all 5s ease;
|
||||
.slide-in-enter-active {
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.slide-in-enter
|
||||
{
|
||||
.slide-in-enter {
|
||||
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) {
|
||||
.color-pick-wrapper{
|
||||
.color-wrapper{
|
||||
.color-pick-wrapper {
|
||||
.color-wrapper {
|
||||
.single-color {
|
||||
&.active-color {
|
||||
border: 2px solid ;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 2px solid $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-wrapper {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.emoji-input {
|
||||
background: $dark_mode_foreground ;
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
.groups-list{
|
||||
.active{
|
||||
|
||||
.groups-list {
|
||||
.active {
|
||||
background: $dark_mode_foreground !important;
|
||||
}
|
||||
|
||||
.group-option {
|
||||
&:hover {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
.option {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
|
||||
.not-found {
|
||||
background: $dark_mode_foreground !important;
|
||||
}
|
||||
@@ -472,25 +567,27 @@ export default {
|
||||
|
||||
.select-input-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.not-selected {
|
||||
span {
|
||||
color:$dark_mode_text_secondary;
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.select-input-icon-wrapper {
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1) !important;
|
||||
.select-input-icon {
|
||||
line {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-input-icon {
|
||||
line {
|
||||
stroke:$dark_mode_text_primary !important;
|
||||
stroke: $dark_mode_text_primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,11 +89,12 @@
|
||||
|
||||
.tab-icon {
|
||||
margin-right: 10px;
|
||||
|
||||
path,
|
||||
circle,
|
||||
line,
|
||||
polyline {
|
||||
color: $theme !important;
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,20 +5,16 @@
|
||||
<div class="icon-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-->
|
||||
<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-->
|
||||
<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-->
|
||||
<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>
|
||||
|
||||
<!--Name-->
|
||||
@@ -45,37 +41,14 @@
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
import Emoji from '@/components/Others/Emoji'
|
||||
import FolderIcon from '@/components/FilesView/FolderIcon'
|
||||
|
||||
export default {
|
||||
name: 'ThumbnailItem',
|
||||
props: ['item', 'info', 'setFolderIcon'],
|
||||
components: {Emoji},
|
||||
components: {FolderIcon},
|
||||
computed: {
|
||||
...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() {
|
||||
return this.item.type === 'folder'
|
||||
},
|
||||
@@ -137,7 +110,6 @@
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
|
||||
|
||||
.file-icon {
|
||||
@include font-size(35);
|
||||
|
||||
@@ -148,11 +120,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(36);
|
||||
.folder {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(36);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,6 +175,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item .file-icon-mobile {
|
||||
path {
|
||||
fill: $dark_mode_background !important;
|
||||
// stroke: ;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
16
resources/js/helpers.js
vendored
16
resources/js/helpers.js
vendored
@@ -352,6 +352,22 @@ const Helpers = {
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -584,7 +584,14 @@
|
||||
"popup_rename": {
|
||||
"title": "Rename Your {item}",
|
||||
"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": {
|
||||
"message": "您的卡将被设置为默认卡，并且在以后的结算中始终会收取费用。",
|
||||
|
||||
@@ -583,11 +583,11 @@
|
||||
"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",
|
||||
"color_pick_label": "Pick Your Color:"
|
||||
|
||||
"emoji_list_not_found": "Not Found"
|
||||
},
|
||||
"popup_create_folder": {
|
||||
"folder_default_name": "New Folder",
|
||||
|
||||
@@ -586,7 +586,14 @@
|
||||
"popup_rename": {
|
||||
"title": "Zmeňte názov {item}",
|
||||
"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": {
|
||||
"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
2
resources/js/store/index.js
vendored
@@ -3,7 +3,6 @@ import Vue from 'vue'
|
||||
|
||||
import fileFunctions from './modules/fileFunctions'
|
||||
import fileBrowser from './modules/fileBrowser'
|
||||
import emojisList from './modules/emojisList'
|
||||
import userAuth from './modules/userAuth'
|
||||
import sharing from './modules/sharing'
|
||||
import app from './modules/app'
|
||||
@@ -14,7 +13,6 @@ export default new Vuex.Store({
|
||||
modules: {
|
||||
fileFunctions,
|
||||
fileBrowser,
|
||||
emojisList,
|
||||
userAuth,
|
||||
sharing,
|
||||
app,
|
||||
|
||||
20
resources/js/store/modules/app.js
vendored
20
resources/js/store/modules/app.js
vendored
@@ -8,6 +8,7 @@ const defaultState = {
|
||||
authorized: undefined,
|
||||
homeDirectory: undefined,
|
||||
requestedPlan: undefined,
|
||||
emojis: undefined,
|
||||
sorting: {
|
||||
sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
|
||||
field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
|
||||
@@ -967,6 +968,21 @@ const defaultState = {
|
||||
]
|
||||
}
|
||||
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) => {
|
||||
|
||||
// Get preview type
|
||||
@@ -991,6 +1007,9 @@ const actions = {
|
||||
},
|
||||
}
|
||||
const mutations = {
|
||||
LOAD_EMOJIS_LIST(state, data) {
|
||||
state.emojis = data
|
||||
},
|
||||
UPDATE_SORTING(state) {
|
||||
state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
|
||||
state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
|
||||
@@ -1035,6 +1054,7 @@ const getters = {
|
||||
timezones: state=> state.timezones,
|
||||
api: state => state.config.api,
|
||||
config: state => state.config,
|
||||
emojis: state => state.emojis,
|
||||
index: state => state.index,
|
||||
roles: state => state.roles,
|
||||
sorting: (state) => {
|
||||
|
||||
7
resources/js/store/modules/fileFunctions.js
vendored
7
resources/js/store/modules/fileFunctions.js
vendored
@@ -45,7 +45,10 @@ const actions = {
|
||||
? '/api/zip/public/' + router.currentRoute.params.token
|
||||
: '/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, {
|
||||
files: files
|
||||
@@ -57,7 +60,7 @@ const actions = {
|
||||
Vue.prototype.$isSomethingWrong()
|
||||
})
|
||||
.finally(() => {
|
||||
commit('ZIPPING_FILE_STATUS', false)
|
||||
commit('PROCESSING_POPUP', undefined)
|
||||
})
|
||||
},
|
||||
moveItem: ({ commit, getters, dispatch }, { to_item, noSelectedItem }) => {
|
||||
|
||||
@@ -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::post('/upload', 'FileFunctions\EditItemsController@user_upload');
|
||||
Route::post('/move', 'FileFunctions\EditItemsController@user_move');
|
||||
|
||||
//Get Emojis List
|
||||
Route::get('/emojis-list', 'AppFunctionsController@get_emojis_list');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user