Show avatar for "me"

Make it a shortcut to profile view. Issue #83.

src/assets/css/chat.scss

@@ -269,6 +269,13 @@ $admin-fg: white;
             border-radius: 10px 10px 0 10px;
         }
     }
+    .avatar {
+        display: inline-block;
+        vertical-align: bottom !important;
+        margin-left: 10px;
+        bottom: 0;
+        border: 2px solid white;
+    }
     .senderAndTime {
         display: block;
     }

src/components/Chat.vue

@@ -73,6 +73,7 @@
               :timelineSet="timelineWindow._timelineSet"
               v-on:send-quick-reaction="sendQuickReaction"
               v-on:context-menu="showContextMenuForEvent($event)"
+              v-on:own-avatar-clicked="viewProfile"
             />
             <!-- <div>EventID: {{ event.getId() }}</div> -->
             <div
@@ -1054,6 +1055,10 @@ export default {
       this.showContextMenuAnchor = e.anchor;
     },
 
+    viewProfile() {
+      this.$navigation.push({ name: "Profile" }, 1);
+    },
+
     closeContextMenuIfOpen(e) {
       if (this.showContextMenu) {
         this.showContextMenu = false;

src/components/messages/MessageOutgoingAudio.vue

@@ -9,6 +9,10 @@
       <audio controls :src="src">Audio file</audio>
       <QuickReactions :event="event" :reactions="reactions" />
     </div>
+    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+      <img v-if="userAvatar" :src="userAvatar" />
+      <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
+    </v-avatar>
     <div class="senderAndTime">
       <!-- <div class="sender">{{ "You" }}</div> -->
       <div class="time">

src/components/messages/MessageOutgoingImage.vue

@@ -9,6 +9,10 @@
       <v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
       <QuickReactions :event="event" :reactions="reactions" />
     </div>
+    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+      <img v-if="userAvatar" :src="userAvatar" />
+      <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
+    </v-avatar>
     <div class="senderAndTime">
       <!-- <div class="sender">{{ "You" }}</div> -->
       <div class="time">

src/components/messages/MessageOutgoingText.vue

@@ -21,6 +21,10 @@
         >
       </div>
     </div>
+    <v-avatar class="avatar" size="32" color="#ededed" @click.stop="ownAvatarClicked">
+      <img v-if="userAvatar" :src="userAvatar" />
+      <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
+    </v-avatar>
     <!-- <div class="sender">{{ "You" }}</div> -->
     <div class="senderAndTime">
       <div class="time">

src/components/messages/messageMixin.js

@@ -124,9 +124,33 @@ export default {
   
     messageClasses() {
       return {'messageIn':true,'from-admin':this.senderIsAdminOrModerator(this.event)}
+    },
+
+    userAvatar() {
+      if (!this.$matrix.userAvatar) {
+        return null;
+      }
+      return this.$matrix.matrixClient.mxcUrlToHttp(
+        this.$matrix.userAvatar,
+        80,
+        80,
+        "scale",
+        true
+      );
+    },
+
+    userAvatarLetter() {
+      if (!this.$matrix.currentUser) {
+        return null;
+      }
+      return (this.$matrix.userDisplayName || this.$matrix.currentUser.userId.substring(1)).substring(0, 1).toUpperCase();
     }
   },
   methods: {
+    ownAvatarClicked() {
+      this.$emit("own-avatar-clicked", {event: this.event});
+    },
+
     showContextMenu(buttonRef) {
       this.$emit("context-menu", {event: this.event,anchor: buttonRef});
     },