From 254cfaea284d12f188e28f56a0cec863e3177a49 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 25 Oct 2020 01:21:41 +0900
Subject: 自前ルーティング (#6759)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip
---
 src/client/pages/settings/general.vue    | 18 ++++++++
 src/client/pages/settings/index.vue      | 73 ++++++++++++++++++++++----------
 src/client/pages/settings/mute-block.vue |  8 ++--
 src/client/pages/settings/theme.vue      |  2 +-
 4 files changed, 73 insertions(+), 28 deletions(-)

(limited to 'src/client/pages/settings')

diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 80152c5e6a..d61d8620e7 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -2,6 +2,10 @@
 <div class="_section">
 	<section class="_card _vMargin">
 		<div class="_title"><Fa :icon="faCog"/> {{ $t('general') }}</div>
+		<div class="_content">
+			<div>{{ $t('defaultNavigationBehaviour') }}</div>
+			<MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch>
+		</div>
 		<div class="_content">
 			<div>{{ $t('whenServerDisconnected') }}</div>
 			<MkRadio v-model="serverDisconnectedBehavior" value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</MkRadio>
@@ -51,6 +55,10 @@
 
 	<section class="_card _vMargin">
 		<div class="_title"><Fa :icon="faColumns"/> {{ $t('deck') }}</div>
+		<div class="_content">
+			<div>{{ $t('defaultNavigationBehaviour') }}</div>
+			<MkSwitch v-model:value="deckNavWindow">{{ $t('openInWindow') }}</MkSwitch>
+		</div>
 		<div class="_content">
 			<MkSwitch v-model:value="deckAlwaysShowMainColumn">
 				{{ $t('_deck.alwaysShowMainColumn') }}
@@ -146,6 +154,16 @@ export default defineComponent({
 			set(value) { this.$store.commit('device/set', { key: 'showFixedPostForm', value }); }
 		},
 
+		defaultSideView: {
+			get() { return this.$store.state.device.defaultSideView; },
+			set(value) { this.$store.commit('device/set', { key: 'defaultSideView', value }); }
+		},
+
+		deckNavWindow: {
+			get() { return this.$store.state.device.deckNavWindow; },
+			set(value) { this.$store.commit('device/set', { key: 'deckNavWindow', value }); }
+		},
+
 		chatOpenBehavior: {
 			get() { return this.$store.state.device.chatOpenBehavior; },
 			set(value) { this.$store.commit('device/set', { key: 'chatOpenBehavior', value }); }
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;
 				}
diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue
index 5a08a8caae..87f5b88d3c 100644
--- a/src/client/pages/settings/mute-block.vue
+++ b/src/client/pages/settings/mute-block.vue
@@ -6,9 +6,9 @@
 			<template #empty><MkInfo>{{ $t('noUsers') }}</MkInfo></template>
 			<template #default="{items}">
 				<div class="user" v-for="mute in items" :key="mute.id">
-					<router-link class="name" :to="userPage(mute.mutee)">
+					<MkA class="name" :to="userPage(mute.mutee)">
 						<MkAcct :user="mute.mutee"/>
-					</router-link>
+					</MkA>
 				</div>
 			</template>
 		</MkPagination>
@@ -18,9 +18,9 @@
 			<template #empty><MkInfo>{{ $t('noUsers') }}</MkInfo></template>
 			<template #default="{items}">
 				<div class="user" v-for="block in items" :key="block.id">
-					<router-link class="name" :to="userPage(block.blockee)">
+					<MkA class="name" :to="userPage(block.blockee)">
 						<MkAcct :user="block.blockee"/>
-					</router-link>
+					</MkA>
 				</div>
 			</template>
 		</MkPagination>
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index 0571b6c5d1..866790bd26 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -43,7 +43,7 @@
 					<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 				</optgroup>
 			</MkSelect>
-			<a href="https://assets.msky.cafe/theme/list" rel="noopener" target="_blank" class="_link">{{ $t('_theme.explore') }}</a>・<router-link to="/theme-editor" class="_link">{{ $t('_theme.make') }}</router-link>
+			<a href="https://assets.msky.cafe/theme/list" rel="noopener" target="_blank" class="_link">{{ $t('_theme.explore') }}</a>・<MkA to="/theme-editor" class="_link">{{ $t('_theme.make') }}</MkA>
 		</div>
 		<div class="_content">
 			<MkButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $t('setWallpaper') }}</MkButton>
-- 
cgit v1.2.3-freya