group messages and user thumbnail

src/components/message.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="messageContainer">
+    <div :class="`${type==='send'?'messageSend':'messageReceive'} ${group?'groupMessage':''}`" class="message" :title="time">
-    <div :class=msgClass 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;

src/components/userThumbnail.vue

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

src/views/chat.vue

@@ -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>