Resolve #3287, resolve #3107

Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

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 },

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

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();
 		},

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>