zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: move nav footer items to settings

Browse source
This commit is contained in:
Anthony Fu 2022-12-28 00:03:50 +01:00
parent 378ba25997
commit 12942095de
15 changed files with 101 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

39
components/nav/NavBottomMoreMenu.vue
View file

@ -81,34 +81,17 @@ onBeforeUnmount(() => {
<span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl mr-4 !align-middle" />
{{ !isDark ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
</button>
<!-- Switch languages -->
<NavSelectLanguage>
<button
flex flex-row items-center
block px-5 py-2 focus-blue w-full
text-sm text-base capitalize text-left whitespace-nowrap
transition-colors duration-200 transform
hover="bg-gray-100 dark:(bg-gray-700 text-white)"
@click.stop
>
<span class="i-ri:earth-line flex-shrink-0 text-xl mr-4 !align-middle" />
{{ $t('nav.select_language') }}
</button>
</NavSelectLanguage>
<!-- Switch font size -->
<NavSelectFontSize>
<button
flex flex-row items-center
block px-5 py-2 focus-blue w-full
text-sm text-base capitalize text-left whitespace-nowrap
transition-colors duration-200 transform
hover="bg-gray-100 dark:(bg-gray-700 text-white)"
@click.stop
>
<span class="i-ri:font-size flex-shrink-0 text-xl mr-4 !align-middle" />
{{ $t('nav.select_font_size') }}
</button>
</NavSelectFontSize>
<NuxtLink
flex flex-row items-center
block px-5 py-2 focus-blue w-full
text-sm text-base capitalize text-left whitespace-nowrap
transition-colors duration-200 transform
hover="bg-gray-100 dark:(bg-gray-700 text-white)"
to="/settings"
>
<span class="i-ri:settings-2-line flex-shrink-0 text-xl mr-4 !align-middle" />
{{ $t('nav.settings') }}
</NuxtLink>
</div>
</div>
</div>

14
components/nav/NavFooter.vue
View file

@ -31,20 +31,6 @@ const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
:aria-label="$t('nav.settings')"
/>
</CommonTooltip>
<NavSelectLanguage>
<CommonTooltip :content="$t('nav.select_language')">
<button flex :aria-label="$t('nav.select_language')">
<div i-ri:earth-line text-lg />
</button>
</CommonTooltip>
</NavSelectLanguage>
<NavSelectFontSize>
<CommonTooltip :content="$t('nav.select_font_size')">
<button flex :aria-label="$t('nav.select_font_size')">
<div i-ri:font-size text-lg />
</button>
</CommonTooltip>
</NavSelectFontSize>
</div>
<div>
<button cursor-pointer hover:underline @click="openPreviewHelp">

23
components/nav/SelectFontSize.vue
View file

@ -1,23 +0,0 @@
<script lang="ts" setup>
import type { FontSize } from '~/composables/fontSize'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
const fontSize = getFontSize()
</script>
<template>
<CommonDropdown>
<slot />
<template #popper>
<CommonDropdownItem
v-for="size in sizes"
:key="size"
:checked="size === fontSize"
@click="fontSize = size"
>
{{ size }}
</CommonDropdownItem>
</template>
</CommonDropdown>
</template>

24
components/nav/SelectLanguage.vue
View file

@ -1,24 +0,0 @@
<script lang="ts" setup>
import type { ComputedRef } from 'vue'
import type { LocaleObject } from '#i18n'
const { locale, t, setLocale } = useI18n()
const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
</script>
<template>
<CommonDropdown>
<slot />
<template #popper>
<CommonDropdownItem
v-for="item in locales"
:key="item.code"
:checked="item.code === locale"
@click="setLocale(item.code)"
>
{{ item.name }}
</CommonDropdownItem>
</template>
</CommonDropdown>
</template>

26
components/settings/SettingsColorMode.client.vue Normal file
View file

@ -0,0 +1,26 @@
<script setup lang="ts">
function setDark(v: boolean) {
isDark.value = v
}
</script>
<template>
<div flex="~ gap4" w-full>
<button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:class="isDark ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setDark(true)"
>
<div i-ri:moon-line />
Dark Mode
</button>
<button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:class="!isDark ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setDark(false)"
>
<div i-ri:sun-line />
Light Mode
</button>
</div>
</template>

14
components/settings/SettingsFontSize.vue Normal file
View file

@ -0,0 +1,14 @@
<script lang="ts" setup>
import type { FontSize } from '~/composables/fontSize'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
const fontSize = getFontSize()
</script>
<template>
<select v-model="fontSize">
<option v-for="size in sizes" :key="size" :value="size">
{{ size }}
</option>
</select>
</template>

15
components/settings/SettingsLanguage.vue Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts" setup>
import type { ComputedRef } from 'vue'
import type { LocaleObject } from '#i18n'
const { locale, setLocale } = useI18n()
const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
</script>
<template>
<select :value="locale" @input="e => setLocale((e.target as any).value)">
<option v-for="item in locales" :key="item.code" :value="item.code">
{{ item.name }}
</option>
</select>
</template>

0
components/settings/SettingsToggle.vue → components/settings/SettingsToggleItem.vue
View file

10
components/user/UserSwitcher.vue
View file

@ -39,17 +39,17 @@ const switchUser = (user: UserLogin) => {
</button>
</template>
<div border="t base" pt2>
<CommonDropdownItem
:text="$t('user.add_existing')"
icon="i-ri:user-add-line"
@click="openSigninDialog"
/>
<NuxtLink to="/settings">
<CommonDropdownItem
:text="$t('nav.settings')"
icon="i-ri:settings-4-line"
/>
</NuxtLink>
<CommonDropdownItem
:text="$t('user.add_existing')"
icon="i-ri:user-add-line"
@click="openSigninDialog"
/>
<CommonDropdownItem
v-if="isMastoInitialised && currentUser"
:text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"