From 897f7a031d624d8ca37b8efcab573d002c80dbe8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 2 Jun 2018 16:13:32 +0900
Subject: wip

---
 .../views/components/follow-requests-window.vue    | 72 --------------------
 .../app/desktop/views/components/notifications.vue |  4 +-
 .../components/received-follow-requests-window.vue | 72 ++++++++++++++++++++
 .../desktop/views/components/ui.header.account.vue |  2 +-
 src/client/app/mobile/script.ts                    |  2 +
 .../views/components/notification-preview.vue      |  4 +-
 .../app/mobile/views/components/notification.vue   |  4 +-
 src/client/app/mobile/views/components/ui.nav.vue  |  1 +
 .../views/pages/received-follow-requests.vue       | 78 ++++++++++++++++++++++
 9 files changed, 160 insertions(+), 79 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/follow-requests-window.vue
 create mode 100644 src/client/app/desktop/views/components/received-follow-requests-window.vue
 create mode 100644 src/client/app/mobile/views/pages/received-follow-requests.vue

(limited to 'src/client/app')

diff --git a/src/client/app/desktop/views/components/follow-requests-window.vue b/src/client/app/desktop/views/components/follow-requests-window.vue
deleted file mode 100644
index fd37c0a6aa..0000000000
--- a/src/client/app/desktop/views/components/follow-requests-window.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
-	<span slot="header">%fa:envelope R% %i18n:@title%</span>
-
-	<div data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4" :data-darkmode="$store.state.device.darkmode">
-		<div v-for="req in requests">
-			<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
-			<span>
-				<a @click="accept(req.follower)">%i18n:@accept%</a>|<a @click="reject(req.follower)">%i18n:@reject%</a>
-			</span>
-		</div>
-	</div>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			requests: []
-		};
-	},
-	mounted() {
-		(this as any).api('following/requests/list').then(requests => {
-			this.fetching = false;
-			this.requests = requests;
-		});
-	},
-	methods: {
-		accept(user) {
-			(this as any).api('following/requests/accept', { userId: user.id }).then(() => {
-				this.requests = this.requests.filter(r => r.follower.id != user.id);
-			});
-		},
-		reject(user) {
-			(this as any).api('following/requests/reject', { userId: user.id }).then(() => {
-				this.requests = this.requests.filter(r => r.follower.id != user.id);
-			});
-		},
-		close() {
-			(this as any).$refs.window.close();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-
-root(isDark)
-	padding 16px
-
-	> button
-		margin-bottom 16px
-
-	> div
-		display flex
-		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
-		border-radius 4px
-
-		> span
-			margin 0 0 0 auto
-
-[data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4"][data-darkmode]
-	root(true)
-
-[data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4"]:not([data-darkmode])
-	root(false)
-
-</style>
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 368655095f..f2247a782c 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -50,7 +50,7 @@
 						</div>
 					</template>
 
-					<template v-if="notification.type == 'reciveFollowRequest'">
+					<template v-if="notification.type == 'receiveFollowRequest'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
 							<p>%fa:user-clock%
@@ -268,7 +268,7 @@ root(isDark)
 					.text p i
 						color #53c7ce
 
-				&.reciveFollowRequest
+				&.receiveFollowRequest
 					.text p i
 						color #888
 
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
new file mode 100644
index 0000000000..fd37c0a6aa
--- /dev/null
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -0,0 +1,72 @@
+<template>
+<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
+	<span slot="header">%fa:envelope R% %i18n:@title%</span>
+
+	<div data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4" :data-darkmode="$store.state.device.darkmode">
+		<div v-for="req in requests">
+			<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
+			<span>
+				<a @click="accept(req.follower)">%i18n:@accept%</a>|<a @click="reject(req.follower)">%i18n:@reject%</a>
+			</span>
+		</div>
+	</div>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			requests: []
+		};
+	},
+	mounted() {
+		(this as any).api('following/requests/list').then(requests => {
+			this.fetching = false;
+			this.requests = requests;
+		});
+	},
+	methods: {
+		accept(user) {
+			(this as any).api('following/requests/accept', { userId: user.id }).then(() => {
+				this.requests = this.requests.filter(r => r.follower.id != user.id);
+			});
+		},
+		reject(user) {
+			(this as any).api('following/requests/reject', { userId: user.id }).then(() => {
+				this.requests = this.requests.filter(r => r.follower.id != user.id);
+			});
+		},
+		close() {
+			(this as any).$refs.window.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+
+root(isDark)
+	padding 16px
+
+	> button
+		margin-bottom 16px
+
+	> div
+		display flex
+		padding 16px
+		border solid 1px isDark ? #1c2023 : #eee
+		border-radius 4px
+
+		> span
+			margin 0 0 0 auto
+
+[data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4"][data-darkmode]
+	root(true)
+
+[data-id="c1136cec-1278-49b1-9ea7-412c1ef794f4"]:not([data-darkmode])
+	root(false)
+
+</style>
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 8c2da6596a..4e0fc1cf1a 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -49,7 +49,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import MkUserListsWindow from './user-lists-window.vue';
-import MkFollowRequestsWindow from './follow-requests-window.vue';
+import MkFollowRequestsWindow from './received-follow-requests-window.vue';
 import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 607ff63711..300615ec58 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -32,6 +32,7 @@ import MkNotifications from './views/pages/notifications.vue';
 import MkWidgets from './views/pages/widgets.vue';
 import MkMessaging from './views/pages/messaging.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
+import MkReceivedFollowRequests from './views/pages/received-follow-requests.vue';
 import MkNote from './views/pages/note.vue';
 import MkSearch from './views/pages/search.vue';
 import MkFollowers from './views/pages/followers.vue';
@@ -78,6 +79,7 @@ init((launch) => {
 			{ path: '/i/favorites', name: 'favorites', component: MkFavorites },
 			{ path: '/i/lists', name: 'user-lists', component: MkUserLists },
 			{ path: '/i/lists/:list', name: 'user-list', component: MkUserList },
+			{ path: '/i/received-follow-requests', name: 'received-follow-requests', component: MkReceivedFollowRequests },
 			{ path: '/i/widgets', name: 'widgets', component: MkWidgets },
 			{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index 6046f77242..5e2306932b 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -31,7 +31,7 @@
 		</div>
 	</template>
 
-	<template v-if="notification.type == 'reciveFollowRequest'">
+	<template v-if="notification.type == 'receiveFollowRequest'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
 			<p>%fa:user-clock%{{ notification.user | userName }}</p>
@@ -125,7 +125,7 @@ export default Vue.extend({
 		.text p i
 			color #53c7ce
 
-	&.reciveFollowRequest
+	&.receiveFollowRequest
 		.text p i
 			color #888
 
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 8109bef38e..9228950209 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -40,7 +40,7 @@
 		</div>
 	</div>
 
-	<div class="notification followRequest" v-if="notification.type == 'reciveFollowRequest'">
+	<div class="notification followRequest" v-if="notification.type == 'receiveFollowRequest'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
@@ -167,7 +167,7 @@ root(isDark)
 			> div > header i
 				color #53c7ce
 
-		&.reciveFollowRequest
+		&.receiveFollowRequest
 			> div > header i
 				color #888
 
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 11a8f7ab97..80f60e4232 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -18,6 +18,7 @@
 					<li><router-link to="/" :data-active="$route.name == 'index'">%fa:home%%i18n:@timeline%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'">%fa:R bell%%i18n:@notifications%<template v-if="hasUnreadNotification">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'">%fa:R comments%%i18n:@messaging%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template>%fa:angle-right%</router-link></li>
+					<li v-if="$store.getters.isSignedIn && $store.state.i.isLocked"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'">%fa:R envelope%%i18n:@follow-requests%<template v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount">%fa:circle%</template>%fa:angle-right%</router-link></li>
 					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%%i18n:@game%<template v-if="hasGameInvitation">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
new file mode 100644
index 0000000000..bf26a84ff9
--- /dev/null
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -0,0 +1,78 @@
+<template>
+<mk-ui>
+	<span slot="header">%fa:envelope R%%i18n:@title%</span>
+
+	<main>
+		<div v-for="req in requests">
+			<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
+			<span>
+				<a @click="accept(req.follower)">%i18n:@accept%</a>|<a @click="reject(req.follower)">%i18n:@reject%</a>
+			</span>
+		</div>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Progress from '../../../common/scripts/loading';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			requests: []
+		};
+	},
+	mounted() {
+		document.title = 'Misskey | %i18n:@title%';
+
+		Progress.start();
+
+		(this as any).api('following/requests/list').then(requests => {
+			this.fetching = false;
+			this.requests = requests;
+
+			Progress.done();
+		});
+	},
+	methods: {
+		accept(user) {
+			(this as any).api('following/requests/accept', { userId: user.id }).then(() => {
+				this.requests = this.requests.filter(r => r.follower.id != user.id);
+			});
+		},
+		reject(user) {
+			(this as any).api('following/requests/reject', { userId: user.id }).then(() => {
+				this.requests = this.requests.filter(r => r.follower.id != user.id);
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+	@media (min-width 500px)
+		padding 16px
+
+	@media (min-width 600px)
+		padding 32px
+
+	> div
+		display flex
+		padding 16px
+		border solid 1px isDark ? #1c2023 : #eee
+		border-radius 4px
+
+		> span
+			margin 0 0 0 auto
+
+</style>
-- 
cgit v1.2.3-freya