More work on chat header

src/assets/css/chat.scss

@@ -23,42 +23,33 @@ $chat-text-size: 0.7pt;
     .chat-header {
         margin: 0;
         padding: 0;
-        background-color: #e2e2e2;
+        background-color: #ffffff;
+        border-bottom: 1px solid #eeeeee;
         .chat-header-row {
             margin: 0;
             padding: 4px 10px;
             align-items: center;
         }
-        .members-icon {
-            margin-bottom: 0;
-        }
-        .chat-header-members {
-            position: relative;
-        }
         .num-members {
-            position: absolute;
-            bottom: -2px;
-            left: 0;
-            right: 0;
             font-family: 'Titillium Web', sans-serif;
             font-weight: 400;
-            font-size: 11 * $chat-text-size;
+            font-size: 12 * $chat-text-size;
             color: black;
         }
         .room-name {
-            font-family: 'Titillium Web', sans-serif;
+            font-family: 'Poppins', sans-serif;
             font-weight: 700;
-            font-size: 18 * $chat-text-size;
+            font-size: 21 * $chat-text-size;
             color: black;
         }
         .v-btn.leave-button {
             font-family: 'Titillium Web', sans-serif;
-            font-weight: 400;
+            font-weight: 700;
-            font-size: 14 * $chat-text-size;
+            font-size: 11 * $chat-text-size;
             color: white;
-            background-color: #cc0000 !important;
+            background-color: #f74e4e !important;
             border: none;
-            border-radius: 4px;
+            border-radius: $chat-standard-padding / 2;
             height: $chat-standard-padding;
             margin-top: $chat-standard-padding-xs;
             margin-bottom: $chat-standard-padding-xs;

src/assets/css/main.scss

@@ -1 +1,3 @@
 $background: #008860;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

src/components/Chat.vue

@@ -213,7 +213,6 @@ export default {
 
   data() {
     return {
-      room: null,
       events: [],
       currentInput: "",
       contactIsTyping: false,
@@ -250,8 +249,14 @@ export default {
   },
 
   computed: {
+    room() {
+      return this.$matrix.currentRoom;
+    },
     roomId() {
-      return this.$matrix.currentRoomId;
+      if (!this.room) {
+        return null;
+      }
+      return this.room.roomId;
     },
     sendButtonDisabled() {
       return this.currentInput.length == 0;
@@ -259,24 +264,19 @@ export default {
   },
 
   watch: {
-    roomId: {
+    room: {
-      handler(ignoredNewVal, ignoredOldVal) {
+      handler(room, ignoredOldVal) {
         console.log("Chat: Current room changed");
 
         // Clear old events
         this.events = [];
         this.timelineWindow = null;
         this.contactIsTyping = false;
-
+        
-        if (!this.roomId) {
+        if (!room) {
           return; // no room
         }
 
-        this.room = this.$matrix.getRoom(this.roomId);
-        if (!this.room) {
-          return; // Not found
-        }
-
         this.timelineWindow = new TimelineWindow(
           this.$matrix.matrixClient,
           this.room.getUnfilteredTimelineSet(),

src/components/ChatHeader.vue

@@ -1,20 +1,20 @@
 <template>
-  <v-container fluid>
+  <v-container fluid v-if="room">
     <v-row class="chat-header-row">
       <v-col
         class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0"
       >
-        <v-btn icon class="members-icon" @click.stop="showRoomInfo">
+        <v-avatar>
-          <v-icon>people</v-icon>
+          <v-img :src="room.avatar" />
-        </v-btn>
+        </v-avatar>
-        <div class="num-members">{{ memberCount }}</div>
       </v-col>
 
       <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
-        <div class="room-name" v-if="room">{{ room.summary.info.title }}</div>
+        <div class="room-name" @click.stop="showRoomInfo">{{ room.summary.info.title }}</div>
+        <div class="num-members">{{ memberCount }}{{ memberCount > 1 ? " members" : " member" }}</div>
       </v-col>
       <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
-        <v-btn class="leave-button">Leave</v-btn>
+        <v-btn text class="leave-button" @click.stop="leaveRoom">Leave</v-btn>
       </v-col>
     </v-row>
   </v-container>
@@ -46,7 +46,11 @@ export default {
   watch: {
     room: {
       handler(newVal, ignoredOldVal) {
-        this.memberCount = newVal.getJoinedMemberCount();
+        if (newVal) {
+          this.memberCount = newVal.getJoinedMemberCount();
+        } else {
+          this.memberCount = null;
+        }
       },
     },
   },
@@ -68,6 +72,20 @@ export default {
     showRoomInfo() {
       this.$router.push({ name: "RoomInfo" });
     },
+
+    leaveRoom() {
+      //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
+      const roomId = this.room.roomId;
+      this.$matrix.matrixClient.leave(roomId, undefined)
+      .then(() => {
+        console.log("Left room");
+        this.$matrix.matrixClient.store.removeRoom(roomId);
+        this.$matrix.setCurrentRoomId(null);
+      })
+      .catch(err => {
+        console.log("Error leaving", err);
+      });
+    }
   },
 };
 </script>