apps/ptpchat-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MessageComponent now displays the Display- and username of the sender

Browse Source
This commit is contained in:
joschuatonn
2024-05-30 09:19:09 +02:00
parent 33279335cb
commit b32599e6af
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/MessageComponent.vue
View File

@@ -1,13 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { decodedTextSpanIntersectsWith } from 'typescript';
const props = defineProps({ const props = defineProps({
ownMessage: Boolean, ownMessage: Boolean,
timestamp: String, timestamp: String,
message: String, message: String,
sender: Object,
gif: Boolean, gif: Boolean,
link: Boolean, link: Boolean,
url: String, url: String,
showSender: Boolean,
}) })
const date = new Date(Number(props.timestamp)); const date = new Date(Number(props.timestamp));
@@ -16,6 +17,10 @@ import { decodedTextSpanIntersectsWith } from 'typescript';
<template> <template>
<div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}"> <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
<div v-if="props.showSender" style="display: flex; justify-content: space-between;">
<div class="text-body">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
<div class="text-body">@{{ props.sender!.username }}</div>
</div>
<p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p> <p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p>
<img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" /> <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
<a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a> <a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a>