graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 01:53:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(client): fix range slider rendering

Browse source
This commit is contained in:
syuilo 2021-12-04 20:35:08 +09:00
parent e42e9530cb
commit 8a3f860213
3 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/client/src/components/form-dialog.vue
View file

@ -40,7 +40,7 @@
<template #caption><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
</FormRadios>
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step" class="_formBlock">
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
</FormRange>

28
packages/client/src/components/form/range.vue
View file

@ -16,7 +16,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue';
import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
import * as os from '@/os';
export default defineComponent({
@ -58,6 +58,9 @@ export default defineComponent({
},
setup(props, context) {
const containerEl = ref<HTMLElement>();
const thumbEl = ref<HTMLElement>();
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
const steppedValue = computed(() => {
if (props.step) {
@ -78,10 +81,25 @@ export default defineComponent({
if (thumbEl.value == null) return 0;
return thumbEl.value!.offsetWidth;
});
const thumbPosition = computed(() => {
if (containerEl.value == null) return 0;
return (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
const thumbPosition = ref(0);
const calcThumbPosition = () => {
if (containerEl.value == null) {
thumbPosition.value = 0;
} else {
thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
}
};
watch([steppedValue, containerEl], calcThumbPosition);
onMounted(() => {
const ro = new ResizeObserver((entries, observer) => {
calcThumbPosition();
});
ro.observe(containerEl.value);
onUnmounted(() => {
ro.disconnect();
});
});
const steps = computed(() => {
if (props.step) {
return (props.max - props.min) / props.step;
@ -89,8 +107,6 @@ export default defineComponent({
return 0;
}
});
const containerEl = ref<HTMLElement>();
const thumbEl = ref<HTMLElement>();
const onMousedown = (ev: MouseEvent | TouchEvent) => {
ev.preventDefault();

1
packages/client/src/pages/settings/sounds.vue
View file

@ -119,6 +119,7 @@ export default defineComponent({
mim: 0,
max: 1,
step: 0.05,
textConverter: (v) => `${Math.floor(v * 100)}%`,
label: this.$ts.volume,
default: this.sounds[type].volume
},