From 0be790fa31d28f7efc0d0b5b847c5c93a60f0dbd Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 1 Jun 2018 21:55:27 +0900
Subject: wip

---
 .../app/desktop/views/components/notifications.vue | 21 +++++++++++++
 .../views/components/notification-preview.vue      | 35 ++++++++++++++--------
 .../app/mobile/views/components/notification.vue   | 15 ++++++++++
 3 files changed, 58 insertions(+), 13 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 5564dad623..aff21b14d8 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -5,6 +5,7 @@
 			<template v-for="(notification, i) in _notifications">
 				<div class="notification" :class="notification.type" :key="notification.id">
 					<mk-time :time="notification.createdAt"/>
+
 					<template v-if="notification.type == 'reaction'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
@@ -17,6 +18,7 @@
 							</router-link>
 						</div>
 					</template>
+
 					<template v-if="notification.type == 'renote'">
 						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
@@ -28,6 +30,7 @@
 							</router-link>
 						</div>
 					</template>
+
 					<template v-if="notification.type == 'quote'">
 						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
@@ -37,6 +40,7 @@
 							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
 						</div>
 					</template>
+
 					<template v-if="notification.type == 'follow'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
@@ -45,6 +49,16 @@
 							</p>
 						</div>
 					</template>
+
+					<template v-if="notification.type == 'followRequest'">
+						<mk-avatar class="avatar" :user="notification.user"/>
+						<div class="text">
+							<p>%fa:user-clock%
+								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
+							</p>
+						</div>
+					</template>
+
 					<template v-if="notification.type == 'reply'">
 						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
@@ -54,6 +68,7 @@
 							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
 						</div>
 					</template>
+
 					<template v-if="notification.type == 'mention'">
 						<mk-avatar class="avatar" :user="notification.note.user"/>
 						<div class="text">
@@ -63,6 +78,7 @@
 							<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
 						</div>
 					</template>
+
 					<template v-if="notification.type == 'poll_vote'">
 						<mk-avatar class="avatar" :user="notification.user"/>
 						<div class="text">
@@ -73,6 +89,7 @@
 						</div>
 					</template>
 				</div>
+
 				<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
 					<span>%fa:angle-up%{{ notification._datetext }}</span>
 					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
@@ -251,6 +268,10 @@ root(isDark)
 					.text p i
 						color #53c7ce
 
+				&.followRequest
+					.text p i
+						color #888
+
 				&.reply, &.mention
 					.text p i
 						color #555
diff --git a/src/client/app/mobile/views/components/notification-preview.vue b/src/client/app/mobile/views/components/notification-preview.vue
index d39b2fbf9f..b1f6fd1495 100644
--- a/src/client/app/mobile/views/components/notification-preview.vue
+++ b/src/client/app/mobile/views/components/notification-preview.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-notification-preview" :class="notification.type">
 	<template v-if="notification.type == 'reaction'">
-		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
 			<p><mk-reaction-icon :reaction="notification.reaction"/>{{ notification.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
@@ -9,7 +9,7 @@
 	</template>
 
 	<template v-if="notification.type == 'renote'">
-		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
 			<p>%fa:retweet%{{ notification.note.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%</p>
@@ -17,7 +17,7 @@
 	</template>
 
 	<template v-if="notification.type == 'quote'">
-		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
 			<p>%fa:quote-left%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
@@ -25,14 +25,21 @@
 	</template>
 
 	<template v-if="notification.type == 'follow'">
-		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
 			<p>%fa:user-plus%{{ notification.user | userName }}</p>
 		</div>
 	</template>
 
+	<template v-if="notification.type == 'followRequest'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div class="text">
+			<p>%fa:user-clock%{{ notification.user | userName }}</p>
+		</div>
+	</template>
+
 	<template v-if="notification.type == 'reply'">
-		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
 			<p>%fa:reply%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
@@ -40,7 +47,7 @@
 	</template>
 
 	<template v-if="notification.type == 'mention'">
-		<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
 			<p>%fa:at%{{ notification.note.user | userName }}</p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
@@ -48,7 +55,7 @@
 	</template>
 
 	<template v-if="notification.type == 'poll_vote'">
-		<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
+		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
 			<p>%fa:chart-pie%{{ notification.user | userName }}</p>
 			<p class="note-ref">%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%</p>
@@ -83,16 +90,14 @@ export default Vue.extend({
 		display block
 		clear both
 
-	img
+	> .avatar
 		display block
 		float left
-		min-width 36px
-		min-height 36px
-		max-width 36px
-		max-height 36px
+		width 36px
+		height 36px
 		border-radius 6px
 
-	.text
+	> .text
 		float right
 		width calc(100% - 36px)
 		padding-left 8px
@@ -120,6 +125,10 @@ export default Vue.extend({
 		.text p i
 			color #53c7ce
 
+	&.followRequest
+		.text p i
+			color #888
+
 	&.reply, &.mention
 		.text p i
 			color #fff
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index c1b37563ce..da69fc79cc 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -40,6 +40,17 @@
 		</div>
 	</div>
 
+	<div class="notification followRequest" v-if="notification.type == 'followRequest'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				%fa:user-clock%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+		</div>
+	</div>
+
 	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
@@ -156,6 +167,10 @@ root(isDark)
 			> div > header i
 				color #53c7ce
 
+		&.followRequest
+			> div > header i
+				color #888
+
 .mk-notification[data-darkmode]
 	root(true)
 
-- 
cgit v1.2.3-freya