feat: font size preference
parent
99abb78ef1
commit
41ef187379
1
app.vue
1
app.vue
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
setupI18n()
|
||||
setupFontSize()
|
||||
setupPageHeader()
|
||||
provideGlobalCommands()
|
||||
|
||||
|
|
|
@ -30,6 +30,13 @@ const buildTimeAgo = useTimeAgo(buildTime, timeAgoOptions)
|
|||
</button>
|
||||
</CommonTooltip>
|
||||
</NavSelectLanguage>
|
||||
<NavSelectFontSize>
|
||||
<CommonTooltip :content="$t('nav_footer.select_font_size')">
|
||||
<button flex :aria-label="$t('nav_footer.select_font_size')">
|
||||
<div i-ri:font-size text-lg />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</NavSelectFontSize>
|
||||
<NavSelectFeatureFlags v-if="isMastoInitialised && currentUser">
|
||||
<CommonTooltip :content="$t('nav_footer.select_feature_flags')">
|
||||
<button flex :aria-label="$t('nav_footer.select_feature_flags')">
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
<script lang="ts" setup>
|
||||
import { FontSize } from 'composables/fontSize'
|
||||
const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonDropdown>
|
||||
<slot />
|
||||
|
||||
<template #popper>
|
||||
<CommonDropdownItem
|
||||
v-for="size in sizes"
|
||||
:key="size"
|
||||
:checked="size === fontSize"
|
||||
@click="setFontSize(size as FontSize)"
|
||||
>
|
||||
{{ size }}
|
||||
</CommonDropdownItem>
|
||||
</template>
|
||||
</CommonDropdown>
|
||||
</template>
|
|
@ -81,7 +81,7 @@ const isDM = $computed(() => status.visibility === 'direct')
|
|||
<AccountAvatar w-12 h-12 :account="status.account" />
|
||||
</NuxtLink>
|
||||
</AccountHoverWrapper>
|
||||
<div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-2 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
|
||||
<div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-1 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
|
||||
<AccountAvatar :account="rebloggedBy" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
import { STORAGE_KEY_FONT_SIZE } from '~/constants'
|
||||
|
||||
export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||
|
||||
export const fontSize = useLocalStorage<FontSize>(STORAGE_KEY_FONT_SIZE, 'md')
|
||||
|
||||
export function setFontSize(size: FontSize) {
|
||||
fontSize.value = size
|
||||
}
|
||||
|
||||
export const fontSizeMap = {
|
||||
xs: '13px',
|
||||
sm: '14px',
|
||||
md: '15px',
|
||||
lg: '16px',
|
||||
xl: '17px',
|
||||
}
|
||||
|
||||
export function setFontSizeCSSVar() {
|
||||
document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value])
|
||||
}
|
|
@ -66,3 +66,10 @@ export async function setupI18n() {
|
|||
})
|
||||
})
|
||||
}
|
||||
|
||||
export async function setupFontSize() {
|
||||
if (!process.server) {
|
||||
setFontSizeCSSVar()
|
||||
watch(fontSize, setFontSizeCSSVar)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,6 +11,7 @@ export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
|
|||
export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
|
||||
export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
|
||||
export const STORAGE_KEY_LANG = 'elk-lang'
|
||||
export const STORAGE_KEY_FONT_SIZE = 'elk-font-size'
|
||||
export const STORAGE_KEY_FEATURE_FLAGS = 'elk-feature-flags'
|
||||
export const STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS = 'elk-hide-explore-posts-tips'
|
||||
export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
html {
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: "DM Mono";
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
:root {
|
||||
--font-size: 15px;
|
||||
|
||||
--c-primary: #EA9E44;
|
||||
--c-primary-active: #C16929;
|
||||
--c-primary-light: #EA9E4466;
|
||||
|
|
Loading…
Reference in New Issue