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

feat: zenmode

Browse source
This commit is contained in:
Anthony Fu 2022-11-24 12:21:30 +08:00
parent 3ce1eb3537
commit e17b918c00
5 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
components/nav/NavFooter.vue
View file

@ -7,7 +7,14 @@ const buildTimeAgo = useTimeAgo(buildTime)
<template> <template>
<div p4 text-sm op25 flex="~ col"> <div p4 text-sm op25 flex="~ col">
<button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" /> <div flex="~ gap2">
<button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
<button
text-lg mb4
:class="isZenmode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
@click="toggleZenmode()"
/>
</div>
<a cursor-pointer hover:underline @click="openPreviewHelp">Show intro</a> <a cursor-pointer hover:underline @click="openPreviewHelp">Show intro</a>
<div>A Mastodon client made with 💛</div> <div>A Mastodon client made with 💛</div>
<div>Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/elk" target="_blank">GitHub</a></div> <div>Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/elk" target="_blank">GitHub</a></div>

4
composables/dialog.ts
View file

@ -1,6 +1,8 @@
import { STORAGE_KEY_FIRST_VISIT } from '~/constants' import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true) export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
export const isZenmode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
export const toggleZenmode = useToggle(isZenmode)
export const isUserSwitcherOpen = ref(false) export const isUserSwitcherOpen = ref(false)
export const isSigninDialogOpen = ref(false) export const isSigninDialogOpen = ref(false)

1
constants/index.ts
View file

@ -11,4 +11,5 @@ export const STORAGE_KEY_USERS = 'elk-users'
export const STORAGE_KEY_CURRENT_USER = 'elk-current-user' export const STORAGE_KEY_CURRENT_USER = 'elk-current-user'
export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab' 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'

6
layouts/default.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div h-full> <div h-full :class="{ zenmode: isZenmode }">
<main flex w-full mxa lg:max-w-80rem> <main flex w-full mxa lg:max-w-80rem>
<div class="hidden md:block w-1/4" relative> <div class="hidden md:block w-1/4 zen-hide" relative>
<div sticky top-0 h-screen flex="~ col"> <div sticky top-0 h-screen flex="~ col">
<slot name="left"> <slot name="left">
<template v-if="currentUser"> <template v-if="currentUser">
@ -23,7 +23,7 @@
<div class="w-full md:w-2/4 min-h-screen" border="l r base"> <div class="w-full md:w-2/4 min-h-screen" border="l r base">
<slot /> <slot />
</div> </div>
<div class="hidden md:block w-1/4"> <div class="hidden md:block w-1/4 zen-hide">
<div sticky top-0 h-screen flex="~ col"> <div sticky top-0 h-screen flex="~ col">
<slot name="right"> <slot name="right">
<NavTitle p5 /> <NavTitle p5 />

4
styles/global.css
View file

@ -61,3 +61,7 @@ html {
} }
} }
} }
.zenmode .zen-hide {
--at-apply: op0 hover:op100 transition duration-600;
}