diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 4697368..9be01bb 100644 --- a/src/assets/css/chat.scss +++ b/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; } diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 4c6ba0a..b293213 100644 --- a/src/components/Chat.vue +++ b/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" />
Audio file
+ + + {{ userAvatarLetter }} +
diff --git a/src/components/messages/MessageOutgoingImage.vue b/src/components/messages/MessageOutgoingImage.vue index 34c52c9..e26d3f7 100644 --- a/src/components/messages/MessageOutgoingImage.vue +++ b/src/components/messages/MessageOutgoingImage.vue @@ -9,6 +9,10 @@
+ + + {{ userAvatarLetter }} +
diff --git a/src/components/messages/MessageOutgoingText.vue b/src/components/messages/MessageOutgoingText.vue index df294f9..7bc961a 100644 --- a/src/components/messages/MessageOutgoingText.vue +++ b/src/components/messages/MessageOutgoingText.vue @@ -21,6 +21,10 @@ >
+ + + {{ userAvatarLetter }} +
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js index 8dce8fd..e749d6b 100644 --- a/src/components/messages/messageMixin.js +++ b/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}); },