feat: move nav footer items to settings
This commit is contained in:
Anthony Fu
parent
378ba25997
commit
12942095de
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
26
components/settings/SettingsColorMode.client.vue
Normal 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
14
components/settings/SettingsFontSize.vue
Normal 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
15
components/settings/SettingsLanguage.vue
Normal 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>
|
||||
|
|
@ -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)])"
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue