add matrixUtils

src/App.vue

@@ -28,7 +28,7 @@ input{
   color: #fff;
   background-color: #1d1d1d;
   border-radius: 1.25rem;
-  border: 1px solid #fff;
+  border: 0.1rem solid #fff;
   text-align: center;
   font-size: 1.1rem;
   margin: 0.5rem;

src/components/chatInformation.vue

@@ -23,10 +23,10 @@
 </template>
 <script>
 import icon from './icon.vue';
-import {matrix} from "@/main";
 import UserListElement from "@/components/userListElement";
 import avatar from "@/components/avatar";
 import {getMxcFromRoom} from "@/lib/getMxc";
+import {getUser} from "@/lib/matrixUtils";
 
 export default {
   name: "chatInformation",
@@ -40,12 +40,10 @@ export default {
     closeChatInfo: Function
   },
   methods: {
-    getUser(userId){
-      return matrix.client.getUser(userId);
-    },
     getMembers(){
       return Object.keys(this.room.currentState.members)
     },
+    getUser,
     getMxcFromRoom
   },
   data(){

src/components/message.vue

@@ -1,8 +1,8 @@
 <template>
     <div :class="type==='send'?'messageSend':'messageReceive'" class="message">
       <div v-if="replyEvent" class="reply">
-        {{replyEvent.sender}}<br>
-        {{replyEvent.type==='m.room.message'?replyEvent.content.body:'unkown event'}}
+        <span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
+        <span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
       </div>
       <div v-html="parseMessage(msg)"></div>
       <div class="time">{{time}}</div>
@@ -11,6 +11,7 @@
 
 <script>
 import {matrix} from "@/main";
+import {calcUserName} from "@/lib/matrixUtils";
 
 export default {
   name: "message",
@@ -51,7 +52,8 @@ export default {
           .replace(/</g, '&lt')
           .replace(/>/g, '&gt')
       );
-    }
+    },
+    calcUserName
   },
   data(){
     return{
@@ -99,4 +101,7 @@ export default {
     padding-left: 0.5rem;
     margin-bottom: 0.5rem;
   }
+  .username{
+    font-weight: bold;
+  }
 </style>

src/components/roomListElement.vue

@@ -17,7 +17,7 @@
 import avatar from "@/components/avatar";
 import {getMxcFromRoom} from "@/lib/getMxc";
 import {getTime} from "@/lib/getTimeStrings";
-import {matrix} from "@/main";
+import {calcUserName} from "@/lib/matrixUtils";
 
 export default {
   name: "userListElement",
@@ -37,10 +37,7 @@ export default {
       if (!room.timeline[room.timeline.length-1]) return undefined;
       return room.timeline[room.timeline.length-1].event;
     },
-    calcUserName(userId) {
-      if (matrix.user === userId) return 'you';
-      return matrix.client.getUser(userId).displayName || userId;
-    },
+    calcUserName,
     getMxcFromRoom
   }
 }

src/components/timeline.vue

@@ -22,7 +22,7 @@
           :class="groupTimeline?'indent username':'username'"
           v-if="group[0].sender !== user && groupTimeline"
         >
-          {{getUser(group[0].sender).displayName || group[0].sender}}
+          {{calcUserName(group[0].sender)}}
         </div>
         <div
           :class="groupTimeline?'indent event':'event'"
@@ -37,6 +37,10 @@
             :content="event.content"
             :roomId="roomId"
           />
+          <div v-else-if="event.content.msgtype==='m.notice'" class="notice">
+            {{event.content.body}}
+            <span class="time">{{getTime(event.origin_server_ts)}}</span>
+          </div>
           <div v-else-if="event.type==='m.room.member'" class="info">
             {{membershipEvents[event.content.membership]}}
             <span class="time">{{getTime(event.origin_server_ts)}}</span>
@@ -52,9 +56,10 @@
 <script>
 import message from "@/components/message";
 import avatar from "@/components/avatar";
-import {matrix} from "@/main";
 import splitArray from "@/lib/splitArray";
 import {getDate, getTime} from "@/lib/getTimeStrings";
+import {getUser, calcUserName} from "@/lib/matrixUtils";
+
 export default {
   name: 'eventGroup',
   components: {
@@ -68,9 +73,8 @@ export default {
     roomId: String
   },
   methods: {
-    getUser(userId) {
-      return matrix.client.getUser(userId);
-    },
+    getUser,
+    calcUserName,
     splitArray,
     getDate,
     getTime
@@ -132,11 +136,18 @@ export default {
         font-weight: bold;
       }
       .event{
-        .info{
+        .info {
           font-style: italic;
           margin-top: 0.5rem;
           margin-bottom: 0.5rem;
           margin-left: 0.5rem;
+          .time {
+            font-size: 0.7rem;
+          }
+        }
+        .notice{
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
           .time{
             font-size: 0.7rem;
           }

src/lib/matrixUtils.js

@@ -0,0 +1,9 @@
+import {matrix} from '@/main';
+
+export function getUser(userId) {
+  return matrix.client.getUser(userId);
+}
+export function calcUserName(userId){
+  if (matrix.user === userId) return 'you';
+  return matrix.client.getUser(userId).displayName || userId;
+}

src/views/rooms.vue

@@ -106,7 +106,7 @@ export default {
   text-align: center;
 }
 input{
-  width: calc(100% - 5rem);
+  width: calc(100% - 5.2rem);
 }
 .wideElement{
   display: block;