diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts index b1948edc9c..1dd55910c1 100644 --- a/src/client/app/desktop/script.ts +++ b/src/client/app/desktop/script.ts @@ -29,6 +29,7 @@ import MkReversi from './views/pages/games/reversi.vue'; import MkShare from './views/pages/share.vue'; import MkFollow from '../common/views/pages/follow.vue'; import MkNotFound from '../common/views/pages/not-found.vue'; +import MkSettings from './views/pages/settings.vue'; import Ctx from './views/components/context-menu.vue'; import PostFormWindow from './views/components/post-form-window.vue'; @@ -140,6 +141,7 @@ init(async (launch) => { { path: '/i/messaging/:user', component: MkMessagingRoom }, { path: '/i/drive', component: MkDrive }, { path: '/i/drive/folder/:folder', component: MkDrive }, + { path: '/i/settings', component: MkSettings }, { path: '/selectdrive', component: MkSelectDrive }, { path: '/search', component: MkSearch }, { path: '/tags/:tag', name: 'tag', component: MkTag }, diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index 567bb6c2b4..921aa59c5e 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -1,6 +1,6 @@ <template> <div class="mk-settings"> - <div class="nav"> + <div class="nav" :class="{ inWindow }"> <p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'"><fa icon="user" fixed-width/>{{ $t('profile') }}</p> <p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'"><fa icon="palette" fixed-width/>{{ $t('theme') }}</p> <p :class="{ active: page == 'web' }" @mousedown="page = 'web'"><fa icon="desktop" fixed-width/>Web</p> @@ -313,6 +313,11 @@ export default Vue.extend({ initialPage: { type: String, required: false + }, + inWindow: { + type: Boolean, + required: false, + default: true } }, data() { @@ -598,9 +603,11 @@ export default Vue.extend({ height 100% padding 16px 0 0 0 overflow auto - box-shadow var(--shadowRight) z-index 1 + &.inWindow + box-shadow var(--shadowRight) + > p display block padding 10px 16px diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue index bba106616c..7fe95a293b 100644 --- a/src/client/app/desktop/views/components/ui.header.account.vue +++ b/src/client/app/desktop/views/components/ui.header.account.vue @@ -51,12 +51,12 @@ <i><fa icon="angle-right"/></i> </router-link> </li> - <li @click="settings"> - <p> + <li> + <router-link to="/i/settings"> <i><fa icon="cog"/></i> <span>{{ $t('settings') }}</span> <i><fa icon="angle-right"/></i> - </p> + </router-link> </li> <li v-if="$store.state.i.isAdmin || $store.state.i.isModerator"> <a href="/admin"> @@ -153,10 +153,6 @@ export default Vue.extend({ this.close(); this.$root.new(MkFollowRequestsWindow); }, - settings() { - this.close(); - this.$root.new(MkSettingsWindow); - }, signout() { this.$root.signout(); }, diff --git a/src/client/app/desktop/views/pages/settings.vue b/src/client/app/desktop/views/pages/settings.vue new file mode 100644 index 0000000000..7aba863b7c --- /dev/null +++ b/src/client/app/desktop/views/pages/settings.vue @@ -0,0 +1,24 @@ +<template> +<mk-ui> + <main> + <x-settings :in-window="false"/> + </main> +</mk-ui> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + components: { + XSettings: () => import('../components/settings.vue').then(m => m.default) + }, +}); +</script> + +<style lang="stylus" scoped> +main + margin 0 auto + max-width 900px + +</style>