split chat.vue

src/components/chatInformation.vue

@@ -12,7 +12,7 @@
         <h2 v-if="getMembers().length !== 0">members:</h2>
         <div v-for="member in getMembers().slice(0,20)" :key="member" class="contentBox" :title="member">
           <userThumbnail :mxcURL="getUser(member).avatarUrl" :fallback="getUser(member).displayName"
-                         class="userThumbnail" size="3"/>
+                         class="userThumbnail" :size="3"/>
           <div class="information">
             <div class="userName">{{getUser(member).displayName || member}}</div>
             <div class="status">{{getStatus(getUser(member))}}</div>

src/components/message.vue

@@ -47,12 +47,12 @@ export default {
     margin-top: 0.25rem;
   }
   .messageReceive{
-    margin-left: 1rem;
     background-color: #42b983;
     border-radius: 1rem 1rem 1rem 0;
   }
   .messageSend{
-    margin-left:auto; margin-right:1rem;
+    margin-left:auto;
+    margin-right:0;
     background-color: #42a7b9;
     border-radius: 1rem 1rem 0 1rem;
   }

src/components/timeline.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="timeline">
+    <div class="timeGroup" v-for="timeGroup in splitArray(timeline,
+            obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts">
+      <div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
+      <div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
+          <div class="thumbnailContainer">
+            <div class="filler"></div>
+            <userThumbnail v-if="group[0].sender !== user && groupTimeline"
+                           :fallback="group[0].sender"
+                           class="userThumbnail"
+                           :mxcURL="getUser(group[0].sender).avatarUrl"
+                           :size="2"
+                           :title="group[0].sender"
+            />
+          </div>
+          <div :class="groupTimeline?'indent username':'username'"
+               v-if="group[0].sender !== user && groupTimeline">{{getUser(group[0].sender).displayName || group[0].sender}}
+          </div>
+          <div :class="groupTimeline?'indent event':'event'"
+               v-for="event in group" :key="event.origin_server_ts"
+               :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
+          >
+            <message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'"
+                     :group="false"
+                     :msg=event.content.body :time=getTime(event.origin_server_ts)
+            />
+            <div v-else-if="event.type==='m.room.member'" class="info">{{membershipEvents[event.content.membership]}}</div>
+            <div v-else class="info">unknown event</div>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import message from "@/components/message";
+import userThumbnail from "@/components/userThumbnail";
+import {matrix} from "@/main";
+import splitArray from "@/lib/splitArray";
+import {getDate, getTime} from "@/lib/getTimeStrings";
+
+export default {
+  name: 'eventGroup',
+  components: {
+    message,
+    userThumbnail
+  },
+  props: {
+    timeline: Array,
+    user: String,
+    groupTimeline: Boolean
+  },
+  methods: {
+    getUser(userId) {
+      return matrix.client.getUser(userId);
+    },
+    splitArray,
+    getDate,
+    getTime
+  },
+  data(){
+    return {
+      membershipEvents:{
+        invite: 'was invented',
+        join: 'joined the room',
+        leave: 'left the room',
+        ban: 'was banned'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.timeline{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  .timeGroup {
+    .time {
+      top: 0.25rem;
+      position: sticky;
+      z-index: 100;
+      background-color: #2d2d2d;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      width: fit-content;
+      left: 50%;
+      transform: translate(-50%, 0);
+      margin-top: 0.5rem;
+    }
+    .eventGroup {
+      position: relative;
+      width: calc(100% - 1rem);
+      height: fit-content;
+      margin-top: 0.75rem;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+      .thumbnailContainer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        .filler {
+          height: calc(100% - 2rem);
+        }
+        .userThumbnail {
+          position: sticky;
+          bottom: 0.5rem;
+          width: 2rem;
+          height: 2rem;
+        }
+      }
+      .username{
+        margin-left: 1rem;
+      }
+      .event{
+        .info{
+          font-style: italic;
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+        }
+      }
+      .indent{
+        margin-left: 2.5rem;
+      }
+    }
+  }
+}
+</style>

src/lib/getTimeStrings.js

@@ -0,0 +1,10 @@
+export function getTime(time) {
+  let date = new Date(time);
+  return `${date.getHours()}:${(date.getMinutes() < 10) ? '0' : ''}${date.getMinutes()}`;
+}
+
+export function getDate(time) {
+  let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  let date = new Date(time);
+  return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
+}

src/lib/splitArray.js

@@ -0,0 +1,10 @@
+export default function splitArray(arr, key, get=obj=>obj){
+  let payload = [[]];
+  arr.forEach((obj, i) => {
+    let nextObj = arr[i+1];
+    payload[payload.length-1].push(get(obj));
+    if (!nextObj) return payload;
+    if (key(obj) !== key(nextObj)) payload.push([]);
+  })
+  return payload;
+}

src/views/chat.vue

@@ -3,31 +3,8 @@
     <div ref="chatContainer" class="chatContainer">
       <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
         <div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
-        <div id="messages" class="messages" ref="messages">
+        <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
-          <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
+        <timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user"/>
-          <div class="timeGroup" v-for="timeGroup in splitArray(room.timeline,
-          obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts">
-            <div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
-            <div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
-              <div :class="isGroup()?'groupEvent':'eventContainer'">
-                <div class="thumbnailContainer">
-                  <div class="filler"></div>
-                  <userThumbnail v-if="group[0].sender !== user && isGroup()" :fallback="group[0].sender"
-                                 class="userThumbnail"
-                                 :mxcURL="getUser(group[0].sender).avatarUrl" :size="2"/>
-                </div>
-                <div class="username" v-if="group[0].sender !== user && isGroup()">{{getUser(group[0].sender).displayName || group[0].sender}}</div>
-                <div class="event" v-for="event in group" :key="event.origin_server_ts" :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`">
-                  <message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'"
-                           :group="false"
-                           :msg=event.content.body :time=getTime(event.origin_server_ts) />
-                  <div v-else-if="event.type==='m.room.member'" class="info">{{membershipEvents[event.content.membership]}}</div>
-                  <div v-else class="info">unknown event</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
       <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
     </div>
@@ -37,21 +14,20 @@
 </template>
 
 <script>
-import message from '@/components/message.vue';
 import newMessage from '@/components/newMessage.vue';
 import topBanner from '@/components/topBanner.vue';
 import Icon from '@/components/icon';
-import userThumbnail from '@/components/userThumbnail';
 import {matrix} from '@/main';
+import splitArray from '@/lib/splitArray.js'
+import timeline from '@/components/timeline';
 
 export default {
   name: 'chat',
   components: {
+    timeline,
     Icon,
-    message,
     newMessage,
-    topBanner,
+    topBanner
-    userThumbnail
   },
   props: {
     room: [Object, undefined],
@@ -63,30 +39,11 @@ export default {
     scrollToBottom(){
       this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight;
     },
-    getTime(time){
-      let date = new Date(time);
-      return `${date.getHours()}:${(date.getMinutes()<10)?'0':''}${date.getMinutes()}`;
-    },
-    getDate(time){
-      let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-      let date = new Date(time);
-      return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
-    },
     scrollHandler(){
       if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
       let msg = this.$refs.msgContainer;
       this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
     },
-    splitArray(arr, key, get=obj=>obj){
-      let payload = [[]];
-      arr.forEach((obj, i) => {
-        let nextObj = arr[i+1];
-        payload[payload.length-1].push(get(obj));
-        if (!nextObj) return payload;
-        if (key(obj) !== key(nextObj)) payload.push([]);
-      })
-      return payload;
-    },
     resize(height){
       this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
     },
@@ -100,18 +57,13 @@ export default {
     },
     getUser(userId){
       return matrix.client.getUser(userId);
-    }
+    },
+    splitArray
   },
   data(){
     return {
       showScrollBtn: false,
       scrollOnUpdate: true,
-      membershipEvents:{
-        invite: 'was invented',
-        join: 'joined the room',
-        leave: 'left the room',
-        ban: 'was banned'
-      },
       loadingStatus: 'load more'
     }
   },
@@ -135,39 +87,6 @@ export default {
   .messagesContainer{
     height: 100%;
     overflow-y: auto;
-    .messages{
-      position: relative;
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-      .eventGroup{
-        position: relative;
-        width: 100%;
-        height: fit-content;
-        margin-top: 0.75rem;
-        .info{
-          font-style: italic;
-          margin: 1rem;
-        }
-      }
-      .chatInfo{
-        text-align: center;
-        font-style: italic;
-        margin: 1rem;
-      }
-      .time{
-        top: 0.25rem;
-        position: sticky;
-        z-index: 100;
-        background-color: #2d2d2d;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        width: fit-content;
-        left: 50%;
-        transform: translate(-50%,0);
-        margin-top: 0.5rem;
-      }
-    }
-
   }
   #scrollDown{
     position: absolute;
@@ -179,29 +98,6 @@ export default {
     width: 2rem;
   }
 }
-.groupEvent{
-  margin-left: 2rem;
-}
-
-.thumbnailContainer{
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  .filler{
-    height: calc(100% - 2rem);
-  }
-  .userThumbnail{
-    position: sticky;
-    bottom: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-    margin-left: 0.5rem;
-  }
-}
-.username{
-  margin-left: 1rem;
-}
 .loadMore{
   position: relative;
   background-color: #2d2d2d;
@@ -213,4 +109,4 @@ export default {
   margin-top: 0.5rem;
   cursor: pointer;
 }
-</style>
+</style>