load room by url / +getRoom to 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

@@ -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_24px.svg" />
+    <icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white.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,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/components/topBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="topBanner">
     <div>
-      <icon @click.native="closeChat()" class="topIcon" ic="./sym/arrow_back-24px.svg" />
+      <icon @click.native="closeChat()" class="topIcon" ic="./sym/ic_arrow_back_white.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

@@ -0,0 +1,12 @@
+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);
-      this.scroll.setScrollBottom(scrollBottom);
+      if (this.loadingStatus) this.scroll.setScrollBottom(scrollBottom);
     },
     getUser(userId){
       return matrix.client.getUser(userId);

src/views/rooms.vue

@@ -6,7 +6,11 @@
     <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 v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
+      <div
+        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"
@@ -16,14 +20,14 @@
     </div>
     <chat
       class="chat"
-      v-if="currentRoom"
-      :room="currentRoom"
+      v-if="showRoom && getCurrentRoom()"
+      :room="getCurrentRoom()"
       :user="matrix.user"
-      :close-chat="()=>currentRoom=undefined"
+      :close-chat="closeChat"
       :open-chat-info="()=>showChatInfo=true"
     />
     <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
-    <chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom" :close-chat-info="()=>showChatInfo=false"/>
+    <chatInformation v-if="showRoom && showChatInfo" :room="getCurrentRoom()" :close-chat-info="()=>showChatInfo=false"/>
   </div>
 </template>
 
@@ -34,6 +38,7 @@ 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",
@@ -46,18 +51,25 @@ export default {
   methods:{
     openChat(room){
       this.showChatInfo = false;
-      this.currentRoom = undefined
-      this.$nextTick(() => this.currentRoom = room);
+      this.showRoom = false;
       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: ''
     }
   },
@@ -102,7 +114,7 @@ export default {
   text-align: center;
 }
 input{
-  width: calc(100% - 5rem);
+  width: calc(100% - 5.2rem);
 }
 .wideElement{
   display: block;