From 82af36c90d42b00c4200366f30e0a75430df6483 Mon Sep 17 00:00:00 2001
From: Alexey Golub <Tyrrrrrr@gmail.com>
Date: Sat, 14 Sep 2019 23:35:49 +0300
Subject: [PATCH] [HTML] Add smooth highlight transition when navigating to
 message via link

---
 .../Resources/HtmlDark.css                             |  6 +++++-
 .../Resources/HtmlLight.css                            |  6 +++++-
 .../Resources/HtmlShared.css                           |  2 ++
 .../Resources/HtmlShared.html                          | 10 +++++++++-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
index 0e72ceb4..7c616e10 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlDark.css
@@ -1,4 +1,4 @@
-/* === GENERAL === */
+/* === GENERAL === */
 
 body {
     background-color: #36393e;
@@ -54,6 +54,10 @@ a {
     color: rgba(255, 255, 255, 0.2);
 }
 
+.chatlog__message--highlighted {
+    background-color: rgba(114, 137, 218, 0.2);
+}
+
 .chatlog__message--pinned {
     background-color: rgba(249, 168, 37, 0.05);
 }
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
index f1acc5c5..61a55d61 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlLight.css
@@ -1,4 +1,4 @@
-/* === GENERAL === */
+/* === GENERAL === */
 
 body {
     background-color: #ffffff;
@@ -57,6 +57,10 @@ a {
     color: #747f8d;
 }
 
+.chatlog__message--highlighted {
+    background-color: rgba(114, 137, 218, 0.2);
+}
+
 .chatlog__message--pinned {
     background-color: rgba(249, 168, 37, 0.05);
 }
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css b/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css
index 16f69c45..890b74c0 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.css
@@ -183,6 +183,8 @@ img {
     padding: 2px 5px;
     margin-right: -5px;
     margin-left: -5px;
+    background-color: transparent;
+    transition: background-color 1s ease;
 }
 
 .chatlog__content {
diff --git a/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html b/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
index d1283ddb..dc0cce98 100644
--- a/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
+++ b/DiscordChatExporter.Core.Rendering/Resources/HtmlShared.html
@@ -22,9 +22,17 @@
 
             if (element !== null && element !== undefined) {
                 event.preventDefault();
-                element.scrollIntoView({
+
+                element.classList.add('chatlog__message--highlighted');
+
+                window.scrollTo({
+                    top: element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - (window.innerHeight / 2),
                     behavior: 'smooth'
                 });
+
+                window.setTimeout(function() {
+                    element.classList.remove('chatlog__message--highlighted');
+                }, 2000);
             }
         }
     </script>