diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index c29f9e82f..56d5877c1 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -274,16 +274,17 @@ // animate when user is scrolling to a quoted message @keyframes blinker { 0% { - background-color: subtle($session-color-green); + border-color: rgba($session-color-green, 1); } - 50% { - background-color: subtle($session-color-green); + 80% { + border-color: rgba($session-color-green, 1); } 100% { - background-color: none; + border-color: transparent; } } .flash-green-once { + border-color: $session-color-green; animation: blinker 2s 1 normal forwards; } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index e6cf61bfc..ed118fa81 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -331,6 +331,9 @@ pre { // To limit messages with things forcing them wider, like long attachment names max-width: calc(100vw - 380px - 100px); align-items: center; + border-style: solid; + border-color: transparent; + border-width: 3px; } label { user-select: none; diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 1a9febe59..7888509f5 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/ts/components/conversation/message/message-content/MessageContent.tsx @@ -8,6 +8,7 @@ import { MessageRenderingProps, QuoteClickOptions } from '../../../../models/mes import { getMessageContentSelectorProps, getMessageTextProps, + getQuotedMessageToAnimate, } from '../../../../state/selectors/conversations'; import { canDisplayImage, @@ -135,10 +136,13 @@ export const MessageContent = (props: Props) => { } = contentProps; const selectedMsg = useSelector(state => getMessageTextProps(state as any, props.messageId)); + const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate); + let isDeleted = false; if (selectedMsg && selectedMsg.isDeleted !== undefined) { isDeleted = selectedMsg.isDeleted; } + const isQuotedMessageToAnimate = quotedMessageToAnimate === props.messageId; const width = getWidth({ previews, attachments }); const isShowingImage = getIsShowingImage({ attachments, imageBroken, previews, text }); @@ -162,7 +166,8 @@ export const MessageContent = (props: Props) => { : '', lastMessageOfSeries || props.isDetailView ? `module-message__container--${direction}--last-of-series` - : '' + : '', + isQuotedMessageToAnimate && 'flash-green-once' )} style={{ width: isShowingImage ? width : undefined, diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx index 6426b3f98..df4136e95 100644 --- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx @@ -115,7 +115,6 @@ export const GenericReadableMessage = (props: Props) => { }; const { isExpired } = useIsExpired(expiringProps); - const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate); const isMessageSelected = useSelector(state => getIsMessageSelected(state as any, props.messageId) ); @@ -156,7 +155,6 @@ export const GenericReadableMessage = (props: Props) => { const selected = isMessageSelected || false; const isGroup = conversationType === 'group'; - const isQuotedMessageToAnimate = quotedMessageToAnimate === messageId; const isIncoming = direction === 'incoming'; return ( @@ -166,7 +164,6 @@ export const GenericReadableMessage = (props: Props) => { 'session-message-wrapper', selected && 'message-selected', isGroup && 'public-chat-message-wrapper', - isQuotedMessageToAnimate && 'flash-green-once', isIncoming ? 'session-message-wrapper-incoming' : 'session-message-wrapper-outgoing' )} onContextMenu={handleContextMenu}