Implement user hover cards and basic profile pages

ember/app/components/discussion/post-header/user.js

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

ember/app/components/user/user-card.js

@@ -0,0 +1,62 @@
+import Ember from 'ember';
+
+import HasItemLists from 'flarum/mixins/has-item-lists';
+
+export default Ember.Component.extend(HasItemLists, {
+  layoutName: 'components/user/user-card',
+  classNames: ['user-card'],
+  attributeBindings: ['style'],
+  itemLists: ['controls', 'info'],
+
+  style: Ember.computed('user.color', function() {
+    return 'background-color: '+this.get('user.color');
+  }),
+
+  bioEditable: Ember.computed.and('user.canEdit', 'editable'),
+  showBio: Ember.computed.or('user.bioHtml', 'bioEditable'),
+
+  didInsertElement: function() {
+    this.$().on('click', '.user-bio a', function(e) {
+      e.stopPropagation();
+    });
+  },
+
+  actions: {
+    editBio: function() {
+      if (!this.get('bioEditable')) {
+        return;
+      }
+
+      this.set('editingBio', true);
+      var component = this;
+      Ember.run.scheduleOnce('afterRender', this, function() {
+        this.$('.user-bio textarea').focus().blur(function() {
+          component.send('saveBio', $(this).val());
+        });
+      });
+    },
+
+    saveBio: function(value) {
+      var user = this.get('user');
+      user.set('bio', value);
+      user.save();
+      this.set('editingBio', false);
+    }
+  },
+
+  populateControls: function(items) {
+    this.addActionItem(items, 'edit', 'Edit', 'pencil');
+    this.addActionItem(items, 'delete', 'Delete', 'times');
+  },
+
+  populateInfo: function(items) {
+    items.pushObjectWithTag(Ember.Component.extend({
+      layout: Ember.Handlebars.compile('{{fa-icon "circle"}} Online')
+    }), 'lastActiveTime');
+
+    items.pushObjectWithTag(Ember.Component.extend({
+      layout: Ember.Handlebars.compile('Joined {{human-time user.joinTime}}'),
+      user: this.get('user')
+    }), 'joinTime');
+  }
+});