feat: font size preference

This commit is contained in:
patak 2022-12-23 23:47:13 +01:00
parent 99abb78ef1
commit 41ef187379
9 changed files with 65 additions and 1 deletions

View file

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
setupI18n() setupI18n()
setupFontSize()
setupPageHeader() setupPageHeader()
provideGlobalCommands() provideGlobalCommands()

View file

@ -30,6 +30,13 @@ const buildTimeAgo = useTimeAgo(buildTime, timeAgoOptions)
</button> </button>
</CommonTooltip> </CommonTooltip>
</NavSelectLanguage> </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"> <NavSelectFeatureFlags v-if="isMastoInitialised && currentUser">
<CommonTooltip :content="$t('nav_footer.select_feature_flags')"> <CommonTooltip :content="$t('nav_footer.select_feature_flags')">
<button flex :aria-label="$t('nav_footer.select_feature_flags')"> <button flex :aria-label="$t('nav_footer.select_feature_flags')">

View file

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

View file

@ -81,7 +81,7 @@ const isDM = $computed(() => status.visibility === 'direct')
<AccountAvatar w-12 h-12 :account="status.account" /> <AccountAvatar w-12 h-12 :account="status.account" />
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </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" /> <AccountAvatar :account="rebloggedBy" />
</div> </div>
</div> </div>

21
composables/fontSize.ts Normal file
View file

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

View file

@ -66,3 +66,10 @@ export async function setupI18n() {
}) })
}) })
} }
export async function setupFontSize() {
if (!process.server) {
setFontSizeCSSVar()
watch(fontSize, setFontSizeCSSVar)
}
}

View file

@ -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_FIRST_VISIT = 'elk-first-visit'
export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode' export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
export const STORAGE_KEY_LANG = 'elk-lang' 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_FEATURE_FLAGS = 'elk-feature-flags'
export const STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS = 'elk-hide-explore-posts-tips' 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' export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'

View file

@ -1,3 +1,7 @@
html {
font-size: var(--font-size);
}
@font-face { @font-face {
font-display: swap; font-display: swap;
font-family: "DM Mono"; font-family: "DM Mono";

View file

@ -1,4 +1,6 @@
:root { :root {
--font-size: 15px;
--c-primary: #EA9E44; --c-primary: #EA9E44;
--c-primary-active: #C16929; --c-primary-active: #C16929;
--c-primary-light: #EA9E4466; --c-primary-light: #EA9E4466;