Show mentions in post subheader

This commit is contained in:
silverpill 2022-01-13 20:03:35 +00:00
parent 3857d45b31
commit 213db9a0d4
2 changed files with 36 additions and 1 deletions

View file

@ -25,11 +25,18 @@ export async function uploadAttachment(
return data
}
export interface Mention {
id: string;
username: string;
acct: string;
url: string;
}
export interface Post {
id: string;
uri: string;
created_at: string;
account: Profile,
account: Profile;
content: string;
in_reply_to_id: string | null;
reblog: Post | null;
@ -38,6 +45,7 @@ export interface Post {
favourites_count: number;
reblogs_count: number;
media_attachments: Attachment[];
mentions: Mention[];
favourited: boolean;
reblogged: boolean;
ipfs_cid: string | null;

View file

@ -40,6 +40,16 @@
{{ formatDate(post.created_at) }}
</a>
</div>
<div class="post-subheader" v-if="replyingTo.length > 0">
<span>replying to</span>
<router-link
v-for="mention in replyingTo"
:to="{ name: 'profile', params: { profileId: mention.id }}"
:key="mention.id"
>
@{{ mention.username }}
</router-link>
</div>
<div class="post-content" ref="postContent" v-html="post.content"></div>
<div class="post-attachment" v-if="post.media_attachments.length === 1">
<img :src="post.media_attachments[0].url">
@ -179,6 +189,7 @@ import { Prop } from "vue-property-decorator"
import { makePermanent, getSignature, mintToken, onTokenMinted } from "@/api/nft"
import {
Mention,
Post,
getPost,
deletePost,
@ -265,6 +276,13 @@ export default class PostComponent extends Vue {
return formatDate(isoDate)
}
get replyingTo(): Mention[] {
if (this.post.in_reply_to_id === null) {
return []
}
return this.post.mentions
}
canReply(): boolean {
return this.store.currentUser !== null
}
@ -527,6 +545,15 @@ export default class PostComponent extends Vue {
}
}
.post-subheader {
color: $secondary-text-color;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.25em;
padding: $block-inner-padding / 4 $block-inner-padding 0;
}
.post-content {
color: $text-color;
line-height: 1.5;