diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js index 01bac858e..879d329f8 100644 --- a/src/components/chat_message/chat_message.js +++ b/src/components/chat_message/chat_message.js @@ -153,6 +153,11 @@ const ChatMessage = { menuOpened: false, } }, + watch: { + focused: function (value) { + this.scrollIfFocused(value) + }, + }, methods: { onHover(bool) { this.$emit('hover', { @@ -188,6 +193,22 @@ const ChatMessage = { this.hovered = false this.menuOpened = false }, + scrollIfFocused(focused) { + if (this.$el.getBoundingClientRect == null) return + if (focused) { + const rect = this.$el.getBoundingClientRect() + if (rect.top < 100) { + // Post is above screen, match its top to screen top + window.scrollBy(0, rect.top - 100) + } else if (rect.height >= window.innerHeight - 50) { + // Post we want to see is taller than screen so match its top to screen top + window.scrollBy(0, rect.top - 100) + } else if (rect.bottom > window.innerHeight - 50) { + // Post is below screen, match its bottom to screen bottom + window.scrollBy(0, rect.bottom - window.innerHeight + 50) + } + } + }, }, } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 48b83e10f..5abeda05b 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -11,7 +11,7 @@ >