Implement user hover cards and basic profile pages

This commit is contained in:
Toby Zerner
2015-03-12 10:40:03 +10:30
parent 9891e5af18
commit 2fc562e8d1
16 changed files with 252 additions and 18 deletions

View File

@ -6,7 +6,22 @@ var precompileTemplate = Ember.Handlebars.compile;
Component for the username/avatar in a post header.
*/
export default Ember.Component.extend({
tagName: 'h3',
classNames: ['post-user'],
layout: precompileTemplate('{{#if post.user}}{{#link-to "user" post.user}}{{user-avatar post.user}} {{user-name post.user}}{{/link-to}}{{else}}{{user-avatar post.user}} {{user-name post.user}}{{/if}}{{ui/item-list items=post.user.badges class="badges"}}')
layout: precompileTemplate('{{#if post.user}}<h3>{{#link-to "user" post.user}}{{user-avatar post.user}} {{user-name post.user}}{{/link-to}} {{ui/item-list items=post.user.badges class="badges"}}</h3>{{#if showCard}}{{user/user-card user=post.user class="user-card-popover" controlsButtonClass="btn btn-default btn-icon btn-sm btn-naked"}}{{/if}}{{else}}<h3>{{user-avatar post.user}} {{user-name post.user}}</h3>{{/if}}'),
didInsertElement: function() {
var component = this;
var timeout;
this.$().bind('mouseover', '> a, .user-card', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
component.set('showCard', true);
}, 250);
}).bind('mouseout', '> a, .user-card', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
component.set('showCard', false);
}, 250);
});
}
});