Rework settings UX

src/components/PermissionsSwitches.vue

@@ -1,47 +1,104 @@
 <template>
-    <div>
+    <v-list subheader three-line>
-        <v-switch
+        <v-subheader>Permissions</v-subheader>
-            class="switch"
+
-            :messages="preventSuspendMessages"
+        <v-list-tile
-            color="success"
+            @click.prevent="hasPlaySoundPermission = !hasPlaySoundPermission"
-            :label="$t('permissions.preventSuspend')"
-            v-model="hasPreventSuspendPermission"
             >
-        </v-switch>
+            <v-list-tile-action>
-        <v-switch
+                <v-checkbox
-            class="switch"
-            color="success"
-            :label="$t('permissions.playSound')"
                     v-model="hasPlaySoundPermission"
+                    ></v-checkbox>
+            </v-list-tile-action>
+
+            <v-list-tile-content
                 >
-        </v-switch>
+                <v-list-tile-title>
-        <v-switch
+                    {{ $t('permissions.playSound') }}
-            class="switch"
+                </v-list-tile-title>
-            color="success"
+            </v-list-tile-content>
-            :label="$t('permissions.vibrate')"
+        </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-list-tile-title>
-        <v-switch
+                    {{ $t('permissions.vibrate') }}
-            class="switch"
+                </v-list-tile-title>
-            :messages="geolocationPermissionMessages"
+            </v-list-tile-content>
-            color="success"
+        </v-list-tile>
-            :label="$t('permissions.geolocation')"
+
+        <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-list-tile-action>
-        <v-switch
+                <v-checkbox
-            class="switch"
+                    v-model="hasPreventSuspendPermission"
-            :messages="permanentNotificationMessages"
+                    ></v-checkbox>
-            color="success"
+            </v-list-tile-action>
-            :label="$t('permissions.permanentNotification')"
+
+            <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-checkbox>
-        </v-switch>
+            </v-list-tile-action>
-    </div>
+
+            <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>
 

src/views/Settings.vue

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

src/vuetify.js

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