Generalize IntegerSetting into NumberSetting, add Integer/Float wrappers

6 files changed, 77 insertions, 30 deletions

diff --git a/src/components/settings_modal/helpers/float_setting.vue b/src/components/settings_modal/helpers/float_setting.vue
new file mode 100644
index 00000000..15edb3c3
--- /dev/null
+++ b/src/components/settings_modal/helpers/float_setting.vue
@@ -0,0 +1,16 @@
+<template>
+  <NumberSetting
+    v-bind="$attrs"
+  >
+    <slot />
+  </NumberSetting>
+</template>
+
+<script>
+import NumberSetting from './number_setting.vue'
+export default {
+  components: {
+    NumberSetting
+  }
+}
+</script>
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
index 695e2673..43fa7e1a 100644
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -1,27 +1,17 @@
 <template>
-  <span
-    v-if="matchesExpertLevel"
-    class="IntegerSetting"
+  <NumberSetting
+    v-bind="$attrs"
+    truncate="1"
   >
-    <label :for="path">
-      <slot />
-    </label>
-    <input
-      :id="path"
-      class="number-input"
-      type="number"
-      step="1"
-      :disabled="disabled"
-      :min="min || 0"
-      :value="state"
-      @change="update"
-    >
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-  </span>
+    <slot />
+  </NumberSetting>
 </template>
 
-<script src="./integer_setting.js"></script>
+<script>
+import NumberSetting from './number_setting.vue'
+export default {
+  components: {
+    NumberSetting
+  }
+}
+</script>
diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/number_setting.js
index e64d0cee..73c39948 100644
--- a/src/components/settings_modal/helpers/integer_setting.js
+++ b/src/components/settings_modal/helpers/number_setting.js
@@ -8,6 +8,8 @@ export default {
     path: String,
     disabled: Boolean,
     min: Number,
+    step: Number,
+    truncate: Number,
     expert: [Number, String]
   },
   computed: {
@@ -15,8 +17,11 @@ export default {
       const [firstSegment, ...rest] = this.path.split('.')
       return [firstSegment + 'DefaultValue', ...rest].join('.')
     },
+    parent () {
+      return this.$parent.$parent
+    },
     state () {
-      const value = get(this.$parent, this.path)
+      const value = get(this.parent, this.path)
       if (value === undefined) {
         return this.defaultState
       } else {
@@ -24,21 +29,28 @@ export default {
       }
     },
     defaultState () {
-      return get(this.$parent, this.pathDefault)
+      return get(this.parent, this.pathDefault)
     },
     isChanged () {
       return this.state !== this.defaultState
     },
     matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
+      return (this.expert || 0) <= this.parent.expertLevel
     }
   },
   methods: {
+    truncateValue (value) {
+      if (!this.truncate) {
+        return value
+      }
+
+      return Math.trunc(value / this.truncate) * this.truncate
+    },
     update (e) {
-      set(this.$parent, this.path, parseInt(e.target.value))
+      set(this.parent, this.path, this.truncateValue(parseFloat(e.target.value)))
     },
     reset () {
-      set(this.$parent, this.path, this.defaultState)
+      set(this.parent, this.path, this.defaultState)
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
new file mode 100644
index 00000000..3eab5178
--- /dev/null
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -0,0 +1,27 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="NumberSetting"
+  >
+    <label :for="path">
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="number-input"
+      type="number"
+      :step="step || 1"
+      :disabled="disabled"
+      :min="min || 0"
+      :value="state"
+      @change="update"
+    >
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </span>
+</template>
+
+<script src="./number_setting.js"></script>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index ea24d6ad..be97710f 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -2,6 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
+import FloatSetting from '../helpers/float_setting.vue'
 import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
@@ -62,6 +63,7 @@ const GeneralTab = {
     BooleanSetting,
     ChoiceSetting,
     IntegerSetting,
+    FloatSetting,
     SizeSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 17afc5ba..21e2d855 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -272,13 +272,13 @@
           </BooleanSetting>
         </li>
         <li>
-          <IntegerSetting
+          <FloatSetting
             v-if="user"
             path="emojiReactionsScale"
             expert="1"
           >
             {{ $t('settings.emoji_reactions_scale') }}
-          </IntegerSetting>
+          </FloatSetting>
         </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>