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

feat: move nav footer items to settings

zio/stable
Anthony Fu 2022-12-28 00:03:50 +01:00
parent 378ba25997
commit 12942095de
15 changed files with 101 additions and 119 deletions
Show Stats 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 100644
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 100644
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 100644
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)])"

7
locales/en-US.json
View File

@ -144,8 +144,8 @@
"profile": "Profile",
"search": "Search",
"select_feature_flags": "Toggle Feature Flags",
"select_font_size": "Select Font Size",
"select_language": "Select Language",
"select_font_size": "Font Size",
"select_language": "Display Language",
"settings": "Settings",
"show_intro": "Show intro",
"toggle_theme": "Toggle Theme",
@ -222,9 +222,12 @@
"virtual_scroll": "Virtual Scrolling"
},
"interface": {
"color_mode": "Color Mode",
"font_size": "Font Size",
"label": "Interface"
},
"language": {
"display_language": "Display Language",
"label": "Language"
},
"preferences": {

16
pages/settings/interface/index.vue
View File

@ -9,13 +9,15 @@ const { lg } = breakpoints
<span>{{ $t('settings.interface.label') }}</span>
</div>
</template>
<div text-center mt-10>
<h1 text-4xl>
🚧
</h1>
<h3 text-xl>
{{ $t('settings.interface.label') }}
</h3>
<div p6 flex="~ col gap6">
<label space-y-2>
<p font-medium>{{ $t('settings.interface.font_size') }}</p>
<SettingsFontSize select-settings />
</label>
<label space-y-2>
<p font-medium>{{ $t('settings.interface.color_mode') }}</p>
<SettingsColorMode />
</label>
</div>
</MainContent>
</template>

12
pages/settings/language/index.vue
View File

@ -9,13 +9,11 @@ const { lg } = breakpoints
<span>{{ $t('settings.language.label') }}</span>
</div>
</template>
<div text-center mt-10>
<h1 text-4xl>
🚧
</h1>
<h3 text-xl>
{{ $t('settings.language.label') }}
</h3>
<div p6>
<label space-y-2>
<p font-medium>{{ $t('settings.language.display_language') }}</p>
<SettingsLanguage select-settings />
</label>
</div>
</MainContent>
</template>

16
pages/settings/preferences/index.vue
View File

@ -13,29 +13,29 @@ const { lg } = breakpoints
<div i-ri-flask-line />
{{ $t('settings.feature_flags.title') }}
</h3>
<SettingsToggle
<SettingsToggleItem
:checked="currentUserFeatureFlags.experimentalVirtualScroll"
@click="toggleFeatureFlag('experimentalVirtualScroll')"
>
{{ $t('settings.feature_flags.virtual_scroll') }}
</SettingsToggle>
<SettingsToggle
</SettingsToggleItem>
<SettingsToggleItem
:checked="currentUserFeatureFlags.experimentalAvatarOnAvatar"
@click="toggleFeatureFlag('experimentalAvatarOnAvatar')"
>
{{ $t('settings.feature_flags.avatar_on_avatar') }}
</SettingsToggle>
<SettingsToggle
</SettingsToggleItem>
<SettingsToggleItem
:checked="currentUserFeatureFlags.experimentalGitHubCards"
@click="toggleFeatureFlag('experimentalGitHubCards')"
>
{{ $t('settings.feature_flags.github_cards') }}
</SettingsToggle>
<SettingsToggle
</SettingsToggleItem>
<SettingsToggleItem
:checked="currentUserFeatureFlags.experimentalUserPicker"
@click="toggleFeatureFlag('experimentalUserPicker')"
>
{{ $t('settings.feature_flags.user_picker') }}
</SettingsToggle>
</SettingsToggleItem>
</MainContent>
</template>

2
pages/settings/users/index.vue
View File

@ -69,7 +69,7 @@ async function importTokens() {
<span>{{ $t('settings.users.label') }}</span>
</div>
</template>
<div p4>
<div p6>
<template v-if="loggedInUsers.length">
<div flex="~ col gap2">
<div v-for="user of loggedInUsers" :key="user.account.id">

2
unocss.config.ts
View File

@ -45,6 +45,8 @@ export default defineConfig({
'input-base': 'p2 rounded w-full bg-transparent border border-dark input-base-focus input-base-disabled',
'input-error': 'border-$c-error focus:(outline-offset-0 outline-$c-error outline-1px)',
'select-settings': 'p3 border border-base rounded w-full block bg-base',
// link
'text-link-rounded': 'focus:outline-none focus:ring-(2 primary inset) hover:bg-active rounded md:rounded-full px2 mx--2',