teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: range of font size (#1376)

Browse source
This commit is contained in:
patak 2023-01-22 21:18:03 +01:00 committed by GitHub
parent 85be61a316
commit 1a577343da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 86 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
components/settings/SettingsFontSize.vue
View file

@ -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>

6
composables/settings/definition.ts
View file

@ -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 {

11
composables/settings/storage.ts
View file

@ -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

2
constants/index.ts
View file

@ -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'

2
constants/options.ts
View file

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

7
locales/ar-EG.json
View file

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

7
locales/de-DE.json
View file

@ -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": {

7
locales/en-US.json
View file

@ -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"
},

9
locales/es-ES.json
View file

@ -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",

7
locales/fr-FR.json
View file

@ -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"
},

7
locales/id-ID.json
View file

@ -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"
},

7
locales/ja-JP.json
View file

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

7
locales/pt-PT.json
View file

@ -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"
},

7
locales/tr-TR.json
View file

@ -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": {

9
locales/uk-UA.json
View file

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

7
locales/zh-CN.json
View file

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

7
locales/zh-TW.json
View file

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

6
plugins/setup-global-effects.client.ts
View file

@ -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)

6
plugins/setup-head-script.server.ts
View file

@ -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)

2
unocss.config.ts
View file

@ -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',