Show mentions in post subheader
This commit is contained in:
parent
3857d45b31
commit
213db9a0d4
2 changed files with 36 additions and 1 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue