1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<script>
import { GlCollapsibleListbox, GlLink } from '@gitlab/ui';
import { __ } from '~/locale';
import { setCookie } from '~/lib/utils/common_utils';
import { helpPagePath } from '~/helpers/help_page_helper';
import { PREFERRED_LANGUAGE_COOKIE_KEY } from '../constants';
const HELP_TRANSLATE_MSG = __('Help translate to your language');
const HELP_TRANSLATE_HREF = helpPagePath('/development/i18n/translation.md');
export default {
components: {
GlCollapsibleListbox,
GlLink,
},
inject: {
locales: {
default: [],
},
preferredLocale: {
default: {},
},
},
data() {
return {
selected: this.preferredLocale.value,
};
},
methods: {
onLanguageSelected(code) {
setCookie(PREFERRED_LANGUAGE_COOKIE_KEY, code);
window.location.reload();
},
itemTestSelector(locale) {
return `language_switcher_lang_${locale}`;
},
},
HELP_TRANSLATE_MSG,
HELP_TRANSLATE_HREF,
};
</script>
<template>
<gl-collapsible-listbox
v-model="selected"
:toggle-text="preferredLocale.text"
:items="locales"
category="tertiary"
right
icon="earth"
size="small"
toggle-class="py-0 gl-h-6"
@select="onLanguageSelected"
>
<template #list-item="{ item: locale }">
<span
:data-testid="itemTestSelector(locale.value)"
:data-qa-selector="itemTestSelector(locale.value)"
>
{{ locale.text }}
</span>
</template>
<template #footer>
<div
class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-justify-content-center gl-p-3"
data-testid="footer"
>
<gl-link :href="$options.HELP_TRANSLATE_HREF">{{ $options.HELP_TRANSLATE_MSG }}</gl-link>
</div>
</template>
</gl-collapsible-listbox>
</template>
|
