ui: add more settings entry

This commit is contained in:
Anthony Fu 2022-12-27 00:04:24 +01:00
parent 93218f9d49
commit 8a062f5573
5 changed files with 91 additions and 1 deletions

View file

@ -225,6 +225,15 @@
"search_desc": "Search for people & hashtags" "search_desc": "Search for people & hashtags"
}, },
"settings": { "settings": {
"about": {
"label": "About"
},
"interface": {
"label": "Interface"
},
"language": {
"label": "Language"
},
"preferences": { "preferences": {
"label": "Preferences" "label": "Preferences"
}, },

View file

@ -10,7 +10,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
<template> <template>
<div min-h-screen flex> <div min-h-screen flex>
<div border="x base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'"> <div border="r base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
<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">
@ -25,12 +25,30 @@ const isRootPath = computedEager(() => route.name === 'settings')
:text="$t('settings.profile.label')" :text="$t('settings.profile.label')"
to="/settings/profile" to="/settings/profile"
/> />
<SettingsNavItem
command
icon="i-ri-compasses-2-line"
:text="$t('settings.interface.label')"
to="/settings/interface"
/>
<SettingsNavItem
command
icon="i-ri-globe-line"
:text="$t('settings.language.label')"
to="/settings/language"
/>
<SettingsNavItem <SettingsNavItem
command command
icon="i-ri:settings-2-line" icon="i-ri:settings-2-line"
:text="$t('settings.preferences.label')" :text="$t('settings.preferences.label')"
to="/settings/preferences" to="/settings/preferences"
/> />
<SettingsNavItem
command
icon="i-ri:information-line"
:text="$t('settings.about.label')"
to="/settings/about"
/>
</div> </div>
</MainContent> </MainContent>
</div> </div>

View file

@ -0,0 +1,21 @@
<script lang="ts" setup>
const { lg } = breakpoints
</script>
<template>
<MainContent :back="!lg">
<template #title>
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<span>{{ $t('settings.about.label') }}</span>
</div>
</template>
<div text-center mt-10>
<h1 text-4xl>
🚧
</h1>
<h3 text-xl>
{{ $t('settings.about.label') }}
</h3>
</div>
</MainContent>
</template>

View file

@ -0,0 +1,21 @@
<script lang="ts" setup>
const { lg } = breakpoints
</script>
<template>
<MainContent :back="!lg">
<template #title>
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<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>
</MainContent>
</template>

View file

@ -0,0 +1,21 @@
<script lang="ts" setup>
const { lg } = breakpoints
</script>
<template>
<MainContent :back="!lg">
<template #title>
<div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
<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>
</MainContent>
</template>