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

The Message-Component can now display GIFs as well

Browse Source
This commit is contained in:
joschuatonn
2024-05-05 11:24:45 +02:00
parent 0250ad92a8
commit 31240e9032
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/MessageComponent.vue
View File

@@ -3,12 +3,15 @@
ownMessage: Boolean, ownMessage: Boolean,
timestamp: String, timestamp: String,
message: String, message: String,
gif: Boolean,
url: String,
}) })
</script> </script>
<template> <template>
<div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}"> <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
<p style="margin-bottom: 0;">{{props.message}}</p> <p v-if="!props.gif" style="margin-bottom: 0;">{{props.message}}</p>
<img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
<div style="text-align: right;"> <div style="text-align: right;">
<small style="margin-top: 0;">{{props.timestamp}}</small> <small style="margin-top: 0;">{{props.timestamp}}</small>
</div> </div>
@@ -18,7 +21,7 @@
<style scoped> <style scoped>
.message { .message {
border-radius: 10px; border-radius: 10px;
max-width: 15rem; width: 15rem;
padding: 7px; padding: 7px;
margin:3px; margin:3px;
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15); box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);