ui: move settings to nav side

This commit is contained in:
Anthony Fu 2023-01-03 18:16:04 +01:00
parent db32d9343a
commit 64fa8d2bf4
7 changed files with 8 additions and 33 deletions

View file

@ -86,17 +86,6 @@ onBeforeUnmount(() => {
<span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl me-4 !align-middle" /> <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl me-4 !align-middle" />
{{ colorMode.value === 'light' ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }} {{ colorMode.value === 'light' ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
</button> </button>
<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 me-4 !align-middle" />
{{ $t('nav.settings') }}
</NuxtLink>
</div> </div>
</div> </div>
</div> </div>

View file

@ -27,15 +27,6 @@ function toggleDark() {
@click="toggleZenMode()" @click="toggleZenMode()"
/> />
</CommonTooltip> </CommonTooltip>
<CommonTooltip :content="$t('nav.settings')">
<NuxtLink
flex
text-lg
to="/settings"
i-ri:settings-4-line
:aria-label="$t('nav.settings')"
/>
</CommonTooltip>
</div> </div>
<div> <div>
<button cursor-pointer hover:underline @click="openPreviewHelp"> <button cursor-pointer hover:underline @click="openPreviewHelp">

View file

@ -27,6 +27,7 @@ const { notifications } = useNotifications()
<NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" :command="command" /> <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" :command="command" />
<NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" /> <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" />
<NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only :command="command" /> <NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only :command="command" />
<NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line " user-only :command="command" /> <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line" user-only :command="command" />
<NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
</nav> </nav>
</template> </template>

View file

@ -39,12 +39,6 @@ const switchUser = (user: UserLogin) => {
</button> </button>
</template> </template>
<div border="t base" pt2> <div border="t base" pt2>
<NuxtLink to="/settings">
<CommonDropdownItem
:text="$t('nav.settings')"
icon="i-ri:settings-4-line"
/>
</NuxtLink>
<CommonDropdownItem <CommonDropdownItem
:text="$t('user.add_existing')" :text="$t('user.add_existing')"
icon="i-ri:user-add-line" icon="i-ri:user-add-line"

View file

@ -205,7 +205,7 @@ export const useCommandRegistry = defineStore('command', () => {
} }
}) })
export const useCommand = (cmd: CommandProvider) => { export function useCommand(cmd: CommandProvider) {
const registry = useCommandRegistry() const registry = useCommandRegistry()
const register = () => registry.register(cmd) const register = () => registry.register(cmd)
@ -217,7 +217,7 @@ export const useCommand = (cmd: CommandProvider) => {
tryOnScopeDispose(cleanup) tryOnScopeDispose(cleanup)
} }
export const useCommands = (cmds: () => CommandProvider[]) => { export function useCommands(cmds: () => CommandProvider[]) {
const registry = useCommandRegistry() const registry = useCommandRegistry()
const commands = computed(cmds) const commands = computed(cmds)
@ -263,7 +263,7 @@ export const provideGlobalCommands = () => {
scope: 'Navigation', scope: 'Navigation',
name: () => t('nav.settings'), name: () => t('nav.settings'),
icon: 'i-ri:settings-4-line', icon: 'i-ri:settings-3-line',
onActivate() { onActivate() {
router.push('/settings') router.push('/settings')

View file

@ -15,7 +15,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
<MainContent> <MainContent>
<template #title> <template #title>
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop"> <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<div i-ri:settings-4-line /> <div i-ri:settings-3-line />
<span>{{ $t('nav.settings') }}</span> <span>{{ $t('nav.settings') }}</span>
</div> </div>
</template> </template>
@ -41,7 +41,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
/> />
<SettingsItem <SettingsItem
command command
icon="i-ri:settings-2-line" icon="i-ri-equalizer-line"
:text="$t('settings.preferences.label')" :text="$t('settings.preferences.label')"
to="/settings/preferences" to="/settings/preferences"
/> />

View file

@ -1,7 +1,7 @@
<template> <template>
<div min-h-screen flex justify-center items-center> <div min-h-screen flex justify-center items-center>
<div text-center flex="~ col gap-2" items-center> <div text-center flex="~ col gap-2" items-center>
<div i-ri:settings-4-line text-5xl /> <div i-ri:settings-3-line text-5xl />
<span text-xl>{{ $t('settings.select_a_settings') }}</span> <span text-xl>{{ $t('settings.select_a_settings') }}</span>
</div> </div>
</div> </div>