refactor(settings): Make the setup page's new timer presets available…

… on the settings panel, too (#147) * refactor(i18n): Move timer preset translations to root * refactor: Move timer presets to global file * refactor: Allow overriding translation key on SettingsOption * refactor(settings): Set custom translation key for timer preset * refactor(settings): Import timer presets from separate file * fix(settings): Fix timer presets not applying correctly * fix(settings): Fix option group layout with more items
Hanziness · Jan 9, 2022 · 1c62b1e · 1c62b1e
1 parent 6f39966
commit 1c62b1e
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 83 deletions.
diff --git a/assets/settings/timerPresets.js b/assets/settings/timerPresets.js
@@ -0,0 +1,38 @@
+/**
+ * Timer presets for quick setting of work, pause and long pause session lengths, and long pause intervals.
+ * When updating these, make sure to also update their translations keys (`timerpreset`)
+ */
+export default {
+  default: {
+    lengths: {
+      work: 25 * 60 * 1000, // 25 minutes
+      shortpause: 5 * 60 * 1000, // 5 minutes
+      longpause: 15 * 60 * 1000 // 15 minutes
+    },
+    longPauseInterval: 3 // every 3rd pause is a long one
+  },
+  easy: {
+    lengths: {
+      work: 15 * 60 * 1000, // 15 minutes
+      shortpause: 5 * 60 * 1000, // 5 minutes
+      longpause: 15 * 60 * 1000 // 15 minutes
+    },
+    longPauseInterval: 2 // every 2nd pause is a long one
+  },
+  advanced: {
+    lengths: {
+      work: 40 * 60 * 1000, // 40 minutes
+      shortpause: 10 * 60 * 1000, // 10 minutes
+      longpause: 30 * 60 * 1000 // 30 minutes
+    },
+    longPauseInterval: 3 // every 3rd pause is a long one
+  },
+  workaholic: {
+    lengths: {
+      work: 50 * 60 * 1000, // 50 minutes
+      shortpause: 10 * 60 * 1000, // 5 minutes
+      longpause: 30 * 60 * 1000 // 20 minutes
+    },
+    longPauseInterval: 3 // every 3rd pause is a long one
+  }
+}
diff --git a/components/base/optionGroup.vue b/components/base/optionGroup.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="grid grid-flow-row md:grid-flow-col md:auto-cols-fr select-option-group gap-3">
+  <div class="grid grid-flow-row select-option-group gap-3" :class="[Object.keys(values).length > 3 ? 'md:grid-flow-row md:grid-cols-3' : 'md:grid-flow-col md:auto-cols-auto']">
     <OptionControl
       v-for="(item, key) in values"
       :key="key"
-      class="flex-grow"
+      class="min-w-fit"
       :active="key === selected"
       :translation-key="translationKey"
       :translation-subkey="key"

diff --git a/components/settings/baseSettingsItem.vue b/components/settings/baseSettingsItem.vue
@@ -23,7 +23,7 @@
     </div>
 
     <!-- Content to show below the title and description -->
-    <div class="">
+    <div class="flex flex-col w-full">
       <slot name="content-main" :settingsValue="settingsValue" />
     </div>
     <slot name="content-error" :errorValue="errorValue">

diff --git a/components/settings/items/settingsOptions.vue b/components/settings/items/settingsOptions.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseSettingsItem :settings-key="settingsKey" :disabled="disabled" :custom-value="customValue" :custom-set-function="customSetFunction">
     <template #content-main="{ settingsValue, update, translationKey }">
-      <OptionGroup :translation-key="translationKey" :values="values" :selected="settingsValue" @input="update" />
+      <OptionGroup :translation-key="overrideTranslationKey ? overrideTranslationKey : translationKey" :values="values" :selected="settingsValue" @input="update" />
     </template>
   </BaseSettingsItem>
 </template>
@@ -38,6 +38,11 @@ export default {
     customSetFunction: {
       type: Function,
       default: undefined
+    },
+
+    overrideTranslationKey: {
+      type: String,
+      default: null
     }
   },
 

diff --git a/components/settings/settingsPanel.vue b/components/settings/settingsPanel.vue
@@ -51,6 +51,7 @@
               <SettingsOptions
                 :settings-key="['schedule', 'lengths']"
                 :custom-value="$store.getters['settings/getActiveSchedulePreset']"
+                override-translation-key="timerpreset"
                 :values="timerPresets"
                 :set-value-on-change="false"
                 :custom-set-function="(v) => { $store.commit('settings/applyPreset', v) }"
@@ -155,8 +156,8 @@
 
 <script>
 import { XIcon, AdjustmentsIcon, AlarmIcon, ArtboardIcon, InfoCircleIcon, BrandGithubIcon, CoffeeIcon, BrandTwitterIcon, BrandFacebookIcon, BrandRedditIcon } from 'vue-tabler-icons'
-import { timerPresets } from '@/store/settings'
 import TabHeader from '@/components/settings/panel/tabHeader.vue'
+import presetTimers from '@/assets/settings/timerPresets'
 
 export default {
   name: 'SettingsPanel',
@@ -193,7 +194,7 @@ export default {
     return {
       activeTab: 1,
       resetConfirm: false,
-      timerPresets
+      timerPresets: presetTimers
     }
   },
 

diff --git a/i18n/en.js b/i18n/en.js
@@ -174,21 +174,6 @@ export default {
         hardcore: 'Every feature is enabled so you can have everything in front of you.'
       }
     },
-    timerpreset: {
-      _values: {
-        default: 'Default',
-        easy: 'Beginner',
-        advanced: 'Advanced',
-        workaholic: 'Workaholic'
-      },
-      _valueDescription: {
-        default: 'The default Pomodoro values.',
-        easy: 'For those who haven\'t yet tried the Pomodoro technique.',
-        advanced: 'Work slightly more effectively.',
-        workaholic: 'For long work sessions.'
-      },
-      description: '{brief} \n {worklength} minutes of work with {splength} minutes short and {lplength} minutes long breaks after every {lpfreq} work sessions.'
-    },
     permissions: {
       audio: 'Audio',
       notifications: 'Notifications'
@@ -450,5 +435,21 @@ export default {
       primary: 'You can',
       secondary: 'or if those didn\'t help'
     }
+  },
+
+  timerpreset: {
+    _values: {
+      default: 'Default',
+      easy: 'Beginner',
+      advanced: 'Advanced',
+      workaholic: 'Workaholic'
+    },
+    _valueDescription: {
+      default: 'The default Pomodoro values.',
+      easy: 'For those who haven\'t yet tried the Pomodoro technique.',
+      advanced: 'Work slightly more effectively.',
+      workaholic: 'For long work sessions.'
+    },
+    description: '{brief} \n {worklength} minutes of work with {splength} minutes short and {lplength} minutes long breaks after every {lpfreq} work sessions.'
   }
 }
diff --git a/i18n/hu.js b/i18n/hu.js
@@ -170,21 +170,7 @@ export default {
         hardcore: 'Minden funkció bekapcsolva, így minden dolog előtted lehet.'
       }
     },
-    timerpreset: {
-      _values: {
-        default: 'Alapértelmezett',
-        easy: 'Kezdő',
-        advanced: 'Haladó',
-        workaholic: 'Munkamániás'
-      },
-      _valueDescription: {
-        default: 'Az alap Pomodoro idők.',
-        easy: 'Azok számára, akik még nem próbálták a Pomodoro technikát.',
-        advanced: 'Dolgozz kicsit hatékonyabban.',
-        workaholic: 'Hosszú munkamenetekre.'
-      },
-      description: '{brief} \n {worklength} perc munka {splength} perces rövid szünetekkel és {lplength} perces hosszú szünettel minden {lpfreq}. munkamenet után.'
-    },
+
     permissions: {
       audio: 'Hang',
       notifications: 'Értesítések'
@@ -446,5 +432,21 @@ export default {
       primary: 'Először próbáld meg ezeket:',
       secondary: 'vagy ha a fentiek nem segítettek:'
     }
+  },
+
+  timerpreset: {
+    _values: {
+      default: 'Alapértelmezett',
+      easy: 'Kezdő',
+      advanced: 'Haladó',
+      workaholic: 'Munkamániás'
+    },
+    _valueDescription: {
+      default: 'Az alap Pomodoro idők.',
+      easy: 'Azok számára, akik még nem próbálták a Pomodoro technikát.',
+      advanced: 'Dolgozz kicsit hatékonyabban.',
+      workaholic: 'Hosszú munkamenetekre.'
+    },
+    description: '{brief} \n {worklength} perc munka {splength} perces rövid szünetekkel és {lplength} perces hosszú szünettel minden {lpfreq}. munkamenet után.'
   }
 }
diff --git a/pages/setup.vue b/pages/setup.vue
@@ -29,7 +29,7 @@
           <OptionGroup
             :selected="timerpreset"
             :values="{'easy': 'easy', 'default': 'default', 'advanced': 'advanced', 'workaholic': 'workaholic'}"
-            translation-key="setup.timerpreset"
+            translation-key="timerpreset"
             :override-text="timerPresetCustomTexts"
             @input="timerpreset = $event"
           />
@@ -97,6 +97,7 @@ import OptionGroup from '~/components/base/optionGroup.vue'
 import TimerPage from '@/pages/timer.vue'
 import { mergeDeep } from '@/assets/utils/mergeDeep'
 import SetupStep from '@/components/setup/step.vue'
+import presetTimers from '@/assets/settings/timerPresets'
 
 export default {
   name: 'PageSetup',
@@ -179,40 +180,7 @@ export default {
           }
         }
       },
-      presetTimers: {
-        default: {
-          lengths: {
-            work: 25 * 60 * 1000, // 25 minutes
-            shortpause: 5 * 60 * 1000, // 5 minutes
-            longpause: 15 * 60 * 1000 // 15 minutes
-          },
-          longPauseInterval: 3 // every 3rd pause is a long one
-        },
-        easy: {
-          lengths: {
-            work: 15 * 60 * 1000, // 15 minutes
-            shortpause: 5 * 60 * 1000, // 5 minutes
-            longpause: 15 * 60 * 1000 // 15 minutes
-          },
-          longPauseInterval: 2 // every 2nd pause is a long one
-        },
-        advanced: {
-          lengths: {
-            work: 40 * 60 * 1000, // 40 minutes
-            shortpause: 10 * 60 * 1000, // 10 minutes
-            longpause: 30 * 60 * 1000 // 30 minutes
-          },
-          longPauseInterval: 3 // every 3rd pause is a long one
-        },
-        workaholic: {
-          lengths: {
-            work: 50 * 60 * 1000, // 50 minutes
-            shortpause: 10 * 60 * 1000, // 5 minutes
-            longpause: 30 * 60 * 1000 // 20 minutes
-          },
-          longPauseInterval: 3 // every 3rd pause is a long one
-        }
-      }
+      presetTimers
     }
   },
 
@@ -252,8 +220,8 @@ export default {
       for (const key in this.presetTimers) {
         if (Object.hasOwnProperty.call(this.presetTimers, key)) {
           const preset = this.presetTimers[key]
-          customText.description[key] = this.$i18n.t('setup.timerpreset.description', {
-            brief: this.$i18n.t('setup.timerpreset._valueDescription.' + key),
+          customText.description[key] = this.$i18n.t('timerpreset.description', {
+            brief: this.$i18n.t('timerpreset._valueDescription.' + key),
             worklength: preset.lengths.work / 60000,
             splength: preset.lengths.shortpause / 60000,
             lplength: preset.lengths.longpause / 60000,

diff --git a/store/settings.js b/store/settings.js
@@ -1,4 +1,5 @@
 import TickMultipliers from '@/assets/settings/adaptiveTickingMultipliers'
+import timerPresets from '@/assets/settings/timerPresets'
 
 export const AvailableTimers = {
   TIMER_TRADITIONAL: 'traditional',
@@ -10,14 +11,6 @@ export const AvailableSoundSets = {
   SOUNDSET_MUSICAL: 'musical'
 }
 
-export const timerPresets = {
-  default: {
-    work: 25 * 60 * 1000, // 25 minutes
-    shortpause: 5 * 60 * 1000, // 5 minutes
-    longpause: 15 * 60 * 1000 // 15 minutes
-  }
-}
-
 export const state = () => ({
   _updated: false,
   lang: undefined,
@@ -93,7 +86,7 @@ export const getters = {
 
   getActiveSchedulePreset (state) {
     for (const key in timerPresets) {
-      if (JSON.stringify(timerPresets[key]) === JSON.stringify(state.schedule.lengths)) {
+      if (JSON.stringify(timerPresets[key].lengths) === JSON.stringify(state.schedule.lengths)) {
         return key
       }
     }
@@ -129,7 +122,7 @@ export const mutations = {
 
   applyPreset (state, id) {
     if (timerPresets[id]) {
-      state.schedule.lengths = Object.assign({}, timerPresets[id])
+      state.schedule.lengths = Object.assign({}, timerPresets[id].lengths)
     }
   },