Rework settings UX

This commit is contained in:
Lucas Verney 2019-01-06 17:16:30 +01:00
parent cadd8869aa
commit 50f3f3ad3a
3 changed files with 143 additions and 51 deletions

View File

@ -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-list-tile-action>
<v-checkbox
v-model="hasPlaySoundPermission"
></v-checkbox>
</v-list-tile-action>
<v-list-tile-content
>
</v-switch>
<v-switch
class="switch"
color="success"
:label="$t('permissions.vibrate')"
<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-list-tile-action>
<v-checkbox
v-model="hasVibratePermission"
></v-checkbox>
</v-list-tile-action>
<v-list-tile-content
>
</v-switch>
<v-switch
class="switch"
:messages="geolocationPermissionMessages"
color="success"
:label="$t('permissions.geolocation')"
<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-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-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-list-tile-action>
<v-checkbox
v-model="hasPermanentNotificationPermission"
>
</v-switch>
</div>
></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>

View File

@ -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>

View File

@ -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,