Merge pull request #10767 from nextcloud/fix/10765/fix-chat-mentions

fix(Mention): show correct size according to font

2 files changed, 39 insertions, 22 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
index 79e36b077..7e6bd9563 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
@@ -20,32 +20,17 @@
 -->
 
 <template>
-	<div class="mention">
-		<NcUserBubble v-if="isMentionToAll"
+	<span ref="mention" class="mention">
+		<NcUserBubble v-if="size"
 			:display-name="name"
 			:avatar-image="avatarUrl"
-			:primary="true" />
-		<NcUserBubble v-else-if="isGroupMention"
-			:display-name="name"
-			:avatar-image="'icon-group-forced-white'"
-			:primary="isCurrentUserGroup" />
-		<NcUserBubble v-else-if="isMentionToGuest"
-			:display-name="name"
-			:avatar-image="'icon-user-forced-white'"
-			:primary="isCurrentGuest" />
-		<NcUserBubble v-else-if="isRemoteUser"
-			:display-name="name"
-			:avatar-image="'icon-user-forced-white'"
-			:primary="isCurrentUser" />
-		<NcUserBubble v-else
-			:display-name="name"
 			:user="id"
-			:primary="isCurrentUser" />
-	</div>
+			:size="size"
+			:primary="primary" />
+	</span>
 </template>
 
 <script>
-
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 
@@ -79,6 +64,12 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			size: null,
+		}
+	},
+
 	computed: {
 		isMentionToAll() {
 			return this.type === 'call'
@@ -114,12 +105,29 @@ export default {
 			return this.isGroupMention
 				&& loadState('spreed', 'user_group_ids', []).includes(this.id)
 		},
+		primary() {
+			return this.isMentionToAll || this.isCurrentUser
+				|| (this.isGroupMention && this.isCurrentUserGroup)
+				|| (this.isMentionToGuest && this.isCurrentGuest)
+		},
 		avatarUrl() {
+			if (this.isGroupMention) {
+				return 'icon-group-forced-white'
+			} else if (this.isMentionToGuest || this.isRemoteUser) {
+				return 'icon-user-forced-white'
+			} else if (!this.isMentionToAll) {
+				return undefined
+			}
+
 			return generateOcsUrl('apps/spreed/api/v1/room/{token}/avatar' + (isDarkTheme ? '/dark' : ''), {
 				token: this.id,
 			})
 		},
 	},
+
+	mounted() {
+		this.size = parseInt(window.getComputedStyle(this.$refs.mention).fontSize, 10) * 4 / 3 ?? 20
+	}
 }
 </script>
 
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index b708b3693..00299e884 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -751,6 +751,10 @@ export default {
 		 * or to the bottom of the list bottom.
 		 */
 		async handleScroll() {
+			if (!this.$refs.scroller) {
+				return
+			}
+
 			if (!this.$store.getters.getFirstKnownMessageId(this.token)) {
 				// This can happen if the browser is fast enough to close the sidebar
 				// when switching from a one-to-one to a group conversation.
@@ -817,6 +821,10 @@ export default {
 		 * @return {object} DOM element for the last visible message
 		 */
 		findFirstVisibleMessage(messageEl) {
+			if (!this.$refs.scroller) {
+				return
+			}
+
 			let el = messageEl
 
 			// When the current message is not visible (reaction or expired)
@@ -917,7 +925,8 @@ export default {
 				return
 			}
 
-			if (lastReadMessageElement && (lastReadMessageElement.offsetTop - this.$refs.scroller.scrollTop > 0)) {
+			if (lastReadMessageElement && this.$refs.scroller
+				&& (lastReadMessageElement.offsetTop - this.$refs.scroller.scrollTop > 0)) {
 				// still visible, hasn't disappeared at the top yet
 				return
 			}
@@ -1029,7 +1038,7 @@ export default {
 					block: 'center',
 					inline: 'nearest',
 				})
-				if (!smooth) {
+				if (this.$refs.scroller && !smooth) {
 					// scroll the viewport slightly further to make sure the element is about 1/3 from the top
 					this.$refs.scroller.scrollTop += this.$refs.scroller.offsetHeight / 4
 				}