joinpeertube/src/components/I18n.vue
2019-10-24 14:10:59 +02:00

73 lines
1.5 KiB
Vue

<template>
<div id="i18n">
<b-dropdown>
<template slot="button-content">
<img :src="buildImgUrl('language.png')" alt="Change languages logo"/>
<div class="text">
<translate>Languages</translate>
<span class="caret"></span>
</div>
</template>
<b-dropdown-item v-for="(lang, locale) in $language.available" :key="locale" :href="buildLocaleLink(locale)">
{{ lang }}
</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item class="translate" target="_blank" rel="noopener noreferrer" href="https://weblate.framasoft.org/projects/joinpeertube/main/">
<icon-add></icon-add>
<span v-translate>Translate</span>
</b-dropdown-item>
</b-dropdown>
</div>
</template>
<style lang="scss">
#i18n {
.text {
font-size: 11px;
}
.dropdown {
button {
height: 60px;
color: #000;
background-color: #fff;
border: none;
}
.dropdown-toggle::after {
display: none;
}
.translate svg {
width: 20px;
margin-right: 5px;
vertical-align: top;
}
}
}
</style>
<script>
import { BDropdown, BDropdownDivider, BDropdownItem } from 'bootstrap-vue'
import IconAdd from './icons/IconAdd'
export default {
components: {
BDropdown,
BDropdownDivider,
BDropdownItem,
IconAdd
},
methods: {
buildLocaleLink (locale) {
return process.env.BASE_URL + `${locale}/`
}
}
}
</script>