Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4590 from xfalcox/css-highligth 

Use CSS animations for post and topic highlights
This commit is contained in:
Jeff Atwood 2016-12-16 14:22:25 -08:00 committed by GitHub
parent ab6843dcde e9fa936389
commit 81956cb1d6
6 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/components/discourse-topic.js.es6
View File

@ -5,16 +5,10 @@ import { selectedText } from 'discourse/lib/utilities';
import { observes } from 'ember-addons/ember-computed-decorators'; import { observes } from 'ember-addons/ember-computed-decorators';
function highlight(postNumber) { function highlight(postNumber) {
const $contents = $(`#post_${postNumber} .topic-body`), const $contents = $(`#post_${postNumber} .topic-body`);
origColor = $contents.data('orig-color') || $contents.css('backgroundColor');
$contents.data("orig-color", origColor) $contents.addClass('highlighted');
.addClass('highlighted') $contents.on('animationend', () => $contents.removeClass('highlighted'));
.stop()
.animate({ backgroundColor: origColor }, 2500, 'swing', function() {
$contents.removeClass('highlighted');
$contents.css({'background-color': ''});
});
} }
export default Ember.Component.extend(AddArchetypeClass, Scrolling, { export default Ember.Component.extend(AddArchetypeClass, Scrolling, {

9
app/assets/javascripts/discourse/components/topic-list-item.js.es6
View File

@ -128,14 +128,11 @@ export default Ember.Component.extend(bufferedRender({
highlight(opts = { isLastViewedTopic: false }) { highlight(opts = { isLastViewedTopic: false }) {
const $topic = this.$(); const $topic = this.$();
const originalCol = $topic.css('backgroundColor');
$topic $topic
.addClass('highlighted') .addClass('highlighted')
.attr('data-islastviewedtopic', opts.isLastViewedTopic) .attr('data-islastviewedtopic', opts.isLastViewedTopic);
.stop()
.animate({ backgroundColor: originalCol }, 2500, 'swing', function() { $topic.on('animationend', () => $topic.removeClass('highlighted'));
$topic.removeClass('highlighted');
});
}, },
_highlightIfNeeded: function() { _highlightIfNeeded: function() {

9
app/assets/stylesheets/common/base/discourse.scss
View File

@ -339,3 +339,12 @@ body {
span.relative-date { span.relative-date {
white-space:nowrap; white-space:nowrap;
} }
@keyframes background-fade-highlight {
0% {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
}
100% {
background-color: transparent;
}
}

2
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -208,7 +208,7 @@ aside.quote {
overflow: hidden; overflow: hidden;
} }
&.highlighted { &.highlighted {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%); animation: background-fade-highlight 2.5s ease-out;
} }
} }

2
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -56,7 +56,7 @@
> tbody > tr { > tbody > tr {
&.highlighted { &.highlighted {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%); animation: background-fade-highlight 2.5s ease-out;
} }
} }
button.bulk-select { button.bulk-select {

2
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -69,7 +69,7 @@
> tbody > tr { > tbody > tr {
&.highlighted { &.highlighted {
background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), scale-color($tertiary, $lightness: -55%)); animation: background-fade-highlight 2.5s ease-out;
} }
} }