feat: improved style/layout of settings

src/views/settings/ColorSettings.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+div.d-flex.justify-content-between
+  div
+    h5.mb-0 Use fallback colors
+    small
+      | Uses the old coloring style for some visualizations when uncategorized or no category color.
+  div
+    b-form-checkbox(v-model="useColorFallback", switch)
+</template>
+
+<script>
+export default {
+  name: 'ColorSettings',
+  data: () => {
+    return {
+      useColorFallback: localStorage.useColorFallback || true,
+    };
+  },
+  methods: {
+    set: function (useColorFallback) {
+      localStorage.useColorFallback = useColorFallback;
+      console.log('Set useColorFallback to ' + useColorFallback);
+    },
+  },
+};
+</script>

src/views/settings/DaystartSettings.vue

@@ -1,11 +1,13 @@
 <template lang="pug">
-div.row
-  div.col-sm-9
-    h5.mb-0 Start of day
-    small
-      | The time at which days "start", since humans don't always go to bed before midnight. Set to 04:00 by default.
-  div.col-sm-3
-    input.form-control(type="time" :value="startOfDay" @change="setStartOfDay($event.target.value)")
+div
+  div.d-sm-flex.justify-content-between
+    div
+      h5.mt-1.mb-2.mb-sm-0 Start of day
+    div
+      b-input(type="time" size="sm" :value="startOfDay" @change="setStartOfDay($event.target.value)")
+  small
+    | The time at which days "start", since humans don't always go to bed before midnight.
+    | Set to 04:00 by default.
 </template>
 <script>
 export default {

src/views/settings/LandingPageSettings.vue

@@ -1,16 +1,17 @@
 <template lang="pug">
-div.row
-  div.col-sm-9
-    h5.mb-0 Landing page
-    small
-      | The page to open when opening ActivityWatch, or clicking the logo in the top menu.
-  div.col-sm-3
-    select(v-if="loaded", id="landingpage" :value="landingpage", @change="set($event.target.value)")
-      option(value="/home") Home
-      option(:value="'/activity/' + hostname + '/view/'" v-for="hostname in hostnames") Activity ({{hostname}})
-      option(value="/timeline") Timeline
-    span(v-else)
-      | Loading...
+div
+  div.d-sm-flex.justify-content-between
+    div
+      h5.mt-1.mb-2.mb-sm-0 Landing page
+    div
+      b-select.landingpage(v-if="loaded" size="sm" :value="landingpage", @change="set($event.target.value)")
+        option(value="/home") Home
+        option(:value="'/activity/' + hostname + '/view/'" v-for="hostname in hostnames") Activity ({{hostname}})
+        option(value="/timeline") Timeline
+      span(v-else)
+        | Loading...
+  small
+    | The page to open when opening ActivityWatch, or clicking the logo in the top menu.
 </template>
 <script>
 export default {

src/views/settings/ReleaseNotificationSettings.vue

@@ -1,13 +1,12 @@
 <template lang="pug">
-div.row
-  div.col-sm-9
-    h5.mb-0 New release notification
-    small
-      | We will send you a notification if there is a new release available for download, this check will happen at most once per day
-  div.col-sm-3
-    select(id="enableNotification" v-model="data.isEnabled", @change="saveData")
-      option(:value="true") Enabled
-      option(:value="false") Disabled
+div
+  div.d-flex.justify-content-between
+    div
+      h5.mb-0 New release notification
+    div
+      b-form-checkbox(v-model="data.isEnabled" @change="saveData", switch)
+  small
+    | We will send you a notification if there is a new release available for download, this check will happen at most once per day.
 </template>
 
 <script>
@@ -32,18 +31,20 @@ export default {
   },
   methods: {
     retrieveData() {
-      if (localStorage.getItem('newReleaseCheckData')) {
+      if (localStorage.newReleaseCheckData) {
         try {
-          this.data = JSON.parse(localStorage.getItem('newReleaseCheckData'));
+          this.data = JSON.parse(localStorage.newReleaseCheckData);
         } catch (e) {
-          console.error('newReleaseCheckData not found in localStorage');
+          console.error('could not parse newReleaseCheckData, deleting');
           localStorage.removeItem('newReleaseCheckData');
         }
+      } else {
+        console.info('newReleaseCheckData not found in localStorage');
       }
     },
     saveData() {
       const parsed = JSON.stringify(this.data);
-      localStorage.setItem('newReleaseCheckData', parsed);
+      localStorage.newReleaseCheckData = parsed;
     },
   },
 };

src/views/settings/Settings.vue

@@ -22,6 +22,9 @@ div
     ReleaseNotificationSettings
     hr
 
+  //ColorSettings
+  //hr
+
   CategorizationSettings
 
 </template>
@@ -32,6 +35,7 @@ import TimelineDurationSettings from '~/views/settings/TimelineDurationSettings.
 import ReleaseNotificationSettings from '~/views/settings/ReleaseNotificationSettings.vue';
 import CategorizationSettings from '~/views/settings/CategorizationSettings.vue';
 import LandingPageSettings from '~/views/settings/LandingPageSettings.vue';
+import ColorSettings from '~/views/settings/ColorSettings.vue';
 
 export default {
   name: 'Settings',
@@ -41,6 +45,7 @@ export default {
     ReleaseNotificationSettings,
     CategorizationSettings,
     LandingPageSettings,
+    ColorSettings,
   },
 };
 </script>

src/views/settings/TimelineDurationSettings.vue

@@ -1,11 +1,10 @@
 <template lang="pug">
-div.row
-  div.col-sm-9
-    h5.mb-0 Duration default value
-    small
-      | The default duration used for 'show last' in the timeline view
-  div.col-sm-3
-    select(id="durationDefaultValue" :value="durationDefaultValue", @change="setDurationDefault($event.target.value)")
+div
+  div.d-sm-flex.justify-content-between
+    div
+      h5.mb-2.mb-sm-0 Duration default value
+    div
+      b-select(size="sm" :value="durationDefaultValue", @change="setDurationDefault($event.target.value)")
           option(:value="15*60") 15min
           option(:value="30*60") 30min
           option(:value="60*60") 1h
@@ -14,6 +13,8 @@ div.row
           option(:value="6*60*60") 6h
           option(:value="12*60*60") 12h
           option(:value="24*60*60") 24h
+  small
+    | The default duration used for 'show last' in the timeline view.
 </template>
 <script>
 export default {