diff options
Diffstat (limited to 'src/client/pages/settings/index.vue')
| -rw-r--r-- | src/client/pages/settings/index.vue | 73 |
1 files changed, 50 insertions, 23 deletions
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue index 4ca30ee686..1bffa9c0af 100644 --- a/src/client/pages/settings/index.vue +++ b/src/client/pages/settings/index.vue @@ -1,52 +1,57 @@ <template> <div class="vvcocwet" :class="{ wide: !narrow }" ref="el"> - <div class="nav" v-if="!narrow || $route.name === 'settings'"> + <div class="nav" v-if="!narrow || page == null"> <div class="menu"> <div class="label">{{ $t('basicSettings') }}</div> - <router-link class="item" replace to="/settings/profile"><Fa :icon="faUser" fixed-width class="icon"/>{{ $t('profile') }}</router-link> - <router-link class="item" replace to="/settings/privacy"><Fa :icon="faLockOpen" fixed-width class="icon"/>{{ $t('privacy') }}</router-link> - <router-link class="item" replace to="/settings/reaction"><Fa :icon="faLaugh" fixed-width class="icon"/>{{ $t('reaction') }}</router-link> - <router-link class="item" replace to="/settings/notifications"><Fa :icon="faBell" fixed-width class="icon"/>{{ $t('notifications') }}</router-link> - <router-link class="item" replace to="/settings/integration"><Fa :icon="faShareAlt" fixed-width class="icon"/>{{ $t('integration') }}</router-link> - <router-link class="item" replace to="/settings/security"><Fa :icon="faLock" fixed-width class="icon"/>{{ $t('security') }}</router-link> + <MkA class="item" :class="{ active: page === 'profile' }" replace to="/settings/profile"><Fa :icon="faUser" fixed-width class="icon"/>{{ $t('profile') }}</MkA> + <MkA class="item" :class="{ active: page === 'privacy' }" replace to="/settings/privacy"><Fa :icon="faLockOpen" fixed-width class="icon"/>{{ $t('privacy') }}</MkA> + <MkA class="item" :class="{ active: page === 'reaction' }" replace to="/settings/reaction"><Fa :icon="faLaugh" fixed-width class="icon"/>{{ $t('reaction') }}</MkA> + <MkA class="item" :class="{ active: page === 'notifications' }" replace to="/settings/notifications"><Fa :icon="faBell" fixed-width class="icon"/>{{ $t('notifications') }}</MkA> + <MkA class="item" :class="{ active: page === 'integration' }" replace to="/settings/integration"><Fa :icon="faShareAlt" fixed-width class="icon"/>{{ $t('integration') }}</MkA> + <MkA class="item" :class="{ active: page === 'security' }" replace to="/settings/security"><Fa :icon="faLock" fixed-width class="icon"/>{{ $t('security') }}</MkA> </div> <div class="menu"> <div class="label">{{ $t('clientSettings') }}</div> - <router-link class="item" replace to="/settings/general"><Fa :icon="faCogs" fixed-width class="icon"/>{{ $t('general') }}</router-link> - <router-link class="item" replace to="/settings/theme"><Fa :icon="faPalette" fixed-width class="icon"/>{{ $t('theme') }}</router-link> - <router-link class="item" replace to="/settings/sidebar"><Fa :icon="faListUl" fixed-width class="icon"/>{{ $t('sidebar') }}</router-link> - <router-link class="item" replace to="/settings/sounds"><Fa :icon="faMusic" fixed-width class="icon"/>{{ $t('sounds') }}</router-link> - <router-link class="item" replace to="/settings/plugins"><Fa :icon="faPlug" fixed-width class="icon"/>{{ $t('plugins') }}</router-link> + <MkA class="item" :class="{ active: page === 'general' }" replace to="/settings/general"><Fa :icon="faCogs" fixed-width class="icon"/>{{ $t('general') }}</MkA> + <MkA class="item" :class="{ active: page === 'theme' }" replace to="/settings/theme"><Fa :icon="faPalette" fixed-width class="icon"/>{{ $t('theme') }}</MkA> + <MkA class="item" :class="{ active: page === 'sidebar' }" replace to="/settings/sidebar"><Fa :icon="faListUl" fixed-width class="icon"/>{{ $t('sidebar') }}</MkA> + <MkA class="item" :class="{ active: page === 'sounds' }" replace to="/settings/sounds"><Fa :icon="faMusic" fixed-width class="icon"/>{{ $t('sounds') }}</MkA> + <MkA class="item" :class="{ active: page === 'plugins' }" replace to="/settings/plugins"><Fa :icon="faPlug" fixed-width class="icon"/>{{ $t('plugins') }}</MkA> </div> <div class="menu"> <div class="label">{{ $t('otherSettings') }}</div> - <router-link class="item" replace to="/settings/mute-block"><Fa :icon="faBan" fixed-width class="icon"/>{{ $t('muteAndBlock') }}</router-link> - <router-link class="item" replace to="/settings/word-mute"><Fa :icon="faCommentSlash" fixed-width class="icon"/>{{ $t('wordMute') }}</router-link> - <router-link class="item" replace to="/settings/api"><Fa :icon="faKey" fixed-width class="icon"/>API</router-link> - <router-link class="item" replace to="/settings/other"><Fa :icon="faEllipsisH" fixed-width class="icon"/>{{ $t('other') }}</router-link> + <MkA class="item" :class="{ active: page === 'mute-block' }" replace to="/settings/mute-block"><Fa :icon="faBan" fixed-width class="icon"/>{{ $t('muteAndBlock') }}</MkA> + <MkA class="item" :class="{ active: page === 'word-mute' }" replace to="/settings/word-mute"><Fa :icon="faCommentSlash" fixed-width class="icon"/>{{ $t('wordMute') }}</MkA> + <MkA class="item" :class="{ active: page === 'api' }" replace to="/settings/api"><Fa :icon="faKey" fixed-width class="icon"/>API</MkA> + <MkA class="item" :class="{ active: page === 'other' }" replace to="/settings/other"><Fa :icon="faEllipsisH" fixed-width class="icon"/>{{ $t('other') }}</MkA> </div> <div class="menu"> <button class="_button item" @click="logout">{{ $t('logout') }}</button> </div> </div> <div class="main"> - <router-view v-slot="{ Component }"> - <transition :name="($store.state.device.animation && !narrow) ? 'view-slide' : ''" appear mode="out-in"> - <component :is="Component" @info="onInfo"/> - </transition> - </router-view> + <transition :name="($store.state.device.animation && !narrow) ? 'view-slide' : ''" appear mode="out-in"> + <component :is="component" @info="onInfo"/> + </transition> </div> </div> </template> <script lang="ts"> -import { defineComponent, onMounted, ref } from 'vue'; +import { computed, defineAsyncComponent, defineComponent, onMounted, ref } from 'vue'; import { faCog, faPalette, faPlug, faUser, faListUl, faLock, faCommentSlash, faMusic, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey } from '@fortawesome/free-solid-svg-icons'; import { faLaugh, faBell } from '@fortawesome/free-regular-svg-icons'; import { store } from '@/store'; import { i18n } from '@/i18n'; export default defineComponent({ + props: { + page: { + type: String, + required: false + } + }, + setup(props, context) { const INFO = ref({ header: [{ @@ -60,6 +65,27 @@ export default defineComponent({ const onInfo = (viewInfo) => { INFO.value = viewInfo; }; + const component = computed(() => { + switch (props.page) { + case 'profile': return defineAsyncComponent(() => import('./profile.vue')); + case 'privacy': return defineAsyncComponent(() => import('./privacy.vue')); + case 'reaction': return defineAsyncComponent(() => import('./reaction.vue')); + case 'notifications': return defineAsyncComponent(() => import('./notifications.vue')); + case 'mute-block': return defineAsyncComponent(() => import('./mute-block.vue')); + case 'word-mute': return defineAsyncComponent(() => import('./word-mute.vue')); + case 'integration': return defineAsyncComponent(() => import('./integration.vue')); + case 'security': return defineAsyncComponent(() => import('./security.vue')); + case 'api': return defineAsyncComponent(() => import('./api.vue')); + case 'other': return defineAsyncComponent(() => import('./other.vue')); + case 'general': return defineAsyncComponent(() => import('./general.vue')); + case 'theme': return defineAsyncComponent(() => import('./theme.vue')); + case 'sidebar': return defineAsyncComponent(() => import('./sidebar.vue')); + case 'sounds': return defineAsyncComponent(() => import('./sounds.vue')); + case 'plugins': return defineAsyncComponent(() => import('./plugins.vue')); + case 'import-export': return defineAsyncComponent(() => import('./import-export.vue')); + default: return null; + } + }); onMounted(() => { narrow.value = el.value.offsetWidth < 650; @@ -71,6 +97,7 @@ export default defineComponent({ view, el, onInfo, + component, logout: () => { store.dispatch('logout'); location.href = '/'; @@ -121,7 +148,7 @@ export default defineComponent({ //border-top: solid 1px var(--divider); } - &.router-link-active { + &.active { color: var(--accent); padding-left: 42px; } |