language editor refactoring

This commit is contained in:
Čarodej
2021-11-23 08:01:43 +01:00
parent 0ad8afcfe2
commit 78541c1c3c
8 changed files with 236 additions and 393 deletions
+96 -6
View File
@@ -2,7 +2,7 @@
"/js/main.js": "/js/main.js",
"/css/app.css": "/css/app.css",
"/css/tailwind.css": "/css/tailwind.css",
"/chunks/admin.js": "/chunks/admin.js?id=502b35ba2ca5eb8b5dcc",
"/chunks/admin.js": "/chunks/admin.js?id=5b0c074ed63a8a36f3da",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=55f9b983b9aa60c21a62",
"/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=2d52fc8e939196f7ff16",
"/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=1d731f1c4a9daecb2a99",
@@ -21,7 +21,7 @@
"/chunks/app-billings.js": "/chunks/app-billings.js?id=b929de231c24d2e82389",
"/chunks/app-email.js": "/chunks/app-email.js?id=c0b15222a239b25c24e9",
"/chunks/app-index.js": "/chunks/app-index.js?id=6c55fe0a70ae4080ae1c",
"/chunks/app-language.js": "/chunks/app-language.js?id=91e1d30bf7a3c7a54136",
"/chunks/app-language.js": "/chunks/app-language.js?id=00c6bdc16f52d5df6ef8",
"/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=38b2085e829a84df0e5f",
"/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5",
"/chunks/app-others.js": "/chunks/app-others.js?id=9c049ba80e8a889146be",
@@ -50,7 +50,7 @@
"/chunks/invoices.js": "/chunks/invoices.js?id=dde37879c074c8bf91b1",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
"/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=725b13827e6e55f2d286",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=e6d84410fcb6c94d0ad7",
"/chunks/pages.js": "/chunks/pages.js?id=10510081613e26cb3d84",
"/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
"/chunks/plan-create.js": "/chunks/plan-create.js?id=72e4ef277bb881d5cadf",
@@ -94,10 +94,10 @@
"/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
"/chunks/user.js": "/chunks/user.js?id=5c5421f40243bcba9c23",
"/chunks/user-create.js": "/chunks/user-create.js?id=0f1bce798ff38795cc9a",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=0559dd74a7d8e4b8afbc",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=0c8b02ca42410202543f",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=03bfe48eb0673efa5001",
"/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97",
"/chunks/user-password.js": "/chunks/user-password.js?id=bc9388e177e8e8e7601a",
"/chunks/user-password.js": "/chunks/user-password.js?id=ce6c12a5b038f5481bd1",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=bb30538ad15465e45248",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=370b3df08b2ee39bf6ac",
"/chunks/users.js": "/chunks/users.js?id=bd78d2a3c0c6253da984",
@@ -737,5 +737,95 @@
"/chunks/app-email.ef13b40e7b033b5b30f6.hot-update.js": "/chunks/app-email.ef13b40e7b033b5b30f6.hot-update.js",
"/chunks/app-email.efb96547f2fb7485f00a.hot-update.js": "/chunks/app-email.efb96547f2fb7485f00a.hot-update.js",
"/chunks/app-payments.e26c17b73a3347c18e4b.hot-update.js": "/chunks/app-payments.e26c17b73a3347c18e4b.hot-update.js",
"/chunks/app-email.123b5b086a465d1dbb5e.hot-update.js": "/chunks/app-email.123b5b086a465d1dbb5e.hot-update.js"
"/chunks/app-email.123b5b086a465d1dbb5e.hot-update.js": "/chunks/app-email.123b5b086a465d1dbb5e.hot-update.js",
"/chunks/user-password.b23a4cba2ea0b86216e3.hot-update.js": "/chunks/user-password.b23a4cba2ea0b86216e3.hot-update.js",
"/chunks/user-delete.4a165f934c6a4b0e2a42.hot-update.js": "/chunks/user-delete.4a165f934c6a4b0e2a42.hot-update.js",
"/chunks/user-delete.86080a0a27165ee409a6.hot-update.js": "/chunks/user-delete.86080a0a27165ee409a6.hot-update.js",
"/chunks/user-password.7e1558ed36eb54bd0aae.hot-update.js": "/chunks/user-password.7e1558ed36eb54bd0aae.hot-update.js",
"/chunks/page-edit.d40ffbc955b9cc595f87.hot-update.js": "/chunks/page-edit.d40ffbc955b9cc595f87.hot-update.js",
"/chunks/page-edit.0b6e545cfb0c7c21913e.hot-update.js": "/chunks/page-edit.0b6e545cfb0c7c21913e.hot-update.js",
"/chunks/app-language.4c087eb4dcb914efec0b.hot-update.js": "/chunks/app-language.4c087eb4dcb914efec0b.hot-update.js",
"/chunks/app-language.832d286739f33fde9bc0.hot-update.js": "/chunks/app-language.832d286739f33fde9bc0.hot-update.js",
"/chunks/app-language.cc569bfb5b73b46f4ff4.hot-update.js": "/chunks/app-language.cc569bfb5b73b46f4ff4.hot-update.js",
"/chunks/app-language.defb1c641305615afc80.hot-update.js": "/chunks/app-language.defb1c641305615afc80.hot-update.js",
"/chunks/app-language.277f5b00eae8b148a329.hot-update.js": "/chunks/app-language.277f5b00eae8b148a329.hot-update.js",
"/chunks/app-language.6f72ea1bf7a985c1eea4.hot-update.js": "/chunks/app-language.6f72ea1bf7a985c1eea4.hot-update.js",
"/chunks/app-language.45570018621584ab2882.hot-update.js": "/chunks/app-language.45570018621584ab2882.hot-update.js",
"/chunks/app-language.c5dc28b2698fc2686e72.hot-update.js": "/chunks/app-language.c5dc28b2698fc2686e72.hot-update.js",
"/chunks/app-language.4e625263cbeb613b1a60.hot-update.js": "/chunks/app-language.4e625263cbeb613b1a60.hot-update.js",
"/chunks/app-language.9b0a1d04601eaa045f7a.hot-update.js": "/chunks/app-language.9b0a1d04601eaa045f7a.hot-update.js",
"/chunks/app-language.0666916cfd7bfd927391.hot-update.js": "/chunks/app-language.0666916cfd7bfd927391.hot-update.js",
"/chunks/app-language.997e75ca5f900312f8a3.hot-update.js": "/chunks/app-language.997e75ca5f900312f8a3.hot-update.js",
"/chunks/app-language.e3ec81ab9436d40defd7.hot-update.js": "/chunks/app-language.e3ec81ab9436d40defd7.hot-update.js",
"/chunks/app-language.32c7e32966142e56d326.hot-update.js": "/chunks/app-language.32c7e32966142e56d326.hot-update.js",
"/chunks/app-language.e9b5f844cdb3ae17f58c.hot-update.js": "/chunks/app-language.e9b5f844cdb3ae17f58c.hot-update.js",
"/chunks/app-language.f1e5b80c6f2488d8d321.hot-update.js": "/chunks/app-language.f1e5b80c6f2488d8d321.hot-update.js",
"/chunks/app-language.d0ee5847263812d09cce.hot-update.js": "/chunks/app-language.d0ee5847263812d09cce.hot-update.js",
"/chunks/app-language.9a1d17aa1174e6649c8e.hot-update.js": "/chunks/app-language.9a1d17aa1174e6649c8e.hot-update.js",
"/chunks/app-language.45d6c7da18ab26aa7a0b.hot-update.js": "/chunks/app-language.45d6c7da18ab26aa7a0b.hot-update.js",
"/chunks/app-language.c68dd8b808d7f408a741.hot-update.js": "/chunks/app-language.c68dd8b808d7f408a741.hot-update.js",
"/chunks/app-language.c2798f1be0d472c019b3.hot-update.js": "/chunks/app-language.c2798f1be0d472c019b3.hot-update.js",
"/chunks/app-language.f68e581d267b30c7461e.hot-update.js": "/chunks/app-language.f68e581d267b30c7461e.hot-update.js",
"/chunks/app-language.62c6f923868ec251f9ef.hot-update.js": "/chunks/app-language.62c6f923868ec251f9ef.hot-update.js",
"/chunks/app-language.142c914cb9fdf6036770.hot-update.js": "/chunks/app-language.142c914cb9fdf6036770.hot-update.js",
"/chunks/app-language.976ed4fbce096a5b0ed5.hot-update.js": "/chunks/app-language.976ed4fbce096a5b0ed5.hot-update.js",
"/chunks/app-language.3cdee02a8166c44d5d49.hot-update.js": "/chunks/app-language.3cdee02a8166c44d5d49.hot-update.js",
"/chunks/app-language.91bfabcd38bf73160c02.hot-update.js": "/chunks/app-language.91bfabcd38bf73160c02.hot-update.js",
"/chunks/app-language.e88f1e01d45021a5bd11.hot-update.js": "/chunks/app-language.e88f1e01d45021a5bd11.hot-update.js",
"/chunks/app-language.13f03b93f73ae977de6d.hot-update.js": "/chunks/app-language.13f03b93f73ae977de6d.hot-update.js",
"/chunks/app-language.25b3e9aac26559a333e7.hot-update.js": "/chunks/app-language.25b3e9aac26559a333e7.hot-update.js",
"/chunks/app-language.b3510c5bec3988acc154.hot-update.js": "/chunks/app-language.b3510c5bec3988acc154.hot-update.js",
"/chunks/app-language.ff50cd899365a5a66863.hot-update.js": "/chunks/app-language.ff50cd899365a5a66863.hot-update.js",
"/chunks/app-language.acab0a36360d634095ff.hot-update.js": "/chunks/app-language.acab0a36360d634095ff.hot-update.js",
"/chunks/app-language.cb7cf0f63919d01b63d9.hot-update.js": "/chunks/app-language.cb7cf0f63919d01b63d9.hot-update.js",
"/chunks/app-language.c2ac270ef3fc8510f1d9.hot-update.js": "/chunks/app-language.c2ac270ef3fc8510f1d9.hot-update.js",
"/chunks/app-language.36d323d1a99ddb7d3d74.hot-update.js": "/chunks/app-language.36d323d1a99ddb7d3d74.hot-update.js",
"/chunks/app-language.0b96ce238a6b76c33e70.hot-update.js": "/chunks/app-language.0b96ce238a6b76c33e70.hot-update.js",
"/chunks/app-language.d3c3c8629b5ba5af63ca.hot-update.js": "/chunks/app-language.d3c3c8629b5ba5af63ca.hot-update.js",
"/chunks/app-language.fe51b7a4264dac9bf070.hot-update.js": "/chunks/app-language.fe51b7a4264dac9bf070.hot-update.js",
"/chunks/app-language.37b6466dbd3d979c0b05.hot-update.js": "/chunks/app-language.37b6466dbd3d979c0b05.hot-update.js",
"/chunks/app-language.6a7100a817e62d59e095.hot-update.js": "/chunks/app-language.6a7100a817e62d59e095.hot-update.js",
"/chunks/app-language.dd469add2506e9970a77.hot-update.js": "/chunks/app-language.dd469add2506e9970a77.hot-update.js",
"/chunks/app-language.d7047232b7f7cbfa8975.hot-update.js": "/chunks/app-language.d7047232b7f7cbfa8975.hot-update.js",
"/chunks/app-language.5857ecded95f04c0b53e.hot-update.js": "/chunks/app-language.5857ecded95f04c0b53e.hot-update.js",
"/chunks/app-language.8cd4c69a02f4887d84f0.hot-update.js": "/chunks/app-language.8cd4c69a02f4887d84f0.hot-update.js",
"/chunks/app-language.3b1281ace759e10f22d7.hot-update.js": "/chunks/app-language.3b1281ace759e10f22d7.hot-update.js",
"/chunks/app-language.56bac2545f9d12b7480d.hot-update.js": "/chunks/app-language.56bac2545f9d12b7480d.hot-update.js",
"/chunks/app-language.7d13727edc1b9f98430d.hot-update.js": "/chunks/app-language.7d13727edc1b9f98430d.hot-update.js",
"/chunks/app-language.d8ee1f4c45919799e1bf.hot-update.js": "/chunks/app-language.d8ee1f4c45919799e1bf.hot-update.js",
"/chunks/app-language.0152d2f6e129c299b9d8.hot-update.js": "/chunks/app-language.0152d2f6e129c299b9d8.hot-update.js",
"/chunks/app-language.4f2314f1513eb6220ec6.hot-update.js": "/chunks/app-language.4f2314f1513eb6220ec6.hot-update.js",
"/chunks/app-language.dcfd44ff275e790159f0.hot-update.js": "/chunks/app-language.dcfd44ff275e790159f0.hot-update.js",
"/chunks/app-language.02fd3c9ac2e761f5c53f.hot-update.js": "/chunks/app-language.02fd3c9ac2e761f5c53f.hot-update.js",
"/chunks/app-language.49cdf0e1a0d82cfbfddc.hot-update.js": "/chunks/app-language.49cdf0e1a0d82cfbfddc.hot-update.js",
"/chunks/app-language.c836212958df92ece35f.hot-update.js": "/chunks/app-language.c836212958df92ece35f.hot-update.js",
"/chunks/app-language.7554dc99fa294135fc0f.hot-update.js": "/chunks/app-language.7554dc99fa294135fc0f.hot-update.js",
"/chunks/app-language.17731e046a7876ce7baf.hot-update.js": "/chunks/app-language.17731e046a7876ce7baf.hot-update.js",
"/chunks/app-language.867b3e90fcf55926fe46.hot-update.js": "/chunks/app-language.867b3e90fcf55926fe46.hot-update.js",
"/chunks/app-language.59596b4a660d7c338688.hot-update.js": "/chunks/app-language.59596b4a660d7c338688.hot-update.js",
"/chunks/app-language.5bc7960050ae5a76d29f.hot-update.js": "/chunks/app-language.5bc7960050ae5a76d29f.hot-update.js",
"/chunks/app-language.5f22a50d8142fb623749.hot-update.js": "/chunks/app-language.5f22a50d8142fb623749.hot-update.js",
"/chunks/app-language.748837986d01031e3c8c.hot-update.js": "/chunks/app-language.748837986d01031e3c8c.hot-update.js",
"/chunks/admin.561fee6ec90c3d9974e5.hot-update.js": "/chunks/admin.561fee6ec90c3d9974e5.hot-update.js",
"/chunks/admin.3457967301d6509aa901.hot-update.js": "/chunks/admin.3457967301d6509aa901.hot-update.js",
"/chunks/admin.e122c4fc6ceda066f44d.hot-update.js": "/chunks/admin.e122c4fc6ceda066f44d.hot-update.js",
"/chunks/app-language.69d53ed06bdbdffcd331.hot-update.js": "/chunks/app-language.69d53ed06bdbdffcd331.hot-update.js",
"/chunks/app-language.bb6a4929a2e2c135bb2b.hot-update.js": "/chunks/app-language.bb6a4929a2e2c135bb2b.hot-update.js",
"/chunks/app-language.b208d83051b87ff5fa09.hot-update.js": "/chunks/app-language.b208d83051b87ff5fa09.hot-update.js",
"/chunks/app-language.ea84fa6808f8aae4b68c.hot-update.js": "/chunks/app-language.ea84fa6808f8aae4b68c.hot-update.js",
"/chunks/app-language.296b2ccf7a369fc39842.hot-update.js": "/chunks/app-language.296b2ccf7a369fc39842.hot-update.js",
"/chunks/app-language.680a2195948d040e4bc5.hot-update.js": "/chunks/app-language.680a2195948d040e4bc5.hot-update.js",
"/chunks/app-language.65bc71e82a6d05a1fca2.hot-update.js": "/chunks/app-language.65bc71e82a6d05a1fca2.hot-update.js",
"/chunks/app-language.c3716b5ac2df80c82c46.hot-update.js": "/chunks/app-language.c3716b5ac2df80c82c46.hot-update.js",
"/chunks/app-language.4fca74b2d3f4800af16b.hot-update.js": "/chunks/app-language.4fca74b2d3f4800af16b.hot-update.js",
"/chunks/app-language.cd41ba07f1a277bc6701.hot-update.js": "/chunks/app-language.cd41ba07f1a277bc6701.hot-update.js",
"/chunks/app-language.40eff1026b36837064b2.hot-update.js": "/chunks/app-language.40eff1026b36837064b2.hot-update.js",
"/chunks/app-language.b89880c6b65cf6e280f0.hot-update.js": "/chunks/app-language.b89880c6b65cf6e280f0.hot-update.js",
"/chunks/app-language.28010ae7039eb753bbc5.hot-update.js": "/chunks/app-language.28010ae7039eb753bbc5.hot-update.js",
"/chunks/app-language.512a9fb6e0a6e6ee8a34.hot-update.js": "/chunks/app-language.512a9fb6e0a6e6ee8a34.hot-update.js",
"/chunks/app-language.2d15d74dd9ee312f07af.hot-update.js": "/chunks/app-language.2d15d74dd9ee312f07af.hot-update.js",
"/chunks/app-language.51c75c91befc0cb11b65.hot-update.js": "/chunks/app-language.51c75c91befc0cb11b65.hot-update.js",
"/chunks/app-language.8b9de85cd95d62b3e900.hot-update.js": "/chunks/app-language.8b9de85cd95d62b3e900.hot-update.js",
"/chunks/app-language.7d3c27cbe97dc64f1556.hot-update.js": "/chunks/app-language.7d3c27cbe97dc64f1556.hot-update.js",
"/chunks/app-language.d85d645aaa3e8b181d05.hot-update.js": "/chunks/app-language.d85d645aaa3e8b181d05.hot-update.js"
}
@@ -46,7 +46,6 @@ export default {
@import '/resources/sass/vuefilemanager/_forms';
.search-bar {
padding: 7px 0px;
position: relative;
width: 100%;
border-radius: 8px;
+1 -1
View File
@@ -87,7 +87,7 @@
</ContentGroup>
</ContentSidebar>
<router-view class="pr-6 w-full overflow-x-hidden relative lg:pt-6 pt-4" style="background: rgba(244, 245, 246, 0.6)" />
<router-view class="lg:pl-0 pl-6 pr-6 w-full overflow-x-hidden relative lg:pt-6 pt-4" style="background: rgba(244, 245, 246, 0.6)" />
</div>
</template>
+87 -302
View File
@@ -1,33 +1,49 @@
<template>
<div>
<div v-if="languages" class="flex space-x-6">
<div>
<!--Mobile language navigation-->
<div v-if="languages" class="card shadow-card py-0 sticky top-0 z-10 flex items-center md:hidden block">
<!--List of languages-->
<div
@click="getLanguage(language)"
v-for="language in languages"
:key="language.data.id"
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
:class="{'text-theme router-link-active': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale, 'text-gray-600': !selectedLanguage && selectedLanguage.data.attributes.locale !== language.data.attributes.locale}"
>
{{ language.data.attributes.name }}
</div>
<!--Add new language-->
<div @click="createLanguage" class="icon text-theme">
<plus-icon size="17" />
</div>
</div>
<div v-if="languages" class="flex md:space-x-6">
<!--Sidebar-->
<div class="side-content">
<div class="md:block hidden">
<div class="card shadow-card sticky top-0">
<div class="languages-wrapper page-tab">
<div class="language-label-wrapper">
<label class="language-label">{{ $t('languages') }}</label>
</div>
<label class="mb-2 text-xs text-gray-400 font-bold">
{{ $t('languages') }}
</label>
<!-- Languages -->
<div class="all-language-wrapper">
<div @click="getLanguage(language)" v-for="language in languages" :key="language.data.id" class="language group">
<label class="name" :class="{'active': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale}">
<span class="active-text-theme group-hover-text-theme">{{ language.data.attributes.name }}</span>
</label>
<x-icon
v-if="language.data.attributes.locale !== 'en'"
@click.stop="deleteLanguage(language)"
class="icon"
size="17"
/>
</div>
</div>
<!-- Languages -->
<div @click="getLanguage(language)" v-for="language in languages" :key="language.data.id" class="flex items-center justify-between cursor-pointer py-2 pr-4 group">
<label class="font-bold text-base" :class="{'text-theme': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale}">
{{ language.data.attributes.name }}
</label>
<x-icon
v-if="language.data.attributes.locale !== 'en'"
@click.stop="deleteLanguage(language)"
class="group-hover:opacity-100 opacity-0"
size="12"
/>
</div>
<MobileActionButton @click.native="createLanguage" icon="plus" class="button-add-language">
<!-- Create Language button -->
<MobileActionButton @click.native="createLanguage" icon="plus" class="mt-5 whitespace-nowrap">
{{ $t('add_language') }}
</MobileActionButton>
</div>
@@ -36,117 +52,72 @@
<!--Content-->
<div class="form block-form content">
<!--Inline Search for mobile-->
<!-- <div class="block-wrapper sticky search-bar-wrapper">
<SearchInput v-model="query" @reset-query="query = ''" />
</div>-->
<!--Mobile language navigation-->
<div class="menu-list-wrapper horizontal">
<!--List of languages-->
<div @click="getLanguage(language)" v-for="language in languages" :key="language.data.id" :class="{'router-link-active': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale}" class="menu-list-item link border-bottom-theme">
<div class="label text-theme">
{{ language.data.attributes.name }}
</div>
</div>
<!--Add new language-->
<div @click="createLanguage" class="menu-list-item link border-bottom-theme">
<div class="icon text-theme">
<plus-icon size="17" />
</div>
</div>
</div>
<div class="dynamic-content">
<Spinner v-if="! selectedLanguage" class="spinner" />
<div v-if="selectedLanguage">
<!--Disable content when user is searching translations-->
<div v-if="! isSearching">
<!--Language Settings-->
<div v-if="! isSearching" class="card shadow-card">
<FormLabel icon="settings">
{{ $t('language_settings') }}
</FormLabel>
<div class="card shadow-card">
<FormLabel icon="settings">
{{ $t('language_settings') }}
</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Language name" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('language_name')" :error="errors[0]">
<input @input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)" v-model="selectedLanguage.data.attributes.name" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
</AppInputText>
</ValidationProvider>
<!--Language name-->
<div class="block-wrapper">
<label>{{ $t('language_name') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
<input @input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)" v-model="selectedLanguage.data.attributes.name"
:placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<AppInputSwitch :title="$t('set_as_default_language')" :description="$t('If this language is set as default, app will appear in this language for all users.')">
<SwitchInput
@input="setDefaultLanguage"
class="switch"
:class="{'disable-switch': selectedLanguage.data.attributes.locale === this.defaultLanguageLocale }"
:state="selectedLanguage.data.attributes.locale === this.defaultLanguageLocale"
/>
</AppInputSwitch>
</div>
<!--Set default language-->
<div class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">
{{ $t('set_as_default_language') }}:
</label>
<small class="input-help">
If this language is set as default, app will appear in this language for all users.
</small>
</div>
<SwitchInput
@input="setDefaultLanguage"
class="switch"
:class="{'disable-switch': selectedLanguage.data.attributes.locale === this.defaultLanguageLocale }"
:state="selectedLanguage.data.attributes.locale === this.defaultLanguageLocale"
/>
</div>
</div>
</div>
</div>
<div class="card shadow-card">
<!--Translations-->
<FormLabel>
{{ $t('edit_translations') }}
</FormLabel>
<InfoBox>
<p>Please preserve in your translations special string variables defined in format as <b class="text-theme">:variable</b> or <b class="text-theme">{variable}</b>.</p>
</InfoBox>
<!--Translation-->
<div class="block-wrapper" v-for="(translation, key) in translationList" :key="key">
<label> {{ referenceTranslations[key] }}:</label>
<ValidationProvider tag="div" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
<!--Textarea-->
<textarea
v-model="selectedLanguage.data.attributes.translations[key]"
@input="$updateText(`/admin/languages/${selectedLanguage.data.id}/strings`, key, selectedLanguage.data.attributes.translations[key])"
:rows="selectedLanguage.data.attributes.translations[key].length >= 80 ? 3 : 1"
class="focus-border-theme input-dark"
:class="{'is-error': errors[0]}"
></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="card shadow-card">
<!--Translations-->
<FormLabel>
{{ $t('edit_translations') }}
</FormLabel>
<InfoBox>
<p>Please preserve in your translations special string variables defined in format as <b class="text-theme">:variable</b> or <b class="text-theme">{variable}</b>.</p>
</InfoBox>
<!--Inline Search for mobile-->
<div class="sticky top-0 z-10 mb-8">
<SearchInput v-model="query" @reset-query="query = ''" />
</div>
<ValidationProvider tag="div" name="Language string" rules="required" v-slot="{ errors }">
<AppInputText :title="referenceTranslations[key]" :error="errors[0]" v-for="(translation, key) in translationList" :key="key">
<textarea
v-model="selectedLanguage.data.attributes.translations[key]"
@input="$updateText(`/admin/languages/${selectedLanguage.data.id}/strings`, key, selectedLanguage.data.attributes.translations[key])"
:rows="selectedLanguage.data.attributes.translations[key].length >= 80 ? 3 : 1"
class="focus-border-theme input-dark"
:class="{'is-error': errors[0]}"
></textarea>
</AppInputText>
</ValidationProvider>
</div>
</div>
</div>
</div>
</div>
<Spinner v-if="! languages" />
</div>
</div>
</template>
<script>
import AppInputSwitch from "../../../components/Admin/AppInputSwitch";
import AppInputText from "../../../components/Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
@@ -167,6 +138,8 @@
ValidationProvider,
ValidationObserver,
MobileActionButton,
AppInputSwitch,
AppInputText,
MobileHeader,
SearchInput,
SwitchInput,
@@ -275,191 +248,3 @@
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
@import '/resources/sass/vuefilemanager/_vuewind';
.dynamic-content {
position: relative;
.spinner {
margin-top: 0 !important;
}
}
.menu-list-wrapper.horizontal {
display: none;
}
.search-bar-wrapper {
background: white;
padding: 0 10px 0 10px;
margin: 0 -10px;
top: 58px;
z-index: 3;
}
.content-page {
display: flex;
max-width: 1000px;
margin: 20px auto 0;
.content {
width: 100%;
position: relative;
}
}
.disable-switch {
cursor: not-allowed;
/deep/ .text-right {
pointer-events: none;
}
}
.side-content {
.button-add-language {
margin-top: 30px;
}
.languages-wrapper {
.language-label-wrapper {
margin-bottom: 5px;
.language-label {
color: $light_text;
font-weight: 700;
@include font-size(12);
margin-top: 20px;
}
}
.all-language-wrapper {
.language {
display: flex;
align-items: center;
padding: 12px 25px 12px 0px;
cursor: pointer;
&:hover {
.icon {
display: block;
}
}
.name {
color: $text;
font-weight: 700;
@include font-size(13);
cursor: pointer;
}
.icon {
display: none;
margin-left: auto;
cursor: pointer;
}
}
}
}
}
@media only screen and (max-width: 1024px) {
.wrapper {
flex-direction: column;
.side-content {
margin-bottom: 70px;
}
.languages-wrapper {
margin-top: 0;
}
}
}
@media only screen and (max-width: 790px) {
.menu-list-wrapper.horizontal {
position: sticky;
top: 120px;
display: flex;
z-index: 7;
.menu-list-item {
margin-top: 0;
&:last-child {
padding-left: 0;
}
}
}
.content-page {
display: block;
.side-content,
.search-bar-wrapper.desktop {
display: none;
}
.search-bar-wrapper {
top: 60px;
margin-bottom: 10px !important;
}
.info-box {
margin-bottom: 30px;
}
}
}
@media only screen and (max-width: 1024px) {
.search-bar-wrapper {
top: 58px;
z-index: 7;
}
}
@media only screen and (max-width: 690px) {
.menu-list-wrapper.horizontal {
top: 95px;
}
.content-page {
.search-bar-wrapper {
top: 35px;
}
}
}
.dark {
.search-bar-wrapper {
background: $dark_mode_background;
}
.language {
.name {
color: $dark_mode_text_primary !important;
}
}
.language-label {
color: $dark_mode_text_secondary !important;
}
}
</style>
+25 -33
View File
@@ -1,31 +1,29 @@
<template>
<div id="single-page">
<div id="page-content" v-if="! isLoading && page">
<div class="card shadow-card">
<FormLabel>
{{ page.data.attributes.title }}
</FormLabel>
<AppInputSwitch :title="$t('admin_pages.form.visibility')" :description="$t('admin_pages.form.visibility_help')">
<SwitchInput @input="changeStatus" class="switch" :state="page.data.attributes.visibility"/>
</AppInputSwitch>
<AppInputText :title="$t('admin_pages.form.title')">
<input @input="$updateText('/admin/pages/' + $route.params.slug, 'title', page.data.attributes.title)" v-model="page.data.attributes.title"
:placeholder="$t('admin_pages.form.title_plac')" type="text" class="focus-border-theme input-dark"/>
</AppInputText>
<AppInputText :title="$t('admin_pages.form.slug')">
<input v-model="page.data.attributes.slug" type="text" class="focus-border-theme input-dark" disabled/>
</AppInputText>
<AppInputText :title="$t('admin_pages.form.content')">
<textarea
@input="$updateText('/admin/pages/' + $route.params.slug, 'content', page.data.attributes.content)"
v-model="page.data.attributes.content"
:placeholder="$t('admin_pages.form.content_plac')"
class="focus-border-theme input-dark"
rows="18"
></textarea>
</AppInputText>
</div>
</div>
<div>
<div v-if="! isLoading && page" class="card shadow-card">
<FormLabel>
{{ page.data.attributes.title }}
</FormLabel>
<AppInputSwitch :title="$t('admin_pages.form.visibility')" :description="$t('admin_pages.form.visibility_help')">
<SwitchInput @input="changeStatus" class="switch" :state="page.data.attributes.visibility"/>
</AppInputSwitch>
<AppInputText :title="$t('admin_pages.form.title')">
<input @input="$updateText('/admin/pages/' + $route.params.slug, 'title', page.data.attributes.title)" v-model="page.data.attributes.title"
:placeholder="$t('admin_pages.form.title_plac')" type="text" class="focus-border-theme input-dark"/>
</AppInputText>
<AppInputText :title="$t('admin_pages.form.slug')">
<input v-model="page.data.attributes.slug" type="text" class="focus-border-theme input-dark" disabled/>
</AppInputText>
<AppInputText :title="$t('admin_pages.form.content')">
<textarea
@input="$updateText('/admin/pages/' + $route.params.slug, 'content', page.data.attributes.content)"
v-model="page.data.attributes.content"
:placeholder="$t('admin_pages.form.content_plac')"
class="focus-border-theme input-dark"
rows="18"
></textarea>
</AppInputText>
</div>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
</div>
@@ -82,9 +80,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
</style>
@@ -1,31 +1,29 @@
<template>
<PageTab v-if="user">
<div class="card shadow-card">
<FormLabel>
{{ $t('user_box_delete.title') }}
</FormLabel>
<InfoBox>
<p>{{ $t('user_box_delete.description') }}</p>
</InfoBox>
<ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="User name" rules="required">
<AppInputText :title="$t('admin_page_user.label_delete_user', {user: user.data.relationships.settings.data.attributes.name})" :error="errors[0]">
<div class="flex space-x-4">
<input v-model="userName"
:placeholder="$t('admin_page_user.placeholder_delete_user')"
type="text"
class="focus-border-theme input-dark"
:class="{'is-error': errors[0]}"
/>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
{{ $t('admin_page_user.delete_user') }}
</ButtonBase>
</div>
</AppInputText>
</ValidationProvider>
</ValidationObserver>
</div>
</PageTab>
<div v-if="user" class="card shadow-card">
<FormLabel>
{{ $t('user_box_delete.title') }}
</FormLabel>
<InfoBox>
<p>{{ $t('user_box_delete.description') }}</p>
</InfoBox>
<ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="User name" rules="required">
<AppInputText :title="$t('admin_page_user.label_delete_user', {user: user.data.relationships.settings.data.attributes.name})" :error="errors[0]">
<div class="flex space-x-4">
<input v-model="userName"
:placeholder="$t('admin_page_user.placeholder_delete_user')"
type="text"
class="focus-border-theme input-dark"
:class="{'is-error': errors[0]}"
/>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
{{ $t('admin_page_user.delete_user') }}
</ButtonBase>
</div>
</AppInputText>
</ValidationProvider>
</ValidationObserver>
</div>
</template>
<script>
@@ -126,13 +124,3 @@
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
.block-form {
max-width: 100%;
}
</style>
@@ -7,8 +7,7 @@
<InfoBox>
<p>{{ $t('user_box_password.description') }}</p>
</InfoBox>
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest"
:disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
{{ $t('admin_page_user.send_password_link') }}
</ButtonBase>
</div>
@@ -76,13 +75,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_forms';
.block-form {
max-width: 100%;
}
</style>
+1 -1
View File
@@ -34,7 +34,7 @@
@include('vuefilemanager.others.color-template')
</head>
<body class="{{ is_dev() ? '__debug-screens' : '' }}">
<body class="{{ is_dev() ? 'debug-screens' : '' }}">
<div id="app"></div>