feat: update design of font selector in settings ui

components/settings/SettingsFontSize.vue

@@ -4,12 +4,61 @@ import type { FontSize } from '~/types'
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
 const fontSize = useFontSizeRef()
+
+const setFontSize = (e: any) => {
+  if ('valueAsNumber' in e.target)
+    fontSize.value = sizes[e.target.valueAsNumber]
+}
 </script>
 
 <template>
-  <select v-model="fontSize">
-    <option v-for="size in sizes" :key="size" :value="size" :selected="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(fontSize)"
+        :aria-valuetext="`${$t(`settings.interface.size_label.${fontSize}`)}${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"
+        @input="setFontSize"
+      >
+      <div absolute h1 rounded-full bg-primary pointer-events-none :style="{ width: `${(sizes.indexOf(fontSize)) / (sizes.length - 1) * 100}%` }" />
+      <div flex justify-between absolute w-full pointer-events-none>
+        <div v-for="i in sizes.length" :key="i" h-3 w-3 rounded-full bg-primary />
+      </div>
+    </div>
+    <span text-xl text-secondary>Aa</span>
+  </div>
 </template>
+
+<style>
+  input[type=range]::-webkit-slider-runnable-track {
+    --at-apply: bg-primary-light rounded-full h1;
+  }
+
+  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-primary-light rounded-full h1;
+  }
+
+  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;
+  }
+</style>

pages/settings/interface/index.vue

@@ -1,9 +1,36 @@
 <script setup lang="ts">
+import type { mastodon } from 'masto'
 const { t } = useI18n()
 
 useHeadFixed({
   title: () => `${t('settings.interface.label')} | ${t('nav.settings')}`,
 })
+
+const loremStatus = computed(() => {
+  if (currentUser.value) {
+    const loremStatus: mastodon.v1.Status = {
+      account: currentUser.value!.account,
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis justo ut dapibus pretium. In vitae massa pulvinar, auctor ipsum nec, mattis massa. Praesent convallis.',
+      emojis: currentCustomEmojis.value.emojis,
+      id: '0',
+      favouritesCount: 0,
+      repliesCount: 0,
+      reblogsCount: 0,
+      sensitive: false,
+      uri: '',
+      application: { name: 'Elk' },
+      createdAt: '2021-01-01T00:00:00.000Z',
+      editedAt: null,
+      visibility: 'public',
+      mentions: [],
+      tags: [],
+      mediaAttachments: [],
+      spoilerText: '',
+    }
+
+    return loremStatus
+  }
+})
 </script>
 
 <template>
@@ -14,6 +41,10 @@ useHeadFixed({
       </div>
     </template>
     <div p6 flex="~ col gap6">
+      <div v-if="loremStatus" border="~ base rounded" bg-active>
+        <StatusCard :status="loremStatus" />
+      </div>
+
       <label space-y-2>
         <p font-medium>{{ $t('settings.interface.font_size') }}</p>
         <SettingsFontSize select-settings />