gamebrary/src/components/Settings/GeneralSettings.vue

85 lines
2.4 KiB
Vue
Raw Normal View History

2019-07-10 23:23:40 +00:00
<template lang="html">
<section>
2019-09-19 04:52:04 +00:00
<h5>Global</h5>
2019-07-11 19:55:23 +00:00
<div class="reloading" v-if="reloading">
2019-07-10 23:23:40 +00:00
<i class="fas fa-sync-alt fast-spin" />
2019-07-11 19:52:59 +00:00
<br>
{{ $t('settings.reloading') }}
</div>
2019-07-10 23:23:40 +00:00
<div class="setting">
<i class="fas fa-language" />
<h5>{{ $t('settings.language') }}</h5>
<select v-model="value.language">
<option value="en">🇺🇸 {{ $t('settings.languages.en') }}</option>
<option value="es">🇪🇸 {{ $t('settings.languages.es') }}</option>
<option value="pl">🇵🇱 {{ $t('settings.languages.pl') }}</option>
<option value="de">🇩🇪 {{ $t('settings.languages.de') }}</option>
<option value="ar">🇦🇪 {{ $t('settings.languages.ar') }}</option>
<option value="fr">🇫🇷 {{ $t('settings.languages.fr') }}</option>
<option value="ja">🇯🇵 {{ $t('settings.languages.ja') }}</option>
<option value="it">🇮🇹 {{ $t('settings.languages.it') }}</option>
<option value="eu">🏴 {{ $t('settings.languages.eu') }}</option>
<option value="cs">🇨🇿 {{ $t('settings.languages.cs') }}</option>
</select>
</div>
<div class="setting">
<i class="fas fa-moon" />
<h5>{{ $t('settings.darkTheme') }}</h5>
<toggle-switch
id="nightMode"
v-model="value.nightMode"
/>
</div>
<div class="setting">
<i class="far fa-envelope" />
<h5>{{ $t('settings.newsletter') }}</h5>
<toggle-switch
id="newsletter"
v-model="value.newsletter"
/>
</div>
</section>
</template>
<script>
import ToggleSwitch from '@/components/ToggleSwitch';
2019-07-10 23:23:40 +00:00
export default {
components: {
ToggleSwitch,
},
props: {
value: Object,
reloading: Boolean,
},
computed: {
hasLists() {
return Object.keys(this.gameLists).length > 0;
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
2019-09-10 20:02:16 +00:00
@import "~styles/styles";
2019-07-10 23:23:40 +00:00
@import "settings";
2019-07-11 19:52:59 +00:00
.reloading {
width: 100%;
text-align: center;
color: $color-blue;
}
2019-07-11 20:44:44 +00:00
select {
margin: 0;
}
2019-07-10 23:23:40 +00:00
</style>