Input-boxes for sliders for exact recreation of parameters

StreamAwesome/src/components/settings/GeneralOptions.vue

@@ -15,6 +15,7 @@ import Icon from '@/components/utils/IconDisplay.vue'
 import type { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
 import { ref } from 'vue'
 import { fontAwesomeVersionInfo } from '@/model/versions'
+import RangeInput from './Sliders/RangeInput.vue'
 
 const props = defineProps<{
   icon: CustomIcon<FontAwesomePreset>
@@ -96,14 +97,13 @@ function updateStyle(style: FontAwesomeStyle) {
     <label for="iconSize" class="mb-[0.5] block text-sm font-medium text-gray-900 dark:text-white"
       >Icon Size and Style:
     </label>
-    <input
+    <RangeInput
       id="iconSize"
-      type="range"
       :value="props.icon?.fontSize ?? 180"
       @input="(event) => updateSize(event)"
       min="50"
       max="250"
-      class="mb-6 h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:bg-gray-700"
+      class="my-3"
     />
   </div>
 

StreamAwesome/src/components/settings/Sliders/HueInput.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SliderPicker from './RangeInput.vue'
+
+const hue = defineModel<number>()
+const currentHue = ref(hue)
+</script>
+
+<template>
+  <SliderPicker class="hueSelector" v-model="hue" min="0" max="360" />
+</template>
+
+<style scoped>
+.hueSelector:deep(input[type='range']) {
+  height: 1rem;
+  background: linear-gradient(
+    90deg,
+    hsl(0, 72%, 56%) 0%,
+    hsl(60, 72%, 56%) 25%,
+    hsl(120, 72%, 56%) 33.3%,
+    hsl(240, 72%, 56%) 66.6%,
+    hsl(360, 72%, 56%) 100%
+  );
+}
+
+.hueSelector:deep(input[type='range']::-webkit-slider-thumb),
+.hueSelector:deep(input[type='range']::-moz-range-thumb) {
+  background-color: hsl(v-bind('currentHue'), 72%, 56%);
+}
+</style>

StreamAwesome/src/components/settings/Sliders/LightnessInput.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import SliderPicker from './RangeInput.vue'
+
+const { hue } = defineProps<{
+  hue: number
+}>()
+
+const lightness = defineModel<number>()
+</script>
+
+<template>
+  <SliderPicker class="lightnessSelector" v-model="lightness" min="0.05" max="0.95" step="0.01" />
+</template>
+
+<style scoped>
+.lightnessSelector:deep(input[type='range']) {
+  height: 1rem;
+  background: linear-gradient(
+    90deg,
+    hsl(v-bind('hue'), 72%, 5%) 0%,
+    hsl(v-bind('hue'), 72%, 95%) 100%
+  );
+}
+</style>

StreamAwesome/src/components/settings/Sliders/RangeInput.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  min?: number | string
+  max?: number | string
+  step?: number | string
+}>()
+const emit = defineEmits<{
+  input: [event: InputEvent]
+}>()
+
+const value = defineModel<number>()
+const showInput = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <input
+      type="range"
+      :min="props.min"
+      :max="props.max"
+      :step="props.step"
+      class="selector h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:bg-gray-700"
+      v-model.number="value"
+      @input="(e) => emit('input', e as InputEvent)"
+      @click.right="
+        (e) => {
+          showInput = !showInput
+          e.preventDefault()
+        }
+      "
+    />
+    <input
+      v-show="showInput"
+      type="number"
+      :min="props.min"
+      :max="props.max"
+      class="w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+      v-model.number="value"
+      @input="(e) => emit('input', e as InputEvent)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.selector {
+  display: block;
+  width: 100%;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0.25rem;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+input[type='range']::-webkit-slider-thumb,
+input[type='range']::-moz-range-thumb {
+  height: 2rem;
+  width: 1rem;
+  cursor: grab;
+  display: block;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  outline: 2px solid transparent;
+  border: none;
+  border-radius: 0.25rem;
+}
+
+input[type='number'] {
+  @apply appearance-none;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+input[type='number']:focus {
+  @apply appearance-none;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+</style>

StreamAwesome/src/components/settings/Sliders/SaturationInput.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SliderPicker from './RangeInput.vue'
+
+const saturation = defineModel<number>()
+const currentSaturation = ref(saturation)
+</script>
+
+<template>
+  <SliderPicker class="saturationSelector" v-model="saturation" min="0" max="1" step="0.01" />
+</template>
+
+<style scoped>
+.saturationSelector:deep(input[type='range']) {
+  height: 1rem;
+  background: linear-gradient(
+    90deg,
+    hsl(v-bind('currentSaturation'), 5%, 56%) 0%,
+    hsl(v-bind('currentSaturation'), 100%, 56%) 100%
+  );
+}
+</style>

StreamAwesome/src/components/settings/presets/ClassicPreset.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { CustomIcon, FontAwesomePreset } from '@/model/customIcon'
+import HueInput from '../Sliders/HueInput.vue'
 
 const props = defineProps<{
   icon: CustomIcon<FontAwesomePreset>
@@ -19,64 +20,13 @@ function applyDefaultSettings() {
   currentIcon.value.fontAwesomeIcon.style = 'solid'
   currentIcon.value.fontAwesomeIcon.family = 'classic'
 }
-
-const currentHue = ref((currentIcon.value as CustomIcon<'Classic'>).presetSettings.hue)
 </script>
 
 <template>
-  <label for="hueSelector" class="block flex-grow text-sm font-medium text-gray-900 dark:text-white"
+  <label for="hueSelector" class="block grow text-sm font-medium text-gray-900 dark:text-white"
     >Hue:</label
   >
-  <input
-    type="range"
-    id="hueSelector"
-    max="360"
-    min="0"
-    class="selector focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
-    v-model.number="(currentIcon as CustomIcon<'Classic'>).presetSettings.hue"
-  />
+  <HueInput id="hueSelector" v-model="(currentIcon as CustomIcon<'Classic'>).presetSettings.hue" />
 </template>
 
-<style scoped>
-.selector {
-  display: block;
-  height: 1rem;
-  width: 100%;
-  cursor: pointer;
-  -webkit-appearance: none;
-  appearance: none;
-  border-radius: 0.25rem;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-#hueSelector {
-  background: linear-gradient(
-    90deg,
-    hsl(0, 72%, 56%) 0%,
-    hsl(60, 72%, 56%) 25%,
-    hsl(120, 72%, 56%) 33.3%,
-    hsl(240, 72%, 56%) 66.6%,
-    hsl(360, 72%, 56%) 100%
-  );
-}
-
-input[type='range']::-webkit-slider-thumb,
-input[type='range']::-moz-range-thumb {
-  height: 2rem;
-  width: 1rem;
-  cursor: grab;
-  display: block;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  outline: 2px solid transparent;
-  border: none;
-  border-radius: 0.25rem;
-}
-
-input[type='range']#hueSelector::-webkit-slider-thumb,
-input[type='range']#hueSelector::-moz-range-thumb {
-  background-color: hsl(v-bind('currentHue'), 72%, 56%);
-}
-</style>
+<style scoped></style>

StreamAwesome/src/components/settings/presets/ModernPreset.vue

@@ -29,7 +29,7 @@ function applyDefaultSettings() {
       v-model="(currentIcon as CustomIcon<'Modern'>).presetSettings.inverted"
     />
     <div
-      class="peer relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
+      class="peer relative h-6 w-11 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-4 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:start-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
     ></div>
     <span class="ms-3 text-sm font-medium text-gray-900 dark:text-white">Invert Colors</span>
   </label>