consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #123 from medialab-prado/120-hidden-comments

Browse Source 
Several comments boxes
This commit is contained in:
Amaia Castro
2017-03-09 16:26:33 +01:00
committed by GitHub
parent ebd88b80e1 5f61e9f270
commit 1cedf73a39
9 changed files with 138 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/legislation_annotatable.js.coffee
View File

@@ -37,7 +37,9 @@ App.LegislationAnnotatable =
return return
renderAnnotationComments: (event) -> renderAnnotationComments: (event) ->
$('#comments-box').css({top: event.offset - $('.calc-comments').offset().top}) if event.offset
$("#comments-box").css({top: event.offset - $('.calc-comments').offset().top})
if App.LegislationAnnotatable.isMobile() if App.LegislationAnnotatable.isMobile()
return return
@@ -58,17 +60,30 @@ App.LegislationAnnotatable =
$('[data-annotation-id]').removeClass('current-annotation') $('[data-annotation-id]').removeClass('current-annotation')
target = $(this) target = $(this)
parents = target.parents('.annotator-hl')
parents_ids = parents.map (_, elem) ->
$(elem).data("annotation-id")
annotation_id = target.data('annotation-id') annotation_id = target.data('annotation-id')
$('[data-annotation-id="'+annotation_id+'"]').addClass('current-annotation') $('[data-annotation-id="'+annotation_id+'"]').addClass('current-annotation')
$('#comments-box').html('')
App.LegislationAllegations.show_comments() App.LegislationAllegations.show_comments()
$("#comments-box").show() $("#comments-box").show()
$.event.trigger $.event.trigger
type: "renderLegislationAnnotation" type: "renderLegislationAnnotation"
annotation_id: target.data("annotation-id") annotation_id: target.data("annotation-id")
annotation_url: target.closest(".legislation-annotatable").data("legislation-annotatable-base-url") annotation_url: target.closest(".legislation-annotatable").data("legislation-annotatable-base-url")
offset: target.offset()["top"] offset: target.offset()["top"]
parents_ids.each (i, pid) ->
$.event.trigger
type: "renderLegislationAnnotation"
annotation_id: pid
annotation_url: target.closest(".legislation-annotatable").data("legislation-annotatable-base-url")
isMobile: () -> isMobile: () ->
return window.innerWidth <= 652 return window.innerWidth <= 652
@@ -126,6 +141,7 @@ App.LegislationAnnotatable =
if $("span[data-annotation-id='" + ann_id + "']").length if $("span[data-annotation-id='" + ann_id + "']").length
el = $("span[data-annotation-id='" + ann_id + "']") el = $("span[data-annotation-id='" + ann_id + "']")
el.addClass('current-annotation') el.addClass('current-annotation')
$('#comments-box').html('')
App.LegislationAllegations.show_comments() App.LegislationAllegations.show_comments()
$('html,body').animate({scrollTop: el.offset().top}) $('html,body').animate({scrollTop: el.offset().top})
$.event.trigger $.event.trigger

16
app/assets/stylesheets/legislation_process.scss
View File

@@ -827,14 +827,18 @@ $epigraph-line-height: rem-calc(22);
display: none; display: none;
} }
#comments-box {
position: absolute;
top: 230px;
}
.comment-box { .comment-box {
width: 375px; width: 375px;
padding: 1rem; padding: 1rem;
background: #F9F9F9; background: #F9F9F9;
border: 1px solid $border; border: 1px solid $border;
display: block; display: block;
position: absolute; margin-bottom: 2rem;
top: 230px;
.button { .button {
font-size: $small-font-size; font-size: $small-font-size;
@@ -986,14 +990,6 @@ $epigraph-line-height: rem-calc(22);
} }
} }
.comment-box:nth-child(4) {
top: 838px;
}
.comment-box:nth-child(5) {
top: 2035px;
}
.draft-panel { .draft-panel {
background: #E5E5E5; background: #E5E5E5;
border-left: 1px solid #D4D4D4; border-left: 1px solid #D4D4D4;

2
app/controllers/legislation/annotations_controller.rb
View File

@@ -73,7 +73,7 @@ class Legislation::AnnotationsController < ApplicationController
end end
respond_to do |format| respond_to do |format|
format.js { render :comments } format.js { render :new_comment }
end end
end end

118
app/views/legislation/annotations/_comments_box.html.erb
View File

@@ -1,70 +1,72 @@
<div class="comment-header"> <div class="comment-box" id="comments-box-<%= annotation.id %>">
<span class="icon-comment" aria-hidden="true"></span> <div class="comment-header">
<div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: annotation.comments.roots.count) %></div> <span class="icon-comment" aria-hidden="true"></span>
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation) do %> <div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: annotation.comments.roots.count) %></div>
<span class="icon-expand" aria-hidden="true"></span> <%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation) do %>
<% end %> <span class="icon-expand" aria-hidden="true"></span>
</div> <% end %>
<div class="comments-wrapper"> </div>
<% annotation.comments.roots.sort_by_most_voted.limit(Legislation::Annotation::COMMENTS_PAGE_SIZE).each do |comment| %> <div class="comments-wrapper">
<div class="comment"> <% annotation.comments.roots.sort_by_most_voted.limit(Legislation::Annotation::COMMENTS_PAGE_SIZE).each do |comment| %>
<div class="comment-text"> <div class="comment">
<p><%= truncate comment.body, length: 250 %></p> <div class="comment-text">
</div> <p><%= truncate comment.body, length: 250 %></p>
<div class="comment-meta"> </div>
<div class="comment-more-info"> <div class="comment-meta">
<% if comment.body.length > 250 %> <div class="comment-more-info">
<div class="comment-expand"> <% if comment.body.length > 250 %>
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation) do %> <div class="comment-expand">
<%= t('legislation.annotations.comments.see_complete') %> <%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation) do %>
<%= t('legislation.annotations.comments.see_complete') %>
<% end %>
</div>
<% end %>
<div class="comment-replies">
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation, anchor: "comment_#{comment.id}") do %>
<%= t('legislation.annotations.comments.replies_count', count: comment.children.size) %>
<% end %> <% end %>
</div> </div>
<% end %>
<div class="comment-replies">
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation, anchor: "comment_#{comment.id}") do %>
<%= t('legislation.annotations.comments.replies_count', count: comment.children.size) %>
<% end %>
</div> </div>
</div> <div class="comment-votes">
<div class="comment-votes"> <div id="<%= dom_id(comment) %>_votes" class="comment-votes float-right">
<div id="<%= dom_id(comment) %>_votes" class="comment-votes float-right"> <%= render 'comments/votes', comment: comment %>
<%= render 'comments/votes', comment: comment %> </div>
</div> </div>
</div> </div>
</div> </div>
<% end %>
</div> </div>
<% end %>
</div> <div class="comment-footer">
<% if annotation.comments.roots.count > Legislation::Annotation::COMMENTS_PAGE_SIZE %>
<div class="comment-footer"> <%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation), class: "button strong" do %>
<% if annotation.comments.roots.count > Legislation::Annotation::COMMENTS_PAGE_SIZE %> <%= t('legislation.annotations.comments.see_all') %>
<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation), class: "button strong" do %> <% end %>
<%= t('legislation.annotations.comments.see_all') %>
<% end %> <% end %>
<% end %>
<% if @process.open_phase?(:allegations) %> <% if @process.open_phase?(:allegations) %>
<a class="button strong publish-comment" href="#"><%= t('legislation.annotations.comments.publish_comment') %></a> <a class="button strong publish-comment" href="#"><%= t('legislation.annotations.comments.publish_comment') %></a>
<% end %> &nbsp;
<% if @process.open_phase?(:allegations) %>
<% if user_signed_in? %>
<% css_id = parent_or_commentable_dom_id(nil, annotation) %>
<div id="js-comment-form-annotation" style="display:none" class="comment-form">
<%= form_for @comment, url: legislation_process_draft_version_annotation_new_comment_path(annotation.draft_version.process, annotation.draft_version, annotation), remote: true do |f| %>
<%= label_tag "comment-body-#{css_id}", leave_comment_text(annotation) %>
<%= f.text_area :body, id: "comment-body-#{css_id}", maxlength: Comment.body_max_length, label: false, rows: 8 %>
<%= f.submit comment_button_text(nil, annotation), class: "button" %>
<% end %>
</div>
<% else %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.login_to_comment",
signin: link_to(t("legislation.annotations.form.signin"), new_user_session_path),
signup: link_to(t("legislation.annotations.form.signup"), new_user_registration_path)).html_safe %>
</div>
<% end %> <% end %>
<% end %>
</div>
<% if @process.open_phase?(:allegations) %>
<% if user_signed_in? %>
<% css_id = parent_or_commentable_dom_id(nil, annotation) %>
<div id="js-comment-form-annotation-<%= annotation.id %>" style="display:none" class="comment-form js-comment-form-annotation">
<%= form_for @comment, url: legislation_process_draft_version_annotation_new_comment_path(annotation.draft_version.process, annotation.draft_version, annotation), remote: true do |f| %>
<%= label_tag "comment-body-#{css_id}", leave_comment_text(annotation) %>
<%= f.text_area :body, id: "comment-body-#{css_id}", maxlength: Comment.body_max_length, label: false, rows: 8 %>
<%= f.submit comment_button_text(nil, annotation), class: "button" %>
<% end %>
</div>
<% else %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.login_to_comment",
signin: link_to(t("legislation.annotations.form.signin"), new_user_session_path),
signup: link_to(t("legislation.annotations.form.signup"), new_user_registration_path)).html_safe %>
</div>
<% end %>
<% end %>
</div>
</div>

15
app/views/legislation/annotations/_comments_box_form.js.erb Normal file
View File

@@ -0,0 +1,15 @@
$('#comments-box-<%= annotation.id %> a.publish-comment').on({
click: function(e) {
e.preventDefault();
$('a.publish-comment').hide();
$('#js-comment-form-annotation-<%= annotation.id %>').toggle();
$('#js-comment-form-annotation-<%= annotation.id %> textarea').focus();
return;
}
});
<% if comment.errors.any? %>
$('#comments-box-<%= @annotation.id %> a.publish-comment').hide();
$('#js-comment-form-annotation-<%= annotation.id %>').toggle();
$('#js-comment-form-annotation-<%= annotation.id %> textarea').focus();
<% end %>

54
app/views/legislation/annotations/_form.html.erb
View File

@@ -1,33 +1,35 @@
<div class="comment-header"> <div class="comment-box">
<span class="icon-comment" aria-hidden="true"></span> <div class="comment-header">
<div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: 0) %></div> <span class="icon-comment" aria-hidden="true"></span>
</div> <div class="comment-number"><%= t('legislation.annotations.comments.comments_count', count: 0) %></div>
</div>
<div class="comments-wrapper"> <div class="comments-wrapper">
<div class="comment-input"> <div class="comment-input">
<% if !@process.open_phase?(:allegations) %> <% if !@process.open_phase?(:allegations) %>
<div data-alert class="callout primary"> <div data-alert class="callout primary">
<%= t("legislation.annotations.form.phase_not_open") %> <%= t("legislation.annotations.form.phase_not_open") %>
</div>
<% elsif user_signed_in? %>
<%= form_for Legislation::Annotation.new, url: legislation_process_draft_version_annotations_path(@process, @draft_version), remote: true do |f| %>
<%= f.text_area :text %>
<div class="comment-actions">
<a class="cancel-comment" href="#" data-cancel-annotation><%= t('legislation.annotations.comments.cancel') %></a>
<%= f.submit t('legislation.annotations.comments.publish_comment'), class: 'button strong publish-comment' %>
</div> </div>
<% elsif user_signed_in? %>
<%= form_for Legislation::Annotation.new, url: legislation_process_draft_version_annotations_path(@process, @draft_version), remote: true do |f| %>
<%= f.text_area :text %>
<%= f.hidden_field :quote %> <div class="comment-actions">
<%= f.hidden_field :ranges %> <a class="cancel-comment" href="#" data-cancel-annotation><%= t('legislation.annotations.comments.cancel') %></a>
<%= f.submit t('legislation.annotations.comments.publish_comment'), class: 'button strong publish-comment' %>
</div>
<%= f.hidden_field :quote %>
<%= f.hidden_field :ranges %>
<% end %>
<% else %>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.login_to_comment",
signin: link_to(t("legislation.annotations.form.signin"), new_user_session_path),
signup: link_to(t("legislation.annotations.form.signup"), new_user_registration_path)).html_safe %>
</div>
<% end %> <% end %>
<% else %> </div>
<div data-alert class="callout primary">
<%= t("legislation.annotations.form.login_to_comment",
signin: link_to(t("legislation.annotations.form.signin"), new_user_session_path),
signup: link_to(t("legislation.annotations.form.signup"), new_user_registration_path)).html_safe %>
</div>
<% end %>
</div> </div>
</div> </div>

18
app/views/legislation/annotations/comments.js.erb
View File

@@ -1,17 +1,3 @@
$("#comments-box").html("<%= j render('comments_box', annotation: @annotation) %>").show(); $("#comments-box").append("<%= j render('comments_box', annotation: @annotation) %>").show();
$('a.publish-comment').on({ <%= render 'comments_box_form', comment: @comment, annotation: @annotation %>
click: function(e) {
e.preventDefault();
$('a.publish-comment').hide();
$('#js-comment-form-annotation').toggle();
$('#js-comment-form-annotation textarea').focus();
return;
}
});
<% if @comment.errors.any? %>
$('a.publish-comment').hide();
$('#js-comment-form-annotation').toggle();
$('#js-comment-form-annotation textarea').focus();
<% end %>

3
app/views/legislation/annotations/new_comment.js.erb Normal file
View File

@@ -0,0 +1,3 @@
$("#comments-box-<%= @annotation.id %>").replaceWith("<%= j render('comments_box', annotation: @annotation) %>").show();
<%= render 'comments_box_form', comment: @comment, annotation: @annotation %>

10
app/views/legislation/draft_versions/_comments_panel.html.erb
View File

@@ -9,10 +9,12 @@
<span class="panel-title"><%= t('legislation.draft_versions.show.text_comments') %></span> <span class="panel-title"><%= t('legislation.draft_versions.show.text_comments') %></span>
</div> </div>
<div class="comment-box" id="comments-box" style="display: none;"> <div id="comments-box" style="display: none;">
<div class="comment-header"> <div class="comment-box">
<span class="icon-comment" aria-hidden="true"></span> <div class="comment-header">
<div class="comment-number"><%= t('legislation.draft_versions.show.loading_comments') %></div> <span class="icon-comment" aria-hidden="true"></span>
<div class="comment-number"><%= t('legislation.draft_versions.show.loading_comments') %></div>
</div>
</div> </div>
</div> </div>
</div> </div>