Fix display of invitations

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-26 18:19:05 +02:00
parent 3336af225f
commit e446df938f
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 52 additions and 70 deletions

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white"> <div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
<div <div
class="bg-yellow-2 text-black flex items-center gap-1 p-2 rounded-t-lg" class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg"
dir="auto" dir="auto"
> >
<figure class="" v-if="member.actor.avatar"> <figure class="" v-if="member.actor.avatar">

View file

@ -1,75 +1,54 @@
<template> <template>
<div class=""> <div class="border rounded p-2 bg-mbz-yellow-alt-50 dark:bg-zinc-700">
<div class=""> <div class="prose dark:prose-invert">
<div class=""> <i18n-t
<div class="prose dark:prose-invert"> tag="p"
<i18n-t keypath="You have been invited by {invitedBy} to the following group:"
tag="p" >
keypath="You have been invited by {invitedBy} to the following group:" <template #invitedBy>
> <b>{{ member?.invitedBy?.name }}</b>
<template #invitedBy> </template>
<b>{{ member?.invitedBy?.name }}</b> </i18n-t>
</template> </div>
</i18n-t> <div class="flex justify-between gap-2">
</div> <div class="flex gap-2">
<div class=""> <div class="">
<figure v-if="member.parent.avatar">
<img
class="rounded-full"
:src="member.parent.avatar.url"
alt=""
height="48"
width="48"
/>
</figure>
<AccountGroup :size="48" v-else />
</div>
<div class="mr-3">
<router-link
:to="{
name: RouteName.GROUP,
params: {
preferredUsername: usernameWithDomain(member.parent),
},
}"
>
<p class="">{{ member.parent.name }}</p>
<p class="text-sm">@{{ usernameWithDomain(member.parent) }}</p>
</router-link>
</div>
</div>
<div>
<div class="flex gap-2">
<div class=""> <div class="">
<figure v-if="member.parent.avatar"> <o-button variant="success" @click="$emit('accept', member.id)">
<img {{ t("Accept") }}
class="rounded" </o-button>
:src="member.parent.avatar.url"
alt=""
height="48"
width="48"
/>
</figure>
<AccountGroup :size="48" v-else />
</div> </div>
<div class="media-content"> <div class="">
<div class="level"> <o-button variant="danger" @click="$emit('reject', member.id)">
<div class="level-left"> {{ t("Decline") }}
<div class="level-item mr-3"> </o-button>
<router-link
:to="{
name: RouteName.GROUP,
params: {
preferredUsername: usernameWithDomain(member.parent),
},
}"
>
<h3 class="">{{ member.parent.name }}</h3>
<p class="">
<span v-if="member.parent.domain">
{{
`@${member.parent.preferredUsername}@${member.parent.domain}`
}}
</span>
<span v-else>{{
`@${member.parent.preferredUsername}`
}}</span>
</p>
</router-link>
</div>
</div>
<div class="">
<div class="">
<o-button
variant="success"
@click="$emit('accept', member.id)"
>
{{ $t("Accept") }}
</o-button>
</div>
<div class="">
<o-button
variant="danger"
@click="$emit('reject', member.id)"
>
{{ $t("Decline") }}
</o-button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -82,6 +61,9 @@ import { usernameWithDomain } from "@/types/actor";
import { IMember } from "@/types/actor/member.model"; import { IMember } from "@/types/actor/member.model";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import AccountGroup from "vue-material-design-icons/AccountGroup.vue"; import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
defineProps<{ defineProps<{
member: IMember; member: IMember;

View file

@ -1,5 +1,5 @@
<template> <template>
<section class="card my-3" v-if="invitations && invitations.length > 0"> <section class="my-3" v-if="invitations && invitations.length > 0">
<InvitationCard <InvitationCard
v-for="member in invitations" v-for="member in invitations"
:key="member.id" :key="member.id"