add participants to info pane on post viewer
This commit is contained in:
danielgrippi
parent
cd274cad0d
commit
8f4fed8c0e
12 changed files with 335 additions and 44 deletions
|
|
@ -22,7 +22,8 @@ class PostPresenter
|
|||
:previous_post => self.previous_post_path,
|
||||
:likes => self.likes,
|
||||
:reshares => self.reshares,
|
||||
:comments => self.comments
|
||||
:comments => self.comments,
|
||||
:participations => self.participations
|
||||
}),
|
||||
:templateName => template_name
|
||||
}
|
||||
|
|
@ -40,6 +41,11 @@ class PostPresenter
|
|||
as_api(post.reshares)
|
||||
end
|
||||
|
||||
def participations
|
||||
as_api(post.participations)
|
||||
end
|
||||
|
||||
|
||||
def user_like
|
||||
return unless user_signed_in?
|
||||
if like = post.likes.where(:author_id => person.id).first
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ app.models.Post = Backbone.Model.extend({
|
|||
var self = this;
|
||||
this.participations.create({}, {success : function(resp){
|
||||
self.set(resp.attributes.post)
|
||||
self.trigger('feedback', self)
|
||||
self.trigger('interacted', self)
|
||||
}});
|
||||
},
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ app.models.Post = Backbone.Model.extend({
|
|||
|
||||
participationModel.destroy({success : function(model, resp){
|
||||
self.set(resp.post);
|
||||
self.trigger('feedback', this)
|
||||
self.trigger('interacted', this)
|
||||
}});
|
||||
},
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ app.models.Post = Backbone.Model.extend({
|
|||
var self = this;
|
||||
this.likes.create({}, {success : function(resp){
|
||||
self.set(resp.get("post"))
|
||||
self.trigger('feedback', self)
|
||||
self.trigger('interacted', self)
|
||||
}});
|
||||
},
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ app.models.Post = Backbone.Model.extend({
|
|||
|
||||
likeModel.destroy({success : function(model, resp) {
|
||||
self.set(resp.post);
|
||||
self.trigger('feedback', this)
|
||||
self.trigger('interacted', this)
|
||||
}});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ app.pages.PostViewer = app.views.Base.extend({
|
|||
subviews : {
|
||||
"#post-content" : "postView",
|
||||
"#post-nav" : "navView",
|
||||
"#post-feedback" : "feedbackView",
|
||||
"#post-feedback" : "interactionsView",
|
||||
"#header-container" : "authorView"
|
||||
},
|
||||
|
||||
|
|
@ -22,9 +22,8 @@ app.pages.PostViewer = app.views.Base.extend({
|
|||
return new app.views.PostViewerNav({ model : this.model })
|
||||
},
|
||||
|
||||
feedbackView : function() {
|
||||
if(!window.app.user()) { return null }
|
||||
return new app.views.PostViewerFeedback({ model : this.model })
|
||||
interactionsView : function() {
|
||||
return new app.views.PostViewerInteractions({ model : this.model })
|
||||
},
|
||||
|
||||
authorView : function() {
|
||||
|
|
|
|||
|
|
@ -10,33 +10,86 @@
|
|||
|
||||
<!-- extraction needed! -->
|
||||
|
||||
<div id="post-reactions">
|
||||
<div id="post-interactions">
|
||||
|
||||
<div id="post-feedback"></div>
|
||||
|
||||
<div id="post-interactions" style="display:none;">
|
||||
<div id="post-interactions-container">
|
||||
<div id="post-comments">
|
||||
{{#each last_three_comments}}
|
||||
<div class="post-comment media">
|
||||
<div class="img">
|
||||
<a href="/people/{{author.guid}}" class="author-name">
|
||||
<img src="{{author.avatar.small}}" class="avatar smaller"/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="post-info" style="display:none;">
|
||||
<div id="post-info-container">
|
||||
|
||||
<div class="bd">
|
||||
<div>
|
||||
<div id="post-reactions">
|
||||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-heart icon-red"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each likes}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-follows">
|
||||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-plus icon-green"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each participations}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-reshares">
|
||||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-retweet icon-blue"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each reshares}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-comments">
|
||||
{{#each last_three_comments}}
|
||||
<div class="post-comment media">
|
||||
<div class="img">
|
||||
<a href="/people/{{author.guid}}" class="author-name">
|
||||
{{author.name}}
|
||||
<img src="{{author.avatar.small}}" class="avatar smaller"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="comment-content">
|
||||
{{text}}
|
||||
<div class="bd">
|
||||
<div>
|
||||
<a href="/people/{{author.guid}}" class="author-name">
|
||||
{{author.name}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="comment-content">
|
||||
{{text}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="new-post-comment">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
<div id="post-feedback"></div>
|
||||
|
||||
<div id="post-info" style="display:none;">
|
||||
<div id="post-info-container">
|
||||
|
||||
<div id="post-reactions">
|
||||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-heart icon-red"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each likes}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-follows">
|
||||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-plus icon-green"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each participations}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-reshares">
|
||||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-retweet icon-blue"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each reshares}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-comments">
|
||||
{{#each last_three_comments}}
|
||||
<div class="post-comment media">
|
||||
<div class="img">
|
||||
<a href="/people/{{author.guid}}" class="author-name">
|
||||
<img src="{{author.avatar.small}}" class="avatar smaller"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bd">
|
||||
<div>
|
||||
<a href="/people/{{author.guid}}" class="author-name">
|
||||
{{author.name}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="comment-content">
|
||||
{{text}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="new-post-comment">
|
||||
<div id="new-post-comment-container">
|
||||
<textarea class="new-comment-text" placeholder="Comment"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-heart icon-red"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each likes}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-follows">
|
||||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-plus icon-green"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each participations}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-reshares">
|
||||
<div class="well media">
|
||||
<div class="img">
|
||||
<i class="icon-retweet icon-blue"></i>
|
||||
</div>
|
||||
<div id="post-likes" class="bd">
|
||||
{{#each reshares}}
|
||||
{{#with author}}
|
||||
<a href="/people/{{guid}}">
|
||||
<img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
|
||||
</a>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="post-comments">
|
||||
{{#each last_three_comments}}
|
||||
<div class="post-comment media">
|
||||
<div class="img">
|
||||
<a href="/people/{{author.guid}}" class="author-name">
|
||||
<img src="{{author.avatar.small}}" class="avatar smaller"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bd">
|
||||
<div>
|
||||
<a href="/people/{{author.guid}}" class="author-name">
|
||||
{{author.name}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="comment-content">
|
||||
{{text}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
@ -11,7 +11,7 @@ app.views.Feedback = app.views.Base.extend({
|
|||
},
|
||||
|
||||
initialize : function() {
|
||||
this.model.bind('feedback', this.render, this);
|
||||
this.model.bind('interacted', this.render, this);
|
||||
},
|
||||
|
||||
presenter : function() {
|
||||
|
|
@ -42,7 +42,7 @@ app.views.Feedback = app.views.Base.extend({
|
|||
app.stream && app.stream.add(reshare);
|
||||
|
||||
model.set(resp.get("post"))
|
||||
model.trigger("feedback")
|
||||
model.trigger("interacted")
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
|
|||
"click .like" : "toggleLike",
|
||||
"click .follow" : "toggleFollow",
|
||||
"click .reshare" : "resharePost",
|
||||
|
||||
"click .comment" : "comment"
|
||||
},
|
||||
|
||||
|
|
@ -16,7 +17,10 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
|
|||
|
||||
comment : function(evt){
|
||||
if(evt) { evt.preventDefault() }
|
||||
$("#post-interactions").slideToggle()
|
||||
$("#post-info").slideToggle()
|
||||
|
||||
this.removeTooltips()
|
||||
console.log(this.model)
|
||||
}
|
||||
|
||||
})
|
||||
|
|
|
|||
21
public/javascripts/app/views/post_interactions_view.js
Normal file
21
public/javascripts/app/views/post_interactions_view.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
app.views.PostViewerInteractions = app.views.Base.extend({
|
||||
|
||||
className : "",
|
||||
|
||||
subviews : {
|
||||
"#post-feedback" : "feedbackView",
|
||||
"#post-reactions" : "reactionsView"
|
||||
},
|
||||
|
||||
templateName: "post-viewer/interactions",
|
||||
|
||||
feedbackView : function() {
|
||||
if(!window.app.user()) { return null }
|
||||
return new app.views.PostViewerFeedback({ model : this.model })
|
||||
},
|
||||
|
||||
reactionsView : function() {
|
||||
if(!window.app.user()) { return null }
|
||||
return new app.views.PostViewerReactions({ model : this.model })
|
||||
}
|
||||
})
|
||||
13
public/javascripts/app/views/post_reactions_view.js
Normal file
13
public/javascripts/app/views/post_reactions_view.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
app.views.PostViewerReactions = app.views.Base.extend({
|
||||
|
||||
className : "",
|
||||
|
||||
templateName: "post-viewer/reactions",
|
||||
|
||||
events : { },
|
||||
|
||||
initialize : function() {
|
||||
this.model.bind('interacted', this.render, this);
|
||||
},
|
||||
|
||||
})
|
||||
|
|
@ -38,10 +38,10 @@ $light-grey: #999;
|
|||
opacity: $val;
|
||||
}
|
||||
|
||||
@mixin border-radius($pixels:3px) {
|
||||
-webkit-border-radius: $pixels;
|
||||
-moz-border-radius: $pixels;
|
||||
border-radius: $pixels;
|
||||
@mixin border-radius($top:3px, $bottom:$top) {
|
||||
-webkit-border-radius: $top $top $bottom $bottom;
|
||||
-moz-border-radius: $top $top $bottom $bottom;
|
||||
border-radius: $top $top $bottom $bottom;
|
||||
}
|
||||
|
||||
@mixin transition($type, $speed) {
|
||||
|
|
@ -256,9 +256,16 @@ $light-grey: #999;
|
|||
padding: 20px;
|
||||
}
|
||||
|
||||
.avatar.smaller {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
.avatar {
|
||||
&.micro {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&.smaller {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.author-name {
|
||||
|
|
@ -298,7 +305,7 @@ $light-grey: #999;
|
|||
}
|
||||
}
|
||||
|
||||
#post-reactions {
|
||||
#post-interactions {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
|
@ -306,13 +313,17 @@ $light-grey: #999;
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#post-interactions {
|
||||
#post-reactions {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#post-info {
|
||||
@include center(horizontal);
|
||||
z-index: 20;
|
||||
|
||||
#post-interactions-container {
|
||||
@include box-shadow(0, 6px, 15px, #000);
|
||||
@include border-radius();
|
||||
#post-info-container {
|
||||
@include box-shadow(0, 6px, 20px, #000);
|
||||
@include border-radius(3px, 0px);
|
||||
|
||||
border-top: 1px solid #555;
|
||||
border-right: 1px solid #444;
|
||||
|
|
@ -325,11 +336,35 @@ $light-grey: #999;
|
|||
color: #ccc;
|
||||
}
|
||||
|
||||
.well {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
background: {
|
||||
color: #222;
|
||||
color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
border: {
|
||||
bottom: 1px solid #444;
|
||||
top: 1px solid #111;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@include border-radius();
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#post-comments {
|
||||
text-align: left;
|
||||
padding-top: 0;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#new-post-comment {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ describe("app.views.Feedback", function(){
|
|||
describe("triggers", function() {
|
||||
it('re-renders when the model triggers feedback', function(){
|
||||
spyOn(this.view, "postRenderTemplate")
|
||||
this.view.model.trigger("feedback")
|
||||
this.view.model.trigger("interacted")
|
||||
expect(this.view.postRenderTemplate).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue