From c7daaba370cf33efca99058b3cec6b350844d75e Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Tue, 21 May 2019 08:44:36 +0900 Subject: [PATCH] :art: --- .../app/common/views/components/avatars.vue | 27 +++++++++++++++++++ .../app/common/views/components/forkit.vue | 1 - .../app/common/views/pages/user-groups.vue | 11 ++++++-- .../app/common/views/pages/user-lists.vue | 5 ++++ 4 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 src/client/app/common/views/components/avatars.vue diff --git a/src/client/app/common/views/components/avatars.vue b/src/client/app/common/views/components/avatars.vue new file mode 100644 index 0000000000..0dc1ece3bf --- /dev/null +++ b/src/client/app/common/views/components/avatars.vue @@ -0,0 +1,27 @@ +<template> +<div> + <mk-avatar v-for="user in us" :user="user" :key="user.id" style="width:32px;height:32px;"/> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: { + userIds: { + required: true + }, + }, + data() { + return { + us: [] + }; + }, + async created() { + this.us = await this.$root.api('users/show', { + userIds: this.userIds + }); + } +}); +</script> diff --git a/src/client/app/common/views/components/forkit.vue b/src/client/app/common/views/components/forkit.vue index d652b846a4..328e3ca7b0 100644 --- a/src/client/app/common/views/components/forkit.vue +++ b/src/client/app/common/views/components/forkit.vue @@ -19,7 +19,6 @@ export default Vue.extend({ }); </script> - <style lang="stylus" scoped> .a display block diff --git a/src/client/app/common/views/pages/user-groups.vue b/src/client/app/common/views/pages/user-groups.vue index aba16df7b8..2fee46c3a1 100644 --- a/src/client/app/common/views/pages/user-groups.vue +++ b/src/client/app/common/views/pages/user-groups.vue @@ -9,6 +9,7 @@ <ui-hr/> <ui-margin> <router-link :to="`/i/groups/${group.id}`">{{ group.name }}</router-link> + <x-avatars :user-ids="group.userIds" style="margin-top:8px;"/> </ui-margin> </div> </ui-container> @@ -18,7 +19,8 @@ <div class="hwgkdrbl" v-for="(group, i) in joinedGroups" :key="group.id"> <ui-hr v-if="i != 0"/> <ui-margin> - <router-link :to="`/i/groups/${group.id}`">{{ group.name }}</router-link> + <div>{{ group.name }}</div> + <x-avatars :user-ids="group.userIds" style="margin-top:8px;"/> </ui-margin> </div> </ui-container> @@ -29,6 +31,7 @@ <ui-hr v-if="i != 0"/> <ui-margin> <div class="name">{{ invite.group.name }}</div> + <x-avatars :user-ids="invite.group.userIds" style="margin-top:8px;"/> <ui-horizon-group> <ui-button @click="acceptInvite(invite)"><fa :icon="faCheck"/> {{ $t('accept-invite') }}</ui-button> <ui-button @click="rejectInvite(invite)"><fa :icon="faBan"/> {{ $t('reject-invite') }}</ui-button> @@ -41,11 +44,15 @@ <script lang="ts"> import Vue from 'vue'; -import i18n from '../../../i18n'; import { faUsers, faPlus, faCheck, faBan, faEnvelopeOpenText } from '@fortawesome/free-solid-svg-icons'; +import i18n from '../../../i18n'; +import XAvatars from '../../views/components/avatars.vue'; export default Vue.extend({ i18n: i18n('common/views/components/user-groups.vue'), + components: { + XAvatars + }, data() { return { ownedGroups: [], diff --git a/src/client/app/common/views/pages/user-lists.vue b/src/client/app/common/views/pages/user-lists.vue index 4c09eca6ce..29085935cb 100644 --- a/src/client/app/common/views/pages/user-lists.vue +++ b/src/client/app/common/views/pages/user-lists.vue @@ -8,6 +8,7 @@ <ui-hr/> <ui-margin> <router-link :to="`/i/lists/${list.id}`">{{ list.name }}</router-link> + <x-avatars :user-ids="list.userIds" style="margin-top:8px;"/> </ui-margin> </div> </ui-container> @@ -17,9 +18,13 @@ import Vue from 'vue'; import i18n from '../../../i18n'; import { faListUl, faPlus } from '@fortawesome/free-solid-svg-icons'; +import XAvatars from '../../views/components/avatars.vue'; export default Vue.extend({ i18n: i18n('common/views/components/user-lists.vue'), + components: { + XAvatars + }, data() { return { fetching: true,