feat: range of font size (#1376)

components/settings/SettingsFontSize.vue

@@ -4,13 +4,66 @@ import type { FontSize } from '~/composables/settings'
 
 const userSettings = useUserSettings()
 
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
+const sizes = (new Array(11)).fill(0).map((x, i) => `${10 + i}px`) as FontSize[]
+
+const setFontSize = (e: Event) => {
+  if (e.target && 'valueAsNumber' in e.target)
+    userSettings.value.fontSize = sizes[e.target.valueAsNumber as number]
+}
 </script>
 
 <template>
-  <select v-model="userSettings.fontSize">
-    <option v-for="size in sizes" :key="size" :value="size" :selected="userSettings.fontSize === size">
-      {{ `${$t(`settings.interface.size_label.${size}`)}${size === DEFAULT_FONT_SIZE ? $t('settings.interface.default') : ''}` }}
-    </option>
-  </select>
+  <div flex items-center space-x-4>
+    <span text-xs text-secondary>Aa</span>
+    <div flex-1 relative flex items-center>
+      <input
+        :value="sizes.indexOf(userSettings.fontSize)"
+        :aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
+        :min="0"
+        :max="sizes.length - 1"
+        :step="1"
+        type="range"
+        focus:outline-none
+        appearance-none bg-transparent
+        w-full cursor-pointer
+        @change="setFontSize"
+      >
+      <div flex items-center justify-between absolute w-full pointer-events-none>
+        <div
+          v-for="i in sizes.length" :key="i"
+          h-3 w-3
+          rounded-full bg-secondary-light
+          relative
+        >
+          <div
+            v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
+            absolute rounded-full class="-top-1 -left-1"
+            bg-primary h-5 w-5
+          />
+        </div>
+      </div>
+    </div>
+    <span text-xl text-secondary>Aa</span>
+  </div>
 </template>
+
+<style>
+  input[type=range]::-webkit-slider-runnable-track {
+    --at-apply: bg-secondary-light rounded-full h1 op60;
+  }
+  input[type=range]:focus:-webkit-slider-runnable-track {
+    --at-apply: outline-2 outline-red;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    --at-apply: w3 h3 bg-primary -mt-1 outline outline-3 outline-primary rounded-full cursor-pointer appearance-none;
+  }
+  input[type=range]::-moz-range-track {
+    --at-apply: bg-secondary-light rounded-full h1 op60;
+  }
+  input[type=range]:focus::-moz-range-track {
+    --at-apply: outline-2 outline-red;
+  }
+  input[type=range]::-moz-range-thumb {
+    --at-apply: w3 h3 bg-primary -mt-1 outline outline-3 outline-primary rounded-full cursor-pointer appearance-none border-none;
+  }
+</style>