adb/matrix-chat
adb/matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

group messages and user thumbnail

Browse Source
This commit is contained in:
adb 2020-12-25 01:50:22 +01:00
parent 5557163377
commit 3e78cb7cdc
3 changed files with 74 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/message.vue
View File

@ -1,11 +1,9 @@
<template>
<div class="messageContainer">
<div :class=msgClass class="message" :title="time">
<div :class="`${type==='send'?'messageSend':'messageReceive'} ${group?'groupMessage':''}`" class="message" :title="time">
<div v-html="solveTextLinks(msg.replace(/</g, '&lt')
.replace(/>/g, '&gt'))"></div>
<div class="time">{{time}}</div>
</div>
</div>
</template>
<script>
@ -14,7 +12,8 @@ export default {
props: {
msg: String,
time: String,
msgClass: String
type: String,
group: Boolean
},
methods:{
solveTextLinks(text){
@ -34,34 +33,36 @@ export default {
</script>
<style scoped>
.messageContainer{
position: relative;
margin-top: 0.25rem;
width: calc(100% - 2rem);
left: 1rem;
}
.message{
position: relative;
width: max-content;
min-width: 2rem;
max-width: calc(100% - 3rem);
max-width: calc(100% - 5rem);
padding: 0.7rem 1rem 0.45rem 1rem;
right: 0;
background-color: #42a7b9;
border-radius: 1rem 1rem 0 1rem;
text-align: left;
word-break: break-word;
white-space: pre-line;
margin-top: 0.25rem;
}
.messageReceive{
margin-left: 1rem;
background-color: #42b983;
border-radius: 1rem 1rem 1rem 0;
}
.messageSend{
margin-left:auto; margin-right:0;
margin-left:auto; margin-right:1rem;
background-color: #42a7b9;
border-radius: 1rem 1rem 0 1rem;
}
.messageReceive.groupMessage{
margin-left: 3rem;
max-width: calc(100% - 7rem);
}
.messageSend.groupMessage{
max-width: calc(100% - 6rem);
}
.time{
position: relative;
bottom: -0.2rem;

4
src/components/userThumbnail.vue
View File

@ -15,8 +15,8 @@ export default {
mxcURL: String,
username: String,
userId: String,
width: Number,
height: Number,
width: String,
height: String,
resizeMethod: String
},
methods: {

63
src/views/chat.vue
View File

@ -3,20 +3,34 @@
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div id="messages" class="messages">
<p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
<!--<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts" class="event">
<div v-if="i===0 || getDate(session.currentRoom.messages[i-1].origin_server_ts)!==getDate(message.origin_server_ts)"
style="margin-left: 2rem; margin-top: 1rem" class="info">{{getDate(message.origin_server_ts)}}
</div>
<div v-if="(message.sender !== session.user) && (i===0 || session.currentRoom.messages[i-1].sender!==message.sender)"
style="margin-left: 2rem; margin-top: 1rem">{{message.sender}}
style="margin-left: 3rem; margin-top: 1rem">{{message.sender}}
</div>
<message :msgClass="message.sender === session.user?'messageSend':'messageReceive'"
<message :type="message.sender === session.user?'send':'receive'"
:group="session.currentRoom.members.length > 2"
:msg=message.content.body :time=getTime(message.origin_server_ts) />
<userThumbnail v-if="(message.sender !== session.user) && (i===session.currentRoom.messages.length-1 || session.currentRoom.messages[i+1].sender!==message.sender)"
:userId="message.sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
</div>-->
<div class="eventGroup" v-for="group in splitEventsToGroups(session.currentRoom.messages)" :key="group[0].origin_server_ts">
<div class="username" v-if="group[0].sender !== session.user">{{group[0].sender}}</div>
<div class="thumbnailContainer">
<userThumbnail v-if="group[0].sender !== session.user && session.currentRoom.members.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
</div>
<div class="event" v-for="message in group" :key="message.origin_server_ts">
<message :type="message.sender === session.user?'send':'receive'"
:group="session.currentRoom.members.length > 2"
:msg=message.content.body :time=getTime(message.origin_server_ts) />
</div>
</div>
</div>
</div>
<newMessage />
<icon v-if="showScrollBtn" v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
<topBanner />
</div>
</template>
@ -28,6 +42,7 @@ import topBanner from '@/components/topBanner.vue';
import main from '@/main.js';
import Icon from "@/components/icon";
import matrix from '@/matrix.js';
import userThumbnail from '@/components/userThumbnail';
export default {
name: 'chat',
@ -35,7 +50,8 @@ export default {
Icon,
message,
newMessage,
topBanner
topBanner,
userThumbnail
},
methods:{
scrollToBottom(){
@ -57,6 +73,19 @@ export default {
}
let msgContainer = document.getElementById("messagesContainer")
this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
},
splitEventsToGroups(events){
let payload = [[]];
let group = 0;
for(let i=0; i<events.length; i++){
payload[group].push(events[i]);
if (events[i].sender !== (events[i+1]?events[i+1].sender:undefined) ||
this.getDate(events[i].origin_server_ts) !== this.getDate(events[i+1]?events[i+1].origin_server_ts:undefined)){
if (i < events.length-1) payload.push([]);
group++;
}
}
return payload;
}
},
data(){
@ -100,4 +129,28 @@ export default {
font-style: italic;
margin: 1rem;
}
.eventGroup{
position: relative;
width: 100%;
height: fit-content;
margin-top: 0.75rem;
}
.userThumbnail{
position: absolute;
left: 0;
bottom: 0;
width: 2rem;
height: 2rem;
margin-left: 0.5rem;
}
.thumbnailContainer{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3rem;
}
.username{
margin-left: 3rem;
}
</style>