mirrors/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-11-22 01:15:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix: zen mode on refresh

Browse source
This commit is contained in:
Anthony Fu 2023-01-14 11:09:17 +01:00
parent 680b3493b3
commit bef1371516
5 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
composables/settings/storage.ts
View file

@ -2,10 +2,8 @@ import type { Ref } from 'vue'
import type { FeatureFlags, UserSettings, WellnessSettings } from './definition' import type { FeatureFlags, UserSettings, WellnessSettings } from './definition'
import { STORAGE_KEY_SETTINGS } from '~/constants' import { STORAGE_KEY_SETTINGS } from '~/constants'
export const useUserSettings = () => { export function useUserSettings() {
if (process.server) return useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, getDefaultUserSettings)
return useState('user-settings', getDefaultUserSettings)
return useUserLocalStorage(STORAGE_KEY_SETTINGS, getDefaultUserSettings)
} }
// TODO: refactor & simplify this // TODO: refactor & simplify this

7
composables/users.ts
View file

@ -277,7 +277,10 @@ interface UseUserLocalStorageCache {
/** /**
* Create reactive storage for the current user * Create reactive storage for the current user
*/ */
export function useUserLocalStorage<T extends object>(key: string, initial: () => T) { export function useUserLocalStorage<T extends object>(key: string, initial: () => T): Ref<T> {
if (process.server)
return shallowRef(initial())
// @ts-expect-error bind value to the function // @ts-expect-error bind value to the function
const map: Map<string, UseUserLocalStorageCache> = useUserLocalStorage._ = useUserLocalStorage._ || new Map() const map: Map<string, UseUserLocalStorageCache> = useUserLocalStorage._ = useUserLocalStorage._ || new Map()
@ -296,7 +299,7 @@ export function useUserLocalStorage<T extends object>(key: string, initial: () =
map.set(key, { scope, value: value! }) map.set(key, { scope, value: value! })
} }
return map.get(key)!.value return map.get(key)!.value as Ref<T>
} }
/** /**

2
layouts/default.vue
View file

@ -13,7 +13,7 @@ const showUserPicker = logicAnd(
</script> </script>
<template> <template>
<div h-full :class="{ zen: userSettings.zenMode }"> <div h-full>
<main flex w-full mxa lg:max-w-80rem> <main flex w-full mxa lg:max-w-80rem>
<aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative> <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
<div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center> <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>

3
plugins/setup-font-size.client.ts → plugins/setup-global-effects.client.ts
View file

@ -7,4 +7,7 @@ export default defineNuxtPlugin(() => {
watchEffect(() => { watchEffect(() => {
html.style.setProperty('--font-size', fontSizeMap[userSettings.value.fontSize || DEFAULT_FONT_SIZE]) html.style.setProperty('--font-size', fontSizeMap[userSettings.value.fontSize || DEFAULT_FONT_SIZE])
}) })
watchEffect(() => {
html.classList.toggle('zen', userSettings.value.zenMode)
})
}) })

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

@ -19,15 +19,15 @@ export default defineNuxtPlugin(() => {
const html = document.querySelector('html') const html = document.querySelector('html')
${process.dev ? 'console.log({ settings })' : ''} ${process.dev ? 'console.log({ settings })' : ''}
const { fontSize, language } = settings || {} if (settings.fontSize) {
if (fontSize) {
const fontSizeMap = ${JSON.stringify(fontSizeMap)} const fontSizeMap = ${JSON.stringify(fontSizeMap)}
html.style.setProperty('--font-size', fontSizeMap[fontSize]) html.style.setProperty('--font-size', fontSizeMap[settings.fontSize])
} }
if (settings.language) {
if (language) { html.setAttribute('lang', settings.language)
html.setAttribute('lang', language) }
if (settings.zenMode) {
html.classList.add('zen')
} }
})()`.trim().replace(/\s*\n+\s*/g, ';'), })()`.trim().replace(/\s*\n+\s*/g, ';'),
}, },