Skip to content
Extraits de code Groupes Projets
Valider 8f4fed8c rédigé par danielgrippi's avatar danielgrippi
Parcourir les fichiers

add participants to info pane on post viewer

parent cd274cad
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 333 ajouts et 42 suppressions
app/presenters/post_presenter.rb
+ 7
− 1
Voir le fichier @ 8f4fed8c
......@@ -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
......
public/javascripts/app/models/post.js
+ 4
− 4
Voir le fichier @ 8f4fed8c
......@@ -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)
}});
}
});
public/javascripts/app/pages/post-viewer.js
+ 3
− 4
Voir le fichier @ 8f4fed8c
......@@ -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() {
......
public/javascripts/app/templates/post-viewer.handlebars
+ 69
− 16
Voir le fichier @ 8f4fed8c
......@@ -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 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">
<a href="/people/{{author.guid}}" class="author-name">
<img src="{{author.avatar.small}}" class="avatar smaller"/>
</a>
<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 class="bd">
<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">
......
public/javascripts/app/templates/post-viewer/interactions.handlebars 0 → 100644
+ 88
− 0
Voir le fichier @ 8f4fed8c
<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>
public/javascripts/app/templates/post-viewer/reactions.handlebars 0 → 100644
+ 72
− 0
Voir le fichier @ 8f4fed8c
<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>
public/javascripts/app/views/feedback_view.js
+ 2
− 2
Voir le fichier @ 8f4fed8c
......@@ -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")
}
});
},
......
public/javascripts/app/views/post_feedback_view.js
+ 5
− 1
Voir le fichier @ 8f4fed8c
......@@ -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)
}
})
public/javascripts/app/views/post_interactions_view.js 0 → 100644
+ 21
− 0
Voir le fichier @ 8f4fed8c
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 })
}
})
public/javascripts/app/views/post_reactions_view.js 0 → 100644
+ 13
− 0
Voir le fichier @ 8f4fed8c
app.views.PostViewerReactions = app.views.Base.extend({
className : "",
templateName: "post-viewer/reactions",
events : { },
initialize : function() {
this.model.bind('interacted', this.render, this);
},
})
public/stylesheets/sass/new-templates.scss
+ 48
− 13
Voir le fichier @ 8f4fed8c
......@@ -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 {
......
spec/javascripts/app/views/feedback_view_spec.js
+ 1
− 1
Voir le fichier @ 8f4fed8c
......@@ -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()
})
})
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter