From f6c885394d98d0f917d2571d119d128a59288ad6 Mon Sep 17 00:00:00 2001
From: flaburgan <flaburgan@geexxx.fr>
Date: Sat, 30 Oct 2021 11:31:51 +0200
Subject: [PATCH] Refactor hovercards, fixes #8315
closes #8316
---
Changelog.md | 1 +
.../javascripts/app/views/hovercard_view.js | 27 +++++--------------
app/assets/templates/hovercard_tpl.jst.hbs | 14 ++++++----
.../app/views/hovercard_view_spec.js | 21 ++++++++++++---
4 files changed, 35 insertions(+), 28 deletions(-)
diff --git a/Changelog.md b/Changelog.md
index 0c7f45d8c5..a45c99f086 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -10,6 +10,7 @@
## Bug fixes
* Ensure the log folder exists [#8287](https://github.com/diaspora/diaspora/pull/8287)
* Limit name length in header [#8313] (https://github.com/diaspora/diaspora/pull/8313)
+* Fix fallback avatar in hovercards [#8316](https://github.com/diaspora/diaspora/pull/8316)
## Features
* Add tags to tumblr posts [#8244](https://github.com/diaspora/diaspora/pull/8244)
diff --git a/app/assets/javascripts/app/views/hovercard_view.js b/app/assets/javascripts/app/views/hovercard_view.js
index 9fe895bfe2..dfba3fdff3 100644
--- a/app/assets/javascripts/app/views/hovercard_view.js
+++ b/app/assets/javascripts/app/views/hovercard_view.js
@@ -19,10 +19,15 @@ app.views.Hovercard = app.views.Base.extend({
this.showMe = false;
this.parent = null; // current 'hovercardable' element that caused HC to appear
-
this.active = true;
},
+ presenter: function() {
+ return _.extend({}, this.defaultPresenter(), {
+ person: this.person
+ });
+ },
+
postRenderTemplate: function() {
this.$el.appendTo($("body"));
@@ -106,10 +111,9 @@ app.views.Hovercard = app.views.Base.extend({
if (app.currentUser.authenticated()) {
self.aspectMembershipDropdown = new app.views.AspectMembership({person: new app.models.Person(person)});
}
-
+ self.person = person;
self.render();
- self._populateHovercardWith(person);
if( !self.showMe ) {
// mouse has left element
return;
@@ -118,23 +122,6 @@ app.views.Hovercard = app.views.Base.extend({
});
},
- _populateHovercardWith: function(person) {
- this.avatarLink.attr("href", this.href());
- this.personLink.attr("href", this.href());
- this.personLink.text(person.name);
- this.personID.text(person.diaspora_id);
-
- if (person.profile) {
- this.avatar.attr("src", person.profile.avatar);
-
- // set hashtags
- this.hashtags.empty();
- this.hashtags.html($(_.map(person.profile.tags, function(tag) {
- return $("<a></a>", {href: Routes.tag(tag)}).text("#" + tag)[0];
- })));
- }
- },
-
_positionHovercard: function() {
var p_pos = this.parent.offset();
var p_height = this.parent.height();
diff --git a/app/assets/templates/hovercard_tpl.jst.hbs b/app/assets/templates/hovercard_tpl.jst.hbs
index c95ef3e948..31daa09197 100644
--- a/app/assets/templates/hovercard_tpl.jst.hbs
+++ b/app/assets/templates/hovercard_tpl.jst.hbs
@@ -1,15 +1,19 @@
+{{#with person}}
<div id="hovercard">
- <a class='person_avatar'>
- <img class="avatar">
+ <a class="person_avatar" href="{{urlTo 'person' guid}}">
+ <img class="avatar" src="{{profile.avatar}}" />
</a>
<h4>
- <a class="person"></a>
+ <a class="person" href="{{urlTo 'person' guid}}">{{name}}</a>
</h4>
- <div class="handle"></div>
+ <div class="handle">{{diaspora_id}}</div>
<div id="hovercard_dropdown_container"></div>
<div class="card-footer">
<div class="footer-container">
- <div class="hashtags"></div>
+ <div class="hashtags">
+ {{fmtTags profile.tags}}
+ </div>
</div>
</div>
</div>
+{{/with}}
diff --git a/spec/javascripts/app/views/hovercard_view_spec.js b/spec/javascripts/app/views/hovercard_view_spec.js
index c307ebceee..f3d661ce49 100644
--- a/spec/javascripts/app/views/hovercard_view_spec.js
+++ b/spec/javascripts/app/views/hovercard_view_spec.js
@@ -16,7 +16,11 @@ describe("app.views.Hovercard", function() {
this.view._populateHovercard();
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
- responseText: JSON.stringify({id: 1337})
+ responseText: JSON.stringify({
+ id: 1337,
+ guid: "ba64fce01b04013aa8db34c93d7886ce",
+ name: "Edward Snowden"
+ })
});
expect(this.view.aspectMembershipDropdown).toEqual(undefined);
});
@@ -56,7 +60,11 @@ describe("app.views.Hovercard", function() {
this.view._populateHovercard();
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
- responseText: JSON.stringify({id: 1337})
+ responseText: JSON.stringify({
+ id: 1337,
+ guid: "ba64fce01b04013aa8db34c93d7886ce",
+ name: "Edward Snowden"
+ })
});
expect(this.view.aspectMembershipDropdown).not.toEqual(undefined);
});
@@ -65,7 +73,14 @@ describe("app.views.Hovercard", function() {
this.view._populateHovercard();
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
- responseText: JSON.stringify({id: 1337, profile: {tags: ["first", "second"]}})
+ responseText: JSON.stringify({
+ id: 1337,
+ guid: "ba64fce01b04013aa8db34c93d7886ce",
+ name: "Edward Snowden",
+ profile: {
+ tags: ["first", "second"]
+ }
+ })
});
var first = this.view.hashtags.find("a:contains('#first')");
--
GitLab