From 36e92b322f2d70640edb74d2e9b33844932869f6 Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Mon, 1 Sep 2014 02:18:59 +0200 Subject: [PATCH] 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 | 1 + .../javascripts/app/views/hovercard_view.js | 36 +++++++++++++------ .../widgets/notifications-badge.js | 3 +- app/assets/stylesheets/hovercard.css.scss | 2 +- app/assets/templates/header_tpl.jst.hbs | 17 --------- app/assets/templates/hovercard_tpl.jst.hbs | 13 +++++++ features/step_definitions/hovercard_steps.rb | 4 +-- 7 files changed, 45 insertions(+), 31 deletions(-) create mode 100644 app/assets/templates/hovercard_tpl.jst.hbs diff --git a/Changelog.md b/Changelog.md index 5cd2718e4..ebfa96238 100644 --- a/Changelog.md +++ b/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) diff --git a/app/assets/javascripts/app/views/hovercard_view.js b/app/assets/javascripts/app/views/hovercard_view.js index 5bbd2f8b1..c293bba31 100644 --- a/app/assets/javascripts/app/views/hovercard_view.js +++ b/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, diff --git a/app/assets/javascripts/widgets/notifications-badge.js b/app/assets/javascripts/widgets/notifications-badge.js index e56b65d0a..ea062430a 100644 --- a/app/assets/javascripts/widgets/notifications-badge.js +++ b/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(); } }); diff --git a/app/assets/stylesheets/hovercard.css.scss b/app/assets/stylesheets/hovercard.css.scss index b3b7622b9..30ad7f9c7 100644 --- a/app/assets/stylesheets/hovercard.css.scss +++ b/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; diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs index 1eb8fbee3..2c2bb2d86 100644 --- a/app/assets/templates/header_tpl.jst.hbs +++ b/app/assets/templates/header_tpl.jst.hbs @@ -67,23 +67,6 @@ - -
-
- -

- -

-
-
-
-
-
-
-
-
-
-