Start on chat header and room info

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-app-bar app dark flat color="#008860">
+    <!-- <v-app-bar app dark flat color="#008860">
       <v-app-bar-nav-icon @click.stop="openDrawer = !openDrawer">
         <v-icon>menu</v-icon>
       </v-app-bar-nav-icon>
@@ -8,36 +8,24 @@
       <v-toolbar-title
         >Keanu{{ $matrix.currentRoom ? (" - " + $matrix.currentRoom.summary.info.title) : "" }}</v-toolbar-title
       >
+    </v-app-bar> -->
 
-      <v-spacer></v-spacer>
+    <v-navigation-drawer app v-model="openDrawer">
+      <v-list nav dense>
 
-      <template v-if="!currentUser && $route.path != '/login'">
+        <template v-if="!currentUser && $route.path != '/login'">
         <v-btn color="green" dark to="/login" replace
           ><v-icon>mdi-login</v-icon>Login</v-btn
         >
       </template>
       <template v-else-if="currentUser">
-        <span class="ma-2">{{ currentUser.name }}</span>
+        <div class="ma-2">{{ currentUser.user_id }}</div>
-        <v-menu bottom left>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn dark icon v-bind="attrs" v-on="on">
-              <v-icon>settings</v-icon>
-            </v-btn>
-          </template>
-
-          <v-list>
             <v-list-item @click.prevent="logOut">
               <v-list-item-icon><v-icon>logout</v-icon></v-list-item-icon>
               <v-list-item-title>Logout</v-list-item-title>
             </v-list-item>
-          </v-list>
-        </v-menu>
-        <!-- <v-btn color="green" dark @click.prevent="logOut" replace><v-icon>mdi-logout</v-icon>Logout</v-btn> -->
       </template>
-    </v-app-bar>
 
-    <v-navigation-drawer app v-model="openDrawer">
-      <v-list nav dense>
         <RoomList
           v-if="$matrix.ready"
           @close="openDrawer = false"
@@ -49,7 +37,11 @@
       <router-view />
     </v-main>
 
-    <v-footer app class="copyright">Powered by Guardian Project. Version: {{ buildVersion }}</v-footer>
+    <v-footer app class="copyright">
+       <v-btn icon x-small @click.stop="openDrawer = !openDrawer">
+        <v-icon>menu</v-icon>
+       </v-btn>
+      Powered by Guardian Project. Version: {{ buildVersion }}</v-footer>
   </v-app>
 </template>
 

src/assets/css/chat.scss

@@ -20,6 +20,51 @@ $chat-text-size: 0.7pt;
     background-color: $chat-background;
     overflow: hidden;
 
+    .chat-header {
+        margin: 0;
+        padding: 0;
+        background-color: #e2e2e2;
+        .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;
+            color: black;
+        }
+        .room-name {
+            font-family: 'Titillium Web', sans-serif;
+            font-weight: 700;
+            font-size: 18 * $chat-text-size;
+            color: black;
+        }
+        .v-btn.leave-button {
+            font-family: 'Titillium Web', sans-serif;
+            font-weight: 400;
+            font-size: 14 * $chat-text-size;
+            color: white;
+            background-color: #cc0000 !important;
+            border: none;
+            border-radius: 4px;
+            height: $chat-standard-padding;
+            margin-top: $chat-standard-padding-xs;
+            margin-bottom: $chat-standard-padding-xs;
+        }
+    }
+
     .chat-content {
         margin: 0;
         padding-top: $chat-standard-padding-s;
@@ -43,19 +88,6 @@ $chat-text-size: 0.7pt;
         }
     }
 
-    .v-btn {
-        font-family: 'Titillium Web', sans-serif;
-        font-weight: 400;
-        font-size: 17 * $chat-text-size;
-        color: white;
-        background-color: #00eea0 !important;
-        border: none;
-        border-radius: 0;
-        height: $chat-standard-padding;
-        margin-top: $chat-standard-padding-xs;
-        margin-bottom: $chat-standard-padding-xs;
-    }
-
     .input-area {
         background-color: #e2e2e2;
         margin: 0;
@@ -85,7 +117,6 @@ $chat-text-size: 0.7pt;
             margin: 0;
             padding: 0;
             min-width: 48px;
-            min-height: 48px;
         }
         .input-area-text {
             max-height: 30vh;

src/components/Chat.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="chat-root fill-height d-flex flex-column" ma-0 pa-0>
+    <ChatHeader class="chat-header flex-grow-1 flex-shrink-1" />
     <div
       class="chat-content flex-grow-1 flex-shrink-1"
       ref="chatContainer"
@@ -160,6 +161,7 @@ import RoomAvatarChanged from "./messages/RoomAvatarChanged.vue";
 import DebugEvent from "./messages/DebugEvent.vue";
 import util from "../plugins/utils";
 import MessageOperations from "./messages/MessageOperations.vue";
+import ChatHeader from "./ChatHeader";
 
 // from https://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
 function ScrollPosition(node) {
@@ -192,6 +194,7 @@ export default {
   name: "Chat",
 
   components: {
+    ChatHeader,
     MessageIncomingText,
     MessageIncomingImage,
     MessageIncomingAudio,
@@ -304,7 +307,6 @@ export default {
       return event.touches[0].clientY;
     },
     touchStart(e, event) {
-      console.log("TouchStart");
       if (this.selectedEvent != event) {
         this.showContextMenu = false;
       }
@@ -314,11 +316,9 @@ export default {
       this.touchTimer = setTimeout(this.touchTimerElapsed, 500);
     },
     touchEnd() {
-      console.log("TouchEnd");
       this.touchTimer && clearTimeout(this.touchTimer);
     },
     touchCancel() {
-      console.log("TouchCancel");
       this.touchTimer && clearTimeout(this.touchTimer);
     },
     touchMove(e) {

src/components/ChatHeader.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-container fluid>
+    <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-icon>people</v-icon>
+        </v-btn>
+        <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>
+      </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-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "ChatHeader",
+  data() {
+    return {
+      memberCount: null,
+    };
+  },
+  mounted() {
+    this.$matrix.on("Room.timeline", this.onEvent);
+    this.updateMemberCount();
+  },
+
+  destroyed() {
+    this.$matrix.off("Room.timeline", this.onEvent);
+  },
+
+  computed: {
+    room() {
+      return this.$matrix.currentRoom;
+    },
+  },
+
+  watch: {
+    room: {
+      handler(newVal, ignoredOldVal) {
+        this.memberCount = newVal.getJoinedMemberCount();
+      },
+    },
+  },
+
+  methods: {
+    onEvent(event) {
+      if (event.getRoomId() !== this.roomId) {
+        return; // Not for this room
+      }
+      if (event.getType() == "m.room.member") {
+        this.updateMemberCount();
+      }
+    },
+
+    updateMemberCount() {
+      this.memberCount = this.room.getJoinedMemberCount();
+    },
+
+    showRoomInfo() {
+      this.$router.push({ name: "RoomInfo" });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/Login.vue

@@ -68,7 +68,7 @@ export default {
   },
   created() {
     if (this.loggedIn) {
-      this.$router.push("/profile");
+      this.$router.replace({name: "Chat"});
     }
   },
   watch: {

src/components/RoomInfo.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <v-container fluid>
+      <v-row class="chat-header-row">
+
+        <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+          <v-btn icon @click.stop="$router.go(-1)">
+            <v-icon>arrow_back</v-icon>
+          </v-btn>
+        </v-col>
+
+        <!-- <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-icon>people</v-icon>
+          </v-btn>
+          <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>        
+        </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-col> -->
+      </v-row>
+    </v-container>
+  
+      <h3>Work in progress!</h3>
+
+        <div v-for="member in room.getJoinedMembers()" :key="member.userId">
+                <v-avatar class="avatar" size="40" color="grey">
+        <img
+          v-if="memberAvatar(member)"
+          :src="memberAvatar(member)"
+        />
+        <span v-else class="white--text headline">{{
+          member.name.substring(0, 1).toUpperCase()
+        }}</span>
+      </v-avatar>
+          {{ member.name }}
+        </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RoomInfo",
+  data() {
+    return {
+      memberCount: null
+    }
+  },
+  mounted() {
+    this.$matrix.on("Room.timeline", this.onEvent);
+    this.updateMemberCount();
+  },
+
+  destroyed() {
+    this.$matrix.off("Room.timeline", this.onEvent);
+  },
+
+  computed: {
+    room() {
+      return this.$matrix.currentRoom;
+    },
+  },
+
+  watch: {
+    room: {
+      handler(newVal, ignoredOldVal) {
+        console.log("RoomInfo: Current room changed");
+        this.memberCount = newVal.getJoinedMemberCount();
+      }
+    }
+  },
+
+  methods: {
+    onEvent(event) {
+      if (event.getRoomId() !== this.roomId) {
+        return; // Not for this room
+      }
+      if (event.getType() == "m.room.member") {
+        this.updateMemberCount();
+      }
+    },
+
+    updateMemberCount() {
+      this.memberCount = this.room.getJoinedMemberCount();
+    },
+
+    showRoomInfo() {
+      
+    },
+
+    memberAvatar(member) {
+      if (member) {
+        return member.getAvatarUrl(
+          this.$matrix.matrixClient.getHomeserverUrl(),
+          40,
+          40,
+          "scale",
+          true
+        );
+      }
+      return null;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/router/index.js

@@ -11,6 +11,12 @@ const routes = [
     name: 'Chat',
     component: Chat
   },
+  {
+    path: '/info',
+    name: 'RoomInfo',
+    component: () => import('../components/RoomInfo.vue'),
+    props: true,
+  },
   {
     path: '/login',
     component: Login