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

FIX: Janky animations when liking or expanding the post menu

This commit is contained in:
Robin Ward 2016-02-09 17:45:32 -05:00
parent 9ec44f755c
commit 65d0426ff1
3 changed files with 60 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/discourse/components/scrolling-post-stream.js.es6
View File

@ -130,6 +130,15 @@ export default MountWidget.extend({
$(window).bind('scroll.post-stream', debouncedScroll); $(window).bind('scroll.post-stream', debouncedScroll);
this._scrollTriggered(); this._scrollTriggered();
this.$().on('mouseenter.post-stream', 'button.widget-button', e => {
$('button.widget-button').removeClass('d-hover');
$(e.target).addClass('d-hover');
});
this.$().on('mouseleave.post-stream', 'button.widget-button', () => {
$('button.widget-button').removeClass('d-hover');
});
this.appEvents.on('post-stream:refresh', postId => { this.appEvents.on('post-stream:refresh', postId => {
if (postId) { if (postId) {
keyDirty(`post-${postId}`); keyDirty(`post-${postId}`);
@ -143,6 +152,8 @@ export default MountWidget.extend({
$(document).unbind('touchmove.post-stream'); $(document).unbind('touchmove.post-stream');
$(window).unbind('scroll.post-stream'); $(window).unbind('scroll.post-stream');
this.appEvents.off('post-stream:refresh'); this.appEvents.off('post-stream:refresh');
this.$().off('mouseenter.post-stream');
this.$().off('mouseleave.post-stream');
} }
}); });

4
app/assets/javascripts/discourse/widgets/button.js.es6
View File

@ -2,7 +2,7 @@ import { createWidget } from 'discourse/widgets/widget';
import { iconNode } from 'discourse/helpers/fa-icon'; import { iconNode } from 'discourse/helpers/fa-icon';
export default createWidget('button', { export default createWidget('button', {
tagName: 'button', tagName: 'button.widget-button',
buildClasses() { buildClasses() {
if (this.attrs.className) { return this.attrs.className; } if (this.attrs.className) { return this.attrs.className; }
@ -42,7 +42,7 @@ export default createWidget('button', {
const attrs = this.attrs; const attrs = this.attrs;
if (attrs.disabled) { return; } if (attrs.disabled) { return; }
$(`button`).blur(); $(`button.widget-button`).removeClass('d-hover').blur();
return this.sendWidgetAction(attrs.action); return this.sendWidgetAction(attrs.action);
} }
}); });

95
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -139,65 +139,64 @@ nav.post-controls {
background: transparent; background: transparent;
border: none; border: none;
margin-left: 3px; margin-left: 3px;
transition: all linear 0.15s;
&:hover { &.d-hover {
background: dark-light-diff($primary, $secondary, 90%, -60%); background: dark-light-diff($primary, $secondary, 90%, -60%);
color: $primary; color: $primary;
} }
&:active { &:active {
box-shadow: inset 0 1px 3px rgba(0,0,0, .4); box-shadow: inset 0 1px 3px rgba(0,0,0, .4);
} }
&.hidden { &.hidden {
display: none; display: none;
} }
&.admin { &.admin {
position: relative; position: relative;
} }
&.delete:hover { &.delete.d-hover {
background: $danger; background: $danger;
color: $secondary; color: $secondary;
} }
&.like:hover { &.like.d-hover {
color: $love; color: $love;
background: dark-light-diff($love, $secondary, 85%, -60%) background: dark-light-diff($love, $secondary, 85%, -60%)
} }
&.has-like {color: $love;} &.has-like {color: $love;}
&.has-like[disabled]:hover { &.has-like[disabled]:hover {
background: transparent; background: transparent;
} }
&.has-like[disabled]:active { &.has-like[disabled]:active {
box-shadow: none; box-shadow: none;
} }
&.wikied { &.wikied {
color: green; color: green;
} }
&.bookmark {padding: 8px 11px; } &.bookmark {padding: 8px 11px; }
.read-icon { .read-icon {
&:before { &:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
content: "\f02e"; content: "\f02e";
} }
&.unseen { &.unseen {
&:before { &:before {
content: "\f097"; content: "\f097";
}
}
&.bookmarked {
&:before {
color: $tertiary;
}
}
} }
} }
&.bookmarked {
&:before {
color: $tertiary;
}
}
}
}
.post-admin-menu { .post-admin-menu {
background-color: $secondary; background-color: $secondary;