From 08d8b90aaa211a516f44dd47cbb3e140c710f3c5 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 27 Nov 2020 18:05:19 +1100
Subject: [PATCH] add animation on click on quoted message just like on mobile

---
 stylesheets/_quote.scss                         | 17 +++++++++++++++++
 ts/components/conversation/Message.tsx          |  5 +++++
 .../conversation/SessionMessagesList.tsx        | 10 ++++++++++
 3 files changed, 32 insertions(+)

diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss
index 8bdca3d76..b74cde1a3 100644
--- a/stylesheets/_quote.scss
+++ b/stylesheets/_quote.scss
@@ -364,3 +364,20 @@
     }
   }
 }
+
+// animate when user is scrolling to a quoted message
+@keyframes blinker {
+  0% {
+    background-color: subtle($session-color-green);
+  }
+  50% {
+    background-color: subtle($session-color-green);
+  }
+  100% {
+    background-color: none;
+  }
+}
+
+.flash-green-once {
+  animation: blinker 2s 1 normal forwards;
+}
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 199c95d2b..59e240d98 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -99,6 +99,7 @@ export interface Props {
   multiSelectMode: boolean;
   firstMessageOfSeries: boolean;
   isUnread: boolean;
+  isQuotedMessageToAnimate?: boolean;
 
   onClickAttachment?: (attachment: AttachmentType) => void;
   onClickLinkPreview?: (url: string) => void;
@@ -1035,6 +1036,10 @@ export class Message extends React.PureComponent<Props, State> {
       divClasses.push('public-chat-message-wrapper');
     }
 
+    if (this.props.isQuotedMessageToAnimate) {
+      divClasses.push('flash-green-once');
+    }
+
     const onVisible = (inView: boolean) => {
       if (inView && shouldMarkReadWhenVisible) {
         // mark the message as read.
diff --git a/ts/components/session/conversation/SessionMessagesList.tsx b/ts/components/session/conversation/SessionMessagesList.tsx
index f7408ef0b..9aacf4042 100644
--- a/ts/components/session/conversation/SessionMessagesList.tsx
+++ b/ts/components/session/conversation/SessionMessagesList.tsx
@@ -19,6 +19,7 @@ import { ToastUtils } from '../../../session/utils';
 
 interface State {
   showScrollButton: boolean;
+  animateQuotedMessageId?: string;
 }
 
 interface Props {
@@ -315,6 +316,9 @@ export class SessionMessagesList extends React.Component<Props, State> {
       this.props.onDownloadAttachment({ attachment });
     };
 
+    messageProps.isQuotedMessageToAnimate =
+      messageProps.id === this.state.animateQuotedMessageId;
+
     if (messageProps.quote) {
       messageProps.quote.onClick = (options: {
         quoteAuthor: string;
@@ -324,6 +328,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
         void this.scrollToQuoteMessage(options);
       };
     }
+
     return <Message {...messageProps} key={messageProps.id} />;
   }
 
@@ -449,6 +454,11 @@ export class SessionMessagesList extends React.Component<Props, State> {
       block: 'center',
     });
 
+    // we consider that a `smooth` set to true, means it's a quoted message, so highlight this message on the UI
+    if (smooth) {
+      this.setState({ animateQuotedMessageId: messageId });
+    }
+
     const messageContainer = this.messageContainerRef.current;
     if (!messageContainer) {
       return;