71 lines
2.6 KiB
Vue
71 lines
2.6 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { dark_mode_options } from 'src/modules/profile/models/preferences.models';
|
|
import LanguageSwitch from 'src/modules/shared/components/language-switch.vue';
|
|
|
|
import { useUiStore } from 'src/stores/ui-store';
|
|
|
|
const ui_store = useUiStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-px-md column no-wrap">
|
|
<div style="transform: translate(10px, 12px);">
|
|
<span class="text-uppercase text-weight-bold text-accent bg-dark q-px-sm">
|
|
{{ $t('profile.preferences.display_options') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
class="col-auto justify-center content-center q-mb-sm q-pa-md rounded-5"
|
|
:class="ui_store.is_mobile_mode ? 'column' : 'row'"
|
|
style="border: 1px solid var(--q-accent);"
|
|
>
|
|
<q-item
|
|
v-for="mode of dark_mode_options"
|
|
:key="mode.label"
|
|
clickable
|
|
dense
|
|
v-ripple
|
|
class="col row rounded-5 q-ma-sm shadow-4"
|
|
:class="(mode.quasar_value === $q.dark.mode ? 'bg-accent text-white text-weight-bolder' : '') + ($q.platform.is.mobile ? ' full-width q-py-xs' : '')"
|
|
@click="ui_store.user_preferences.is_dark_mode = mode.value"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
:name="mode.icon"
|
|
size="md"
|
|
:color="mode.quasar_value === $q.dark.mode ? 'white' : ''"
|
|
/>
|
|
</q-item-section>
|
|
|
|
<q-item-section class="text-uppercase justify-center">
|
|
<q-item-label> {{ $t(mode.label) }}</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-item-section side>
|
|
<q-icon
|
|
v-if="mode.quasar_value === $q.dark.mode"
|
|
name="check"
|
|
color="white"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
|
|
<div
|
|
class="col-auto row text-uppercase text-weight-bold text-accent"
|
|
style="transform: translate(10px, 12px);"
|
|
>
|
|
<div class="col-auto bg-dark q-px-sm">{{ $t('profile.preferences.language_options') }}</div>
|
|
</div>
|
|
<div
|
|
class="col-auto justify-center content-center q-pa-sm rounded-5"
|
|
style="border: 1px solid var(--q-accent);"
|
|
>
|
|
<LanguageSwitch class="col-auto" />
|
|
</div>
|
|
</div>
|
|
</template> |