Rework settings UX
This commit is contained in:
parent
cadd8869aa
commit
50f3f3ad3a
@ -1,47 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-switch
|
||||
class="switch"
|
||||
:messages="preventSuspendMessages"
|
||||
color="success"
|
||||
:label="$t('permissions.preventSuspend')"
|
||||
v-model="hasPreventSuspendPermission"
|
||||
<v-list subheader three-line>
|
||||
<v-subheader>Permissions</v-subheader>
|
||||
|
||||
<v-list-tile
|
||||
@click.prevent="hasPlaySoundPermission = !hasPlaySoundPermission"
|
||||
>
|
||||
</v-switch>
|
||||
<v-switch
|
||||
class="switch"
|
||||
color="success"
|
||||
:label="$t('permissions.playSound')"
|
||||
v-model="hasPlaySoundPermission"
|
||||
<v-list-tile-action>
|
||||
<v-checkbox
|
||||
v-model="hasPlaySoundPermission"
|
||||
></v-checkbox>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content
|
||||
>
|
||||
<v-list-tile-title>
|
||||
{{ $t('permissions.playSound') }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile
|
||||
@click.prevent="hasVibratePermission = !hasVibratePermission"
|
||||
>
|
||||
</v-switch>
|
||||
<v-switch
|
||||
class="switch"
|
||||
color="success"
|
||||
:label="$t('permissions.vibrate')"
|
||||
v-model="hasVibratePermission"
|
||||
<v-list-tile-action>
|
||||
<v-checkbox
|
||||
v-model="hasVibratePermission"
|
||||
></v-checkbox>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content
|
||||
>
|
||||
<v-list-tile-title>
|
||||
{{ $t('permissions.vibrate') }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile
|
||||
@click.prevent="hasGeolocationPermission = !hasGeolocationPermission"
|
||||
>
|
||||
</v-switch>
|
||||
<v-switch
|
||||
class="switch"
|
||||
:messages="geolocationPermissionMessages"
|
||||
color="success"
|
||||
:label="$t('permissions.geolocation')"
|
||||
v-model="hasGeolocationPermission"
|
||||
<v-list-tile-action>
|
||||
<v-checkbox
|
||||
v-model="hasGeolocationPermission"
|
||||
></v-checkbox>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ $t('permissions.geolocation') }}
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-sub-title>
|
||||
{{ $t('permissions.geolocationDescription') }}
|
||||
</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile
|
||||
@click.prevent="hasPreventSuspendPermission = !hasPreventSuspendPermission"
|
||||
>
|
||||
</v-switch>
|
||||
<v-switch
|
||||
class="switch"
|
||||
:messages="permanentNotificationMessages"
|
||||
color="success"
|
||||
:label="$t('permissions.permanentNotification')"
|
||||
v-model="hasPermanentNotificationPermission"
|
||||
<v-list-tile-action>
|
||||
<v-checkbox
|
||||
v-model="hasPreventSuspendPermission"
|
||||
></v-checkbox>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ $t('permissions.preventSuspend') }}
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-sub-title>
|
||||
{{ $t('permissions.preventSuspendDescription') }}
|
||||
</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile
|
||||
@click.prevent="hasPermanentNotificationPermission = (
|
||||
!hasPermanentNotificationPermission
|
||||
)"
|
||||
>
|
||||
</v-switch>
|
||||
</div>
|
||||
<v-list-tile-action>
|
||||
<v-checkbox
|
||||
v-model="hasPermanentNotificationPermission"
|
||||
></v-checkbox>
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ $t('permissions.permanentNotification') }}
|
||||
</v-list-tile-title>
|
||||
<v-list-tile-sub-title>
|
||||
{{ $t('permissions.permanentNotificationDescription') }}
|
||||
</v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// TODO: Disable list items if function is not supported
|
||||
export default {
|
||||
computed: {
|
||||
hasGeolocationPermission: {
|
||||
@ -85,19 +142,6 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
geolocationPermissionMessages: [
|
||||
`<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.geolocationDescription')}`,
|
||||
],
|
||||
permanentNotificationMessages: [
|
||||
`<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.permanentNotificationDescription')}`,
|
||||
],
|
||||
preventSuspendMessages: [
|
||||
`<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.preventSuspendDescription')}`,
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<v-container fluid class="no-padding">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 sm4 offset-sm4 class="text-xs-center">
|
||||
<h2>{{ $t('menu.Settings') }}</h2>
|
||||
<form>
|
||||
<v-select
|
||||
:items="i18nItems"
|
||||
@ -50,9 +49,54 @@
|
||||
:label="$t('settings.skipOnboarding')"
|
||||
v-model="skipOnboarding"
|
||||
></v-checkbox>
|
||||
|
||||
<PermissionsSwitches></PermissionsSwitches>
|
||||
</form>
|
||||
|
||||
<v-list subheader>
|
||||
<v-subheader>Général</v-subheader>
|
||||
|
||||
<v-list-tile>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ $t('settings.locale') }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ $t('settings.tileServer') }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ $t('settings.defaultOrientationMode') }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
|
||||
<v-list-tile>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ $t('settings.tileCachingDuration') }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
<PermissionsSwitches></PermissionsSwitches>
|
||||
<v-list subheader>
|
||||
<v-subheader>Divers</v-subheader>
|
||||
<v-list-tile>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>
|
||||
{{ $t('settings.skipOnboarding') }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
@ -9,6 +9,7 @@ import VCard from 'vuetify/es5/components/VCard';
|
||||
import VCheckbox from 'vuetify/es5/components/VCheckbox';
|
||||
import VCombobox from 'vuetify/es5/components/VCombobox';
|
||||
import VDialog from 'vuetify/es5/components/VDialog';
|
||||
import VDivider from 'vuetify/es5/components/VDivider';
|
||||
import VGrid from 'vuetify/es5/components/VGrid';
|
||||
import VIcon from 'vuetify/es5/components/VIcon';
|
||||
import VList from 'vuetify/es5/components/VList';
|
||||
@ -16,6 +17,7 @@ import VMenu from 'vuetify/es5/components/VMenu';
|
||||
import VProgressCircular from 'vuetify/es5/components/VProgressCircular';
|
||||
import VProgressLinear from 'vuetify/es5/components/VProgressLinear';
|
||||
import VSelect from 'vuetify/es5/components/VSelect';
|
||||
import VSubheader from 'vuetify/es5/components/VSubheader';
|
||||
import VSwitch from 'vuetify/es5/components/VSwitch';
|
||||
import VTextarea from 'vuetify/es5/components/VTextarea';
|
||||
import VTextField from 'vuetify/es5/components/VTextField';
|
||||
@ -32,6 +34,7 @@ Vue.use(Vuetify, {
|
||||
VCheckbox,
|
||||
VCombobox,
|
||||
VDialog,
|
||||
VDivider,
|
||||
VGrid,
|
||||
VIcon,
|
||||
VList,
|
||||
@ -39,6 +42,7 @@ Vue.use(Vuetify, {
|
||||
VProgressCircular,
|
||||
VProgressLinear,
|
||||
VSelect,
|
||||
VSubheader,
|
||||
VSwitch,
|
||||
VTextarea,
|
||||
VTextField,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user