syuilo
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<mk-window width="400px" height="550px" @closed="destroyDom">
|
||||
<span slot="header" :class="$style.header">
|
||||
<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@followers%'.replace('{}', name) }}
|
||||
</span>
|
||||
<mk-followers :user="user"/>
|
||||
</mk-window>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
computed: {
|
||||
name(): string {
|
||||
return Vue.filter('userName')(this.user);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.header
|
||||
> img
|
||||
display inline-block
|
||||
vertical-align bottom
|
||||
height calc(100% - 10px)
|
||||
margin 5px
|
||||
border-radius 4px
|
||||
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<mk-users-list
|
||||
:fetch="fetch"
|
||||
:count="user.followersCount"
|
||||
:you-know-count="user.followersYouKnowCount"
|
||||
>
|
||||
%i18n:@empty%
|
||||
</mk-users-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
methods: {
|
||||
fetch(iknow, limit, cursor, cb) {
|
||||
(this as any).api('users/followers', {
|
||||
userId: this.user.id,
|
||||
iknow: iknow,
|
||||
limit: limit,
|
||||
cursor: cursor ? cursor : undefined
|
||||
}).then(cb);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<mk-window width="400px" height="550px" @closed="destroyDom">
|
||||
<span slot="header" :class="$style.header">
|
||||
<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@following%'.replace('{}', name) }}
|
||||
</span>
|
||||
<mk-following :user="user"/>
|
||||
</mk-window>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
computed: {
|
||||
name(): string {
|
||||
return Vue.filter('userName')(this.user);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" module>
|
||||
.header
|
||||
> img
|
||||
display inline-block
|
||||
vertical-align bottom
|
||||
height calc(100% - 10px)
|
||||
margin 5px
|
||||
border-radius 4px
|
||||
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<mk-users-list
|
||||
:fetch="fetch"
|
||||
:count="user.followingCount"
|
||||
:you-know-count="user.followingYouKnowCount"
|
||||
>
|
||||
%i18n:@empty%
|
||||
</mk-users-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: ['user'],
|
||||
methods: {
|
||||
fetch(iknow, limit, cursor, cb) {
|
||||
(this as any).api('users/following', {
|
||||
userId: this.user.id,
|
||||
iknow: iknow,
|
||||
limit: limit,
|
||||
cursor: cursor ? cursor : undefined
|
||||
}).then(cb);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -22,9 +22,7 @@ import settings from './settings.vue';
|
||||
import calendar from './calendar.vue';
|
||||
import activity from './activity.vue';
|
||||
import friendsMaker from './friends-maker.vue';
|
||||
import followers from './followers.vue';
|
||||
import following from './following.vue';
|
||||
import usersList from './users-list.vue';
|
||||
import userCard from './user-card.vue';
|
||||
import userListTimeline from './user-list-timeline.vue';
|
||||
import widgetContainer from './widget-container.vue';
|
||||
|
||||
@@ -50,8 +48,6 @@ Vue.component('mk-settings', settings);
|
||||
Vue.component('mk-calendar', calendar);
|
||||
Vue.component('mk-activity', activity);
|
||||
Vue.component('mk-friends-maker', friendsMaker);
|
||||
Vue.component('mk-followers', followers);
|
||||
Vue.component('mk-following', following);
|
||||
Vue.component('mk-users-list', usersList);
|
||||
Vue.component('mk-user-card', userCard);
|
||||
Vue.component('mk-user-list-timeline', userListTimeline);
|
||||
Vue.component('mk-widget-container', widgetContainer);
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
<div class="description">
|
||||
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
|
||||
</div>
|
||||
<p class="followed" v-if="user.isFollowed">%i18n:@followed%</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -34,17 +33,18 @@ export default Vue.extend({
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.zvdbznxvfixtmujpsigoccczftvpiwqh
|
||||
$bg = #fff
|
||||
$bg = var(--face)
|
||||
|
||||
margin 16px auto
|
||||
max-width calc(100% - 32px)
|
||||
font-size 16px
|
||||
height 280px
|
||||
overflow hidden
|
||||
font-size 14px
|
||||
text-align center
|
||||
background $bg
|
||||
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
|
||||
color var(--faceText)
|
||||
|
||||
> .banner
|
||||
height 100px
|
||||
height 90px
|
||||
background-color #f9f4f4
|
||||
background-position center
|
||||
background-size cover
|
||||
@@ -63,13 +63,10 @@ export default Vue.extend({
|
||||
right 16px
|
||||
|
||||
> .body
|
||||
padding 4px 32px 32px 32px
|
||||
|
||||
@media (max-width 400px)
|
||||
padding 4px 16px 16px 16px
|
||||
padding 0px 24px
|
||||
|
||||
> .name
|
||||
font-size 20px
|
||||
font-size 120%
|
||||
font-weight bold
|
||||
|
||||
> .username
|
||||
@@ -77,15 +74,6 @@ export default Vue.extend({
|
||||
opacity 0.7
|
||||
|
||||
> .description
|
||||
margin 16px 0
|
||||
|
||||
> .followed
|
||||
margin 0
|
||||
padding 0
|
||||
line-height 24px
|
||||
font-size 0.8em
|
||||
color #71afc7
|
||||
background #eefaff
|
||||
border-radius 4px
|
||||
margin 8px 0 16px 0
|
||||
|
||||
</style>
|
||||
@@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div class="mk-users-list">
|
||||
<nav>
|
||||
<div>
|
||||
<span :data-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
|
||||
<span v-if="$store.getters.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@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">
|
||||
<x-item :user="u"/>
|
||||
</div>
|
||||
</div>
|
||||
<button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching">
|
||||
<span v-if="!moreFetching">%i18n:@load-more%</span>
|
||||
<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
|
||||
</button>
|
||||
<p class="no" v-if="!fetching && users.length == 0">
|
||||
<slot></slot>
|
||||
</p>
|
||||
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@fetching%<mk-ellipsis/></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import XItem from './users-list.item.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XItem
|
||||
},
|
||||
props: ['fetch', 'count', 'youKnowCount'],
|
||||
data() {
|
||||
return {
|
||||
limit: 20,
|
||||
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.users = obj.users;
|
||||
this.next = obj.next;
|
||||
this.fetching = false;
|
||||
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%
|
||||
overflow auto
|
||||
background #eee
|
||||
|
||||
> nav
|
||||
z-index 10
|
||||
position sticky
|
||||
top 0
|
||||
background #fff
|
||||
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-active]
|
||||
font-weight bold
|
||||
color var(--primary)
|
||||
border-color var(--primary)
|
||||
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
|
||||
|
||||
> button
|
||||
display block
|
||||
width calc(100% - 32px)
|
||||
margin 16px
|
||||
padding 16px
|
||||
|
||||
&:hover
|
||||
background rgba(#000, 0.1)
|
||||
|
||||
> .no
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .fetching
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> [data-icon]
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user