src/App.vue

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

src/components/chatInformation.vue

@@ -18,15 +18,15 @@
         <p v-if="members.length>20">and {{members.length-20}} other members</p>
       </div>
     </div>
-    <icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white.svg" />
+    <icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white_24px.svg" />
   </div>
 </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,10 +40,12 @@ 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">
-        <span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
+        {{replyEvent.sender}}<br>
-        <span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
+        {{replyEvent.type==='m.room.message'?replyEvent.content.body:'unkown event'}}
       </div>
       <div v-html="parseMessage(msg)"></div>
       <div class="time">{{time}}</div>
@@ -11,7 +11,6 @@
 
 <script>
 import {matrix} from "@/main";
-import {calcUserName} from "@/lib/matrixUtils";
 
 export default {
   name: "message",
@@ -52,8 +51,7 @@ export default {
           .replace(/</g, '&lt')
           .replace(/>/g, '&gt')
       );
-    },
+    }
-    calcUserName
   },
   data(){
     return{
@@ -101,7 +99,4 @@ 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 {calcUserName} from "@/lib/matrixUtils";
+import {matrix} from "@/main";
 
 export default {
   name: "userListElement",
@@ -37,7 +37,10 @@ export default {
       if (!room.timeline[room.timeline.length-1]) return undefined;
       return room.timeline[room.timeline.length-1].event;
     },
-    calcUserName,
+    calcUserName(userId) {
+      if (matrix.user === userId) return 'you';
+      return matrix.client.getUser(userId).displayName || userId;
+    },
     getMxcFromRoom
   }
 }

src/components/timeline.vue

@@ -22,7 +22,7 @@
           :class="groupTimeline?'indent username':'username'"
           v-if="group[0].sender !== user && groupTimeline"
         >
-          {{calcUserName(group[0].sender)}}
+          {{getUser(group[0].sender).displayName || group[0].sender}}
         </div>
         <div
           :class="groupTimeline?'indent event':'event'"
@@ -37,10 +37,6 @@
             :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>
@@ -56,10 +52,9 @@
 <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: {
@@ -73,8 +68,9 @@ export default {
     roomId: String
   },
   methods: {
-    getUser,
+    getUser(userId) {
-    calcUserName,
+      return matrix.client.getUser(userId);
+    },
     splitArray,
     getDate,
     getTime
@@ -136,18 +132,11 @@ 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/components/topBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="topBanner">
     <div>
-      <icon @click.native="closeChat()" class="topIcon" ic="./sym/ic_arrow_back_white.svg" />
+      <icon @click.native="closeChat()" class="topIcon" ic="./sym/arrow_back-24px.svg" />
       <div @click="openChatInfo()" class="container">
         <avatar class="topIcon avatar" :mxcURL="getMxcFromRoom(room)" :fallback="room.roomId" :size="3"/>
         <div class="chatName">{{room.name}}</div>

src/lib/matrixUtils.js

@@ -1,12 +0,0 @@
-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;
-}
-export function getRoom(roomId){
-  return matrix.client.getRoom(roomId);
-}

src/views/chat.vue

@@ -52,7 +52,7 @@ export default {
       this.loadingStatus = 'loading ...';
       await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
         .then(state => this.loadingStatus = state?'load more':false);
-      if (this.loadingStatus) this.scroll.setScrollBottom(scrollBottom);
+      this.scroll.setScrollBottom(scrollBottom);
     },
     getUser(userId){
       return matrix.client.getUser(userId);

src/views/rooms.vue

@@ -6,11 +6,7 @@
     <div id="roomList" class="roomList">
       <h1 class="wideElement">[chat]</h1><h1 class="smallElement">[c]</h1>
       <input v-model="search" class="input wideElement" type="text" maxlength="50" placeholder="search">
-      <div
+      <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
-        v-for="room in Object.assign([], matrix.rooms)
-          .sort(obj => obj.timeline[obj.timeline.length-1].event.origin_server_ts)"
-        :key="room.roomId" @click="openChat(room)"
-      >
         <room-list-element
             v-if="!search || room.name.toLowerCase().includes(search.toLowerCase().trim())"
             :room="room"
@@ -20,14 +16,14 @@
     </div>
     <chat
       class="chat"
-      v-if="showRoom && getCurrentRoom()"
+      v-if="currentRoom"
-      :room="getCurrentRoom()"
+      :room="currentRoom"
       :user="matrix.user"
-      :close-chat="closeChat"
+      :close-chat="()=>currentRoom=undefined"
       :open-chat-info="()=>showChatInfo=true"
     />
     <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
-    <chatInformation v-if="showRoom && showChatInfo" :room="getCurrentRoom()" :close-chat-info="()=>showChatInfo=false"/>
+    <chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom" :close-chat-info="()=>showChatInfo=false"/>
   </div>
 </template>
 
@@ -38,7 +34,6 @@ import {matrix} from "@/main";
 import ThrobberOverlay from "@/components/throbberOverlay";
 import {getMxcFromRoom} from "@/lib/getMxc";
 import roomListElement from "@/components/roomListElement";
-import {getRoom} from "@/lib/matrixUtils";
 
 export default {
   name: "rooms",
@@ -51,25 +46,18 @@ export default {
   methods:{
     openChat(room){
       this.showChatInfo = false;
-      this.showRoom = false;
+      this.currentRoom = undefined
+      this.$nextTick(() => this.currentRoom = room);
       this.$router.push(`/rooms/${room.roomId}`);
-      this.$nextTick(() => this.showRoom = true);
       this.search = '';
     },
-    getMxcFromRoom,
+    getMxcFromRoom
-    getRoom,
-    getCurrentRoom(){
-      return getRoom(this.$route.path.split('/')[2]);
-    },
-    closeChat(){
-      this.$router.push('/rooms');
-    }
   },
   data(){
     return {
       matrix,
+      currentRoom: undefined,
       showChatInfo: false,
-      showRoom: true,
       search: ''
     }
   },
@@ -114,7 +102,7 @@ export default {
   text-align: center;
 }
 input{
-  width: calc(100% - 5.2rem);
+  width: calc(100% - 5rem);
 }
 .wideElement{
   display: block;