nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 17:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Language editor refactoring part 4 (backend + frontend)

Browse Source
This commit is contained in:
Peter Papp
2021-04-01 10:40:48 +02:00
parent 5130082111
commit 7772ef6b40
32 changed files with 288 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
View File

@@ -26,13 +26,12 @@
<FormLabel class="mt-70">{{ $t('admin_settings.appearance.section_appearance') }}</FormLabel>
<!--TODO: add language-->
<div class="block-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">Color Theme:</label>
<small class="input-help">Your color change will be visible after app refresh.</small>
<label class="input-label">{{ $t('color_theme') }}:</label>
<small class="input-help">{{ $t('color_theme_description') }}</small>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</div>
<input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color"
@@ -63,21 +62,19 @@
</ValidationProvider>
</div>
<!--TODO: add language-->
<div class="block-wrapper">
<label>OG Image:</label>
<label>{{ $t('og_image') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" :error="errors[0]"/>
<small class="input-help">Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627</small>
<small class="input-help">{{ $t('og_image_description') }}</small>
</ValidationProvider>
</div>
<!--TODO: add language-->
<div class="block-wrapper">
<label>App Touch Icon:</label>
<label>{{ $t('app_touch_icon') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
<ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" :error="errors[0]"/>
<small class="input-help">If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156</small>
<small class="input-help">{{ $t('app_touch_icon_description') }}</small>
</ValidationProvider>
</div>
</div>

2
resources/js/views/Admin/Dashboard.vue
View File

@@ -10,7 +10,7 @@
</a>
</div>
<div class="metadata">
<a href="https://vuefilemanager.com/changelog" target="_blank" class="meta">
<a href="https://gist.github.com/MakingCG/9c07f8af392081ae5d5290d920a79b5d" target="_blank" class="meta">
<span class="meta-title">{{ $t('admin_page_dashboard.version') }}:</span>
<ColorLabel color="purple">
{{ data.app_version }}

114
resources/js/views/Admin/Languages/Language.vue
View File

@@ -1,8 +1,8 @@
<template>
<div id="single-page">
<div id="page-content">
<MobileHeader title="Languages" />
<PageHeader title="Languages" />
<MobileHeader :title="$t('routes_title.language')" />
<PageHeader :title="$t('routes_title.language')" />
<div v-if="languages" class="content-page">
@@ -12,14 +12,14 @@
<div class="sticky top-65">
<div class="languages-wrapper page-tab from-fixed-width">
<div class="language-label-wrapper">
<label class="language-label">Languages</label>
<label class="language-label">{{ $t('languages') }}</label>
</div>
<!-- Languages -->
<div class="all-language-wrapper">
<div @click="getLanguage(language)" v-for="language in languages" :key="language.data.id" class="language">
<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}">
{{ language.data.attributes.name }}
<span class="active-text-theme group-hover-text-theme">{{ language.data.attributes.name }}</span>
</label>
<x-icon
v-if="language.data.attributes.locale !== 'en'"
@@ -32,7 +32,7 @@
</div>
<MobileActionButton @click.native="createLanguage" icon="plus" class="button-add-language">
Add Language
{{ $t('add_language') }}
</MobileActionButton>
</div>
</div>
@@ -40,36 +40,16 @@
<!--Content-->
<div class="form block-form content">
<div v-if="! selectedLanguage">
<Spinner />
</div>
<Spinner v-if="! selectedLanguage" />
<div v-if="selectedLanguage">
<FormLabel icon="settings">
Language Settings
{{ $t('language_settings') }}
</FormLabel>
<!--Set default language-->
<div class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">
Set as Default Language:
</label>
</div>
<SwitchInput
@input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'language', selectedLanguage.data.attributes.locale)"
class="switch"
:class="{'disable-switch': selectedLanguage.data.attributes.locale !== }"
/>
</div>
</div>
</div>
<!--Language name-->
<div class="block-wrapper">
<label>Language Name:</label>
<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" />
@@ -77,18 +57,45 @@
</ValidationProvider>
</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>
<!--Translations-->
<FormLabel class="mt-70">
Edit Translations
{{ $t('edit_translations') }}
</FormLabel>
<InfoBox class="info-box">
<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-->
<div class="block-wrapper sticky top-50 search-bar-wrapper">
<SearchInput v-model="query" @reset-query="query = ''" />
</div>
<!--Translation-->
<div class="block-wrapper" v-for="(translation, key) in translationList" :key="key">
<label> {{ defaultTranslations[key] }}:</label>
<label> {{ referenceTranslations[key] }}:</label>
<ValidationProvider tag="div" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
<input type="text"
:class="{'is-error': errors[0]}"
@@ -116,6 +123,7 @@
import FormLabel from '@/components/Others/Forms/FormLabel'
import MobileHeader from '@/components/Mobile/MobileHeader'
import ButtonBase from '@/components/FilesView/ButtonBase'
import InfoBox from '@/components/Others/Forms/InfoBox'
import PageHeader from '@/components/Others/PageHeader'
import Spinner from '@/components/FilesView/Spinner'
import {PlusIcon, XIcon} from 'vue-feather-icons'
@@ -135,40 +143,48 @@
PageHeader,
FormLabel,
PlusIcon,
InfoBox,
Spinner,
XIcon
},
data() {
return {
defaultTranslations: undefined,
searchedTranslationResults: undefined,
referenceTranslations: undefined,
defaultLanguageLocale: undefined,
selectedLanguage: undefined,
occurrences: undefined,
languages: undefined,
query: '',
}
},
watch: {
query: debounce(function (val) {
this.occurrences = omitBy(this.selectedLanguage.data.attributes.translations, (string, key) => {
this.searchedTranslationResults = omitBy(this.selectedLanguage.data.attributes.translations, string => {
return !string.toLowerCase().includes(val.toLowerCase())
})
}, 300),
},
computed: {
translationList() {
return this.occurrences && this.query !== ''
? this.occurrences
return this.searchedTranslationResults && this.query !== ''
? this.searchedTranslationResults
: this.selectedLanguage.data.attributes.translations
}
},
methods: {
setDefaultLanguage() {
this.$updateText('/admin/settings', 'language', this.selectedLanguage.data.attributes.locale)
this.defaultLanguageLocale = this.selectedLanguage.data.attributes.locale
},
getLanguages() {
axios
.get('/api/admin/languages')
.then(response => {
this.languages = response.data.data
this.defaultTranslations = response.data.meta.default_translations
this.referenceTranslations = response.data.meta.reference_translations
this.selectedLanguage = response.data.meta.current_language
this.defaultLanguageLocale = response.data.meta.current_language.data.attributes.locale
})
.catch(() => {
this.$isSomethingWrong()
@@ -243,6 +259,18 @@
}
}
.disable-switch {
cursor: not-allowed;
/deep/ .text-right {
pointer-events: none;
}
}
.info-box {
margin-bottom: 12px;
}
.side-content {
flex: 0 0 225px;
@@ -275,10 +303,6 @@
.icon {
display: block;
}
.name {
color: $theme !important;
}
}
.name {
@@ -294,10 +318,6 @@
cursor: pointer;
}
.active {
color: $theme !important;
}
}
}
@@ -327,6 +347,10 @@
@media (prefers-color-scheme: dark) {
.search-bar-wrapper {
background: $dark_mode_background;
}
.language {
.name {