nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-28 15:24:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode switcher

Browse Source
This commit is contained in:
Peter Papp
2021-07-23 17:16:42 +02:00
parent be2690fd1c
commit 32d54fa50e
113 changed files with 565 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/language-translations.php
+8 -7
View File
@@ -73,10 +73,10 @@ return [
'admin_settings.payments.allow_payments' => 'Allow Subscription Payments', 'admin_settings.payments.allow_payments' => 'Allow Subscription Payments',
'admin_settings.payments.button_submit' => 'Test and Save Stripe', 'admin_settings.payments.button_submit' => 'Test and Save Stripe',
'admin_settings.payments.button_testing' => 'Testing Stripe Connection', 'admin_settings.payments.button_testing' => 'Testing Stripe Connection',
'admin_settings.payments.credentials_disclaimer' => "Your Stripe credentials is not showed because these values are secret and must not be revealed by stranger. You can change your Stripe credentials in your <b class='text-theme'>.env</b> file.", 'admin_settings.payments.credentials_disclaimer' => "Your Stripe credentials is not showed because these values are secret and must not be revealed by stranger. You can change your Stripe credentials in your <b class='text-theme dark-text-theme'>.env</b> file.",
'admin_settings.payments.section_payments' => 'Stripe Payments', 'admin_settings.payments.section_payments' => 'Stripe Payments',
'admin_settings.payments.stripe_create_acc' => 'If you don’t have stripe account, please <a href="https://dashboard.stripe.com/register" target="_blank">register here</a> and get your Publishable Key, Secret Key and create your webhook.', 'admin_settings.payments.stripe_create_acc' => 'If you don’t have stripe account, please <a href="https://dashboard.stripe.com/register" target="_blank">register here</a> and get your Publishable Key, Secret Key and create your webhook.',
'admin_settings.payments.stripe_create_webhook' => "You have to create webhook endpoint in your Stripe Dashboard. You can find it in <b class='text-theme'>Dashboard -> Developers -> Webhooks -> Add Endpoint</b>. In Endpoint URL please copy and paste url bellow. Make sure, this url is your public domain, not localhost. In events section, please click on <b class='text-theme'>receive all events</b>. That's all.", 'admin_settings.payments.stripe_create_webhook' => "You have to create webhook endpoint in your Stripe Dashboard. You can find it in <b class='text-theme dark-text-theme'>Dashboard -> Developers -> Webhooks -> Add Endpoint</b>. In Endpoint URL please copy and paste url bellow. Make sure, this url is your public domain, not localhost. In events section, please click on <b class='text-theme dark-text-theme'>receive all events</b>. That's all.",
'admin_settings.payments.stripe_currency' => 'Stripe Currency', 'admin_settings.payments.stripe_currency' => 'Stripe Currency',
'admin_settings.payments.stripe_currency_plac' => 'Select your Stripe currency', 'admin_settings.payments.stripe_currency_plac' => 'Select your Stripe currency',
'admin_settings.payments.stripe_pub_key' => 'Publishable Key', 'admin_settings.payments.stripe_pub_key' => 'Publishable Key',
@@ -276,7 +276,7 @@ return [
'admin_settings.appearance.title_plac' => 'Type your app title', 'admin_settings.appearance.title_plac' => 'Type your app title',
'admin_settings.email.driver' => 'Mail Driver', 'admin_settings.email.driver' => 'Mail Driver',
'admin_settings.email.driver_plac' => 'Type your mail driver', 'admin_settings.email.driver_plac' => 'Type your mail driver',
'admin_settings.email.email_disclaimer' => "This form is not fully pre-filled for security reasons. Your email settings is available in your <b class='text-theme'>.env</b> file. For apply new Email settings, please confirm your options by button at the end of formular.", 'admin_settings.email.email_disclaimer' => "This form is not fully pre-filled for security reasons. Your email settings is available in your <b class='text-theme dark-text-theme'>.env</b> file. For apply new Email settings, please confirm your options by button at the end of formular.",
'admin_settings.email.encryption' => 'Mail Encryption', 'admin_settings.email.encryption' => 'Mail Encryption',
'admin_settings.email.encryption_plac' => 'Select your mail encryption', 'admin_settings.email.encryption_plac' => 'Select your mail encryption',
'admin_settings.email.host' => 'Mail Host', 'admin_settings.email.host' => 'Mail Host',
@@ -574,7 +574,7 @@ return [
'shared_form.button_generate' => 'Generate Link', 'shared_form.button_generate' => 'Generate Link',
'shared_form.button_more_options' => 'Set Expiration', 'shared_form.button_more_options' => 'Set Expiration',
'shared_form.email_placeholder' => 'Type your emails', 'shared_form.email_placeholder' => 'Type your emails',
'shared_form.email_successfully_send_message' => "Your item was <b class='text-theme'>successfully send</b> to recipients emails.", 'shared_form.email_successfully_send_message' => "Your item was <b class='text-theme dark-text-theme'>successfully send</b> to recipients emails.",
'shared_form.expiration_day' => '{value}d.', 'shared_form.expiration_day' => '{value}d.',
'shared_form.expiration_hour' => '{value}h.', 'shared_form.expiration_hour' => '{value}h.',
'shared_form.label_expiration' => 'Link Expiration', 'shared_form.label_expiration' => 'Link Expiration',
@@ -698,7 +698,7 @@ return [
'popup_2fa.title' => 'Confirm Your Password', 'popup_2fa.title' => 'Confirm Your Password',
'popup_2fa.input_label' => 'Password', 'popup_2fa.input_label' => 'Password',
'popup_2fa.placeholder' => 'Type your password', 'popup_2fa.placeholder' => 'Type your password',
'popup_2fa.help' => 'Scan the image above with the <b class="text-theme">two-factor authentication app</b> on your phone.', 'popup_2fa.help' => 'Scan the image above with the <b class="text-theme dark-text-theme">two-factor authentication app</b> on your phone.',
'popup_2fa.confirm_button' => 'Confirm', 'popup_2fa.confirm_button' => 'Confirm',
'popup_2fa.disappear_qr' => 'Really disappear this QR code?', 'popup_2fa.disappear_qr' => 'Really disappear this QR code?',
'popup_2fa.toaster_enabled' => 'Your 2FA was enabled successfully!', 'popup_2fa.toaster_enabled' => 'Your 2FA was enabled successfully!',
@@ -709,7 +709,7 @@ return [
'popup_2fa.codes_info' => 'Recovery codes can be used to access your account in the event you lose access to your device and cannot receive two-factor authentication codes.', 'popup_2fa.codes_info' => 'Recovery codes can be used to access your account in the event you lose access to your device and cannot receive two-factor authentication codes.',
'popup_2fa.codes_button' => 'Show Codes', 'popup_2fa.codes_button' => 'Show Codes',
'popup_2fa.popup_codes_title' => 'Your Security Codes', 'popup_2fa.popup_codes_title' => 'Your Security Codes',
'popup_2fa.popup_codes_disclaimer' => '<b class="text-theme">Put these in a safe spot.</b> If you lose your device and don’t have the recovery codes you will lose access to your account.', 'popup_2fa.popup_codes_disclaimer' => '<b class="text-theme dark-text-theme">Put these in a safe spot.</b> If you lose your device and don’t have the recovery codes you will lose access to your account.',
'context_menu.codes_regenerate' => 'Regenerate Codes', 'context_menu.codes_regenerate' => 'Regenerate Codes',
'popup_2fa.toaster_codes_copied' => 'Your codes was copied!', 'popup_2fa.toaster_codes_copied' => 'Your codes was copied!',
'popup_2fa.toaster_codes_regenerated' => 'Your codes was regenerated!', 'popup_2fa.toaster_codes_regenerated' => 'Your codes was regenerated!',
@@ -723,9 +723,10 @@ return [
'popup_personal_token.label' => 'Token Name', 'popup_personal_token.label' => 'Token Name',
'popup_personal_token.plc' => 'Type token name...', 'popup_personal_token.plc' => 'Type token name...',
'popup_personal_token.your_token' => 'Your Personal Access Token', 'popup_personal_token.your_token' => 'Your Personal Access Token',
'popup_personal_token.copy_token' => "Make sure to <b class='text-theme'>copy your personal access token now</b>. You won’t be able to see it again!", 'popup_personal_token.copy_token' => "Make sure to <b class='text-theme dark-text-theme'>copy your personal access token now</b>. You won’t be able to see it again!",
'popup_delete_personal_token.title' => 'Are you sure you want to delete this token?', 'popup_delete_personal_token.title' => 'Are you sure you want to delete this token?',
'popup_delete_personal_token.description' => 'Any applications or scripts using this token will no longer be able to access into your account. You cannot undo this action.', 'popup_delete_personal_token.description' => 'Any applications or scripts using this token will no longer be able to access into your account. You cannot undo this action.',
'personal_token.token_deleted' => 'Token was successfully deleted!', 'personal_token.token_deleted' => 'Token was successfully deleted!',
'dark_mode_toggle' => 'Toggle Dark Mode',
], ],
]; ];
public/mix-manifest.json
+101 -74
View File
@@ -1,76 +1,103 @@
{ {
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~6c99cc74.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~6c99cc74.js?id=94c9a052e6e82569e862", "/js/main.js": "/js/main.js",
"/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=ebb51a58a95a14da110b", "/css/app.css": "/css/app.css",
"/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=f3dc8d59297f76bf9573", "/chunks/admin.js": "/chunks/admin.js?id=f48be89654bdd5857619",
"/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=41b42ac4d0a735daa6cc", "/chunks/admin-account.js": "/chunks/admin-account.js?id=c0454f30ab711c13d961",
"/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js?id=6dc32b9b0f6d281d6a26", "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=91adf6625e49f0b93731",
"/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=dd14a1d618e603d300fb", "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a7b1c983.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a7b1c983.js?id=66c2c205086f658115d7",
"/chunks/not-found.js": "/chunks/not-found.js?id=87a13ef68b45d7543699", "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js?id=1afc2a786d4a7222405e",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=eb1b0461791657cc54ce", "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=5b0057f770c45f0ffd92",
"/vendors~chunks/platform~chunks/shared.js": "/vendors~chunks/platform~chunks/shared.js?id=bc26c252f2ba5f4d6360", "/chunks/admin~chunks/files~chunks/settings~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared/file-browser.js?id=d5c9e6104890d4a17143",
"/js/main.js": "/js/main.js?id=98ab1a7696f94bf7dd3d", "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=2f834ba9277e999fee7a",
"/css/app.css": "/css/app.css?id=a8f94d0c5a6f4a1185b1", "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=00b5d7aaaf17b263c7fe",
"/chunks/admin.js": "/chunks/admin.js?id=9c64b111c6911aae7e15", "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=05abca56520b94ee2c21",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=86b763ce14425cc51947", "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=fafa9f673208f0b861d6",
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=22ed25d12fde931a6384", "/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=075ff381293e1a20d167",
"/chunks/app-billings.js": "/chunks/app-billings.js?id=6f98598d588c394bbaf6", "/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=fd6936cca8f3b8b4de9a",
"/chunks/app-email.js": "/chunks/app-email.js?id=74dfa50e070b752372de", "/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=44b987551c03b18b4ca7",
"/chunks/app-index.js": "/chunks/app-index.js?id=03834d79455e3e9f6c72", "/chunks/app-billings.js": "/chunks/app-billings.js?id=2aaaa47239358f21ae3b",
"/chunks/app-language.js": "/chunks/app-language.js?id=e5ab59656bb2c1aaefa5", "/chunks/app-email.js": "/chunks/app-email.js?id=fb4895bc3cb1147a009f",
"/chunks/app-others.js": "/chunks/app-others.js?id=4fdbd34bad92dccaf31a", "/chunks/app-index.js": "/chunks/app-index.js?id=934f0c4e3afa1d6085e2",
"/chunks/app-payments.js": "/chunks/app-payments.js?id=efece9c92dea88c05578", "/chunks/app-language.js": "/chunks/app-language.js?id=91689fc67cbc81b3701b",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=46aed146ad695e6530b7", "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=1c3fefab1daa3f807f15",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=ab0d2bd0a378d29f10b4", "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~0d12a0aa.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~0d12a0aa.js?id=4b583e0677bf48a81557",
"/chunks/billings-detail.js": "/chunks/billings-detail.js?id=2cfda34a5cbcfa80b125", "/chunks/app-others.js": "/chunks/app-others.js?id=ad84d8d637cedb14ce81",
"/chunks/contact-us.js": "/chunks/contact-us.js?id=9ccd4c02178f4b6e7278", "/chunks/app-payments.js": "/chunks/app-payments.js?id=c9e8129dade16a2a347c",
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=7ad3557be542c00d77fd", "/chunks/app-settings.js": "/chunks/app-settings.js?id=049741bb0d8712c772dd",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=ae19be8c8bc403c815f3", "/chunks/app-setup.js": "/chunks/app-setup.js?id=6a7724d6920f181311ed",
"/chunks/database.js": "/chunks/database.js?id=ffc140d6a6ea7963cd40", "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=17649af88aea4624b7fe",
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=8b23935ea7aa9730902a", "/chunks/contact-us.js": "/chunks/contact-us.js?id=391de80c15895ae56421",
"/chunks/email-verified.js": "/chunks/email-verified.js?id=bd5e569c62dc884f4a87", "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=a964545445eef7615f9f",
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=b78dc7d4a781b8ce1e6b", "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=9257ac3b9281c38c469f",
"/chunks/files.js": "/chunks/files.js?id=9a658936883b34ee484a", "/chunks/dashboard.js": "/chunks/dashboard.js?id=941a981972a5f13723f6",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=5af9e720ce6b3a566d17", "/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=55b9119cb98263cc3677",
"/chunks/homepage.js": "/chunks/homepage.js?id=b4f57d89ed27bc70b335", "/chunks/database.js": "/chunks/database.js?id=66b9b203e8037696ef04",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=fca5d397ce7e81d2388f", "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1141f8e183483da82e8a",
"/chunks/invoices.js": "/chunks/invoices.js?id=9c9facbd02511ca391de", "/chunks/email-verified.js": "/chunks/email-verified.js?id=b80cafb3a468e55c45eb",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=1bfdb163e64dd0103e6c", "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a8126df285a75a0fc27e",
"/chunks/pages.js": "/chunks/pages.js?id=929b8c99895129e7765b", "/chunks/files.js": "/chunks/files.js?id=54c6dddb471986e202f3",
"/chunks/plan.js": "/chunks/plan.js?id=c04980a769c53eac9702", "/chunks/files~chunks/platform~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.js?id=9309e2d3ab4df7612d1a",
"/chunks/plan-create.js": "/chunks/plan-create.js?id=a4b5a191f52028490d20", "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=8a06b7d864acff647f8c",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=82741fb5261f08150514", "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js?id=0de0b81edf0bb5d4617d",
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=eb631dd60eda973ddad4", "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js?id=c5ec9502bcfad35c502e",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=24aa1d29e50b816ad886", "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=5c31a056cb557ade51c2",
"/chunks/plans.js": "/chunks/plans.js?id=974287b8ed7b22ca9d9d", "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js?id=ad09e3f973e4db0411f1",
"/chunks/platform.js": "/chunks/platform.js?id=7db1002700c23a934dd8", "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=8871529af0da8193d3a3",
"/chunks/profile.js": "/chunks/profile.js?id=1abb937525ea9941f58d", "/chunks/homepage.js": "/chunks/homepage.js?id=d29b9f09d08d673dff75",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=3c4c7dfede2f235b459a", "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=32bcc49a5d750d274510",
"/chunks/settings.js": "/chunks/settings.js?id=734e5db74f384924e699", "/chunks/invoices.js": "/chunks/invoices.js?id=35644a6bac5a727163fa",
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=2299c2992957c6e40719", "/chunks/not-found.js": "/chunks/not-found.js?id=a45c8ddab87d7bce723a",
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=45a74cda818069e5b06b", "/chunks/page-edit.js": "/chunks/page-edit.js?id=420790a0c44680471a6f",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=ed1689c797ac4ac30444", "/chunks/pages.js": "/chunks/pages.js?id=e9f065a730c290bbc466",
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=c9cb709ac5bec8a657c6", "/chunks/plan.js": "/chunks/plan.js?id=b4cfa98dcd72d0daf2b1",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=2c8487ac06bb589aa5b7", "/chunks/plan-create.js": "/chunks/plan-create.js?id=9e9f90ad223f83921e16",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=f8796db5378f62399f23", "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=df66472f7a9121f95e71",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=d60972a2216523642850", "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=146515010333316075d6",
"/chunks/shared.js": "/chunks/shared.js?id=0c7a3d4f575dbf4f21b0", "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=320263fdc9aef3a3be60",
"/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=86820a408438c3513b20", "/chunks/plans.js": "/chunks/plans.js?id=0533e61243eeb87b3e8e",
"/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=72b0747c31534d3235e3", "/chunks/platform.js": "/chunks/platform.js?id=721cb528aaff1d69d58f",
"/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=03fb36b0d38a3218221f", "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=e5dcf772403613fce36c",
"/chunks/sign-in.js": "/chunks/sign-in.js?id=c0cee9fd1b07d47a5645", "/chunks/profile.js": "/chunks/profile.js?id=7186e04a6f0f5b6bf470",
"/chunks/sign-up.js": "/chunks/sign-up.js?id=fba111e00801bb09ab4f", "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca",
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=08b7d59384397b00aedf", "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=c1dfb8aa154ec2606b96",
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=1ecd54723469b1976017", "/chunks/settings.js": "/chunks/settings.js?id=f7a9fd53ae30638964c2",
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=3e480de6985a816bca2f", "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=8d9c0e1f7c851ba47162",
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=c86dc4d2baa0347eb760", "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=85aebd3caecf9e1fa467",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=dae14e5e76e0b93e6a73", "/chunks/settings-password.js": "/chunks/settings-password.js?id=5df9d33dca4d54165b4f",
"/chunks/user.js": "/chunks/user.js?id=91c3e68c04873712f235", "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=9f4049d97664766feccb",
"/chunks/user-create.js": "/chunks/user-create.js?id=cbe7a7de7f1f0b7900f2", "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=b8b143cad82b81253e4f",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=dc708437ba1e5ebc0a0d", "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=11827a0027b9b7d8462a",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=12c84179aaa9cebcb255", "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=680f99e2021f19ff1af8",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=777a07bc5ec4f185477e", "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=41d3478184ec24644a1c",
"/chunks/user-password.js": "/chunks/user-password.js?id=3214eb9dadcbeb1e685f", "/chunks/shared.js": "/chunks/shared.js?id=7524b7a783d4aed23794",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=92037267138bb75304ec", "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=888919dfd3b48bf68608",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=9a9e247c61190a3ef745", "/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=0f6c34512740fca7e007",
"/chunks/users.js": "/chunks/users.js?id=9d3aef23a49ec78dfef0" "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=7886247bb35deada28a2",
"/chunks/sign-in.js": "/chunks/sign-in.js?id=6e5c9d01fd2214d21de2",
"/chunks/sign-up.js": "/chunks/sign-up.js?id=0838eae8d5c33f41789c",
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=44fa05ad44bfab4e49fe",
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=40de10e72a76725855e2",
"/chunks/subscription-service.js": "/chunks/subscription-service.js?id=77d76e7342a0f3538488",
"/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=5a2a439ba83326bf66d4",
"/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=a1b8f21b2af3ac5972cb",
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=8cb10fc2721ecdcb4cf7",
"/chunks/user.js": "/chunks/user.js?id=fcaa01ba6ce8844132f0",
"/chunks/user-create.js": "/chunks/user-create.js?id=8bde87c67f5d0012dc34",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=d71abbc37b8eef88fe0a",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=dd8e5ca087058f9cec96",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=eb7559b64aa9b3eef405",
"/chunks/user-password.js": "/chunks/user-password.js?id=0b6aedd9265f71ba2c8e",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=2ec04730d677842c8d10",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=fc7ddaca95c26ec5c217",
"/chunks/users.js": "/chunks/users.js?id=720f418eef0585bdb419",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~6c99cc74.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~6c99cc74.js?id=0a6998f62a162c08a48f",
"/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~cfac0ed6.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~cfac0ed6.js?id=f66c7653a087fe1f3320",
"/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js": "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js?id=9d10953d3b088324dfe3",
"/vendors~chunks/platform~chunks/shared.js": "/vendors~chunks/platform~chunks/shared.js?id=7d09e0b0658e140a7ffa",
"/chunks/platform~chunks/shared.a5a4d394b82bd71b661a.hot-update.js": "/chunks/platform~chunks/shared.a5a4d394b82bd71b661a.hot-update.js",
"/chunks/files~chunks/shared/file-browser.8f990932e028dd281ee1.hot-update.js": "/chunks/files~chunks/shared/file-browser.8f990932e028dd281ee1.hot-update.js",
"/chunks/files~chunks/shared/file-browser.273d9f27ceb8d0ad2d0e.hot-update.js": "/chunks/files~chunks/shared/file-browser.273d9f27ceb8d0ad2d0e.hot-update.js",
"/chunks/files~chunks/shared/file-browser.ed004a5c3c900349a0c0.hot-update.js": "/chunks/files~chunks/shared/file-browser.ed004a5c3c900349a0c0.hot-update.js",
"/chunks/sign-in.28c8c3a1175cc61489e8.hot-update.js": "/chunks/sign-in.28c8c3a1175cc61489e8.hot-update.js",
"/chunks/sign-in.ab0f9d07b89677eada20.hot-update.js": "/chunks/sign-in.ab0f9d07b89677eada20.hot-update.js"
} }
resources/js/App.vue
+34 -2
View File
@@ -22,6 +22,7 @@ import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
import Spinner from '@/components/FilesView/Spinner' import Spinner from '@/components/FilesView/Spinner'
import Vignette from '@/components/Others/Vignette' import Vignette from '@/components/Others/Vignette'
import Alert from '@/components/FilesView/Alert' import Alert from '@/components/FilesView/Alert'
import {mapGetters} from 'vuex'
import {events} from './bus' import {events} from './bus'
export default { export default {
@@ -38,13 +39,44 @@ export default {
isLoaded: false isLoaded: false
} }
}, },
computed: {
...mapGetters([
'isDarkMode'
]),
},
watch: {
isDarkMode() {
this.toggleDarkMode()
}
},
methods: { methods: {
unClick() { unClick() {
events.$emit('unClick') events.$emit('unClick')
} },
toggleDarkMode() {
const webApp = document.getElementsByTagName("html")[0];
webApp.classList.toggle("dark-mode");
}
}, },
beforeMount() { beforeMount() {
// Set dark/light mode by user settings
if (localStorage.hasOwnProperty('is_dark_mode')) {
if (this.isDarkMode) this.toggleDarkMode()
}
// Proceed dark/light mode by system settings
if (! localStorage.hasOwnProperty('is_dark_mode')) {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
// Set up initial dark/light mode on app loading
if (prefersDarkScheme.matches) this.toggleDarkMode()
// Watch for dark/light mode changes on os system layer
prefersDarkScheme.addEventListener('change', () => this.toggleDarkMode());
}
// Get installation state // Get installation state
let installation = this.$root.$data.config.installation let installation = this.$root.$data.config.installation
@@ -126,7 +158,7 @@ export default {
} }
// Dark mode support // Dark mode support
@media (prefers-color-scheme: dark) { .dark-mode {
* { * {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
resources/js/components/Admin/WidgetLatestRegistrations.vue
+1 -1
View File
@@ -113,7 +113,7 @@
@import '@assets/vuefilemanager/_variables'; @import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins'; @import '@assets/vuefilemanager/_mixins';
@media (prefers-color-scheme: dark) { .dark-mode {
} }
</style> </style>
resources/js/components/Admin/WidgetTotals.vue
+2 -2
View File
@@ -5,7 +5,7 @@
</div> </div>
<router-link :to="{name: linkRoute}" class="footer-link"> <router-link :to="{name: linkRoute}" class="footer-link">
<span class="content">{{ linkName }}</span> <span class="content">{{ linkName }}</span>
<chevron-right-icon size="16" class="text-theme"></chevron-right-icon> <chevron-right-icon size="16" class="text-theme dark-text-theme"/>
</router-link> </router-link>
</WidgetWrapper> </WidgetWrapper>
</template> </template>
@@ -65,7 +65,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.widget-value { .widget-value {
span { span {
resources/js/components/Admin/WidgetWrapper.vue
+4 -4
View File
@@ -3,9 +3,9 @@
<div class="widget-content"> <div class="widget-content">
<div class="headline"> <div class="headline">
<div class="icon"> <div class="icon">
<users-icon v-if="icon === 'users'" size="19" class="text-theme"></users-icon> <users-icon v-if="icon === 'users'" size="19" class="text-theme dark-text-theme"/>
<star-icon v-if="icon === 'star'" size="19" class="text-theme"></star-icon> <star-icon v-if="icon === 'star'" size="19" class="text-theme dark-text-theme"/>
<hard-drive-icon v-if="icon === 'hard-drive'" size="19" class="text-theme"></hard-drive-icon> <hard-drive-icon v-if="icon === 'hard-drive'" size="19" class="text-theme dark-text-theme"/>
</div> </div>
<b class="title">{{ title }}</b> <b class="title">{{ title }}</b>
</div> </div>
@@ -58,7 +58,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.widget-content { .widget-content {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/Auth/AuthButton.vue
+1 -1
View File
@@ -88,7 +88,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.button { .button {
&.outline { &.outline {
resources/js/components/Desktop/PopoverItem.vue
+1 -1
View File
@@ -51,7 +51,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.popover-item { .popover-item {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/FilesView/Alert.vue
+1 -1
View File
@@ -167,7 +167,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.popup-wrapper { .popup-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/FilesView/ButtonBase.vue
+1 -1
View File
@@ -104,7 +104,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.button-base { .button-base {
resources/js/components/FilesView/CheckBox.vue
+1 -1
View File
@@ -34,7 +34,7 @@ export default {
background-color: darken($light_background, 5%); background-color: darken($light_background, 5%);
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.is-deactive { .is-deactive {
background-color: lighten($dark_mode_foreground, 10%); background-color: lighten($dark_mode_foreground, 10%);
resources/js/components/FilesView/ContextMenu.vue
+1 -1
View File
@@ -378,7 +378,7 @@ export default {
padding: 0; padding: 0;
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.contextmenu { .contextmenu {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/FilesView/DesktopToolbar.vue
+1 -1
View File
@@ -314,7 +314,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.toolbar .directory-name { .toolbar .directory-name {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
resources/js/components/FilesView/DragUI.vue
+1 -1
View File
@@ -95,7 +95,7 @@ export default {
background: white; background: white;
} }
@media (prefers-color-scheme: dark) { .dark-mode {
#drag-ui { #drag-ui {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/FilesView/EmptyFilePage.vue
+1 -1
View File
@@ -105,7 +105,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.text-content { .text-content {
.title { .title {
resources/js/components/FilesView/EmptyMessage.vue
+1 -1
View File
@@ -48,7 +48,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.empty-message { .empty-message {
.message { .message {
resources/js/components/FilesView/FileActionsMobile.vue
+1 -1
View File
@@ -228,7 +228,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
#mobile-actions-wrapper { #mobile-actions-wrapper {
background: $dark_mode_background; background: $dark_mode_background;
} }
resources/js/components/FilesView/FileItemGrid.vue
+5 -5
View File
@@ -10,7 +10,7 @@
<CheckBox v-if="mobileMultiSelect" :is-clicked="isClicked" class="check-box"/> <CheckBox v-if="mobileMultiSelect" :is-clicked="isClicked" class="check-box"/>
<!--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 text-theme"> <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme dark-text-theme">
{{ item.mimetype }} {{ item.mimetype }}
</span> </span>
@@ -35,12 +35,12 @@
<!--Shared Icon--> <!--Shared Icon-->
<div v-if="$checkPermission('master') && item.shared" class="item-shared"> <div v-if="$checkPermission('master') && item.shared" class="item-shared">
<link-icon size="12" class="shared-icon text-theme" /> <link-icon size="12" class="shared-icon text-theme dark-text-theme" />
</div> </div>
<!--Participant owner Icon--> <!--Participant owner Icon-->
<div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared"> <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
<user-plus-icon size="12" class="shared-icon text-theme" /> <user-plus-icon size="12" class="shared-icon text-theme dark-text-theme" />
</div> </div>
<!--Filesize--> <!--Filesize-->
@@ -54,7 +54,7 @@
</div> </div>
<span @mousedown.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! mobileMultiSelect && canShowMobileOptions"> <span @mousedown.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! mobileMultiSelect && canShowMobileOptions">
<MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme" /> <MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme dark-text-theme" />
</span> </span>
</div> </div>
</div> </div>
@@ -548,7 +548,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.file-wrapper { .file-wrapper {
resources/js/components/FilesView/FileItemList.vue
+5 -5
View File
@@ -16,7 +16,7 @@
<!--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 && !item.thumbnail)" class="file-icon-text text-theme"> <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme dark-text-theme">
{{ item.mimetype | limitCharacters }} {{ item.mimetype | limitCharacters }}
</span> </span>
@@ -39,12 +39,12 @@
<div class="item-info"> <div class="item-info">
<!--Shared Icon--> <!--Shared Icon-->
<div v-if="$checkPermission('master') && item.shared" class="item-shared"> <div v-if="$checkPermission('master') && item.shared" class="item-shared">
<link-icon size="12" class="shared-icon text-theme"></link-icon> <link-icon size="12" class="shared-icon text-theme dark-text-theme"/>
</div> </div>
<!--Participant owner Icon--> <!--Participant owner Icon-->
<div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared"> <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
<user-plus-icon size="12" class="shared-icon text-theme"></user-plus-icon> <user-plus-icon size="12" class="shared-icon text-theme dark-text-theme"/>
</div> </div>
<!--Filesize and timestamp--> <!--Filesize and timestamp-->
@@ -59,7 +59,7 @@
<transition name="slide-from-right"> <transition name="slide-from-right">
<div class="actions" v-if="$isMobile() && ! mobileMultiSelect"> <div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
<span @mousedown.stop="showItemActions" class="show-actions"> <span @mousedown.stop="showItemActions" class="show-actions">
<MoreVerticalIcon size="16" class="icon-action text-theme" /> <MoreVerticalIcon size="16" class="icon-action text-theme dark-text-theme" />
</span> </span>
</div> </div>
</transition> </transition>
@@ -520,7 +520,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.file-wrapper { .file-wrapper {
.icon-item { .icon-item {
resources/js/components/FilesView/FilePreview.vue
+1 -1
View File
@@ -67,7 +67,7 @@
background-color: white; background-color: white;
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.file-preview { .file-preview {
background-color: $dark_mode_background; background-color: $dark_mode_background;
} }
resources/js/components/FilesView/FilePreviewMedia.vue
+1 -1
View File
@@ -377,7 +377,7 @@ export default {
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.navigation-arrows { .navigation-arrows {
.prev, .next { .prev, .next {
resources/js/components/FilesView/FilePreviewToolbar.vue
+1 -1
View File
@@ -339,7 +339,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.navigation-panel { .navigation-panel {
background-color: $dark_mode_background; background-color: $dark_mode_background;
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
resources/js/components/FilesView/FolderIcon.vue
+1 -1
View File
@@ -97,7 +97,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.folder-icon { .folder-icon {
&.is-deleted { &.is-deleted {
resources/js/components/FilesView/ImageMetaData.vue
+1 -1
View File
@@ -129,7 +129,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.meta-data-list { .meta-data-list {
li { li {
resources/js/components/FilesView/MobileActionButton.vue
+1 -1
View File
@@ -93,7 +93,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.mobile-action-button { .mobile-action-button {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/FilesView/MobileActionButtonUpload.vue
+1 -1
View File
@@ -64,7 +64,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.mobile-action-button { .mobile-action-button {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/FilesView/MobileToolbar.vue
+1 -1
View File
@@ -163,7 +163,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.mobile-toolbar { .mobile-toolbar {
background: $dark_mode_background; background: $dark_mode_background;
resources/js/components/FilesView/MultiSelectToolbarMobile.vue
+1 -1
View File
@@ -120,7 +120,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.multiselect-actions { .multiselect-actions {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/FilesView/Option.vue
+1 -1
View File
@@ -180,7 +180,7 @@ import {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.menu-option { .menu-option {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
resources/js/components/FilesView/OptionGroup.vue
+1 -1
View File
@@ -28,7 +28,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.menu-option-group { .menu-option-group {
border-color: $dark_mode_border_color; border-color: $dark_mode_border_color;
} }
resources/js/components/FilesView/ProcessingPopup.vue
+1 -1
View File
@@ -101,7 +101,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.popup-wrapper { .popup-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/FilesView/ProgressBar.vue
+3 -3
View File
@@ -30,16 +30,16 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.progress-bar { .progress-bar {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
} }
@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) { @media only screen and (min-width: 680px) {
.progress-bar { .dark-mode .progress-bar {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
} }
resources/js/components/FilesView/SearchBar.vue
+1 -1
View File
@@ -130,7 +130,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.search-bar { .search-bar {
input { input {
border-color: transparent; border-color: transparent;
resources/js/components/FilesView/TitlePreview.vue
+6 -6
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="icon-wrapper"> <div class="icon-wrapper">
<CheckSquareIcon v-if="icon === 'check-square'" class="icon text-theme" size="21" /> <CheckSquareIcon v-if="icon === 'check-square'" class="icon text-theme dark-text-theme" size="21" />
<image-icon v-if="icon === 'image'" class="icon text-theme" size="21" /> <image-icon v-if="icon === 'image'" class="icon text-theme dark-text-theme" size="21" />
<video-icon v-if="icon === 'video'" class="icon text-theme" size="21" /> <video-icon v-if="icon === 'video'" class="icon text-theme dark-text-theme" size="21" />
<folder-icon v-if="icon === 'folder'" class="icon text-theme" size="21" /> <folder-icon v-if="icon === 'folder'" class="icon text-theme dark-text-theme" size="21" />
<file-icon v-if="icon === 'file'" class="icon text-theme" size="21" /> <file-icon v-if="icon === 'file'" class="icon text-theme dark-text-theme" size="21" />
</div> </div>
<div class="text"> <div class="text">
<span class="title">{{ title }}</span> <span class="title">{{ title }}</span>
@@ -77,7 +77,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.wrapper { .wrapper {
.text { .text {
.title { .title {
resources/js/components/FilesView/ToolbarButton.vue
+1 -1
View File
@@ -109,7 +109,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.button { .button {
background: transparent; background: transparent;
resources/js/components/FilesView/ToolbarButtonUpload.vue
+1 -1
View File
@@ -69,7 +69,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.button { .button {
background: transparent; background: transparent;
resources/js/components/FilesView/UploadProgress.vue
+1 -1
View File
@@ -129,7 +129,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.progress-bar { .progress-bar {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/Index/Components/PricingTables.vue
+1 -1
View File
@@ -149,7 +149,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.plans-wrapper { .plans-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/Index/IndexHeroScreenshot.vue
+1 -1
View File
@@ -206,7 +206,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.hero-screenshot { .hero-screenshot {
resources/js/components/Index/IndexMainFeatures.vue
+1 -1
View File
@@ -176,7 +176,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.features { .features {
resources/js/components/Index/IndexPageFooter.vue
+1 -1
View File
@@ -104,7 +104,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.copyright { .copyright {
color: $dark_mode_text_secondary; color: $dark_mode_text_secondary;
resources/js/components/Mobile/MenuMobile.vue
+1 -1
View File
@@ -84,7 +84,7 @@
position: absolute; position: absolute;
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.options { .options {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/Mobile/MobileHeader.vue
+1 -1
View File
@@ -98,7 +98,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.mobile-header { .mobile-header {
background: $dark_mode_background; background: $dark_mode_background;
resources/js/components/Others/ActionButton.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="action-button"> <div class="action-button">
<x-icon size="12" class="icon text-theme" v-if="icon === 'x'" /> <x-icon size="12" class="icon text-theme dark-text-theme" v-if="icon === 'x'" />
<edit-2-icon size="12" class="icon text-theme" v-if="icon === 'pencil-alt'" /> <edit-2-icon size="12" class="icon text-theme dark-text-theme" v-if="icon === 'pencil-alt'" />
<span class="label"> <span class="label">
<slot></slot> <slot></slot>
</span> </span>
@@ -45,7 +45,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
</style> </style>
resources/js/components/Others/ColorLabel.vue
+1 -1
View File
@@ -48,7 +48,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
</style> </style>
resources/js/components/Others/ColorPicker.vue
+1 -1
View File
@@ -117,7 +117,7 @@ export default {
position: relative; position: relative;
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.color-pick-wrapper { .color-pick-wrapper {
.color-wrapper { .color-wrapper {
.single-color { .single-color {
resources/js/components/Others/CookieDisclaimer.vue
+1 -1
View File
@@ -90,7 +90,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.cookie-wrapper { .cookie-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/Others/CreatePersonaTokenPopup.vue
+1 -1
View File
@@ -126,7 +126,7 @@ export default {
@import "@assets/vuefilemanager/_inapp-forms.scss"; @import "@assets/vuefilemanager/_inapp-forms.scss";
@import '@assets/vuefilemanager/_forms'; @import '@assets/vuefilemanager/_forms';
@media (prefers-color-scheme: dark) { .dark-mode {
.info-box { .info-box {
background: lighten($dark_mode_foreground, 3%); background: lighten($dark_mode_foreground, 3%);
resources/js/components/Others/EmojiPicker.vue
+1 -1
View File
@@ -434,7 +434,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.emoji-wrapper { .emoji-wrapper {
background: lighten($dark_mode_foreground, 2%); background: lighten($dark_mode_foreground, 2%);
resources/js/components/Others/Forms/CopyInput.vue
+1 -1
View File
@@ -140,7 +140,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.copy-input { .copy-input {
border-color: #333333; border-color: #333333;
resources/js/components/Others/Forms/CopyShareLink.vue
+1 -1
View File
@@ -146,7 +146,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.copy-input { .copy-input {
border-color: #333333; border-color: #333333;
resources/js/components/Others/Forms/FormLabel.vue
+5 -5
View File
@@ -1,9 +1,9 @@
<template> <template>
<div class="form-label"> <div class="form-label">
<edit-2-icon v-if="!icon" size="22" class="icon text-theme" /> <edit-2-icon v-if="!icon" size="22" class="icon text-theme dark-text-theme" />
<settings-icon v-if="icon === 'settings'" size="22" class="icon text-theme" /> <settings-icon v-if="icon === 'settings'" size="22" class="icon text-theme dark-text-theme" />
<smartphone-icon v-if="icon === 'smartphone'" size="22" class="icon text-theme" /> <smartphone-icon v-if="icon === 'smartphone'" size="22" class="icon text-theme dark-text-theme" />
<key-icon v-if="icon === 'key'" size="22" class="icon text-theme" /> <key-icon v-if="icon === 'key'" size="22" class="icon text-theme dark-text-theme" />
<b class="label"> <b class="label">
<slot></slot> <slot></slot>
</b> </b>
@@ -53,7 +53,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.form-label { .form-label {
.label { .label {
resources/js/components/Others/Forms/ImageInput.vue
+1 -1
View File
@@ -187,7 +187,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.dropzone { .dropzone {
border-color: rgba(white, 0.2); border-color: rgba(white, 0.2);
resources/js/components/Others/Forms/InfoBox.vue
+1 -1
View File
@@ -82,7 +82,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.info-box { .info-box {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/Others/Forms/MultiEmailInput.vue
+1 -1
View File
@@ -173,7 +173,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.input-wrapper { .input-wrapper {
background: lighten($dark_mode_foreground, 3%); background: lighten($dark_mode_foreground, 3%);
resources/js/components/Others/Forms/SearchInput.vue
+1 -1
View File
@@ -104,7 +104,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.search-bar { .search-bar {
input { input {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/Others/Forms/SelectBoxInput.vue
+1 -1
View File
@@ -80,7 +80,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.select-box { .select-box {
.box-item { .box-item {
resources/js/components/Others/Forms/SelectInput.vue
+1 -1
View File
@@ -235,7 +235,7 @@
transform: translateY(-50px); transform: translateY(-50px);
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.select-search { .select-search {
background: $dark_mode_foreground; background: $dark_mode_foreground;
resources/js/components/Others/Forms/SetupBox.vue
+1 -1
View File
@@ -124,7 +124,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.setup-box { .setup-box {
resources/js/components/Others/Forms/SwitchInput.vue
+1 -1
View File
@@ -90,7 +90,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.switch { .switch {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/Others/ListInfoItem.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<li class="list-info-item"> <li class="list-info-item">
<b class="text-theme">{{ title }}</b> <b class="text-theme dark-text-theme">{{ title }}</b>
<span v-if="content">{{ content }}</span> <span v-if="content">{{ content }}</span>
<slot></slot> <slot></slot>
</li> </li>
@@ -44,7 +44,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.list-info-item { .list-info-item {
span { span {
resources/js/components/Others/Notifications/ToastrItem.vue
+1 -1
View File
@@ -150,7 +150,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.toastr-item { .toastr-item {
&.success, &.danger { &.success, &.danger {
resources/js/components/Others/PageHeader.vue
+1 -1
View File
@@ -71,7 +71,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.page-header { .page-header {
background: $dark_mode_background; background: $dark_mode_background;
resources/js/components/Others/PlanPricingTables.vue
+1 -1
View File
@@ -167,7 +167,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.plan { .plan {
.plan-wrapper { .plan-wrapper {
resources/js/components/Others/Popup/ConfirmPopup.vue
+1 -1
View File
@@ -123,7 +123,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.content { .content {
.title { .title {
resources/js/components/Others/Popup/PopupHeader.vue
+5 -5
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="popup-header"> <div class="popup-header">
<div class="icon"> <div class="icon">
<corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme" /> <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme dark-text-theme" />
<share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme" /> <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme dark-text-theme" />
<edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme" /> <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme dark-text-theme" />
<key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme" /> <key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme dark-text-theme" />
</div> </div>
<div class="label"> <div class="label">
<h1 class="title">{{ title }}</h1> <h1 class="title">{{ title }}</h1>
@@ -97,7 +97,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.popup-header { .popup-header {
.label { .label {
.close-icon { .close-icon {
resources/js/components/Others/Popup/PopupWrapper.vue
+9 -6
View File
@@ -139,16 +139,19 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.popup-wrapper { .popup-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
box-shadow: $dark_mode_popup_shadow; box-shadow: $dark_mode_popup_shadow;
} }
} }
@media (prefers-color-scheme: dark) and (max-width: 690px) { @media only screen and (max-width: 690px) {
.popup-wrapper {
background: $dark_mode_background; .dark-mode {
} .popup-wrapper {
} background: $dark_mode_background;
}
}
}
</style> </style>
resources/js/components/Others/RenameItemPopup.vue
+1 -1
View File
@@ -185,7 +185,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.close-icon-wrapper { .close-icon-wrapper {
&:hover { &:hover {
resources/js/components/Others/SectionTitle.vue
+1 -1
View File
@@ -26,7 +26,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.text-label { .text-label {
color: $theme; color: $theme;
} }
resources/js/components/Others/StorageItemDetail.vue
+1 -1
View File
@@ -168,7 +168,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.header-storage-item { .header-storage-item {
.type { .type {
resources/js/components/Others/TabWrapper.vue
+5 -5
View File
@@ -4,10 +4,10 @@
<div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i"> <div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i">
<!--Icon--> <!--Icon-->
<mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme" size="17"/> <mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme dark-text-theme" size="17"/>
<link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme" size="17"/> <link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme dark-text-theme" size="17"/>
<smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme" size="17"/> <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme dark-text-theme" size="17"/>
<folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme" size="17"/> <folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme dark-text-theme" size="17"/>
<!--Title--> <!--Title-->
<b class="tab-title"> <b class="tab-title">
@@ -102,7 +102,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.tab-wrapper { .tab-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
border-color: transparent; border-color: transparent;
resources/js/components/Others/Tables/DatatableCellImage.vue
+1 -1
View File
@@ -76,7 +76,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.cell-image-thumbnail { .cell-image-thumbnail {
resources/js/components/Others/Tables/DatatableWrapper.vue
+2 -2
View File
@@ -10,7 +10,7 @@
:class="{ 'sortable': column.sortable }" :class="{ 'sortable': column.sortable }"
v-if="! column.hidden" v-if="! column.hidden"
> >
<span class="text-theme">{{ column.label }}</span> <span class="text-theme dark-text-theme">{{ column.label }}</span>
<chevron-up-icon v-if="column.sortable" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon> <chevron-up-icon v-if="column.sortable" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
</th> </th>
@@ -424,7 +424,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.table { .table {
resources/js/components/Others/TextLabel.vue
+1 -1
View File
@@ -29,7 +29,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.text-label { .text-label {
opacity: 0.35; opacity: 0.35;
} }
resources/js/components/Others/ThumbnailItem.vue
+3 -3
View File
@@ -165,7 +165,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.file-item { .file-item {
.icon-item .file-icon { .icon-item .file-icon {
path { path {
@@ -205,8 +205,8 @@
} }
} }
@media (max-width: 690px) and (prefers-color-scheme: dark) { @media (max-width: 690px) {
.file-item { .dark-mode .file-item {
.icon-item .file-icon { .icon-item .file-icon {
path { path {
fill: $dark_mode_foreground; fill: $dark_mode_foreground;
resources/js/components/Others/TreeMenu.vue
+11 -7
View File
@@ -2,10 +2,10 @@
<!--Folder Icon--> <!--Folder Icon-->
<div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.id === nodes.id || !disableId} "> <div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.id === nodes.id || !disableId} ">
<div class="folder-item text-theme" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent"> <div class="folder-item text-theme dark-text-theme" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon> <chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"/>
<hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon text-theme"></hard-drive-icon> <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon text-theme dark-text-theme"/>
<folder-icon v-if="nodes.location !== 'base'" size="17" class="icon text-theme"></folder-icon> <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon text-theme dark-text-theme"/>
<span class="label">{{ nodes.name }}</span> <span class="label">{{ nodes.name }}</span>
</div> </div>
@@ -150,24 +150,28 @@
.icon { .icon {
path, line, polyline, rect, circle { path, line, polyline, rect, circle {
color: inherit; color: inherit !important;
} }
} }
.label { .label {
color: inherit; color: inherit !important;
} }
} }
} }
// Dark mode // Dark mode
@media (prefers-color-scheme: dark) { .dark-mode {
.folder-item { .folder-item {
.label { .label {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
.is-selected .label {
color: inherit !important;
}
} }
} }
resources/js/components/Others/TreeMenuNavigator.vue
+203 -198
View File
@@ -1,246 +1,251 @@
<template> <template>
<transition name="folder"> <transition name="folder">
<div class="folder-item-wrapper" > <div class="folder-item-wrapper">
<div class="folder-item text-theme" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0 }" <div
:style="indent" @click="getFolder" class="folder-item text-theme dark-text-theme"
@dragover.prevent="dragEnter" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0 }"
@dragleave="dragLeave" :style="indent" @click="getFolder"
@drop="dragFinish()" @dragover.prevent="dragEnter"
@dragleave="dragLeave"
> @drop="dragFinish()"
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" >
:class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon> <chevron-right-icon
<folder-icon size="17" class="icon text-theme"></folder-icon> @click.stop="showTree"
size="17"
class="icon-arrow"
:class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"
/>
<folder-icon size="17" class="icon text-theme dark-text-theme" />
<span class="label">{{ nodes.name }}</span> <span class="label">{{ nodes.name }}</span>
</div> </div>
<TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id"/> <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator' import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons' import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons'
import { mapGetters } from 'vuex' import {mapGetters} from 'vuex'
import {events} from "@/bus" import {events} from "@/bus"
export default { export default {
name: 'TreeMenuNavigator', name: 'TreeMenuNavigator',
props: [ props: [
'nodes', 'depth' , 'disabled', 'nodes', 'depth', 'disabled',
], ],
components: { components: {
TreeMenuNavigator, TreeMenuNavigator,
ChevronRightIcon, ChevronRightIcon,
FolderIcon, FolderIcon,
}, },
computed: { computed: {
...mapGetters(['clipboard']), ...mapGetters(['clipboard']),
disabledFolder() { disabledFolder() {
let disableFolder = false let disableFolder = false
if(this.draggedItem.length > 0) { if (this.draggedItem.length > 0) {
this.draggedItem.forEach(item => { this.draggedItem.forEach(item => {
//Disable the parent of the folder //Disable the parent of the folder
if(item.type === "folder" && this.nodes.id === item.parent_id){ if (item.type === "folder" && this.nodes.id === item.parent_id) {
disableFolder = true disableFolder = true
} }
//Disable the self folder with all children //Disable the self folder with all children
if (this.nodes.id === item.id && item.type === 'folder') { if (this.nodes.id === item.id && item.type === 'folder') {
disableFolder = true disableFolder = true
this.disableChildren = true this.disableChildren = true
} }
if(this.disabled) { if (this.disabled) {
this.disableChildren = true this.disableChildren = true
} }
}) })
}else { } else {
disableFolder = false disableFolder = false
this.disableChildren = false this.disableChildren = false
} }
return disableFolder return disableFolder
}, },
indent() { indent() {
let offset = window.innerWidth <= 1024 ? 17 : 22; let offset = window.innerWidth <= 1024 ? 17 : 22;
let value = this.depth == 0 ? offset : offset + (this.depth * 20); let value = this.depth == 0 ? offset : offset + (this.depth * 20);
return {paddingLeft: value + 'px'} return {paddingLeft: value + 'px'}
}, },
}, },
data() { data() {
return { return {
isVisible: false, isVisible: false,
isSelected: false, isSelected: false,
area:false, area: false,
draggedItem:[], draggedItem: [],
disableChildren:false, disableChildren: false,
} }
}, },
methods: { methods: {
dragFinish() { dragFinish() {
// Move no selected item // Move no selected item
if(!this.clipboard.includes(this.draggedItem[0])) { if (!this.clipboard.includes(this.draggedItem[0])) {
this.$store.dispatch('moveItem', {to_item: this.nodes ,noSelectedItem:this.draggedItem[0]}) this.$store.dispatch('moveItem', {to_item: this.nodes, noSelectedItem: this.draggedItem[0]})
} }
// Move all selected items // Move all selected items
if(this.clipboard.includes(this.draggedItem[0])) { if (this.clipboard.includes(this.draggedItem[0])) {
this.$store.dispatch('moveItem', {to_item: this.nodes ,noSelectedItem:null}) this.$store.dispatch('moveItem', {to_item: this.nodes, noSelectedItem: null})
} }
this.draggedItem = []
this.area = false
events.$emit('drop') this.draggedItem = []
}, this.area = false
dragEnter() {
this.area = true
},
dragLeave() {
this.area = false
},
getFolder() {
events.$emit('show-folder', this.nodes)
// Go to folder events.$emit('drop')
if (this.$isThisLocation('public')) { },
this.$store.dispatch('browseShared', [{ folder: this.nodes, back: false, init: false }]) dragEnter() {
} else { this.area = true
this.$store.dispatch('getFolder', [{ folder: this.nodes, back: false, init: false }]) },
} dragLeave() {
}, this.area = false
showTree() { },
this.isVisible = !this.isVisible getFolder() {
} events.$emit('show-folder', this.nodes)
},
created() {
events.$on('drop' , () => { // Go to folder
this.draggedItem = [] if (this.$isThisLocation('public')) {
}) this.$store.dispatch('browseShared', [{folder: this.nodes, back: false, init: false}])
} else {
this.$store.dispatch('getFolder', [{folder: this.nodes, back: false, init: false}])
}
},
showTree() {
this.isVisible = !this.isVisible
}
},
created() {
//Get dragged item events.$on('drop', () => {
events.$on('dragstart' , (data) => { this.draggedItem = []
//If is dragged item not selected })
if(!this.clipboard.includes(data)) {
this.draggedItem = [data]
}
//If are the dragged items selected
if(this.clipboard.includes(data)) {
this.draggedItem = this.clipboard
}
})
// Select clicked folder //Get dragged item
events.$on('show-folder', node => { events.$on('dragstart', (data) => {
this.isSelected = false //If is dragged item not selected
if (!this.clipboard.includes(data)) {
this.draggedItem = [data]
}
//If are the dragged items selected
if (this.clipboard.includes(data)) {
this.draggedItem = this.clipboard
}
})
if (this.nodes.id == node.id) // Select clicked folder
this.isSelected = true events.$on('show-folder', node => {
}) this.isSelected = false
}
} if (this.nodes.id == node.id)
this.isSelected = true
})
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@assets/vuefilemanager/_variables'; @import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins'; @import '@assets/vuefilemanager/_mixins';
.is-inactive { .is-inactive {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
.is-dragenter { .is-dragenter {
border-radius: 8px; border-radius: 8px;
} }
.folder-item { .folder-item {
display: block; display: block;
padding: 8px 0; padding: 8px 0;
@include transition(150ms); @include transition(150ms);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
border: 2px dashed transparent ; border: 2px dashed transparent;
.icon { .icon {
line-height: 0; line-height: 0;
width: 15px; width: 15px;
margin-right: 9px; margin-right: 9px;
vertical-align: middle; vertical-align: middle;
margin-top: -1px; margin-top: -1px;
path, line, polyline, rect, circle { path, line, polyline, rect, circle {
@include transition(150ms); @include transition(150ms);
} }
} }
.icon-arrow { .icon-arrow {
@include transition(300ms); @include transition(300ms);
margin-right: 4px; margin-right: 4px;
vertical-align: middle; vertical-align: middle;
opacity: 0; opacity: 0;
&.is-visible { &.is-visible {
opacity: 1; opacity: 1;
} }
&.is-opened { &.is-opened {
@include transform(rotate(90deg)); @include transform(rotate(90deg));
} }
} }
.label { .label {
@include transition(150ms); @include transition(150ms);
@include font-size(13); @include font-size(13);
font-weight: 700; font-weight: 700;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
color: $text; color: $text;
max-width: 130px; max-width: 130px;
} }
&:hover, &:hover,
&.is-selected { &.is-selected {
.icon { .icon {
path, line, polyline, rect, circle { path, line, polyline, rect, circle {
color: inherit; color: inherit !important;;
} }
} }
.label { .label {
color: inherit; color: inherit !important;
} }
} }
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.folder-item { .folder-item {
padding: 8px 0; padding: 8px 0;
} }
} }
// Dark mode // Dark mode
@media (prefers-color-scheme: dark) { .dark-mode {
.folder-item { .folder-item {
.label { .label {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
} }
} }
</style> </style>
resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
+1 -1
View File
@@ -192,7 +192,7 @@ export default {
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.codes-list { .codes-list {
li { li {
resources/js/components/Others/UpgradeSidebarBanner.vue
+1 -1
View File
@@ -94,7 +94,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
</style> </style>
resources/js/components/Others/UserAvatar.vue
+1 -1
View File
@@ -67,7 +67,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.user-avatar { .user-avatar {
.notification { .notification {
resources/js/components/Others/Vignette.vue
+1 -1
View File
@@ -59,7 +59,7 @@
} }
// Dark mode // Dark mode
@media (prefers-color-scheme: dark) { .dark-mode {
.vignette { .vignette {
background: $dark_mode_vignette; background: $dark_mode_vignette;
resources/js/components/Sidebar/ContentSidebar.vue
+1 -1
View File
@@ -35,7 +35,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.content-sidebar { .content-sidebar {
background: rgba($dark_mode_foreground, 0.2); background: rgba($dark_mode_foreground, 0.2);
resources/js/components/Sidebar/SidebarNavigation.vue
+37 -8
View File
@@ -10,28 +10,35 @@
<router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home"> <router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home">
<div class="button-icon text-theme"> <div class="button-icon text-theme">
<hard-drive-icon size="19" class="text-theme"></hard-drive-icon> <hard-drive-icon size="19" class="text-theme" />
</div> </div>
</router-link> </router-link>
<router-link :to="{name: 'Profile'}" :class="{'is-active': isUserProfileRoute}" :title="$t('locations.profile')" class="icon-navigation-item settings"> <router-link :to="{name: 'Profile'}" :class="{'is-active': isUserProfileRoute}" :title="$t('locations.profile')" class="icon-navigation-item settings">
<div class="button-icon"> <div class="button-icon">
<user-icon size="19"></user-icon> <user-icon size="19" />
</div> </div>
</router-link> </router-link>
<router-link v-if="user.data.attributes.role === 'admin'" :to="{name: 'Dashboard'}" :class="{'is-active': $isThisRoute($route, adminRoutes)}" :title="$t('locations.settings')" class="icon-navigation-item users"> <router-link v-if="user.data.attributes.role === 'admin'" :to="{name: 'Dashboard'}" :class="{'is-active': $isThisRoute($route, adminRoutes)}" :title="$t('locations.settings')" class="icon-navigation-item users">
<div class="button-icon"> <div class="button-icon">
<settings-icon size="19"></settings-icon> <settings-icon size="19" />
</div> </div>
</router-link> </router-link>
<a @click="toggleDarkMode" :title="$t('dark_mode_toggle')" class="icon-navigation-item dark-mode-switcher">
<div class="button-icon">
<sun-icon v-if="isDarkMode" size="19" />
<moon-icon v-if="! isDarkMode" size="19" />
</div>
</a>
</div> </div>
<!--Logout--> <!--Logout-->
<ul class="icon-navigation logout"> <ul class="icon-navigation logout">
<li @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="icon-navigation-item"> <li @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="icon-navigation-item">
<div class="button-icon"> <div class="button-icon">
<power-icon size="19"></power-icon> <power-icon size="19" />
</div> </div>
</li> </li>
</ul> </ul>
@@ -42,6 +49,8 @@
import UserAvatar from '@/components/Others/UserAvatar' import UserAvatar from '@/components/Others/UserAvatar'
import {mapGetters} from 'vuex' import {mapGetters} from 'vuex'
import { import {
MoonIcon,
SunIcon,
HardDriveIcon, HardDriveIcon,
SettingsIcon, SettingsIcon,
Trash2Icon, Trash2Icon,
@@ -60,9 +69,14 @@
PowerIcon, PowerIcon,
ShareIcon, ShareIcon,
UserIcon, UserIcon,
MoonIcon,
SunIcon,
}, },
computed: { computed: {
...mapGetters(['user']), ...mapGetters([
'user',
'isDarkMode'
]),
isUserProfileRoute() { isUserProfileRoute() {
return this.$isThisRoute(this.$route, ['Profile', 'Password', 'Storage', 'Invoice', 'Subscription', 'PaymentMethods']) return this.$isThisRoute(this.$route, ['Profile', 'Password', 'Storage', 'Invoice', 'Subscription', 'PaymentMethods'])
} }
@@ -98,9 +112,14 @@
'Plans', 'Plans',
'Users', 'Users',
'User', 'User',
] ],
} }
}, },
methods: {
toggleDarkMode() {
this.$store.dispatch('toggleDarkMode', !this.isDarkMode)
}
},
mounted() { mounted() {
this.$store.dispatch('getAppData') this.$store.dispatch('getAppData')
} }
@@ -111,6 +130,12 @@
@import '@assets/vuefilemanager/_variables'; @import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins'; @import '@assets/vuefilemanager/_mixins';
.dark-mode-switcher {
padding-top: 20px;
border-top: 1px solid darken($light_mode_border, 7%);
margin: 20px 15px 0;
}
.menu-bar { .menu-bar {
background: $light_background; background: $light_background;
user-select: none; user-select: none;
@@ -224,13 +249,17 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.dark-mode-switcher {
border-color:lighten($dark_mode_foreground, 2%);
}
.icon-navigation { .icon-navigation {
.button-icon { .button-icon {
&:hover { &:hover {
background: $dark_mode_background; background: #22262b;
} }
} }
} }
resources/js/store/modules/app.js
Vendored
+13 -1
View File
@@ -1,8 +1,8 @@
import i18n from '@/i18n/index' import i18n from '@/i18n/index'
import axios from "axios"; import axios from "axios";
import Vue from "vue";
const defaultState = { const defaultState = {
darkMode: localStorage.getItem('is_dark_mode') === 'true' || false,
isVisibleSidebar: localStorage.getItem('file_info_visibility') === 'true' || false, isVisibleSidebar: localStorage.getItem('file_info_visibility') === 'true' || false,
FilePreviewType: localStorage.getItem('preview_type') || 'list', FilePreviewType: localStorage.getItem('preview_type') || 'list',
config: undefined, config: undefined,
@@ -969,6 +969,14 @@ const defaultState = {
] ]
} }
const actions = { const actions = {
toggleDarkMode: ({commit}, visibility) => {
// Store dark mode into localStorage
localStorage.setItem('is_dark_mode', visibility)
// Change preview
commit('TOGGLE_DARK_MODE', visibility)
},
changePreviewType: ({commit, state}, preview) => { changePreviewType: ({commit, state}, preview) => {
// Get preview type // Get preview type
@@ -1038,6 +1046,9 @@ const mutations = {
CHANGE_PREVIEW(state, type) { CHANGE_PREVIEW(state, type) {
state.FilePreviewType = type state.FilePreviewType = type
}, },
TOGGLE_DARK_MODE(state, visibility) {
state.darkMode = visibility
},
STORE_REQUESTED_PLAN(state, plan) { STORE_REQUESTED_PLAN(state, plan) {
state.requestedPlan = plan state.requestedPlan = plan
}, },
@@ -1057,6 +1068,7 @@ const getters = {
emojis: state => state.emojis, emojis: state => state.emojis,
index: state => state.index, index: state => state.index,
roles: state => state.roles, roles: state => state.roles,
isDarkMode: state => state.darkMode,
sorting: (state) => { sorting: (state) => {
return {sorting: state.sorting, URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort} return {sorting: state.sorting, URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort}
}, },
resources/js/views/Admin/AppSettings/AppSettings.vue
+1 -1
View File
@@ -13,7 +13,7 @@
<div class="icon text-theme"> <div class="icon text-theme">
<settings-icon size="17" /> <settings-icon size="17" />
</div> </div>
<div class="label text-theme"> <div class="label text-theme ">
{{ $t('admin_settings.tabs.others') }} {{ $t('admin_settings.tabs.others') }}
</div> </div>
</router-link> </router-link>
resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+1 -1
View File
@@ -156,7 +156,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
+1 -1
View File
@@ -170,7 +170,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+1 -1
View File
@@ -172,7 +172,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
resources/js/views/Admin/Dashboard.vue
+3 -3
View File
@@ -24,9 +24,9 @@
</a> </a>
<a href="https://bit.ly/VueFileManager-survey" target="_blank" class="became-backer bg-theme-100"> <a href="https://bit.ly/VueFileManager-survey" target="_blank" class="became-backer bg-theme-100">
<div class="icon"> <div class="icon">
<credit-card-icon size="15" class="text-theme"></credit-card-icon> <credit-card-icon size="15" class="text-theme dark-text-theme"/>
</div> </div>
<span class="content text-theme"> <span class="content text-theme dark-text-theme">
{{ $t('admin_page_dashboard.backer_button') }} {{ $t('admin_page_dashboard.backer_button') }}
</span> </span>
</a> </a>
@@ -271,7 +271,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.metadata { .metadata {
resources/js/views/Admin/Invoices.vue
+1 -1
View File
@@ -229,7 +229,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.table-tools { .table-tools {
background: $dark_mode_background; background: $dark_mode_background;
resources/js/views/Admin/Languages/Language.vue
+1 -1
View File
@@ -449,7 +449,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.search-bar-wrapper { .search-bar-wrapper {
background: $dark_mode_background; background: $dark_mode_background;
resources/js/views/Admin/Pages.vue
+1 -1
View File
@@ -139,7 +139,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.table-tools { .table-tools {
background: $dark_mode_background; background: $dark_mode_background;
resources/js/views/Admin/Plans.vue
+1 -1
View File
@@ -220,7 +220,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.table-tools { .table-tools {
background: $dark_mode_background; background: $dark_mode_background;
resources/js/views/Admin/Plans/Plan.vue
+1 -1
View File
@@ -123,7 +123,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.user-thumbnail { .user-thumbnail {
.info { .info {
resources/js/views/Admin/Users.vue
+1 -1
View File
@@ -207,7 +207,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.table-tools { .table-tools {
background: $dark_mode_background; background: $dark_mode_background;
resources/js/views/Admin/Users/User.vue
+1 -1
View File
@@ -193,7 +193,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.user-thumbnail { .user-thumbnail {
.info { .info {
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+1 -1
View File
@@ -233,7 +233,7 @@
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
resources/js/views/Frontpage/ContactUs.vue
+1 -1
View File
@@ -151,7 +151,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
resources/js/views/Frontpage/DynamicPage.vue
+1 -1
View File
@@ -86,7 +86,7 @@
} }
} }
@media (prefers-color-scheme: dark) { .dark-mode {
} }
resources/js/views/Profile.vue
+1 -1
View File
@@ -253,7 +253,7 @@
margin-top: -15px; margin-top: -15px;
} }
@media (prefers-color-scheme: dark) { .dark-mode {
.user-thumbnail { .user-thumbnail {
.info { .info {

Some files were not shown because too many files have changed in this diff Show More