120 lines
3.2 KiB
Vue
120 lines
3.2 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="identity-header" dir="auto">
|
|
<figure class="image is-24x24" v-if="member.actor.avatar">
|
|
<img class="is-rounded" :src="member.actor.avatar.url" alt="" />
|
|
</figure>
|
|
<o-icon v-else icon="account-circle" />
|
|
{{ displayNameAndUsername(member.actor) }}
|
|
</div>
|
|
<div class="card-content" dir="auto">
|
|
<div>
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-48x48" v-if="member.parent.avatar">
|
|
<img class="is-rounded" :src="member.parent.avatar.url" alt="" />
|
|
</figure>
|
|
<o-icon v-else size="is-large" icon="account-group" />
|
|
</div>
|
|
<div class="media-content" dir="auto">
|
|
<router-link
|
|
:to="{
|
|
name: RouteName.GROUP,
|
|
params: {
|
|
preferredUsername: usernameWithDomain(member.parent),
|
|
},
|
|
}"
|
|
>
|
|
<h2>{{ member.parent.name }}</h2>
|
|
<p class="is-6 has-text-grey-dark">
|
|
<span>{{ `@${usernameWithDomain(member.parent)}` }}</span>
|
|
<o-taglist>
|
|
<o-tag
|
|
type="is-info"
|
|
v-if="member.role === MemberRole.ADMINISTRATOR"
|
|
>{{ $t("Administrator") }}</o-tag
|
|
>
|
|
<o-tag
|
|
type="is-info"
|
|
v-else-if="member.role === MemberRole.MODERATOR"
|
|
>{{ $t("Moderator") }}</o-tag
|
|
>
|
|
</o-taglist>
|
|
</p>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<div class="content" v-if="member.parent.summary">
|
|
<p v-html="member.parent.summary" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<o-dropdown aria-role="list" position="is-bottom-left">
|
|
<template #trigger>
|
|
<o-icon icon="dots-horizontal" />
|
|
</template>
|
|
|
|
<o-dropdown-item aria-role="listitem" @click="$emit('leave')">
|
|
<o-icon icon="exit-to-app" />
|
|
{{ $t("Leave") }}
|
|
</o-dropdown-item>
|
|
</o-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Prop, Vue } from "vue-property-decorator";
|
|
import { displayNameAndUsername, usernameWithDomain } from "@/types/actor";
|
|
import { IMember } from "@/types/actor/member.model";
|
|
import { MemberRole } from "@/types/enums";
|
|
import RouteName from "../../router/name";
|
|
|
|
export default class GroupMemberCard extends Vue {
|
|
@Prop({ required: true }) member!: IMember;
|
|
|
|
RouteName = RouteName;
|
|
|
|
usernameWithDomain = usernameWithDomain;
|
|
|
|
displayNameAndUsername = displayNameAndUsername;
|
|
|
|
MemberRole = MemberRole;
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@use "@/styles/_mixins" as *;
|
|
.card {
|
|
.card-content {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > div:first-child {
|
|
flex: 1;
|
|
}
|
|
|
|
& > div:last-child {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.media-content {
|
|
:deep(.tags) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.identity-header {
|
|
background: $yellow-2;
|
|
display: flex;
|
|
padding: 5px;
|
|
|
|
figure,
|
|
span.icon {
|
|
@include padding-right(3px);
|
|
}
|
|
}
|
|
}
|
|
</style>
|