Generalize IntegerSetting into NumberSetting, add Integer/Float wrappers
This commit is contained in:
parent
3403f6a1ed
commit
493120b545
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<NumberSetting
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot />
|
||||
</NumberSetting>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NumberSetting from './number_setting.vue'
|
||||
export default {
|
||||
components: {
|
||||
NumberSetting
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue