From 1c1af74e9f3cfc5f54ba07ecec78ccc1a6379308 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Thu, 6 Apr 2017 15:02:55 +0200 Subject: [PATCH 1/4] Add avatar fallback for typeahead suggestions --- app/assets/javascripts/app/views.js | 7 +++++-- .../javascripts/app/views/search_base_view.js | 7 +++++++ .../app/views/search_base_view_spec.js | 19 +++++++++++++++++++ spec/javascripts/app/views_spec.js | 6 ++++++ 4 files changed, 37 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/app/views.js b/app/assets/javascripts/app/views.js index 16a03328040..1249d3d3a3e 100644 --- a/app/assets/javascripts/app/views.js +++ b/app/assets/javascripts/app/views.js @@ -55,8 +55,7 @@ app.views.Base = Backbone.View.extend({ .html(this.template(presenter)) .attr("data-template", _.last(this.templateName.split("/"))); - // add avatar fallback if it can't be loaded - this.$el.find(this.avatars.selector).on("error", this.avatars.fallback); + this.setupAvatarFallback(this.$el); // add placeholder support for old browsers this.$("input, textarea").placeholder(); @@ -154,6 +153,10 @@ app.views.Base = Backbone.View.extend({ $(this).attr("src", ImagePaths.get("user/default.png")); }, selector: "img.avatar" + }, + + setupAvatarFallback: function(el) { + el.find(this.avatars.selector).on("error", this.avatars.fallback); } }); diff --git a/app/assets/javascripts/app/views/search_base_view.js b/app/assets/javascripts/app/views/search_base_view.js index eb00aaeaa71..0d119938a9f 100644 --- a/app/assets/javascripts/app/views/search_base_view.js +++ b/app/assets/javascripts/app/views/search_base_view.js @@ -7,6 +7,7 @@ app.views.SearchBase = app.views.Base.extend({ if(options.customSearch) { this.setupCustomSearch(); } this.setupTypeahead(); if(options.autoselect) { this.setupAutoselect(); } + this.setupTypeaheadAvatarFallback(); }, bloodhoundTokenizer: function(str) { @@ -110,6 +111,12 @@ app.views.SearchBase = app.views.Base.extend({ }); }, + setupTypeaheadAvatarFallback: function() { + this.typeaheadInput.on("typeahead:render", function() { + this.setupAvatarFallback(this.$el); + }.bind(this)); + }, + ignorePersonForSuggestions: function(person) { if(person.handle) { this.ignoreDiasporaIds.push(person.handle); } } diff --git a/spec/javascripts/app/views/search_base_view_spec.js b/spec/javascripts/app/views/search_base_view_spec.js index 905c17da0d9..5536937bd44 100644 --- a/spec/javascripts/app/views/search_base_view_spec.js +++ b/spec/javascripts/app/views/search_base_view_spec.js @@ -57,6 +57,12 @@ describe("app.views.SearchBase", function() { this.view = new app.views.SearchBase({el: "#search_people_form", typeaheadInput: $("#q"), autoselect: true}); expect(app.views.SearchBase.prototype.setupAutoselect).toHaveBeenCalled(); }); + + it("calls setupTypeaheadAvatarFallback", function() { + spyOn(app.views.SearchBase.prototype, "setupTypeaheadAvatarFallback"); + this.view = new app.views.SearchBase({el: "#search_people_form", typeaheadInput: $("#q")}); + expect(app.views.SearchBase.prototype.setupTypeaheadAvatarFallback).toHaveBeenCalled(); + }); }); describe("bloodhoundTokenizer", function() { @@ -261,6 +267,19 @@ describe("app.views.SearchBase", function() { }); }); + describe("setupTypeaheadAvatarFallback", function() { + beforeEach(function() { + this.view = new app.views.SearchBase({el: "#search_people_form", typeaheadInput: $("#q")}); + }); + + it("calls setupAvatarFallback when showing the results", function() { + spyOn(this.view, "setupAvatarFallback"); + this.view.setupTypeaheadAvatarFallback(); + this.search(this.view, "user"); + expect(this.view.setupAvatarFallback).toHaveBeenCalled(); + }); + }); + describe("ignorePersonForSuggestions", function() { beforeEach(function() { this.view = new app.views.SearchBase({el: "#search_people_form", typeaheadInput: $("#q")}); diff --git a/spec/javascripts/app/views_spec.js b/spec/javascripts/app/views_spec.js index 84c912d153a..37091243663 100644 --- a/spec/javascripts/app/views_spec.js +++ b/spec/javascripts/app/views_spec.js @@ -163,5 +163,11 @@ describe("app.views.Base", function(){ expect(window.autosize).toHaveBeenCalled(); expect(window.autosize.calls.mostRecent().args[0].is("textarea")).toBe(true); }); + + it("calls setupAvatarFallback", function() { + spyOn(this.view, "setupAvatarFallback"); + this.view.renderTemplate(); + expect(this.view.setupAvatarFallback).toHaveBeenCalled(); + }); }); }); From bcb75e308218c1c452d2b0bea7957d3cc6d4aab8 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Thu, 6 Apr 2017 15:03:11 +0200 Subject: [PATCH 2/4] Add avatar fallback for conversations view Fixes #4991 --- .../javascripts/app/views/conversations_form_view.js | 5 +++-- .../javascripts/app/views/conversations_inbox_view.js | 3 ++- spec/javascripts/app/views/conversations_form_view_spec.js | 6 ++++++ .../javascripts/app/views/conversations_inbox_view_spec.js | 7 +++++++ 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/app/views/conversations_form_view.js b/app/assets/javascripts/app/views/conversations_form_view.js index 74f848de3ca..e3b553b7a6d 100644 --- a/app/assets/javascripts/app/views/conversations_form_view.js +++ b/app/assets/javascripts/app/views/conversations_form_view.js @@ -1,6 +1,6 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later -app.views.ConversationsForm = Backbone.View.extend({ +app.views.ConversationsForm = app.views.Base.extend({ el: ".conversations-form-container", events: { @@ -39,8 +39,9 @@ app.views.ConversationsForm = Backbone.View.extend({ this.conversationRecipients.push(person); this.updateContactIdsListInput(); /* eslint-disable camelcase */ - this.tagListElement.append(HandlebarsTemplates.conversation_recipient_tag_tpl(person)); + var personEl = $(HandlebarsTemplates.conversation_recipient_tag_tpl(person)).appendTo(this.tagListElement); /* eslint-enable camelcase */ + this.setupAvatarFallback(personEl); }, prefill: function(handles) { diff --git a/app/assets/javascripts/app/views/conversations_inbox_view.js b/app/assets/javascripts/app/views/conversations_inbox_view.js index 4e301a8a0dc..67292cc75ab 100644 --- a/app/assets/javascripts/app/views/conversations_inbox_view.js +++ b/app/assets/javascripts/app/views/conversations_inbox_view.js @@ -1,6 +1,6 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later -app.views.ConversationsInbox = Backbone.View.extend({ +app.views.ConversationsInbox = app.views.Base.extend({ el: "#conversations-container", events: { @@ -46,6 +46,7 @@ app.views.ConversationsInbox = Backbone.View.extend({ setupConversation: function() { app.helpers.timeago($(this.el)); $(".control-icons a").tooltip({placement: "bottom"}); + this.setupAvatarFallback(this.$el); var conv = $(".conversation-wrapper .stream-element.selected"), cBadge = $("#conversations-link .badge"); diff --git a/spec/javascripts/app/views/conversations_form_view_spec.js b/spec/javascripts/app/views/conversations_form_view_spec.js index 46c170f3aea..232a7f7de21 100644 --- a/spec/javascripts/app/views/conversations_form_view_spec.js +++ b/spec/javascripts/app/views/conversations_form_view_spec.js @@ -60,6 +60,12 @@ describe("app.views.ConversationsForm", function() { this.target.addRecipient({name: "diaspora user", handle: "diaspora-user@pod.tld"}); expect($(".conversation-recipient-tag").length).toBe(1); }); + + it("calls setupAvatarFallback", function() { + spyOn(this.target, "setupAvatarFallback"); + this.target.addRecipient({name: "diaspora user", handle: "diaspora-user@pod.tld"}); + expect(this.target.setupAvatarFallback).toHaveBeenCalled(); + }); }); describe("prefill", function() { diff --git a/spec/javascripts/app/views/conversations_inbox_view_spec.js b/spec/javascripts/app/views/conversations_inbox_view_spec.js index 8ba41bb8637..841f189f050 100644 --- a/spec/javascripts/app/views/conversations_inbox_view_spec.js +++ b/spec/javascripts/app/views/conversations_inbox_view_spec.js @@ -100,6 +100,13 @@ describe("app.views.ConversationsInbox", function() { $(".conversation-wrapper > .conversation.unread").addClass("selected"); }); + it("calls setupAvatarFallback", function() { + this.view = new app.views.ConversationsInbox(); + spyOn(this.view, "setupAvatarFallback"); + this.view.setupConversation(); + expect(this.view.setupAvatarFallback).toHaveBeenCalled(); + }); + it("removes the unread class from the conversation", function() { expect($(".conversation-wrapper > .conversation.selected")).toHaveClass("unread"); new app.views.ConversationsInbox(); From bf105db2972f5c59fc6a626cd5219a1cde41bf22 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Thu, 6 Apr 2017 16:27:12 +0200 Subject: [PATCH 3/4] Use setupAvatarFallback in tags and notification dropdown view --- .../javascripts/app/views/notification_dropdown_view.js | 2 +- app/assets/javascripts/app/views/tags_view.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/app/views/notification_dropdown_view.js b/app/assets/javascripts/app/views/notification_dropdown_view.js index 02c3a7137aa..c33287787b0 100644 --- a/app/assets/javascripts/app/views/notification_dropdown_view.js +++ b/app/assets/javascripts/app/views/notification_dropdown_view.js @@ -96,7 +96,7 @@ app.views.NotificationDropdown = app.views.Base.extend({ afterNotificationChanges: function(node) { node.find(".unread-toggle .entypo-eye").tooltip("destroy").tooltip(); - node.find(this.avatars.selector).on("error", this.avatars.fallback); + this.setupAvatarFallback(node); }, finishLoading: function() { diff --git a/app/assets/javascripts/app/views/tags_view.js b/app/assets/javascripts/app/views/tags_view.js index 3dda23c0581..8d25c9800ce 100644 --- a/app/assets/javascripts/app/views/tags_view.js +++ b/app/assets/javascripts/app/views/tags_view.js @@ -1,12 +1,12 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later -app.views.Tags = Backbone.View.extend({ +app.views.Tags = app.views.Base.extend({ initialize: function(opts) { if(app.publisher) { app.publisher.setText("#"+ opts.hashtagName + " "); } // add avatar fallback if it can't be loaded - $(app.views.Base.prototype.avatars.selector).on("error", app.views.Base.prototype.avatars.fallback); + this.setupAvatarFallback($("#tags_show")); } }); // @license-end From 3971a24d682bad183eccba98ec289712280ab59d Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Thu, 6 Apr 2017 16:44:38 +0200 Subject: [PATCH 4/4] Add avatar fallback for avatar next to publisher closes #7414 --- Changelog.md | 1 + app/assets/javascripts/app/router.js | 1 + 2 files changed, 2 insertions(+) diff --git a/Changelog.md b/Changelog.md index 2ea388d951c..293e08f6911 100644 --- a/Changelog.md +++ b/Changelog.md @@ -17,6 +17,7 @@ * Fix sharing indicator on profile page for blocked users [#7382](https://github.com/diaspora/diaspora/pull/7382) * Remove post only after a successful deletion on the server [#7385](https://github.com/diaspora/diaspora/pull/7385) * Fix an issue where pod admins could get logged out when using sidekiq-web [#7395](https://github.com/diaspora/diaspora/pull/7395) +* Add avatar fallback for typeahead and conversations [#7414](https://github.com/diaspora/diaspora/pull/7414) ## Features * Add links to liked and commented pages [#5502](https://github.com/diaspora/diaspora/pull/5502) diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js index ed8ec9d9a03..b189cad86d6 100644 --- a/app/assets/javascripts/app/router.js +++ b/app/assets/javascripts/app/router.js @@ -217,6 +217,7 @@ app.Router = Backbone.Router.extend({ app.shortcuts = app.shortcuts || new app.views.StreamShortcuts({el: $(document)}); if ($("#publisher").length !== 0) { app.publisher = app.publisher || new app.views.Publisher({collection: app.stream.items}); + app.page.setupAvatarFallback($(".main-stream-publisher")); } $("#main_stream").html(app.page.render().el);