diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js index 01bac858e..a71e3ac46 100644 --- a/src/components/chat_message/chat_message.js +++ b/src/components/chat_message/chat_message.js @@ -14,6 +14,7 @@ import StatusPopover from 'src/components/status_popover/status_popover.vue' import UserAvatar from 'src/components/user_avatar/user_avatar.vue' import UserPopover from 'src/components/user_popover/user_popover.vue' import Timeago from 'src/components/timeago/timeago.vue' +import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue' import { useInstanceStore } from 'src/stores/instance.js' import { useInterfaceStore } from 'src/stores/interface' @@ -25,9 +26,11 @@ import { faEllipsisH, faTimes, faReply, + faRetweet, + faStar, } from '@fortawesome/free-solid-svg-icons' -library.add(faTimes, faEllipsisH, faCircleNotch, faReply) +library.add(faTimes, faEllipsisH, faCircleNotch, faReply, faStar, faRetweet) const ChatMessage = { name: 'ChatMessage', @@ -52,6 +55,7 @@ const ChatMessage = { Gallery, LinkPreview, ChatMessageDate, + EmojiReactions, UserPopover, StatusPopover, MentionLink, @@ -153,6 +157,11 @@ const ChatMessage = { menuOpened: false, } }, + watch: { + focused: function (value) { + this.scrollIfFocused(value) + }, + }, methods: { onHover(bool) { this.$emit('hover', { @@ -188,6 +197,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/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 0d5db41b2..44dd01c30 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -11,6 +11,10 @@ } } + .attachments { + min-width: 30em; + } + .chat-message-toolbar { transition: opacity 0.1s; opacity: 0; @@ -126,20 +130,26 @@ align-items: flex-start; } + .end-spacer { + flex: 1 1 0; + min-width: calc(2.2rem + 0.5rem + 2rem); + } + .reply-indicator { display: flex; place-items: center; place-content: center; padding: 0.25em; + width: 1em; margin: var(--roundness) 0; background: var(--border); border-radius: var(--roundness); border: 1px solid var(--border); - } - .end-spacer { - flex: 1 1 0; - min-width: calc(2.2em + 0.5em + 2em); + + .end-spacer { + // Compensate for reply indicator + min-width: calc(2.2rem + 0.5rem + 2rem - (1rem + (1px + 0.25rem) * 2)); + } } &.-incoming { diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index bc50d56a6..a12218008 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -44,22 +44,24 @@ - - + + + : + +