Show identity for each membership in MyGroups

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-12-01 16:14:53 +01:00
parent 01c86a1cb9
commit f642113070
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
2 changed files with 38 additions and 8 deletions

View file

@ -1,5 +1,11 @@
<template>
<div class="card">
<div class="identity-header">
<figure class="image is-24x24" v-if="member.actor.avatar">
<img class="is-rounded" :src="member.actor.avatar.url" alt="" />
</figure>
{{ displayNameAndUsername(member.actor) }}
</div>
<div class="card-content">
<div>
<div class="media">
@ -60,7 +66,7 @@
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { usernameWithDomain } from "@/types/actor";
import { displayNameAndUsername, usernameWithDomain } from "@/types/actor";
import { IMember } from "@/types/actor/member.model";
import { MemberRole } from "@/types/enums";
import RouteName from "../../router/name";
@ -73,20 +79,34 @@ export default class GroupMemberCard extends Vue {
usernameWithDomain = usernameWithDomain;
displayNameAndUsername = displayNameAndUsername;
MemberRole = MemberRole;
}
</script>
<style lang="scss" scoped>
.card-content {
display: flex;
align-items: center;
.card {
.card-content {
display: flex;
align-items: center;
& > div:first-child {
flex: 1;
& > div:first-child {
flex: 1;
}
& > div:last-child {
cursor: pointer;
}
}
& > div:last-child {
cursor: pointer;
.identity-header {
background: $yellow-2;
display: flex;
padding: 5px;
figure {
padding-right: 3px;
}
}
}
</style>

View file

@ -287,6 +287,16 @@ export const LOGGED_USER_MEMBERSHIPS = gql`
elements {
id
role
actor {
id
avatar {
id
url
}
preferredUsername
name
domain
}
parent {
id
preferredUsername