show time and date of messages

src/components/message.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="messageContainer">
-    <div class="message">
+    <div class="message" :title="time">
       {{msg}}
+      <div class="time">{{time}}</div>
     </div>
   </div>
 </template>
@@ -10,7 +11,8 @@
 export default {
   name: "message",
   props: {
-    msg: String
+    msg: String,
+    time: String,
   }
 }
 </script>
@@ -36,4 +38,10 @@ export default {
     word-break: break-word;
     white-space: pre-line;
   }
+  .time{
+    position: relative;
+    bottom: -0.2rem;
+    font-size: 0.7rem;
+    text-align: right;
+  }
 </style>

src/components/messageReceive.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="messageContainer">
-    <div class="message">
+    <div class="message" :title="time">
       {{msg}}
+      <div class="time">{{time}}</div>
     </div>
   </div>
 </template>
@@ -10,7 +11,8 @@
 export default {
   name: "messageReceive",
   props: {
-    msg: String
+    msg: String,
+    time: String
   }
 }
 </script>
@@ -35,4 +37,10 @@ export default {
     word-break: break-word;
     white-space: pre-line;
   }
+  .time{
+    position: relative;
+    bottom: -0.2rem;
+    font-size: 0.7rem;
+    text-align: right;
+  }
 </style>

src/components/newMessage.vue

@@ -79,6 +79,8 @@ export default {
   height: 1.25rem;
   background-color: #fff0;
   border: 0 solid #fff0;
+  appearance: none;
+  outline: none;
   color: #fff;
   font-size: 1rem;
   resize: none;

src/matrix.js

@@ -106,8 +106,7 @@ export default {
 function getCookie(key) {
    let cookie = document.cookie.replace(/ /g, '').split(';')
        .find(cookie => cookie.split('=')[0] === key);
-   if (cookie) return cookie.split('=')[1];
-   return false;
+   return cookie?cookie.split('=')[1]:false;
 }
 
 matrix_cli.on("event", event => {

src/views/chat.vue

@@ -1,15 +1,18 @@
 <template>
   <div>
-    <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
+    <div @scroll="loadMessages()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
-        <p v-if="session.currentRoom.messages.length === 0" class="emptyRoom">this room is empty</p>
+        <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-if="message.sender !== session.user && function(){
-               return i===0 || session.currentRoom.messages[i-1].sender!==message.sender;}()"
+          <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}}
           </div>
-          <messageReceive v-if="message.sender !== session.user" :msg=message.content.body />
-          <message v-if="message.sender === session.user" :msg=message.content.body />
+          <messageReceive v-if="message.sender !== session.user" :msg=message.content.body
+                          :time=getTime(message.origin_server_ts) />
+          <message v-if="message.sender === session.user" :msg=message.content.body :time=getTime(message.origin_server_ts) />
         </div>
       </div>
     </div>
@@ -42,6 +45,20 @@ export default {
       let msgContainer = document.getElementById("messagesContainer")
       msgContainer.scrollTo(0, msgContainer.scrollHeight)
       document.getElementById("scrollDown").style.display = "none"
+    },
+    getTime(time){
+      let date = new Date(time);
+      return `${date.getHours()}:${(date.getMinutes()<10)?"0"+date.getMinutes():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()}`;
+    },
+    loadMessages(){
+      if (this.$refs.msgContainer.scrollTop === 0){
+        console.log("load messages")
+      }
     }
   },
   data(){
@@ -75,8 +92,9 @@ export default {
   right: 1rem;
   display: none;
 }
-.emptyRoom{
+.info{
   text-align: center;
   font-style: italic;
+  margin: 1rem;
 }
 </style>

src/views/login.vue

@@ -51,6 +51,8 @@ input{
   text-align: center;
   font-size: 1.1rem;
   margin-top: 1rem;
+  appearance: none;
+  outline: none;
 }
 input:focus{
   color: #000;

src/views/rooms.vue

@@ -38,7 +38,7 @@ export default {
       this.$router.push(`/rooms/${room.roomId}`)
       this.$forceUpdate()
       let msgContainer = document.getElementById("messagesContainer")
-      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 20)
+      setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50)
     }
   },
   data(){