Fix/change UI setting qall

src/components/Settings/QallTab/NoiseSuppression.vue

@@ -1,30 +1,28 @@
 <template>
-  <div>
-    <h3 :class="$style.header">ノイズ抑制</h3>
-    <div :class="$style.content">
-      <template v-if="isAudioWorkletSupported">
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="Rnnoise"
-          input-value="rnnoise"
-        />
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="Speex"
-          input-value="speex"
-        />
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="無効"
-          input-value="none"
-        />
-      </template>
-      <p v-else>利用している端末が対応していません</p>
-    </div>
-  </div>
+  <section>
+    <h3 :class="$style.heading">ノイズ抑制</h3>
+    <template v-if="isAudioWorkletSupported">
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="Rnnoise"
+        input-value="rnnoise"
+      />
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="Speex"
+        input-value="speex"
+      />
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="無効"
+        input-value="none"
+      />
+    </template>
+    <p v-else>利用している端末が対応していません。</p>
+  </section>
 </template>
 
 <script lang="ts" setup>
@@ -47,13 +45,12 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
 </script>
 
 <style lang="scss" module>
-.header {
-  margin-bottom: 8px;
-}
-.content {
-  margin-left: 12px;
+.heading {
+  margin-bottom: 4px;
 }
 .input {
+  display: block;
+  font-weight: bold;
   margin-right: 8px;
 }
 </style>

src/components/UI/ASlider.vue

@@ -4,6 +4,7 @@
     :min="min"
     :max="max"
     :disabled="disabled"
+    :interval="interval"
     :tooltip="tooltip"
     :tooltip-formatter="tooltipFormatter"
     :dot-size="12"
@@ -27,6 +28,7 @@ const props = withDefaults(
     max?: number
     tooltipFormatter?: TooltipFormatter
     tooltip?: TooltipProp
+    interval?: number
   }>(),
   {
     disabled: false,

src/components/UI/FormInput.vue

@@ -122,9 +122,9 @@ defineExpose({ focus })
 
 <style lang="scss" module>
 .label {
-  @include color-ui-secondary;
+  @include color-ui-primary;
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 .inputContainer {
   @include color-ui-primary;
@@ -137,7 +137,6 @@ defineExpose({ focus })
   &[data-on-secondary] {
     @include background-primary;
   }
-
   border: solid 2px transparent;
   &:focus-within {
     border-color: $theme-accent-focus-default;

src/components/UI/FormRangeWithValue.vue

@@ -1,12 +1,13 @@
 <template>
   <div :class="$style.container">
-    <form-input
+    <a-slider
       v-model.number="value"
       :class="$style.range"
-      type="range"
       :min="min"
-      :step="step"
       :max="max"
+      :disabled="disabled"
+      :tooltip="'none'"
+      :interval="interval"
     />
     <semi-fixed-size-text
       align="right"
@@ -18,18 +19,24 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import FormInput from '/@/components/UI/FormInput.vue'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 import SemiFixedSizeText from './SemiFixedSizeText.vue'
+import ASlider from '/@/components/UI/ASlider.vue'
 
-const props = defineProps<{
-  modelValue: number
-  maxText: string
-  min?: string
-  max?: string
-  step?: string
-  format: (v: number) => string
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: number
+    maxText: string
+    min?: number
+    max?: number
+    disabled?: boolean
+    interval?: number
+    format: (v: number) => string
+  }>(),
+  {
+    disabled: false
+  }
+)
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: number): void
@@ -47,6 +54,15 @@ const showValue = computed(() => props.format(value.value))
 }
 .range {
   flex: 1 1;
-  margin-right: 4px;
+  margin-right: 16px;
+  :global {
+    $dotBgColor: $theme-accent-primary-background;
+    $dotShadow: none;
+
+    $bgColor: rgba(107, 125, 138, 0.5); // $theme-ui-secondary-default;
+    $themeColor: $theme-accent-primary-background;
+
+    @import 'vue-slider-component/lib/theme/default.scss';
+  }
 }
 </style>

src/components/UI/FormSelector.vue

@@ -50,8 +50,8 @@ const id = randomString()
 
 <style lang="scss" module>
 .label {
-  @include color-ui-secondary;
-  margin-bottom: 8px;
+  @include color-ui-primary;
+  margin-bottom: 4px;
   display: block;
 }
 .inputContainer {