Add option to start private chat

By clicking on avatar. Issue #101.

src/components/messages/AvatarOperations.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    :class="{
+      'avatar-operations': true,
+      incoming: incoming,
+      outgoing: !incoming,
+    }"
+  >
+    <v-btn v-if="incoming" text @click.stop="startPrivateChat" class="ma-0 pa-0"
+      >Private chat with this user</v-btn
+    >
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+  mounted() {
+      // Any items to show?
+      if (this.room && this.event && this.$matrix.isDirectRoomWith(this.room, this.event.getSender())) {
+        this.$emit("close");
+      }
+  },
+  methods: {
+    startPrivateChat() {
+      this.$emit("close");
+      this.$emit("start-private-chat", { event: this.event });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/MessageIncoming.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- BASE CLASS FOR INCOMING MESSAGE -->
   <div :class="messageClasses">
-    <v-avatar class="avatar" size="32" color="#ededed">
+    <v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{
         messageEventDisplayName(event).substring(0, 1).toUpperCase()

src/components/messages/messageMixin.js

@@ -156,6 +156,10 @@ export default {
       this.$emit("own-avatar-clicked", {event: this.event});
     },
 
+    otherAvatarClicked(avatarRef) {
+      this.$emit("other-avatar-clicked", {event: this.event, anchor: avatarRef});
+    },
+
     showContextMenu(buttonRef) {
       this.$emit("context-menu", {event: this.event,anchor: buttonRef});
     },