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

feat(settings): show default font size

Browse source
This commit is contained in:
三咲智子 2022-12-30 04:08:50 +08:00
parent 40481c91e8
commit 55236dac98
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
6 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/settings/SettingsFontSize.vue
View file

@ -1,4 +1,5 @@
<script lang="ts" setup>
import { DEFAULT_FONT_SIZE } from '~/constants'
import type { FontSize } from '~/types'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
@ -8,7 +9,7 @@ const fontSize = useFontSizeRef()
<template>
<select v-model="fontSize">
<option v-for="size in sizes" :key="size" :value="size" :selected="fontSize === size">
{{ size }}
{{ `${size}${size === DEFAULT_FONT_SIZE ? $t('settings.interface.default') : ''}` }}
</option>
</select>
</template>

1
constants/index.ts
View file

@ -2,6 +2,7 @@ export const APP_NAME = 'Elk'
export const DEFAULT_POST_CHARS_LIMIT = 500
export const DEFAULT_SERVER = 'mas.to'
export const DEFAULT_FONT_SIZE = 'md'
export const STORAGE_KEY_DRAFTS = 'elk-drafts'
export const STORAGE_KEY_USERS = 'elk-users'

1
locales/en-GB.json
View file

@ -226,6 +226,7 @@
"interface": {
"color_mode": "Color Mode",
"dark_mode": "Dark Mode",
"default": " (default)",
"font_size": "Font Size",
"label": "Interface",
"light_mode": "Light Mode"

1
locales/en-US.json
View file

@ -226,6 +226,7 @@
"interface": {
"color_mode": "Color Mode",
"dark_mode": "Dark Mode",
"default": " (default)",
"font_size": "Font Size",
"label": "Interface",
"light_mode": "Light Mode"

1
locales/zh-CN.json
View file

@ -226,6 +226,7 @@
"interface": {
"color_mode": "颜色",
"dark_mode": "暗色模式",
"default": "（默认）",
"font_size": "字号",
"label": "外观",
"light_mode": "亮色模式"

9
plugins/setup-font-size.ts
View file

@ -1,23 +1,22 @@
import type { FontSize } from '~/types'
import { InjectionKeyFontSize } from '~/constants/symbols'
import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE } from '~/constants'
import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE, DEFAULT_FONT_SIZE } from '~/constants'
import { fontSizeMap } from '~/constants/options'
export default defineNuxtPlugin((nuxt) => {
const DEFAULT = 'md'
const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT, maxAge: COOKIE_MAX_AGE })
const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT_FONT_SIZE, maxAge: COOKIE_MAX_AGE })
nuxt.vueApp.provide(InjectionKeyFontSize, cookieFontSize)
if (!process.server) {
watchEffect(() => {
document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT])
document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT_FONT_SIZE])
})
}
else {
useHead({
style: [
{
innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT]}; }`,
innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT_FONT_SIZE]}; }`,
},
],
})