commit: 493120b5456282756d05d9afaf66b11a2f87d8fc
parent 3403f6a1ed5388291244487ae7eb3190d7c4353e
Author: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Sat, 18 Mar 2023 20:48:36 +0300
Generalize IntegerSetting into NumberSetting, add Integer/Float wrappers
Diffstat:
7 files changed, 116 insertions(+), 69 deletions(-)
diff --git a/src/components/settings_modal/helpers/float_setting.vue 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.js b/src/components/settings_modal/helpers/integer_setting.js
@@ -1,44 +0,0 @@
-import { get, set } from 'lodash'
-import ModifiedIndicator from './modified_indicator.vue'
-export default {
- components: {
- ModifiedIndicator
- },
- props: {
- path: String,
- disabled: Boolean,
- min: Number,
- expert: [Number, String]
- },
- computed: {
- pathDefault () {
- const [firstSegment, ...rest] = this.path.split('.')
- return [firstSegment + 'DefaultValue', ...rest].join('.')
- },
- state () {
- const value = get(this.$parent, this.path)
- if (value === undefined) {
- return this.defaultState
- } else {
- return value
- }
- },
- defaultState () {
- return get(this.$parent, this.pathDefault)
- },
- isChanged () {
- return this.state !== this.defaultState
- },
- matchesExpertLevel () {
- return (this.expert || 0) <= this.$parent.expertLevel
- }
- },
- methods: {
- update (e) {
- set(this.$parent, this.path, parseInt(e.target.value))
- },
- reset () {
- set(this.$parent, this.path, this.defaultState)
- }
- }
-}
diff --git 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/number_setting.js b/src/components/settings_modal/helpers/number_setting.js
@@ -0,0 +1,56 @@
+import { get, set } from 'lodash'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+ components: {
+ ModifiedIndicator
+ },
+ props: {
+ path: String,
+ disabled: Boolean,
+ min: Number,
+ step: Number,
+ truncate: Number,
+ expert: [Number, String]
+ },
+ computed: {
+ pathDefault () {
+ const [firstSegment, ...rest] = this.path.split('.')
+ return [firstSegment + 'DefaultValue', ...rest].join('.')
+ },
+ parent () {
+ return this.$parent.$parent
+ },
+ state () {
+ const value = get(this.parent, this.path)
+ if (value === undefined) {
+ return this.defaultState
+ } else {
+ return value
+ }
+ },
+ defaultState () {
+ return get(this.parent, this.pathDefault)
+ },
+ isChanged () {
+ return this.state !== this.defaultState
+ },
+ matchesExpertLevel () {
+ 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, this.truncateValue(parseFloat(e.target.value)))
+ },
+ reset () {
+ 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
@@ -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
@@ -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
@@ -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>
