diff --git a/src/web/app/desktop/-tags/user-followers.tag b/src/web/app/desktop/-tags/user-followers.tag deleted file mode 100644 index 3a5430d37a..0000000000 --- a/src/web/app/desktop/-tags/user-followers.tag +++ /dev/null @@ -1,23 +0,0 @@ -<mk-user-followers> - <mk-users-list fetch={ fetch } count={ user.followers_count } you-know-count={ user.followers_you_know_count } no-users={ 'フォロワーはいないようです。' }/> - <style lang="stylus" scoped> - :scope - display block - height 100% - - </style> - <script lang="typescript"> - this.mixin('api'); - - this.user = this.opts.user; - - this.fetch = (iknow, limit, cursor, cb) => { - this.$root.$data.os.api('users/followers', { - user_id: this.user.id, - iknow: iknow, - limit: limit, - cursor: cursor ? cursor : undefined - }).then(cb); - }; - </script> -</mk-user-followers> diff --git a/src/web/app/desktop/-tags/user-following.tag b/src/web/app/desktop/-tags/user-following.tag deleted file mode 100644 index 42ad5f88a8..0000000000 --- a/src/web/app/desktop/-tags/user-following.tag +++ /dev/null @@ -1,23 +0,0 @@ -<mk-user-following> - <mk-users-list fetch={ fetch } count={ user.following_count } you-know-count={ user.following_you_know_count } no-users={ 'フォロー中のユーザーはいないようです。' }/> - <style lang="stylus" scoped> - :scope - display block - height 100% - - </style> - <script lang="typescript"> - this.mixin('api'); - - this.user = this.opts.user; - - this.fetch = (iknow, limit, cursor, cb) => { - this.$root.$data.os.api('users/following', { - user_id: this.user.id, - iknow: iknow, - limit: limit, - cursor: cursor ? cursor : undefined - }).then(cb); - }; - </script> -</mk-user-following> diff --git a/src/web/app/desktop/-tags/users-list.tag b/src/web/app/desktop/-tags/users-list.tag deleted file mode 100644 index 03c527109b..0000000000 --- a/src/web/app/desktop/-tags/users-list.tag +++ /dev/null @@ -1,138 +0,0 @@ -<mk-users-list> - <nav> - <div> - <span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて<span>{ opts.count }</span></span> - <span v-if="$root.$data.os.isSignedIn && opts.youKnowCount" data-is-active={ mode == 'iknow' } @click="setMode.bind(this, 'iknow')">知り合い<span>{ opts.youKnowCount }</span></span> - </div> - </nav> - <div class="users" v-if="!fetching && users.length != 0"> - <div each={ users }> - <mk-list-user user={ this }/> - </div> - </div> - <button class="more" v-if="!fetching && next != null" @click="more" disabled={ moreFetching }> - <span v-if="!moreFetching">もっと</span> - <span v-if="moreFetching">読み込み中<mk-ellipsis/></span> - </button> - <p class="no" v-if="!fetching && users.length == 0">{ opts.noUsers }</p> - <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p> - <style lang="stylus" scoped> - :scope - display block - height 100% - background #fff - - > nav - z-index 1 - box-shadow 0 1px 0 rgba(#000, 0.1) - - > div - display flex - justify-content center - margin 0 auto - max-width 600px - - > span - display block - flex 1 1 - text-align center - line-height 52px - font-size 14px - color #657786 - border-bottom solid 2px transparent - cursor pointer - - * - pointer-events none - - &[data-is-active] - font-weight bold - color $theme-color - border-color $theme-color - cursor default - - > span - display inline-block - margin-left 4px - padding 2px 5px - font-size 12px - line-height 1 - color #888 - background #eee - border-radius 20px - - > .users - height calc(100% - 54px) - overflow auto - - > * - border-bottom solid 1px rgba(0, 0, 0, 0.05) - - > * - max-width 600px - margin 0 auto - - > .no - margin 0 - padding 16px - text-align center - color #aaa - - > .fetching - margin 0 - padding 16px - text-align center - color #aaa - - > [data-fa] - margin-right 4px - - </style> - <script lang="typescript"> - this.mixin('i'); - - this.limit = 30; - this.mode = 'all'; - - this.fetching = true; - this.moreFetching = false; - - this.on('mount', () => { - this.fetch(() => this.$emit('loaded')); - }); - - this.fetch = cb => { - this.update({ - fetching: true - }); - this.opts.fetch(this.mode == 'iknow', this.limit, null, obj => { - this.update({ - fetching: false, - users: obj.users, - next: obj.next - }); - if (cb) cb(); - }); - }; - - this.more = () => { - this.update({ - moreFetching: true - }); - this.opts.fetch(this.mode == 'iknow', this.limit, this.cursor, obj => { - this.update({ - moreFetching: false, - users: this.users.concat(obj.users), - next: obj.next - }); - }); - }; - - this.setMode = mode => { - this.update({ - mode: mode - }); - this.fetch(); - }; - </script> -</mk-users-list> diff --git a/src/web/app/desktop/views/components/user-followers.vue b/src/web/app/desktop/views/components/user-followers.vue new file mode 100644 index 0000000000..67e694cf41 --- /dev/null +++ b/src/web/app/desktop/views/components/user-followers.vue @@ -0,0 +1,26 @@ +<template> +<mk-users-list + :fetch="fetch" + :count="user.followers_count" + :you-know-count="user.followers_you_know_count" +> + フォロワーはいないようです。 +</mk-users-list> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: ['user'], + methods: { + fetch(iknow, limit, cursor, cb) { + this.$root.$data.os.api('users/followers', { + user_id: this.user.id, + iknow: iknow, + limit: limit, + cursor: cursor ? cursor : undefined + }).then(cb); + } + } +}); +</script> diff --git a/src/web/app/desktop/views/components/user-following.vue b/src/web/app/desktop/views/components/user-following.vue new file mode 100644 index 0000000000..16cc3c42f1 --- /dev/null +++ b/src/web/app/desktop/views/components/user-following.vue @@ -0,0 +1,26 @@ +<template> +<mk-users-list + :fetch="fetch" + :count="user.following_count" + :you-know-count="user.following_you_know_count" +> + フォロー中のユーザーはいないようです。 +</mk-users-list> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: ['user'], + methods: { + fetch(iknow, limit, cursor, cb) { + this.$root.$data.os.api('users/following', { + user_id: this.user.id, + iknow: iknow, + limit: limit, + cursor: cursor ? cursor : undefined + }).then(cb); + } + } +}); +</script> diff --git a/src/web/app/desktop/views/components/users-list.vue b/src/web/app/desktop/views/components/users-list.vue new file mode 100644 index 0000000000..268fac4ec1 --- /dev/null +++ b/src/web/app/desktop/views/components/users-list.vue @@ -0,0 +1,136 @@ +<template> +<div class="mk-users-list"> + <nav> + <div> + <span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span> + <span v-if="$root.$data.os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span> + </div> + </nav> + <div class="users" v-if="!fetching && users.length != 0"> + <div v-for="u in users" :key="u.id"> + <mk-list-user :user="u"/> + </div> + </div> + <button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching"> + <span v-if="!moreFetching">もっと</span> + <span v-if="moreFetching">読み込み中<mk-ellipsis/></span> + </button> + <p class="no" v-if="!fetching && users.length == 0"> + <slot></slot> + </p> + <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: ['fetch', 'count', 'youKnowCount'], + data() { + return { + limit: 30, + mode: 'all', + fetching: true, + moreFetching: false, + users: [], + next: null + }; + }, + mounted() { + this._fetch(() => { + this.$emit('loaded'); + }); + }, + methods: { + _fetch(cb) { + this.fetching = true; + this.fetch(this.mode == 'iknow', this.limit, null, obj => { + this.fetching = false; + this.users = obj.users; + this.next = obj.next; + if (cb) cb(); + }); + }, + more() { + this.moreFetching = true; + this.fetch(this.mode == 'iknow', this.limit, this.next, obj => { + this.moreFetching = false; + this.users = this.users.concat(obj.users); + this.next = obj.next; + }); + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-users-list + height 100% + background #fff + + > nav + z-index 1 + box-shadow 0 1px 0 rgba(#000, 0.1) + + > div + display flex + justify-content center + margin 0 auto + max-width 600px + + > span + display block + flex 1 1 + text-align center + line-height 52px + font-size 14px + color #657786 + border-bottom solid 2px transparent + cursor pointer + + * + pointer-events none + + &[data-is-active] + font-weight bold + color $theme-color + border-color $theme-color + cursor default + + > span + display inline-block + margin-left 4px + padding 2px 5px + font-size 12px + line-height 1 + color #888 + background #eee + border-radius 20px + + > .users + height calc(100% - 54px) + overflow auto + + > * + border-bottom solid 1px rgba(0, 0, 0, 0.05) + + > * + max-width 600px + margin 0 auto + + > .no + margin 0 + padding 16px + text-align center + color #aaa + + > .fetching + margin 0 + padding 16px + text-align center + color #aaa + + > [data-fa] + margin-right 4px + +</style>