diff --git a/js/src/forum/components/CommentPost.js b/js/src/forum/components/CommentPost.js index d505f1174..7bcc1eea9 100644 --- a/js/src/forum/components/CommentPost.js +++ b/js/src/forum/components/CommentPost.js @@ -31,7 +31,18 @@ export default class CommentPost extends Post { */ this.revealContent = false; - this.subtree.check(() => this.isEditing()); + /** + * Whether or not the user hover card inside of PostUser is visible. + * The property must be managed in CommentPost to be able to use it in the subtree check + * + * @type {Boolean} + */ + this.cardVisible = false; + + this.subtree.check( + () => this.cardVisible, + () => this.isEditing() + ); } content() { @@ -124,7 +135,22 @@ export default class CommentPost extends Post { const items = new ItemList(); const post = this.props.post; - items.add('user', PostUser.component({ post }), 100); + items.add( + 'user', + PostUser.component({ + post, + cardVisible: this.cardVisible, + oncardshow: () => { + this.cardVisible = true; + m.redraw(); + }, + oncardhide: () => { + this.cardVisible = false; + m.redraw(); + }, + }), + 100 + ); items.add('meta', PostMeta.component({ post })); if (post.isEdited() && !post.isHidden()) { diff --git a/js/src/forum/components/PostUser.js b/js/src/forum/components/PostUser.js index 7ecb2558a..89c0ae227 100644 --- a/js/src/forum/components/PostUser.js +++ b/js/src/forum/components/PostUser.js @@ -29,7 +29,7 @@ export default class PostUser extends Component { let card = ''; - if (!post.isHidden()) { + if (!post.isHidden() && this.props.cardVisible) { card = UserCard.component({ user, className: 'UserCard--popover', @@ -72,6 +72,8 @@ export default class PostUser extends Component { * Show the user card. */ showCard() { + this.props.oncardshow(); + setTimeout(() => this.$('.UserCard').addClass('in')); } @@ -79,6 +81,10 @@ export default class PostUser extends Component { * Hide the user card. */ hideCard() { - this.$('.UserCard').removeClass('in'); + this.$('.UserCard') + .removeClass('in') + .one('transitionend webkitTransitionEnd oTransitionEnd', () => { + this.props.oncardhide(); + }); } }