mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-20 00:42:16 +00:00
Merge branch 'language-translation' into version-1.8.3
This commit is contained in:
Milos Holba
106
resources/js/views/Admin/Languages/Language.vue
Normal file
106
resources/js/views/Admin/Languages/Language.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="wrapper">
|
||||
<Spinner v-if="! loadedLanguages"/>
|
||||
<div v-if="loadedLanguages" class="side-content">
|
||||
<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="languages-wrapper">
|
||||
<label class="language-label">Langueages</label>
|
||||
<div class="all-language-wrapper">
|
||||
<div @click="getLanguageStrings(language)" class="language" :class="{'active' :active === language.name}" v-for="language in languages.allLanguages" :key="language.id">
|
||||
{{language.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spinner v-if="! loadedStrings"/>
|
||||
<LanguageStrings v-if="loadedStrings"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LanguageStrings from '@/views/Admin/Languages/LanguageStrings'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Language',
|
||||
components: {
|
||||
LanguageStrings,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
Spinner
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['languages'])
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: undefined,
|
||||
loadedLanguages: false,
|
||||
loadedStrings:false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getLanguageStrings (language) {
|
||||
this.active = language.name
|
||||
|
||||
this.loadedStrings = false
|
||||
|
||||
this.$store.dispatch('getLanguageStrings', language).then((loaded) => this.loadedStrings = loaded)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$store.dispatch('getLanguages').then((loaded) => {
|
||||
|
||||
this.loadedLanguages = loaded
|
||||
|
||||
this.getLanguageStrings(this.languages.allLanguages[0])
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.side-content{
|
||||
width: 225px;
|
||||
|
||||
.languages-wrapper {
|
||||
margin-top: 70px;
|
||||
|
||||
.language-label {
|
||||
color: $text-muted;
|
||||
font-weight: 700;
|
||||
@include font-size(12);
|
||||
}
|
||||
.all-language-wrapper {
|
||||
|
||||
.language {
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
@include font-size(13);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.active {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
230
resources/js/views/Admin/Languages/LanguageStrings.vue
Normal file
230
resources/js/views/Admin/Languages/LanguageStrings.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="language-strings-wrapper">
|
||||
<div class="search-bar-wrapper">
|
||||
<div class="search-bar">
|
||||
<div class="icon" >
|
||||
<search-icon size="19"></search-icon>
|
||||
</div>
|
||||
<!-- <div class="icon">
|
||||
<x-icon class="pointer" size="19"></x-icon>
|
||||
</div> -->
|
||||
<input
|
||||
|
||||
class="query"
|
||||
type="text"
|
||||
name="query"
|
||||
:placeholder="$t('inputs.placeholder_search_files')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form block-form">
|
||||
<div>
|
||||
<FormLabel class="mt-70" icon="settings">Language Settings</FormLabel>
|
||||
<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
|
||||
|
||||
class="switch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label> Language Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Language Name" rules="required" v-slot="{ errors }">
|
||||
<input type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label> Language Slug:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Language Slug" rules="required" v-slot="{ errors }">
|
||||
<input type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<FormLabel class="mt-70">Language Strings</FormLabel>
|
||||
<div class="block-wrapper" v-for="(string, index) in languages.strings.language_strings" :key="string.id">
|
||||
<label> {{string.value}}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Language string" rules="required" v-slot="{ errors }">
|
||||
<input type="text"
|
||||
@input="updateString(string.value)"
|
||||
v-model="languages.strings.language_strings[index].value"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import SwitchInput from '@/components/Others/Forms/SwitchInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import { SearchIcon, XIcon } from 'vue-feather-icons'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'LanguageStrings',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SwitchInput,
|
||||
FormLabel,
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['languages'])
|
||||
},
|
||||
methods: {
|
||||
updateString (value) {
|
||||
console.log(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
|
||||
.language-strings-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-bar-wrapper {
|
||||
padding: 7px 0px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
input {
|
||||
background: $light-background;
|
||||
border-radius: 8px;
|
||||
outline: 0;
|
||||
padding: 9px 20px 9px 43px;
|
||||
font-weight: 400;
|
||||
@include font-size(16);
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
min-width: 175px;
|
||||
transition: 0.15s all ease;
|
||||
border: 1px solid transparent;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-muted;
|
||||
@include font-size(14);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $theme;
|
||||
box-shadow: 0 0 7px rgba($theme, 0.3);
|
||||
}
|
||||
|
||||
&:focus + .icon {
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 11px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
circle,
|
||||
line {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media only screen and (max-width: 1024px) {
|
||||
|
||||
// .search-bar input {
|
||||
// max-width: 190px;
|
||||
// padding-right: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.search-bar {
|
||||
|
||||
input {
|
||||
min-width: initial;
|
||||
width: 100%;
|
||||
max-width: initial;
|
||||
padding: 9px 20px 9px 30px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 11px 15px 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.search-bar {
|
||||
input {
|
||||
border-color: transparent;
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
&::placeholder {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
fill: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user