モバイル版のユーザーページに知り合いのフォロワーを表示するように

CHANGELOG.md

@@ -5,6 +5,7 @@ ChangeLog (Release Notes)
 unreleased
 ----------
 * New: 投稿のピン留め (#746)
+* New: モバイル版のユーザーページに知り合いのフォロワーを表示するように
 * New: ホームストリームにメッセージを流すことでlast_used_atを更新できるようにする (#745)
 * その他細かな修正
 

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"

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: "知り合い"

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>