diff --git a/app/assets/javascripts/app/views/likes_info_view.js b/app/assets/javascripts/app/views/likes_info_view.js
index a672645dd..9300ac9ad 100644
--- a/app/assets/javascripts/app/views/likes_info_view.js
+++ b/app/assets/javascripts/app/views/likes_info_view.js
@@ -5,26 +5,32 @@ app.views.LikesInfo = app.views.Base.extend({
templateName : "likes-info",
events : {
- "click .expand_likes" : "showAvatars"
+ "click .expand-likes" : "showAvatars"
},
tooltipSelector : ".avatar",
initialize : function() {
this.model.interactions.bind('change', this.render, this);
+ this.displayAvatars = false;
},
presenter : function() {
return _.extend(this.defaultPresenter(), {
likes : this.model.interactions.likes.toJSON(),
likesCount : this.model.interactions.likesCount(),
- likes_fetched : this.model.interactions.get("fetched"),
+ displayAvatars : this.model.interactions.get("fetched") && this.displayAvatars
});
},
showAvatars : function(evt){
if(evt) { evt.preventDefault() }
- this.model.interactions.fetch();
+ this.displayAvatars = true;
+ if(!this.model.interactions.get("fetched")){
+ this.model.interactions.fetch();
+ } else {
+ this.model.interactions.trigger("change");
+ }
}
});
// @license-end
diff --git a/app/assets/javascripts/app/views/reshares_info_view.js b/app/assets/javascripts/app/views/reshares_info_view.js
new file mode 100644
index 000000000..b91027e84
--- /dev/null
+++ b/app/assets/javascripts/app/views/reshares_info_view.js
@@ -0,0 +1,36 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+
+app.views.ResharesInfo = app.views.Base.extend({
+
+ templateName : "reshares-info",
+
+ events : {
+ "click .expand-reshares" : "showAvatars"
+ },
+
+ tooltipSelector : ".avatar",
+
+ initialize : function() {
+ this.model.interactions.bind("change", this.render, this);
+ this.displayAvatars = false;
+ },
+
+ presenter : function() {
+ return _.extend(this.defaultPresenter(), {
+ reshares : this.model.interactions.reshares.toJSON(),
+ resharesCount : this.model.interactions.resharesCount(),
+ displayAvatars : this.model.interactions.get("fetched") && this.displayAvatars
+ });
+ },
+
+ showAvatars : function(evt){
+ if(evt) { evt.preventDefault() }
+ this.displayAvatars = true;
+ if(!this.model.interactions.get("fetched")){
+ this.model.interactions.fetch();
+ } else {
+ this.model.interactions.trigger("change");
+ }
+ }
+});
+// @license-end
diff --git a/app/assets/javascripts/app/views/stream_post_views.js b/app/assets/javascripts/app/views/stream_post_views.js
index 81a495411..9da8f6105 100644
--- a/app/assets/javascripts/app/views/stream_post_views.js
+++ b/app/assets/javascripts/app/views/stream_post_views.js
@@ -7,6 +7,7 @@ app.views.StreamPost = app.views.Post.extend({
subviews : {
".feedback" : "feedbackView",
".likes" : "likesInfoView",
+ ".reshares" : "resharesInfoView",
".comments" : "commentStreamView",
".post-content" : "postContentView",
".oembed" : "oEmbedView",
@@ -55,6 +56,10 @@ app.views.StreamPost = app.views.Post.extend({
return new app.views.LikesInfo({model : this.model});
},
+ resharesInfoView : function(){
+ return new app.views.ResharesInfo({model : this.model});
+ },
+
feedbackView : function(){
if(!app.currentUser.authenticated()) { return null }
return new app.views.Feedback({model : this.model});
diff --git a/app/assets/stylesheets/stream_element.scss b/app/assets/stylesheets/stream_element.scss
index 4f1312088..c641196fa 100644
--- a/app/assets/stylesheets/stream_element.scss
+++ b/app/assets/stylesheets/stream_element.scss
@@ -65,31 +65,6 @@
font-size: $font-size-small;
line-height: $font-size-small;
}
- .likes {
- margin-top: 10px;
- font-size: 12px;
- line-height: 16px;
- .author-name, .bd { display: inline-block; }
- .author-name { margin-right: 3px; }
- .entypo-heart {
- display: inline-block;
- font-size: 16px;
- vertical-align: top;
- margin-top: -2px;
- margin-right: 5px;
- }
- }
- .stream_photo {
- float: left;
- margin-top: 6px;
- }
- .status-message-location {
- font-size: $font-size-small;
- color: $text-grey;
- }
- .leaflet-control-zoom {
- display: block;
- }
.post-content p:last-of-type { margin-bottom: 0; }
.nsfw-shield {
color: $text-grey;
@@ -158,3 +133,42 @@
border: 1px solid $brand-primary;
}
}
+
+.stream_element {
+ .likes,
+ .reshares {
+ font-size: 12px;
+ line-height: 16px;
+ margin-top: 10px;
+
+ .author-name,
+ .bd {
+ display: inline-block;
+ }
+
+ .author-name { margin-right: 3px; }
+
+ .entypo-heart,
+ .entypo-reshare {
+ display: inline-block;
+ font-size: 16px;
+ line-height: $line-height-computed;
+ margin-right: 5px;
+ vertical-align: top;
+ }
+ }
+
+ .stream_photo {
+ float: left;
+ margin-top: 6px;
+ }
+
+ .status-message-location {
+ color: $text-grey;
+ font-size: $font-size-small;
+ }
+
+ .leaflet-control-zoom {
+ display: block;
+ }
+}
diff --git a/app/assets/templates/likes-info_tpl.jst.hbs b/app/assets/templates/likes-info_tpl.jst.hbs
index 7affc3b9e..ff5346657 100644
--- a/app/assets/templates/likes-info_tpl.jst.hbs
+++ b/app/assets/templates/likes-info_tpl.jst.hbs
@@ -4,8 +4,8 @@
- {{#unless likes_fetched}}
-
+ {{#unless displayAvatars}}
+
{{t "stream.likes" count=likesCount}}
diff --git a/app/assets/templates/reshare_tpl.jst.hbs b/app/assets/templates/reshare_tpl.jst.hbs
index 06a133bce..d52b716a4 100644
--- a/app/assets/templates/reshare_tpl.jst.hbs
+++ b/app/assets/templates/reshare_tpl.jst.hbs
@@ -17,11 +17,6 @@
-
- {{#if interactions.reshares_count}}
- -
- {{t "stream.reshares" count=interactions.reshares_count}}
- {{/if}}
{{/with}}
diff --git a/app/assets/templates/reshares-info_tpl.jst.hbs b/app/assets/templates/reshares-info_tpl.jst.hbs
new file mode 100644
index 000000000..fadfcb734
--- /dev/null
+++ b/app/assets/templates/reshares-info_tpl.jst.hbs
@@ -0,0 +1,23 @@
+{{#if resharesCount}}
+
+{{/if}}
diff --git a/app/assets/templates/stream-element_tpl.jst.hbs b/app/assets/templates/stream-element_tpl.jst.hbs
index a9f3b8b6e..01dcfb7ef 100644
--- a/app/assets/templates/stream-element_tpl.jst.hbs
+++ b/app/assets/templates/stream-element_tpl.jst.hbs
@@ -49,11 +49,6 @@
-
- {{#if interactions.reshares_count}}
- -
- {{t "stream.reshares" count=interactions.reshares_count}}
- {{/if}}
@@ -62,6 +57,7 @@
+
diff --git a/spec/javascripts/app/views/likes_info_view_spec.js b/spec/javascripts/app/views/likes_info_view_spec.js
index 9e57f6c63..f0848675d 100644
--- a/spec/javascripts/app/views/likes_info_view_spec.js
+++ b/spec/javascripts/app/views/likes_info_view_spec.js
@@ -1,14 +1,6 @@
describe("app.views.LikesInfo", function(){
beforeEach(function(){
loginAs({id : -1, name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
-
- Diaspora.I18n.load({stream : {
- pins : {
- zero : "<%= count %> Pins",
- one : "<%= count %> Pin"}
- }
- });
-
var posts = $.parseJSON(spec.readFixture("stream_json"));
this.post = new app.models.Post(posts[0]); // post with a like
this.view = new app.views.LikesInfo({model: this.post});
@@ -18,7 +10,7 @@ describe("app.views.LikesInfo", function(){
it("displays a the like count if it is above zero", function() {
spyOn(this.view.model.interactions, "likesCount").and.returnValue(3);
this.view.render();
- expect($(this.view.el).find(".expand_likes").length).toBe(1);
+ expect($(this.view.el).find(".expand-likes").length).toBe(1);
});
it("does not display the like count if it is zero", function() {
@@ -44,12 +36,10 @@ describe("app.views.LikesInfo", function(){
expect(this.post.interactions.fetch).toHaveBeenCalled();
});
- it("sets the fetched response to the model's likes", function(){
- //placeholder... not sure how to test done functionalty here
- });
-
- it("re-renders the view", function(){
- //placeholder... not sure how to test done functionalty here
+ it("sets 'displayAvatars' to true", function(){
+ this.view.displayAvatars = false;
+ this.view.showAvatars();
+ expect(this.view.displayAvatars).toBeTruthy();
});
});
});
diff --git a/spec/javascripts/app/views/reshares_info_view_spec.js b/spec/javascripts/app/views/reshares_info_view_spec.js
new file mode 100644
index 000000000..b36853cc0
--- /dev/null
+++ b/spec/javascripts/app/views/reshares_info_view_spec.js
@@ -0,0 +1,46 @@
+describe("app.views.ResharesInfo", function(){
+ beforeEach(function(){
+ loginAs({id : -1, name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
+
+ var posts = $.parseJSON(spec.readFixture("stream_json"));
+ this.post = new app.models.Post(posts[0]); // post with a like
+ this.view = new app.views.ResharesInfo({model: this.post});
+ });
+
+ describe(".render", function(){
+ it("displays a the reshare count if it is above zero", function() {
+ spyOn(this.view.model.interactions, "resharesCount").and.returnValue(3);
+ this.view.render();
+ expect($(this.view.el).find(".expand-reshares").length).toBe(1);
+ });
+
+ it("does not display the reshare count if it is zero", function() {
+ spyOn(this.view.model.interactions, "resharesCount").and.returnValue(0);
+ this.view.render();
+ expect($(this.view.el).html().trim()).toBe("");
+ });
+
+ it("fires on a model change", function(){
+ spyOn(this.view, "postRenderTemplate");
+ this.view.model.interactions.trigger("change");
+ expect(this.view.postRenderTemplate).toHaveBeenCalled();
+ });
+ });
+
+ describe("showAvatars", function(){
+ beforeEach(function(){
+ spyOn(this.post.interactions, "fetch").and.callThrough();
+ });
+
+ it("calls fetch on the model's reshare collection", function(){
+ this.view.showAvatars();
+ expect(this.post.interactions.fetch).toHaveBeenCalled();
+ });
+
+ it("sets 'displayAvatars' to true", function(){
+ this.view.displayAvatars = false;
+ this.view.showAvatars();
+ expect(this.view.displayAvatars).toBeTruthy();
+ });
+ });
+});
diff --git a/spec/javascripts/app/views/stream_post_spec.js b/spec/javascripts/app/views/stream_post_spec.js
index 47084bd6e..13fa30c59 100644
--- a/spec/javascripts/app/views/stream_post_spec.js
+++ b/spec/javascripts/app/views/stream_post_spec.js
@@ -66,18 +66,16 @@ describe("app.views.StreamPost", function(){
}});
});
- context("reshare", function(){
+ context("reshares", function(){
it("displays a reshare count", function(){
- this.statusMessage.set({ interactions: {reshares_count : 2 }});
+ this.statusMessage.interactions.set({"reshares_count": 2});
var view = new this.PostViewClass({model : this.statusMessage}).render();
-
expect($(view.el).html()).toContain(Diaspora.I18n.t('stream.reshares', {count: 2}));
});
it("does not display a reshare count for 'zero'", function(){
- this.statusMessage.interactions.set({ interactions: { reshares_count : 0}} );
+ this.statusMessage.interactions.set({"reshares_count": 0});
var view = new this.PostViewClass({model : this.statusMessage}).render();
-
expect($(view.el).html()).not.toContain("0 Reshares");
});
});
@@ -86,13 +84,12 @@ describe("app.views.StreamPost", function(){
it("displays a like count", function(){
this.statusMessage.interactions.set({likes_count : 1});
var view = new this.PostViewClass({model : this.statusMessage}).render();
-
expect($(view.el).html()).toContain(Diaspora.I18n.t('stream.likes', {count: 1}));
});
+
it("does not display a like count for 'zero'", function(){
this.statusMessage.interactions.set({likes_count : 0});
var view = new this.PostViewClass({model : this.statusMessage}).render();
-
expect($(view.el).html()).not.toContain("0 Likes");
});
});