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>

composables/settings/definition.ts

@@ -1,6 +1,10 @@
 import { DEFAULT_FONT_SIZE } from '~/constants'
 
-export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type FontSize = `${number}px`
+
+// Temporary type for backward compatibility
+export type OldFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
 export type ColorMode = 'light' | 'dark' | 'system'
 
 export interface PreferencesSettings {

composables/settings/storage.ts

@@ -1,14 +1,21 @@
 import type { Ref } from 'vue'
 import type { VueI18n } from 'vue-i18n'
 import type { LocaleObject } from 'vue-i18n-routing'
-import type { PreferencesSettings, UserSettings } from './definition'
+import type { FontSize, OldFontSize, PreferencesSettings, UserSettings } from './definition'
 import { STORAGE_KEY_SETTINGS } from '~/constants'
+import { oldFontSizeMap } from '~~/constants/options'
 
 export function useUserSettings() {
   const i18n = useNuxtApp().vueApp.config.globalProperties.$i18n as VueI18n
   const { locales } = i18n
   const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
-  return useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, () => getDefaultUserSettings(supportLanguages))
+  const settingsStorage = useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, () => getDefaultUserSettings(supportLanguages))
+
+  // Backward compatibility, font size was xs, sm, md, lg, xl before
+  if (settingsStorage.value.fontSize && !settingsStorage.value.fontSize.includes('px'))
+    settingsStorage.value.fontSize = oldFontSizeMap[settingsStorage.value.fontSize as OldFontSize] as FontSize
+
+  return settingsStorage
 }
 
 // TODO: refactor & simplify this

constants/index.ts

@@ -1,7 +1,7 @@
 export const APP_NAME = 'Elk'
 
 export const DEFAULT_POST_CHARS_LIMIT = 500
-export const DEFAULT_FONT_SIZE = 'md'
+export const DEFAULT_FONT_SIZE = '15px'
 
 export const STORAGE_KEY_DRAFTS = 'elk-drafts'
 export const STORAGE_KEY_USERS = 'elk-users'

constants/options.ts

@@ -1,4 +1,4 @@
-export const fontSizeMap = {
+export const oldFontSizeMap = {
   xs: '13px',
   sm: '14px',
   md: '15px',

locales/ar-EG.json

@@ -260,13 +260,6 @@
       "font_size": "حجم الخط",
       "label": "واجهه المستخدم",
       "light_mode": "وضع الضوء",
-      "size_label": {
-        "lg": "كبير",
-        "md": "متوسط",
-        "sm": "صغير",
-        "xl": "ضخم",
-        "xs": "صغير جدا"
-      },
       "system_mode": "النظام"
     },
     "language": {

locales/de-DE.json

@@ -266,13 +266,6 @@
       "font_size": "Schriftgröße",
       "label": "Oberfläche",
       "light_mode": "Helles Farbschema",
-      "size_label": {
-        "lg": "Groß",
-        "md": "Mittel",
-        "sm": "Klein",
-        "xl": "Extra groß",
-        "xs": "Extra klein"
-      },
       "system_mode": "System"
     },
     "language": {

locales/en-US.json

@@ -301,13 +301,6 @@
       "font_size": "Font Size",
       "label": "Interface",
       "light_mode": "Light",
-      "size_label": {
-        "lg": "Large",
-        "md": "Medium",
-        "sm": "Small",
-        "xl": "Extra large",
-        "xs": "Extra small"
-      },
       "system_mode": "System",
       "theme_color": "Theme Color"
     },

locales/es-ES.json

@@ -255,14 +255,7 @@
       "default": " (por defecto)",
       "font_size": "Tamaño de Letra",
       "label": "Interfaz",
-      "light_mode": "Modo claro",
-      "size_label": {
-        "lg": "Grande",
-        "md": "Mediana",
-        "sm": "Pequeña",
-        "xl": "Extra grande",
-        "xs": "Extra pequeña"
-      }
+      "light_mode": "Modo claro"
     },
     "language": {
       "display_language": "Idioma de pantalla",

locales/fr-FR.json

@@ -306,13 +306,6 @@
       "font_size": "Taille de police",
       "label": "Interface",
       "light_mode": "Mode lumineux",
-      "size_label": {
-        "lg": "Grande",
-        "md": "Moyenne",
-        "sm": "Petite",
-        "xl": "Très grande",
-        "xs": "Très petite"
-      },
       "system_mode": "Système",
       "theme_color": "Couleur du thème"
     },

locales/id-ID.json

@@ -304,13 +304,6 @@
       "font_size": "Ukuran huruf",
       "label": "Antarmuka",
       "light_mode": "Terang",
-      "size_label": {
-        "lg": "Besar",
-        "md": "Medium",
-        "sm": "Kecil",
-        "xl": "Ekstra besar",
-        "xs": "Ekstra kecil"
-      },
       "system_mode": "Sistem",
       "theme_color": "Warna Tema"
     },

locales/ja-JP.json

@@ -301,13 +301,6 @@
       "font_size": "フォントサイズ",
       "label": "インターフェイス",
       "light_mode": "ライトモード",
-      "size_label": {
-        "lg": "大",
-        "md": "中",
-        "sm": "小",
-        "xl": "極大",
-        "xs": "極小"
-      },
       "system_mode": "システム",
       "theme_color": "テーマカラー"
     },

locales/pt-PT.json

@@ -301,13 +301,6 @@
       "font_size": "Tamanho da fonte",
       "label": "Apresentação",
       "light_mode": "Modo Claro",
-      "size_label": {
-        "lg": "Grande",
-        "md": "Médio",
-        "sm": "Pequeno",
-        "xl": "Extra grande",
-        "xs": "Extra pequeno"
-      },
       "system_mode": "Sistema",
       "theme_color": "Cor to Tema"
     },

locales/tr-TR.json

@@ -256,13 +256,6 @@
       "font_size": "Font Boyutu",
       "label": "Arayüz",
       "light_mode": "Aydınlık Mod",
-      "size_label": {
-        "lg": "Büyük",
-        "md": "Orta",
-        "sm": "Küçük",
-        "xl": "Çok büyük",
-        "xs": "Çok küçük"
-      },
       "system_mode": "Sistem"
     },
     "language": {

locales/uk-UA.json

@@ -226,14 +226,7 @@
       "default": " (за замовчуванням)",
       "font_size": "Розмір шрифта",
       "label": "Інтерфейс",
-      "light_mode": "Світла",
-      "size_label": {
-        "lg": "Великий",
-        "md": "Середній",
-        "sm": "Малий",
-        "xl": "Дуже великий",
-        "xs": "Дуже малий"
-      }
+      "light_mode": "Світла"
     },
     "language": {
       "display_language": "Мова інтерфейсу",

locales/zh-CN.json

@@ -274,13 +274,6 @@
       "font_size": "字号",
       "label": "外观",
       "light_mode": "浅色",
-      "size_label": {
-        "lg": "大",
-        "md": "中",
-        "sm": "小",
-        "xl": "特大",
-        "xs": "特小"
-      },
       "system_mode": "跟随系统"
     },
     "language": {

locales/zh-TW.json

@@ -284,13 +284,6 @@
       "font_size": "字體大小",
       "label": "外觀",
       "light_mode": "淺色",
-      "size_label": {
-        "lg": "大",
-        "md": "中",
-        "sm": "小",
-        "xl": "特大",
-        "xs": "特小"
-      },
       "system_mode": "系統預設",
       "theme_color": "主題色"
     },

plugins/setup-global-effects.client.ts

@@ -1,11 +1,13 @@
-import { fontSizeMap } from '~/constants/options'
+import type { OldFontSize } from '~/composables/settings'
+import { oldFontSizeMap } from '~/constants/options'
 import { DEFAULT_FONT_SIZE } from '~/constants'
 
 export default defineNuxtPlugin(() => {
   const userSettings = useUserSettings()
   const html = document.documentElement
   watchEffect(() => {
-    html.style.setProperty('--font-size', fontSizeMap[userSettings.value.fontSize || DEFAULT_FONT_SIZE])
+    const { fontSize } = userSettings.value
+    html.style.setProperty('--font-size', fontSize ? (oldFontSizeMap[fontSize as OldFontSize] ?? fontSize) : DEFAULT_FONT_SIZE)
   })
   watchEffect(() => {
     html.classList.toggle('zen', userSettings.value.zenMode)

plugins/setup-head-script.server.ts

@@ -1,5 +1,5 @@
 import { STORAGE_KEY_CURRENT_USER_HANDLE, STORAGE_KEY_SETTINGS } from '~/constants'
-import { fontSizeMap } from '~/constants/options'
+import { oldFontSizeMap } from '~/constants/options'
 
 /**
  * Injecting scripts before renders
@@ -19,8 +19,8 @@ export default defineNuxtPlugin(() => {
   ${process.dev ? 'console.log({ settings })' : ''}
 
   if (settings.fontSize) {
-    const fontSizeMap = ${JSON.stringify(fontSizeMap)}
-    html.style.setProperty('--font-size', fontSizeMap[settings.fontSize])
+    const oldFontSizeMap = ${JSON.stringify(oldFontSizeMap)}
+    html.style.setProperty('--font-size', oldFontSizeMap[settings.fontSize] || settings.fontSize)
   }
   if (settings.language) {
     html.setAttribute('lang', settings.language)

unocss.config.ts

@@ -22,6 +22,8 @@ export default defineConfig({
       'bg-base': 'bg-$c-bg-base',
       'bg-border': 'bg-$c-border',
       'bg-active': 'bg-$c-bg-active',
+      'bg-secondary': 'bg-$c-text-secondary',
+      'bg-secondary-light': 'bg-$c-text-secondary-light',
       'bg-primary-light': 'bg-$c-primary-light',
       'bg-primary-fade': 'bg-$c-primary-fade',
       'bg-card': 'bg-$c-bg-card',