Improve navigation

src/components/Chat.vue

@@ -8,7 +8,7 @@
       v-on:scroll="onScroll"
       @click.prevent="closeContextMenuIfOpen"
     >
-      <div class="message-operations-strut">
+      <div ref="messageOperationsStrut" class="message-operations-strut">
       <message-operations
         :style="opStyle"
               v-on:close="showContextMenu = false"
@@ -261,6 +261,8 @@ export default {
       editedEvent: null,
       replyToEvent: null,
       showContextMenu: false,
+      showContextMenuAnchor: null,
+
       /**
        * Current chat container size. We need to keep track of this so that if and when
        * a soft keyboard is shown/hidden we can restore the scroll position correctly.
@@ -287,14 +289,14 @@ export default {
   },
 
   computed: {
+    currentUser() {
+      return this.$store.state.auth.user;
+    },
     room() {
       return this.$matrix.currentRoom;
     },
     roomId() {
-      if (!this.room) {
-        return null;
-      }
-      return this.room.roomId;
+      return this.$matrix.currentRoomId;
     },
     attachButtonDisabled() {
       return this.editedEvent != null || this.replyToEvent != null || this.currentInput.length > 0;
@@ -316,11 +318,17 @@ export default {
       // Calculate where to show the context menu.
       //
       const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()];
+      var top = 0;
+      var left = 0;
       if (ref && ref[0]) {
-        const offset = ref[0].offsetTop - this.scrollPosition.node.offsetTop;
-        return "top:" + offset + "px";
+        if (this.showContextMenuAnchor) {
+          var rectAnchor = this.showContextMenuAnchor.getBoundingClientRect();
+          var rectChat = this.$refs.messageOperationsStrut.getBoundingClientRect();
+          top = rectAnchor.top - rectChat.top;
+          left = rectAnchor.left - rectChat.left;
+        }
       }
-      return "top:0px";
+      return "top:" + top + "px;left:" + left + "px";
     }
 
   },
@@ -337,25 +345,57 @@ export default {
         this.typingMembers = [];
         
         if (!room) {
+          // Public room?
+          if (this.roomId && this.roomId.startsWith('#')) {
+            this.onRoomNotJoined();
+          }
           return; // no room
         }
 
-        this.timelineWindow = new TimelineWindow(
-          this.$matrix.matrixClient,
-          this.room.getUnfilteredTimelineSet(),
-          {}
-        );
-        this.timelineWindow.load(null, 20).then(() => {
-          this.events = this.timelineWindow.getEvents();
-          this.$nextTick(() => {
-            this.paginateBackIfNeeded();
-          });
-        });
+          // Joined?
+          if (room.hasMembershipState(this.currentUser.user_id, "join")) {
+            // Yes, load everything
+            this.onRoomJoined();
+          } else {
+            this.onRoomNotJoined();
+          }
+
+  //   this.$matrix
+  //     .getPublicRoomInfo(this.roomId)
+  //     .then((room) => {
+  //       console.log("Found room:", room);
+  //       this.roomName = room.name;
+  //       this.roomAvatar = room.avatar;
+  //       this.waitingForInfo = false;
+  //     })
+  //     .catch((err) => {
+  //       console.log("Could not find room info", err);
+  //       this.waitingForInfo = false;
+  //     });
+  // },
       }
     },
   },
 
   methods: {
+    onRoomJoined() {
+      this.timelineWindow = new TimelineWindow(
+          this.$matrix.matrixClient,
+          this.room.getUnfilteredTimelineSet(),
+          {}
+      );
+      this.timelineWindow.load(null, 20).then(() => {
+          this.events = this.timelineWindow.getEvents();
+          this.$nextTick(() => {
+            this.paginateBackIfNeeded();
+          });
+        });
+    },
+
+    onRoomNotJoined() {
+      this.$navigation.push({ name: "Join", hash: this.roomId }, 0);
+    },
+
     touchX(event) {
       if (event.type.indexOf("mouse") !== -1) {
         return event.clientX;
@@ -721,13 +761,15 @@ export default {
         });
     },
 
-    showContextMenuForEvent(event) {
+    showContextMenuForEvent(e) {
+      const event = e.event;
       const ref = this.$refs[event.getId()];
       if (ref) {
         console.log("Got the ref", ref);
       }
       this.selectedEvent = event;
       this.showContextMenu = true;
+      this.showContextMenuAnchor = e.anchor;
     },
 
     closeContextMenuIfOpen(e) {

src/components/ChatHeader.vue

@@ -66,7 +66,11 @@ export default {
     },
 
     updateMemberCount() {
-      this.memberCount = this.room.getJoinedMemberCount();
+      if (!this.room) {
+        this.memberCount = 0;
+      } else {
+        this.memberCount = this.room.getJoinedMemberCount();
+      }
     },
 
     showRoomInfo() {

src/components/Home.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    HOME
+  </div>
+</template>
+
+<script>
+export default {
+};
+</script>
+
+<style lang="scss">
+</style>

src/components/Join.vue

@@ -7,6 +7,7 @@
         small
         @click.stop="handleLogin"
         :loading="loading"
+        v-if="!currentUser"
         >Login</v-btn
       >
 
@@ -37,8 +38,18 @@
         block
         @click.stop="handleJoin"
         :loading="loading"
+        v-if="!currentUser"
         >Join as guest</v-btn
       >
+      <v-btn
+        class="btn-dark"
+        large
+        block
+        @click.stop="handleJoin"
+        :loading="loading"
+        v-else
+        >Join room</v-btn
+      >
 
       <div class="join-privacy">
         Enhance your physical privacy. <a href="#">Learn how</a>
@@ -75,16 +86,14 @@ export default {
       this.$matrix
         .getMatrixClient(this.currentUser)
         .then(() => {
-          const room = self.$matrix.getRoom(self.roomId);
-          if (room) {
-            self.$matrix.setCurrentRoom(room); // Go to this room, now or when joined.
+            self.$matrix.setCurrentRoomId(self.roomId); // Go to this room, now or when joined.
 
             // Already joined?
-            if (room.hasMembershipState(self.currentUser.user_id, "join")) {
+            const room = self.$matrix.getRoom(self.roomId);
+            if (room && room.hasMembershipState(self.currentUser.user_id, "join")) {
               // Yes, go to room
-              self.$navigation.push({ name: "Chat" }, true);
+              self.$navigation.push({ name: "Chat" }, -1);
               return;
-            }
           }
           this.waitingForMembership = false;
         })
@@ -113,7 +122,7 @@ export default {
   },
   methods: {
     handleLogin() {
-      this.$navigation.push({ name: "Login" }, false);
+      this.$navigation.push({ name: "Login" }, 1);
     },
 
     handleOpenApp() {
@@ -135,10 +144,12 @@ export default {
           return this.$matrix.matrixClient.joinRoom(this.roomId);
         })
         .then((room) => {
-          this.$matrix.setCurrentRoom(room);
+          this.$matrix.setCurrentRoomId(room.roomId);
           this.loading = false;
           this.loadingMessage = null;
-          this.$navigation.push({ name: "Chat" }, true);
+          this.$nextTick(() => {
+            this.$navigation.push({ name: "Chat" }, -1);
+          });
         })
         .catch((err) => {
           // TODO - handle error

src/components/Login.vue

@@ -70,12 +70,12 @@ export default {
       return this.$store.state.auth.user;
     },
     showBackArrow() {
-      return this.$navigation.canPop();
+      return this.$navigation && this.$navigation.canPop();
     }
   },
   created() {
     if (this.loggedIn) {
-      this.$navigation.push({name: "Chat"}, true);
+      this.$navigation.push({name: "Chat"}, -1);
     }
   },
   watch: {
@@ -110,12 +110,11 @@ export default {
   },
   methods: {
     handleLogin() {
-      this.$navigation.push({name: "Chat"}, true);
       if (this.user.username && this.user.password) {
         this.loading = true;
         this.$store.dispatch("auth/login", this.user).then(
           () => {
-            this.$navigation.push({name: "Chat"}, true);
+            this.$navigation.push({name: "Chat"}, -1);
           },
           (error) => {
             this.loading = false;