Merge pull request #4590 from xfalcox/css-highligth

Use CSS animations for post and topic highlights

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, {

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() {

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;
+  }
+}

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;
   }
 }
 

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 {

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;
     }
   }