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

This commit is contained in:
syuilo 2017-08-30 18:06:16 +09:00
parent 7fe0abc5ce
commit 5d9572cda2
4 changed files with 76 additions and 0 deletions

View file

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

View file

@ -484,6 +484,7 @@ mobile:
recent-posts: "Recent posts" recent-posts: "Recent posts"
images: "Images" images: "Images"
activity: "Activity" activity: "Activity"
followers-you-know: "Followers you know"
last-used-at: "Latest used at" last-used-at: "Latest used at"
mk-user-overview-posts: mk-user-overview-posts:
@ -494,6 +495,10 @@ mobile:
loading: "Loading" loading: "Loading"
no-photos: "No photos" no-photos: "No photos"
mk-user-overview-followers-you-know:
loading: "Loading"
no-users: "No users"
mk-users-list: mk-users-list:
all: "All" all: "All"
known: "You know" known: "You know"

View file

@ -485,6 +485,7 @@ mobile:
recent-posts: "最近の投稿" recent-posts: "最近の投稿"
images: "画像" images: "画像"
activity: "アクティビティ" activity: "アクティビティ"
followers-you-know: "知り合いのフォロワー"
last-used-at: "最終ログイン" last-used-at: "最終ログイン"
mk-user-overview-posts: mk-user-overview-posts:
@ -495,6 +496,10 @@ mobile:
loading: "読み込み中" loading: "読み込み中"
no-photos: "写真はありません" no-photos: "写真はありません"
mk-user-overview-followers-you-know:
loading: "読み込み中"
no-users: "知り合いのユーザーはいません"
mk-users-list: mk-users-list:
all: "すべて" all: "すべて"
known: "知り合い" known: "知り合い"

View file

@ -234,6 +234,12 @@
<mk-user-overview-activity-chart user={ user }/> <mk-user-overview-activity-chart user={ user }/>
</div> </div>
</section> </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> <p>%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time time={ user.last_used_at }/></b></p>
<style> <style>
:scope :scope
@ -276,6 +282,8 @@
</style> </style>
<script> <script>
this.mixin('i');
this.user = this.opts.user; this.user = this.opts.user;
</script> </script>
</mk-user-overview> </mk-user-overview>
@ -530,3 +538,60 @@
}); });
</script> </script>
</mk-user-overview-activity-chart> </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>