Adjustments for highlight message

Added rounded borders.

Whenever the hash changes as a result of clicking a link, the message is
now also highlighted. However, it seems the browser already teleports
there so scrollIntoView does nothing. This will need further research.

Fixed Quote logic to actually receive a parent-id from NewMessageForm,
which removes the console message about the missing required property.

Tweaked scroll into view to focus on the top instead of center.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

4 files changed, 23 insertions, 6 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index a2e6ae74c..7265abf92 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -457,9 +457,12 @@ export default {
 	margin: -6px 0;
 }
 
+.hover, .highlight-animation {
+	border-radius: 8px;
+}
+
 .hover {
 	background-color: var(--color-background-hover);
-	border-radius: 8px;
 }
 
 .highlight-animation {
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 52b6211d0..3098ee10d 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -234,6 +234,7 @@ export default {
 		EventBus.$on('scrollChatToBottom', this.handleScrollChatToBottomEvent)
 		EventBus.$on('smoothScrollChatToBottom', this.smoothScrollToBottom)
 		EventBus.$on('focusMessage', this.focusMessage)
+		EventBus.$on('routeChange', this.onRouteChange)
 		subscribe('networkOffline', this.handleNetworkOffline)
 		subscribe('networkOnline', this.handleNetworkOnline)
 	},
@@ -241,6 +242,7 @@ export default {
 		EventBus.$off('scrollChatToBottom', this.handleScrollChatToBottomEvent)
 		EventBus.$off('smoothScrollChatToBottom', this.smoothScrollToBottom)
 		EventBus.$off('focusMessage', this.focusMessage)
+		EventBus.$off('routeChange', this.onRouteChange)
 
 		this.cancelLookForNewMessages()
 		// Prevent further lookForNewMessages requests after the component was
@@ -621,7 +623,7 @@ export default {
 			this.$nextTick(async() => {
 				await element.scrollIntoView({
 					behavior: smooth ? 'smooth' : 'auto',
-					block: 'center',
+					block: 'start',
 					inline: 'nearest',
 				})
 				element.focus()
@@ -665,6 +667,20 @@ export default {
 			console.debug('Restarting polling of new chat messages')
 			this.getNewMessages()
 		},
+
+		onRouteChange({ from, to }) {
+			if (from.name === 'conversation'
+				&& to.name === 'conversation'
+				&& from.token === to.token
+				&& from.hash !== to.hash) {
+
+				// the hash changed, need to focus/highlight another message
+				if (to.hash && to.hash.startsWith('#message_')) {
+					// scroll to message in URL anchor
+					this.focusMessage(to.hash.substr(9), true)
+				}
+			}
+		},
 	},
 }
 </script>
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 27522140a..21e72bfce 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -76,6 +76,7 @@
 					<Quote
 						v-if="messageToBeReplied"
 						:is-new-message-form-quote="true"
+						:parent-id="messageToBeReplied.id"
 						v-bind="messageToBeReplied" />
 					<AdvancedInput
 						ref="advancedInput"
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index 01cdecf76..d4f8abcfc 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -214,10 +214,7 @@ export default {
 		},
 
 		handleQuoteClick() {
-			// FIXME: unify quote attributes for the two use cases
-			// - "reply in message list" (this.parentId) and
-			// - "reply quote in new message" (this.id)
-			EventBus.$emit('focusMessage', this.parentId || this.id)
+			EventBus.$emit('focusMessage', this.parentId)
 		},
 	},
 }