Sharkey/src/client/app/desktop/views/pages/user/user.friends.vue

119 lines
2.3 KiB
Vue
Raw Normal View History

2018-02-14 17:32:13 +02:00
<template>
2018-09-01 06:58:04 +03:00
<div class="hozptpaliadatkehcmcayizwzwwctpbc">
<p class="title"><fa icon="users"/>{{ $t('title') }}</p>
<p class="initializing" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
2018-02-19 16:37:09 +02:00
<template v-if="!fetching && users.length != 0">
<div class="user" v-for="friend in users">
2018-04-29 11:17:15 +03:00
<mk-avatar class="avatar" :user="friend"/>
2018-02-19 16:37:09 +02:00
<div class="body">
2018-04-09 12:52:29 +03:00
<router-link class="name" :to="friend | userPage" v-user-preview="friend.id">{{ friend.name }}</router-link>
<p class="username">@{{ friend | acct }}</p>
2018-02-19 16:37:09 +02:00
</div>
<mk-follow-button :user="friend"/>
2018-02-14 17:32:13 +02:00
</div>
2018-02-19 16:37:09 +02:00
</template>
<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
2018-02-14 17:32:13 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
2018-03-27 10:51:12 +03:00
2018-02-14 17:32:13 +02:00
export default Vue.extend({
i18n: i18n('desktop/views/pages/user/user.friends.vue'),
2018-02-14 17:32:13 +02:00
props: ['user'],
data() {
return {
users: [],
fetching: true
};
},
mounted() {
2018-11-09 01:13:34 +02:00
this.$root.api('users/get_frequently_replied_users', {
2018-03-29 08:48:47 +03:00
userId: this.user.id,
2018-02-14 17:32:13 +02:00
limit: 4
}).then(docs => {
this.users = docs.map(doc => doc.user);
2018-02-19 16:37:09 +02:00
this.fetching = false;
2018-02-14 17:32:13 +02:00
});
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 08:26:20 +03:00
.hozptpaliadatkehcmcayizwzwwctpbc
2018-09-26 14:28:13 +03:00
background var(--face)
2018-09-22 14:39:12 +03:00
box-shadow var(--shadow)
border-radius var(--round)
2018-08-27 18:06:31 +03:00
overflow hidden
2018-02-14 17:32:13 +02:00
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
2018-09-28 08:26:20 +03:00
background var(--faceHeader)
2018-09-27 08:52:10 +03:00
color var(--faceHeaderText)
2018-04-29 02:51:17 +03:00
box-shadow 0 1px rgba(#000, 0.07)
2018-02-14 17:32:13 +02:00
> i
margin-right 4px
> .initializing
> .empty
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
> .user
padding 16px
2018-09-28 08:26:20 +03:00
border-bottom solid 1px var(--faceDivider)
2018-02-14 17:32:13 +02:00
&:last-child
border-bottom none
&:after
content ""
display block
clear both
2018-04-29 11:17:15 +03:00
> .avatar
2018-02-14 17:32:13 +02:00
display block
float left
margin 0 12px 0 0
2018-04-29 11:17:15 +03:00
width 42px
height 42px
border-radius 8px
2018-02-14 17:32:13 +02:00
> .body
float left
width calc(100% - 54px)
> .name
margin 0
font-size 16px
line-height 24px
2018-09-28 08:26:20 +03:00
color var(--text)
2018-02-14 17:32:13 +02:00
> .username
display block
margin 0
font-size 15px
line-height 16px
2018-09-28 08:26:20 +03:00
color var(--text)
opacity 0.7
2018-02-14 17:32:13 +02:00
2018-02-16 20:01:00 +02:00
> .mk-follow-button
2018-02-14 17:32:13 +02:00
position absolute
top 16px
right 16px
</style>