From 1a577343daabfcb5dd1c45fd1ee630d464a00bb3 Mon Sep 17 00:00:00 2001 From: patak Date: Sun, 22 Jan 2023 21:18:03 +0100 Subject: [PATCH] feat: range of font size (#1376) --- components/settings/SettingsFontSize.vue | 65 +++++++++++++++++++++--- composables/settings/definition.ts | 6 ++- composables/settings/storage.ts | 11 +++- constants/index.ts | 2 +- constants/options.ts | 2 +- locales/ar-EG.json | 7 --- locales/de-DE.json | 7 --- locales/en-US.json | 7 --- locales/es-ES.json | 9 +--- locales/fr-FR.json | 7 --- locales/id-ID.json | 7 --- locales/ja-JP.json | 7 --- locales/pt-PT.json | 7 --- locales/tr-TR.json | 7 --- locales/uk-UA.json | 9 +--- locales/zh-CN.json | 7 --- locales/zh-TW.json | 7 --- plugins/setup-global-effects.client.ts | 6 ++- plugins/setup-head-script.server.ts | 6 +-- unocss.config.ts | 2 + 20 files changed, 86 insertions(+), 102 deletions(-) diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue index 24207113..8b8de08b 100644 --- a/components/settings/SettingsFontSize.vue +++ b/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] +} + + diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts index d25bb959..3f790b98 100644 --- a/composables/settings/definition.ts +++ b/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 { diff --git a/composables/settings/storage.ts b/composables/settings/storage.ts index 559c0405..959895d6 100644 --- a/composables/settings/storage.ts +++ b/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(STORAGE_KEY_SETTINGS, () => getDefaultUserSettings(supportLanguages)) + const settingsStorage = useUserLocalStorage(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 diff --git a/constants/index.ts b/constants/index.ts index e1d3f8ab..0f836c8b 100644 --- a/constants/index.ts +++ b/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' diff --git a/constants/options.ts b/constants/options.ts index b8db8cce..8667d498 100644 --- a/constants/options.ts +++ b/constants/options.ts @@ -1,4 +1,4 @@ -export const fontSizeMap = { +export const oldFontSizeMap = { xs: '13px', sm: '14px', md: '15px', diff --git a/locales/ar-EG.json b/locales/ar-EG.json index 3d04ccfa..5fc44c21 100644 --- a/locales/ar-EG.json +++ b/locales/ar-EG.json @@ -260,13 +260,6 @@ "font_size": "حجم الخط", "label": "واجهه المستخدم", "light_mode": "وضع الضوء", - "size_label": { - "lg": "كبير", - "md": "متوسط", - "sm": "صغير", - "xl": "ضخم", - "xs": "صغير جدا" - }, "system_mode": "النظام" }, "language": { diff --git a/locales/de-DE.json b/locales/de-DE.json index 2729f27d..64b5a589 100644 --- a/locales/de-DE.json +++ b/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": { diff --git a/locales/en-US.json b/locales/en-US.json index 28cba3f1..30c712bd 100644 --- a/locales/en-US.json +++ b/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" }, diff --git a/locales/es-ES.json b/locales/es-ES.json index 41f79445..ee7cc2fd 100644 --- a/locales/es-ES.json +++ b/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", diff --git a/locales/fr-FR.json b/locales/fr-FR.json index 4f77860b..30ba74f1 100644 --- a/locales/fr-FR.json +++ b/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" }, diff --git a/locales/id-ID.json b/locales/id-ID.json index 39453468..af8f83fe 100644 --- a/locales/id-ID.json +++ b/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" }, diff --git a/locales/ja-JP.json b/locales/ja-JP.json index c350c224..ca5aeefd 100644 --- a/locales/ja-JP.json +++ b/locales/ja-JP.json @@ -301,13 +301,6 @@ "font_size": "フォントサイズ", "label": "インターフェイス", "light_mode": "ライトモード", - "size_label": { - "lg": "大", - "md": "中", - "sm": "小", - "xl": "極大", - "xs": "極小" - }, "system_mode": "システム", "theme_color": "テーマカラー" }, diff --git a/locales/pt-PT.json b/locales/pt-PT.json index bb1f68e6..12c9e1bf 100644 --- a/locales/pt-PT.json +++ b/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" }, diff --git a/locales/tr-TR.json b/locales/tr-TR.json index 7adbb919..87486abf 100644 --- a/locales/tr-TR.json +++ b/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": { diff --git a/locales/uk-UA.json b/locales/uk-UA.json index 5a5a7c0d..3613f998 100644 --- a/locales/uk-UA.json +++ b/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": "Мова інтерфейсу", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 69c1cdd9..9cce0cfa 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -274,13 +274,6 @@ "font_size": "字号", "label": "外观", "light_mode": "浅色", - "size_label": { - "lg": "大", - "md": "中", - "sm": "小", - "xl": "特大", - "xs": "特小" - }, "system_mode": "跟随系统" }, "language": { diff --git a/locales/zh-TW.json b/locales/zh-TW.json index 125ea7cb..b308a2a3 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -284,13 +284,6 @@ "font_size": "字體大小", "label": "外觀", "light_mode": "淺色", - "size_label": { - "lg": "大", - "md": "中", - "sm": "小", - "xl": "特大", - "xs": "特小" - }, "system_mode": "系統預設", "theme_color": "主題色" }, diff --git a/plugins/setup-global-effects.client.ts b/plugins/setup-global-effects.client.ts index b8bb5c98..a44bbb1d 100644 --- a/plugins/setup-global-effects.client.ts +++ b/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) diff --git a/plugins/setup-head-script.server.ts b/plugins/setup-head-script.server.ts index 5ca933d2..fde9d5a5 100644 --- a/plugins/setup-head-script.server.ts +++ b/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) diff --git a/unocss.config.ts b/unocss.config.ts index e6ef9127..ad68e32b 100644 --- a/unocss.config.ts +++ b/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',