Skip to content
Snippets Groups Projects
Commit 926eb346 authored by syuilo's avatar syuilo
Browse files

fix errors

parent e6e33fae
No related branches found
No related tags found
No related merge requests found
<template>
<div class="mk-users-dialog">
<div class="header">
<span>{{ title }}</span>
<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
</div>
<div class="users">
<MkA v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)">
<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true" :show-indicator="true"/>
<div class="body">
<MkUserName :user="extract ? extract(item) : item" class="name"/>
<MkAcct :user="extract ? extract(item) : item" class="acct"/>
</div>
</MkA>
</div>
<button class="more _button" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
</button>
<p class="empty" v-if="empty">{{ $ts.noUsers }}</p>
<MkError v-if="error" @retry="init()"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import paging from '@/scripts/paging';
import { userPage } from '@/filters/user';
export default defineComponent({
mixins: [
paging({}),
],
props: {
title: {
required: true
},
pagination: {
required: true
},
extract: {
required: false
}
},
data() {
return {
};
},
methods: {
userPage
}
});
</script>
<style lang="scss" scoped>
.mk-users-dialog {
width: 350px;
height: 350px;
background: var(--panel);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
> .header {
display: flex;
flex-shrink: 0;
> button {
height: 58px;
width: 58px;
@media (max-width: 500px) {
height: 42px;
width: 42px;
}
}
> span {
flex: 1;
line-height: 58px;
padding-left: 32px;
font-weight: bold;
@media (max-width: 500px) {
line-height: 42px;
padding-left: 16px;
}
}
}
> .users {
flex: 1;
overflow: auto;
&:empty {
display: none;
}
> .user {
display: flex;
align-items: center;
font-size: 14px;
padding: 8px 32px;
@media (max-width: 500px) {
padding: 8px 16px;
}
> * {
pointer-events: none;
user-select: none;
}
> .avatar {
width: 45px;
height: 45px;
}
> .body {
padding: 0 8px;
overflow: hidden;
> .name {
display: block;
font-weight: bold;
}
> .acct {
opacity: 0.5;
}
}
}
}
> .empty {
text-align: center;
opacity: 0.5;
}
}
</style>
...@@ -125,7 +125,6 @@ ...@@ -125,7 +125,6 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue'; import { defineComponent, markRaw } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue'; import XModalWindow from '@/components/ui/modal-window.vue';
import MkUsersDialog from '@/components/users-dialog.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
...@@ -201,44 +200,15 @@ export default defineComponent({ ...@@ -201,44 +200,15 @@ export default defineComponent({
}, },
showFollowing() { showFollowing() {
os.modal(MkUsersDialog, { // TODO: ページ遷移
title: this.$ts.instanceFollowing,
pagination: {
endpoint: 'federation/following',
limit: 10,
params: {
host: this.instance.host
}
},
extract: item => item.follower
});
}, },
showFollowers() { showFollowers() {
os.modal(MkUsersDialog, { // TODO: ページ遷移
title: this.$ts.instanceFollowers,
pagination: {
endpoint: 'federation/followers',
limit: 10,
params: {
host: this.instance.host
}
},
extract: item => item.followee
});
}, },
showUsers() { showUsers() {
os.modal(MkUsersDialog, { // TODO: ページ遷移
title: this.$ts.instanceUsers,
pagination: {
endpoint: 'federation/users',
limit: 10,
params: {
host: this.instance.host
}
}
});
}, },
bytes, bytes,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment