forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
parent
76c8e05e3a
commit
7ea42af0ba
7 changed files with 179 additions and 29 deletions
|
@ -223,18 +223,18 @@ root(isDark)
|
|||
background $theme-color
|
||||
|
||||
> footer
|
||||
> *
|
||||
> button
|
||||
display block
|
||||
margin 0
|
||||
padding 16px
|
||||
width 100%
|
||||
text-align center
|
||||
color #ccc
|
||||
background isDark ? #282C37 : #fff
|
||||
border-top solid 1px isDark ? #1c2023 : #eaeaea
|
||||
border-bottom-left-radius 4px
|
||||
border-bottom-right-radius 4px
|
||||
border-bottom-left-radius 6px
|
||||
border-bottom-right-radius 6px
|
||||
|
||||
> button
|
||||
&:hover
|
||||
background isDark ? #2e3440 : #f5f5f5
|
||||
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import MkListsWindow from './lists-window.vue';
|
||||
import MkUserListsWindow from './user-lists-window.vue';
|
||||
import MkSettingsWindow from './settings-window.vue';
|
||||
import MkDriveWindow from './drive-window.vue';
|
||||
import contains from '../../../common/scripts/contains';
|
||||
|
@ -86,7 +86,7 @@ export default Vue.extend({
|
|||
},
|
||||
list() {
|
||||
this.close();
|
||||
(this as any).os.new(MkListsWindow);
|
||||
(this as any).os.new(MkUserListsWindow);
|
||||
},
|
||||
settings() {
|
||||
this.close();
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<mk-notes ref="timeline" :more="existMore ? more : null"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
131
src/client/app/desktop/views/pages/user-list.users.vue
Normal file
131
src/client/app/desktop/views/pages/user-list.users.vue
Normal file
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div>
|
||||
<mk-widget-container>
|
||||
<template slot="header">%fa:users% ユーザー</template>
|
||||
<button slot="func" title="ユーザーを追加" @click="add">%fa:plus%</button>
|
||||
|
||||
<div data-id="d0b63759-a822-4556-a5ce-373ab966e08a">
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw% %i18n:common.loading%<mk-ellipsis/></p>
|
||||
<template v-else-if="users.length != 0">
|
||||
<div class="user" v-for="_user in users">
|
||||
<router-link class="avatar-anchor" :to="_user | userPage">
|
||||
<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
|
||||
</router-link>
|
||||
<div class="body">
|
||||
<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
|
||||
<p class="username">@{{ _user | acct }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<p class="empty" v-else>%i18n:@no-one%</p>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
list: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
users: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
(this as any).api('users/show', {
|
||||
userIds: this.list.userIds
|
||||
}).then(users => {
|
||||
this.users = users;
|
||||
this.fetching = false;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
(this as any).apis.input({
|
||||
title: 'ユーザー名',
|
||||
}).then(async username => {
|
||||
const user = await (this as any).api('users/show', {
|
||||
username
|
||||
});
|
||||
|
||||
(this as any).api('users/lists/push', {
|
||||
listId: this.list.id,
|
||||
userId: user.id
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
> .user
|
||||
padding 16px
|
||||
border-bottom solid 1px isDark ? #1c2023 : #eee
|
||||
|
||||
&:last-child
|
||||
border-bottom none
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .avatar-anchor
|
||||
display block
|
||||
float left
|
||||
margin 0 12px 0 0
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
width 42px
|
||||
height 42px
|
||||
margin 0
|
||||
border-radius 8px
|
||||
vertical-align bottom
|
||||
|
||||
> .body
|
||||
float left
|
||||
width calc(100% - 54px)
|
||||
|
||||
> .name
|
||||
margin 0
|
||||
font-size 16px
|
||||
line-height 24px
|
||||
color isDark ? #fff : #555
|
||||
|
||||
> .username
|
||||
display block
|
||||
margin 0
|
||||
font-size 15px
|
||||
line-height 16px
|
||||
color isDark ? #606984 : #ccc
|
||||
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
> .fetching
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color #aaa
|
||||
|
||||
[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"][data-darkmode]
|
||||
root(true)
|
||||
|
||||
[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"]:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
|
@ -3,6 +3,7 @@
|
|||
<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
|
||||
<div>
|
||||
<div><h1>{{ list.title }}</h1></div>
|
||||
<x-users :list="list"/>
|
||||
</div>
|
||||
<main>
|
||||
<mk-user-list-timeline :list="list"/>
|
||||
|
@ -13,8 +14,12 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import XUsers from './user-list.users.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XUsers
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
|
|
|
@ -8,7 +8,7 @@ import resolveRemoteUser from '../../../../remote/resolve-user';
|
|||
const cursorOption = { fields: { data: false } };
|
||||
|
||||
/**
|
||||
* Show a user
|
||||
* Show user(s)
|
||||
*/
|
||||
module.exports = (params, me) => new Promise(async (res, rej) => {
|
||||
let user;
|
||||
|
@ -17,6 +17,10 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
|
|||
const [userId, userIdErr] = $(params.userId).optional.type(ID).$;
|
||||
if (userIdErr) return rej('invalid userId param');
|
||||
|
||||
// Get 'userIds' parameter
|
||||
const [userIds, userIdsErr] = $(params.userIds).optional.array($().type(ID)).$;
|
||||
if (userIdsErr) return rej('invalid userIds param');
|
||||
|
||||
// Get 'username' parameter
|
||||
const [username, usernameErr] = $(params.username).optional.string().$;
|
||||
if (usernameErr) return rej('invalid username param');
|
||||
|
@ -25,10 +29,17 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
|
|||
const [host, hostErr] = $(params.host).nullable.optional.string().$;
|
||||
if (hostErr) return rej('invalid host param');
|
||||
|
||||
if (userId === undefined && typeof username !== 'string') {
|
||||
return rej('userId or pair of username and host is required');
|
||||
if (userIds) {
|
||||
const users = await User.find({
|
||||
_id: {
|
||||
$in: userIds
|
||||
}
|
||||
});
|
||||
|
||||
res(await Promise.all(users.map(u => pack(u, me, {
|
||||
detail: true
|
||||
}))));
|
||||
} else {
|
||||
// Lookup user
|
||||
if (typeof host === 'string') {
|
||||
try {
|
||||
|
@ -53,4 +64,5 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
|
|||
res(await pack(user, me, {
|
||||
detail: true
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue