fix hovercard aspect selectio z-index by moving it out of the stream element

- create handlebars template for hovercards
- fix notifications-dropdown (workaround) to remain open when aspect
  selector is clicked

Changelog.md

@@ -23,6 +23,7 @@
 * Set sharing notification as read when viewing profile [#5009](https://github.com/diaspora/diaspora/pull/5009)
 * Ensure a consistent border on text input elements [#5069](https://github.com/diaspora/diaspora/pull/5069)
 * Escape person name in contacts json returned by Conversations#new
+* Make sure all parts of the hovercard are always in front [#5188](https://github.com/diaspora/diaspora/pull/5188)
 
 ## Features
 * Port admin pages to bootstrap, polish user search results, allow accounts to be closed from the backend [#5046](https://github.com/diaspora/diaspora/pull/5046)

app/assets/javascripts/app/views/hovercard_view.js

@@ -1,14 +1,23 @@
 
-app.views.Hovercard = Backbone.View.extend({
-  el: '#hovercard_container',
+app.views.Hovercard = app.views.Base.extend({
+  templateName: 'hovercard',
+  id: 'hovercard_container',
+
+  events: {
+    'mouseleave': '_mouseleaveHandler'
+  },
 
   initialize: function() {
+    this.render();
+
     $(document)
       .on('mouseenter', '.hovercardable', _.bind(this._mouseenterHandler, this))
       .on('mouseleave', '.hovercardable', _.bind(this._mouseleaveHandler, this));
 
     this.show_me = false;
+    this.parent = null;  // current 'hovercarable' element that caused HC to appear
 
+    // cache some element references
     this.avatar = this.$('.avatar');
     this.dropdown = this.$('.dropdown_list');
     this.dropdown_container = this.$('#hovercard_dropdown_container');
@@ -18,16 +27,22 @@ app.views.Hovercard = Backbone.View.extend({
     this.active = true;
   },
 
+  postRenderTemplate: function() {
+    this.$el.appendTo($('body'))
+  },
+
   deactivate: function() {
     this.active = false;
   },
 
   href: function() {
-    return this.$el.parent().attr('href');
+    return this.parent.attr('href');
   },
 
   _mouseenterHandler: function(event) {
-    if(this.active == false) { return false }
+    if( this.active == false ||
+        $.contains(this.el, event.target) ) { return false; }
+
     var el = $(event.target);
     if( !el.is('a') ) {
       el = el.parents('a');
@@ -44,7 +59,9 @@ app.views.Hovercard = Backbone.View.extend({
   },
 
   _mouseleaveHandler: function(event) {
-    if(this.active == false) { return false }
+    if( this.active == false ||
+        $.contains(this.el, event.relatedTarget) ) { return false; }
+
     this.show_me = false;
     if( this.$el.is(':visible') ) {
       this.$el.fadeOut('fast');
@@ -66,10 +83,10 @@ app.views.Hovercard = Backbone.View.extend({
     }
 
     hc.hide();
-    hc.prependTo(el);
+    this.parent = el;
     this._positionHovercard();
     this._populateHovercard();
-  }, 500),
+  }, 700),
 
   _populateHovercard: function() {
     var href = this.href();
@@ -114,9 +131,8 @@ app.views.Hovercard = Backbone.View.extend({
   },
 
   _positionHovercard: function() {
-    var p = this.$el.parent();
-    var p_pos = p.position();
-    var p_height = p.height();
+    var p_pos = this.parent.offset();
+    var p_height = this.parent.height();
 
     this.$el.css({
       top: p_pos.top + p_height - 25,

app/assets/javascripts/widgets/notifications-badge.js

@@ -26,8 +26,9 @@
 
       self.documentBody.click(function(evt) {
         var inDropdown = $(evt.target).parents().is(self.dropdown);
+        var inHovercard = $.contains(app.hovercard.el, evt.target);
 
-        if(!inDropdown && self.dropdownShowing()) {
+        if(!inDropdown && !inHovercard && self.dropdownShowing()) {
           self.badgeLink.click();
         }
       });

app/assets/stylesheets/hovercard.css.scss

@@ -99,7 +99,7 @@
 #hovercard_container {
   position: absolute;
   display: none;
-  z-index: 10;
+  z-index: 2000;
 
   min-width: 250px;
   max-width: 400px;

app/assets/templates/header_tpl.jst.hbs

@@ -67,23 +67,6 @@
       </div>
   </div>
 
-
-  <div id="hovercard_container">
-    <div id="hovercard">
-      <img class="avatar">
-      <h4>
-        <a class="person"></a>
-      </h4>
-      <div class="handle"></div>
-      <div id="hovercard_dropdown_container"></div>
-      <div class="hovercard_footer">
-        <div class="footer_container">
-          <div class="hashtags"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <ul class="dropdown" id="user_menu">
     <li class="user-menu-trigger">
       <div class="user-menu-more-indicator">

app/assets/templates/hovercard_tpl.jst.hbs

@@ -0,0 +1,13 @@
+<div id="hovercard">
+  <img class="avatar">
+  <h4>
+    <a class="person"></a>
+  </h4>
+  <div class="handle"></div>
+  <div id="hovercard_dropdown_container"></div>
+  <div class="hovercard_footer">
+    <div class="footer_container">
+      <div class="hashtags"></div>
+    </div>
+  </div>
+</div>

features/step_definitions/hovercard_steps.rb

@@ -3,7 +3,7 @@ When(/^I activate the first hovercard$/) do
 end
 
 Then(/^I should see a hovercard$/) do
-  page.should have_css('#hovercard')
+  page.should have_css('#hovercard', visible: true)
 end
 
 When(/^I deactivate the first hovercard$/) do
@@ -11,7 +11,7 @@ When(/^I deactivate the first hovercard$/) do
 end
 
 Then(/^I should not see a hovercard$/) do
-  page.should_not have_css('#hovercard')
+  page.should_not have_css('#hovercard', visible: true)
 end
 
 When (/^I hover "([^"]*)" within "([^"]*)"$/) do |name, selector|