Generalize IntegerSetting into NumberSetting, add Integer/Float wrappers

This commit is contained in:
Alexander Tumin 2023-03-18 20:48:36 +03:00
parent 3403f6a1ed
commit 493120b545
6 changed files with 77 additions and 30 deletions

View File

@ -0,0 +1,16 @@
<template>
<NumberSetting
v-bind="$attrs"
>
<slot />
</NumberSetting>
</template>
<script>
import NumberSetting from './number_setting.vue'
export default {
components: {
NumberSetting
}
}
</script>

View File

@ -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>

View File

@ -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)
}
}
}

View File

@ -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>

View File

@ -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,

View File

@ -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>