From 46b3c2e9c5b6a052135e3d47cda7a9760d5ee866 Mon Sep 17 00:00:00 2001
From: Rafael dos Santos Silva <xfalcox@gmail.com>
Date: Mon, 5 Dec 2016 20:20:52 -0200
Subject: [PATCH 1/2] Use CSS animations for post and topic highlights

---
 .../discourse/components/discourse-topic.js.es6      | 12 +++---------
 .../discourse/components/topic-list-item.js.es6      |  9 +++------
 app/assets/stylesheets/common/base/discourse.scss    |  9 +++++++++
 app/assets/stylesheets/common/base/topic-post.scss   |  2 +-
 app/assets/stylesheets/desktop/topic-list.scss       |  2 +-
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/discourse-topic.js.es6 b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
index 5d5c6299337..17f40f3928b 100644
--- a/app/assets/javascripts/discourse/components/discourse-topic.js.es6
+++ b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
@@ -5,16 +5,10 @@ import { selectedText } from 'discourse/lib/utilities';
 import { observes } from 'ember-addons/ember-computed-decorators';
 
 function highlight(postNumber) {
-  const $contents = $(`#post_${postNumber} .topic-body`),
-        origColor = $contents.data('orig-color') || $contents.css('backgroundColor');
+  const $contents = $(`#post_${postNumber} .topic-body`);
 
-  $contents.data("orig-color", origColor)
-    .addClass('highlighted')
-    .stop()
-    .animate({ backgroundColor: origColor }, 2500, 'swing', function() {
-      $contents.removeClass('highlighted');
-      $contents.css({'background-color': ''});
-    });
+  $contents.addClass('highlighted');
+  $contents.on('animationend', () => $contents.removeClass('highlighted'));
 }
 
 export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
diff --git a/app/assets/javascripts/discourse/components/topic-list-item.js.es6 b/app/assets/javascripts/discourse/components/topic-list-item.js.es6
index a38dd9c8f4c..b7d47a3a15e 100644
--- a/app/assets/javascripts/discourse/components/topic-list-item.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-list-item.js.es6
@@ -128,14 +128,11 @@ export default Ember.Component.extend(bufferedRender({
 
   highlight(opts = { isLastViewedTopic: false }) {
     const $topic = this.$();
-    const originalCol = $topic.css('backgroundColor');
     $topic
       .addClass('highlighted')
-      .attr('data-islastviewedtopic', opts.isLastViewedTopic)
-      .stop()
-      .animate({ backgroundColor: originalCol }, 2500, 'swing', function() {
-        $topic.removeClass('highlighted');
-      });
+      .attr('data-islastviewedtopic', opts.isLastViewedTopic);
+
+    $topic.on('animationend', () => $topic.removeClass('highlighted'));
   },
 
   _highlightIfNeeded: function() {
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 5bde52ae8ec..1429c55124e 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -339,3 +339,12 @@ body {
 span.relative-date {
   white-space:nowrap;
 }
+
+@keyframes background-fade-highlight {
+  0% {
+    background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 5cb0d0d54e8..03d244d096a 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -208,7 +208,7 @@ aside.quote {
     overflow: hidden;
   }
   &.highlighted {
-    background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+    animation: background-fade-highlight 2.5s ease-out;
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 0df2a15fe3b..49724880c79 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -56,7 +56,7 @@
 
   > tbody > tr {
     &.highlighted {
-        background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
+      animation: background-fade-highlight 2.5s ease-out;
     }
   }
   button.bulk-select {

From e9fa936389a748d57bab15d2cb335c1bde67d6cf Mon Sep 17 00:00:00 2001
From: Rafael dos Santos Silva <xfalcox@gmail.com>
Date: Fri, 16 Dec 2016 19:26:49 -0200
Subject: [PATCH 2/2] Uses CSS animation for highlight on mobile too

---
 app/assets/stylesheets/mobile/topic-list.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 660446f6f55..17644a5f27c 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -69,7 +69,7 @@
 
   > tbody > tr {
     &.highlighted {
-      background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), scale-color($tertiary, $lightness: -55%));
+      animation: background-fade-highlight 2.5s ease-out;
     }
   }