From 5d9572cda22b89621cae4132b47ec2caaac07a22 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 30 Aug 2017 18:06:16 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB=E7=89=88?=
 =?UTF-8?q?=E3=81=AE=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=81=AB=E7=9F=A5=E3=82=8A=E5=90=88=E3=81=84=E3=81=AE?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=AD=E3=83=AF=E3=83=BC=E3=82=92=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                     |  1 +
 locales/en.yml                   |  5 +++
 locales/ja.yml                   |  5 +++
 src/web/app/mobile/tags/user.tag | 65 ++++++++++++++++++++++++++++++++
 4 files changed, 76 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc5a6bc8a4..ab207126cd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ ChangeLog (Release Notes)
 unreleased
 ----------
 * New: 投稿のピン留め (#746)
+* New: モバイル版のユーザーページに知り合いのフォロワーを表示するように
 * New: ホームストリームにメッセージを流すことでlast_used_atを更新できるようにする (#745)
 * その他細かな修正
 
diff --git a/locales/en.yml b/locales/en.yml
index 15d278c370..a410bfb431 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -484,6 +484,7 @@ mobile:
       recent-posts: "Recent posts"
       images: "Images"
       activity: "Activity"
+      followers-you-know: "Followers you know"
       last-used-at: "Latest used at"
 
     mk-user-overview-posts:
@@ -494,6 +495,10 @@ mobile:
       loading: "Loading"
       no-photos: "No photos"
 
+    mk-user-overview-followers-you-know:
+      loading: "Loading"
+      no-users: "No users"
+
     mk-users-list:
       all: "All"
       known: "You know"
diff --git a/locales/ja.yml b/locales/ja.yml
index 7ed4262f1c..eb7e35c7d6 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -485,6 +485,7 @@ mobile:
       recent-posts: "最近の投稿"
       images: "画像"
       activity: "アクティビティ"
+      followers-you-know: "知り合いのフォロワー"
       last-used-at: "最終ログイン"
 
     mk-user-overview-posts:
@@ -495,6 +496,10 @@ mobile:
       loading: "読み込み中"
       no-photos: "写真はありません"
 
+    mk-user-overview-followers-you-know:
+      loading: "読み込み中"
+      no-users: "知り合いのユーザーはいません"
+
     mk-users-list:
       all: "すべて"
       known: "知り合い"
diff --git a/src/web/app/mobile/tags/user.tag b/src/web/app/mobile/tags/user.tag
index 5fc43269d6..83231f01d7 100644
--- a/src/web/app/mobile/tags/user.tag
+++ b/src/web/app/mobile/tags/user.tag
@@ -234,6 +234,12 @@
 			<mk-user-overview-activity-chart user={ user }/>
 		</div>
 	</section>
+	<section class="followers-you-know" if={ SIGNIN && I.id !== user.id }>
+		<h2><i class="fa fa-users"></i>%i18n:mobile.tags.mk-user-overview.followers-you-know%</h2>
+		<div>
+			<mk-user-overview-followers-you-know user={ user }/>
+		</div>
+	</section>
 	<p>%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time time={ user.last_used_at }/></b></p>
 	<style>
 		:scope
@@ -276,6 +282,8 @@
 
 	</style>
 	<script>
+		this.mixin('i');
+
 		this.user = this.opts.user;
 	</script>
 </mk-user-overview>
@@ -530,3 +538,60 @@
 		});
 	</script>
 </mk-user-overview-activity-chart>
+
+<mk-user-overview-followers-you-know>
+	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
+	<div if={ !initializing && users.length > 0 }>
+		<virtual each={ user in users }>
+			<a href={ '/' + user.username }><img src={ user.avatar_url + '?thumbnail&size=64' } alt={ user.name }/></a>
+		</virtual>
+	</div>
+	<p class="empty" if={ !initializing && users.length == 0 }>%i18n:mobile.tags.mk-user-overview-followers-you-know.no-users%</p>
+	<style>
+		:scope
+			display block
+
+			> div
+				padding 4px
+
+				> a
+					display inline-block
+					margin 4px
+
+					> img
+						width 48px
+						height 48px
+						vertical-align bottom
+						border-radius 100%
+
+			> .initializing
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> i
+					margin-right 4px
+
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.user = this.opts.user;
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.api('users/followers', {
+				user_id: this.user.id,
+				iknow: true,
+				limit: 30
+			}).then(x => {
+				this.update({
+					users: x.users,
+					initializing: false
+				});
+			});
+		});
+	</script>
+</mk-user-overview-followers-you-know>