initial Appearance Tab implementation, added text size/UI scale option

3 files changed, 30 insertions, 6 deletions

diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index abf9cfdf..3b3e6268 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -48,6 +48,10 @@ export default {
     draftMode: {
       type: Boolean,
       default: undefined
+    },
+    timedApplyMode: {
+      type: Boolean,
+      default: false
     }
   },
   inject: {
@@ -161,7 +165,11 @@ export default {
         case 'admin':
           return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v })
         default:
-          return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+          if (this.timedApplyMode) {
+            return (k, v) => this.$store.dispatch('setOptionTemporarily', { name: k, value: v })
+          } else {
+            return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+          }
       }
     },
     defaultState () {
diff --git a/src/components/settings_modal/helpers/unit_setting.js b/src/components/settings_modal/helpers/unit_setting.js
index c9c23cb0..daeddd81 100644
--- a/src/components/settings_modal/helpers/unit_setting.js
+++ b/src/components/settings_modal/helpers/unit_setting.js
@@ -21,15 +21,23 @@ export default {
     unitSet: {
       type: String,
       default: 'none'
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    resetDefault: {
+      type: Object,
+      default: null
     }
   },
   computed: {
     ...Setting.computed,
     stateUnit () {
-      return this.state.replace(/\d+/, '')
+      return typeof this.state === 'string' ? this.state.replace(/[0-9,.]+/, '') : ''
     },
     stateValue () {
-      return this.state.replace(/\D+/, '')
+      return typeof this.state === 'string' ? this.state.replace(/[^0-9,.]+/, '') : ''
     }
   },
   methods: {
@@ -39,10 +47,18 @@ export default {
       return this.$t(['settings', 'units', this.unitSet, value].join('.'))
     },
     updateValue (e) {
-      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
+      this.configSink(this.path, parseFloat(e.target.value) + this.stateUnit)
     },
     updateUnit (e) {
-      this.configSink(this.path, this.stateValue + e.target.value)
+      let value = this.stateValue
+      const newUnit = e.target.value
+      if (this.resetDefault) {
+        const replaceValue = this.resetDefault[newUnit]
+        if (replaceValue != null) {
+          value = replaceValue
+        }
+      }
+      this.configSink(this.path, value + newUnit)
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
index 68f52b1c..86798e04 100644
--- a/src/components/settings_modal/helpers/unit_setting.vue
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -13,7 +13,7 @@
       :id="path"
       class="input number-input"
       type="number"
-      step="1"
+      step="step"
       :disabled="disabled"
       :min="min || 0"
       :value="stateValue"