Merge branch 'AI3205-comment-paragraph' into stable

Evandro Jr
2 parents 0eb620f0 bec3e0ec
Showing 7 changed files with 124 additions and 38 deletions Show diff stats
plugins/comment_paragraph/lib/comment_paragraph_plugin.rb
plugins/comment_paragraph/lib/ext/comment.rb
plugins/comment_paragraph/public/comment_paragraph_macro.js
plugins/comment_paragraph/public/style.css
plugins/comment_paragraph/test/unit/comment_paragraph_plugin_test.rb
plugins/comment_paragraph/views/comment/comment_extra.html.erb
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -19,7 +19,8 @@ class CommentParagraphPlugin &lt; Noosfero::Plugin
       arr = []
       arr << hidden_field_tag('comment[id]', comment.id)
       arr << hidden_field_tag('comment[paragraph_id]', paragraph_id) if paragraph_id
-      arr << hidden_field_tag('comment[comment_paragraph_selected_area]', comment.comment_paragraph_selected_area) if comment.comment_paragraph_selected_area
+      arr << hidden_field_tag('comment[comment_paragraph_selected_area]', comment.comment_paragraph_selected_area) unless comment.comment_paragraph_selected_area.blank?
+      arr << hidden_field_tag('comment[comment_paragraph_selected_content]', comment.comment_paragraph_selected_content) unless comment.comment_paragraph_selected_content.blank?
       arr
     }
   end
@@ -3,14 +3,20 @@ require_dependency &#39;comment&#39;
 class Comment
  
   scope :without_paragraph, :conditions => {:paragraph_id => nil }
- 
+
   settings_items :comment_paragraph_selected_area, :type => :string
-   
+  settings_items :comment_paragraph_selected_content, :type => :string
+
   scope :in_paragraph, proc { |paragraph_id| {
       :conditions => ['paragraph_id = ?', paragraph_id]
     }
   }
  
-  attr_accessible :paragraph_id, :comment_paragraph_selected_area, :id
+  attr_accessible :paragraph_id, :comment_paragraph_selected_area, :id, :comment_paragraph_selected_content
+
+  before_validation do |comment|
+    comment.comment_paragraph_selected_area = nil if comment.comment_paragraph_selected_area.blank?
+    comment.comment_paragraph_selected_content = nil if comment_paragraph_selected_content.blank?
+  end
  
 end
 var comment_paragraph_anchor;
 var lastSelectedArea = [];
 var original_paragraphs = [];
+var originalArticleHeight = 0
  
 function setPlusIfZeroComments($){
   $('.comment-count').each(function(){
@@ -15,6 +16,8 @@ jQuery(document).ready(function($) {
   if($('.comment_paragraph').size() < 1)
     return;
  
+  originalArticleHeight = $('.article-body').height();
+
   all_paragraphs = $('.comment_paragraph');
   all_paragraphs.each( function(paragraph) {
     var paragraph_id = $( all_paragraphs.get(paragraph) ).attr('data-paragraph');
@@ -40,6 +43,12 @@ jQuery(document).ready(function($) {
     return false;
   });
  
+  //Clears all old selected_area and selected_content after submit comment
+  $('[name|=commit]').click(function(){
+      $('.selected_area').val("");
+      $('.selected_content').val("");
+  });
+
   $('#cancel-comment').die();
   $(document.body).on("click", '#cancel-comment', function(){
     $("div.side-comment").hide();
@@ -51,7 +60,7 @@ jQuery(document).ready(function($) {
       div.addClass('opened');
     }
   }
-  
+
   rangy.init();
   cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
   //Add marked text bubble
@@ -60,14 +69,27 @@ jQuery(document).ready(function($) {
           <div align="center"  class="triangle-right" >Comentar</div>\
       </a>');
  
+  function resizeArticle(paragraphId){
+    var commentHeigh = $('#side_comment_' + paragraphId).height();
+    if(commentHeigh > 0){
+      $('.article-body').height(originalArticleHeight + commentHeigh + 50);
+    }else{
+       $('.article-body').height(originalArticleHeight);
+    }
+  }
  
   $('.side-comments-counter').click(function(){
     var paragraphId = $(this).data('paragraph');
     hideAllCommentsExcept(paragraphId);
     hideAllSelectedAreasExcept(paragraphId);
+    if($('.comment-paragraph-slide-left').size()==0){
+      $('.article-body').addClass('comment-paragraph-slide-left');
+      $('#side_comment_' + paragraphId).show();
+    }else{
+      $('.article-body').removeClass('comment-paragraph-slide-left');
+      $('.side-comment').hide();
+    }
     $('#comment-bubble').hide();
-    $('#side_comment_' + paragraphId).toggle();
-    $('#side_comment_' + paragraphId).find().toggle();
     //Loads the comments
     var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
     $.ajax({
@@ -76,12 +98,16 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
+      resizeArticle(paragraphId);
     });
   });
  
  
   $('#comment-bubble').click(function(event){
     $(this).hide();
+    if($('.comment-paragraph-slide-left').size()==0){
+      $('.article-body').addClass('comment-paragraph-slide-left');
+    }
     $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
     var url = $("#comment-bubble").data('url');
     var paragraphId = $("#comment-bubble").data("paragraphId");
@@ -93,6 +119,7 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
+      resizeArticle(paragraphId);
     });
   });
  
@@ -101,7 +128,7 @@ jQuery(document).ready(function($) {
       paragraph = $(this).data('paragraph');
       if(paragraph != clickedParagraph){
         $(this).hide();
-        $(this).find().hide();
+        //$(this).find().hide();
       }
     });
   }
@@ -139,6 +166,11 @@ jQuery(document).ready(function($) {
   $('.comment_paragraph').mouseup(function(event) {
  
     $('#comment-bubble').hide();
+    if($('.comment-paragraph-slide-left').size() > 0){
+      $('.article-body').removeClass('comment-paragraph-slide-left');
+      $('.side-comment').hide();
+      //$('.side-comment').find().hide();
+    }
  
     //Don't do anything if there is no selected text
     if (getSelectionText().length == 0) {
@@ -164,9 +196,9 @@ jQuery(document).ready(function($) {
     } catch(e) {
       return;
     }
+    form = $('#page-comment-form-' + paragraphId).find('form');
  
     //Register the area the has been selected at input.selected_area
-    form = $('#page-comment-form-' + paragraphId).find('form');
     if (form.find('input.selected_area').length === 0){
       $('<input>').attr({
         class: 'selected_area',
@@ -177,8 +209,20 @@ jQuery(document).ready(function($) {
     }else{
       form.find('input.selected_area').val(selected_area)
     }
+    //Register the content being selected at input.comment_paragraph_selected_content
+    var selected_content = getSelectionText();
+    if(selected_content.length > 0)
+    if (form.find('input.selected_content').length === 0){
+      $('<input>').attr({
+        class: 'selected_content',
+        type: 'hidden',
+        name: 'comment[comment_paragraph_selected_content]',
+        value: selected_content
+      }).appendTo(form)
+    }else{
+      form.find('input.selected_content').val(selected_content)
+    }
     rootElement.focus();
-
   });
  
   function processAnchor(){
@@ -7,7 +7,7 @@ div.article-comments-list-more{
 }
  
 .popBox_comment_paragraph {
-  position: absolute;
+/*  position: absolute;*/
   z-index: 2;
   background: #cccccc;
   width: 60px;
@@ -34,9 +34,6 @@ div.article-comments-list-more{
  
 .comment_paragraph{
   padding: 0px;
-  position: relative;
-  left: -20px;
-  width: 450px;
   font-weight: bold;
   text-align: justify;
 }
@@ -92,12 +89,10 @@ div[class^=&#39;comments_list_toggle_paragraph_&#39;] {
  border-color: #ccc;
  padding: 5px;
  background-color: whitesmoke;
- width: 270px;
+ width: 300px;
 }
  
 div[class^='comment-paragraph-loading-'] {
- position: relative;
- left: 470px;
  z-index: 99;
 }
  
@@ -167,6 +162,8 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   padding: 0;
   width: 100%;
   text-align: left;
+  overflow:  visible;
+  line-break: loose;
 }
 .side-comment .comment-text p {
   margin: 0;
@@ -188,7 +185,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   padding-left: 25px;
 }
 #article .side-comment .comment-picture {
-  width: 75%;
+  width: 100%;
   height: auto;
 }
 #article .side-comment .article-comment .comment-details > h4 {
@@ -212,6 +209,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   bg-color: #b3b2d4;
 }
  
+/*
 .comment-paragraph-rowset{
   padding: 0;
   margin: 0;
@@ -225,8 +223,8 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
  
   -webkit-flex-flow: row wrap;
   justify-content: space-around;
+}*/
  
-}
 .comment-paragraph-comments{
   background: lightblue;
   padding: 5px;
@@ -235,4 +233,21 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   color: white;
   font-weight: bold;
   text-align: center;
+}
+
+.single-border{
+  border-style:  solid;
+  border-width: 2px;
+}
+
+.comment-paragraph-group-comments{
+  position: absolute;
+  background-color: white;
+  z-index: 9999;
+}
+
+.comment-paragraph-slide-left{
+  position: relative;
+  width: 80%;
+  transition: 0.6s;
 }
 \ No newline at end of file
 require File.dirname(__FILE__) + '/../test_helper'
+include ActionView::Helpers::FormTagHelper
  
 class CommentParagraphPluginTest < ActiveSupport::TestCase
  
@@ -25,4 +26,13 @@ class CommentParagraphPluginTest &lt; ActiveSupport::TestCase
     assert plugin.stylesheet?
   end
  
+  should 'not add comment_paragraph_selected_area if comment_paragraph_selected_area is blank' do
+    comment = Comment.new
+    comment.comment_paragraph_selected_area = ""
+    comment.paragraph_id = 2
+    cpp = CommentParagraphPlugin.new
+    prok = cpp.comment_form_extra_contents({:comment=>comment, :paragraph_id=>4})
+    assert_nil /comment_paragraph_selected_area/.match(prok.call.inspect)
+  end
+
 end
 <input type="hidden" value="<%=  comment.comment_paragraph_selected_area%>" class="paragraph_comment_area" />
-<input type="hidden" value="<%=  comment.paragraph_id%>" class="paragraph_id" />
+<input type="hidden" value="<%=  comment.paragraph_id%>" class="paragraph_id" /><input type="hidden" value="<%=  comment.comment_paragraph_selected_content%>" class="paragraph_selected_content" />
+<input type="hidden" value="<%=  comment.comment_paragraph_selected_content%>" class="paragraph_selected_content" />
-<ul class="comments comment-paragraph-rowset">
-  <li class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
-    <%= inner_html %>
-  </li>
-
-  <li  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
-    <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
-      <%= count %>
-    </span>
-  </li>
-  
-  <div align="center">
+<table class="comments">
+  <tr>
+    <td>
+      <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
+        <%= inner_html %>
+      </div>
+    </td>
+    <td>
+      <div  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
+        <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
+          <%= count %>
+        </span>
+      </div>
+    </td>
+    <td>
+<div class="comment-paragraph-group-comments">
      <%=
        url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
        link_to_remote(
@@ -25,10 +29,9 @@
          :'data-url' => url_for(url)
        }
      )%>
-   </div>
-  
-   <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
-     <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
+
+  <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
+     <div class="comment-paragraph-loading-<%= paragraph_id %>">
        <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
          <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
          <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
@@ -37,7 +40,13 @@
          </div>
        </div>
      </div>
-   </div>
- </ul>
+  </div>
+</div>
+    </td>
+  </tr>
+</table>
+
+
+
...	...	@@ -19,7 +19,8 @@ class CommentParagraphPlugin < Noosfero::Plugin
19	19	arr = []
20	20	arr << hidden_field_tag('comment[id]', comment.id)
21	21	arr << hidden_field_tag('comment[paragraph_id]', paragraph_id) if paragraph_id
22		- arr << hidden_field_tag('comment[comment_paragraph_selected_area]', comment.comment_paragraph_selected_area) if comment.comment_paragraph_selected_area
	22	+ arr << hidden_field_tag('comment[comment_paragraph_selected_area]', comment.comment_paragraph_selected_area) unless comment.comment_paragraph_selected_area.blank?
	23	+ arr << hidden_field_tag('comment[comment_paragraph_selected_content]', comment.comment_paragraph_selected_content) unless comment.comment_paragraph_selected_content.blank?
23	24	arr
24	25	}
25	26	end
...	...
...	...	@@ -3,14 +3,20 @@ require_dependency 'comment'
3	3	class Comment
4	4
5	5	scope :without_paragraph, :conditions => {:paragraph_id => nil }
6		-
	6	+
7	7	settings_items :comment_paragraph_selected_area, :type => :string
8		-
	8	+ settings_items :comment_paragraph_selected_content, :type => :string
	9	+
9	10	scope :in_paragraph, proc { \|paragraph_id\| {
10	11	:conditions => ['paragraph_id = ?', paragraph_id]
11	12	}
12	13	}
13	14
14		- attr_accessible :paragraph_id, :comment_paragraph_selected_area, :id
	15	+ attr_accessible :paragraph_id, :comment_paragraph_selected_area, :id, :comment_paragraph_selected_content
	16	+
	17	+ before_validation do \|comment\|
	18	+ comment.comment_paragraph_selected_area = nil if comment.comment_paragraph_selected_area.blank?
	19	+ comment.comment_paragraph_selected_content = nil if comment_paragraph_selected_content.blank?
	20	+ end
15	21
16	22	end
...	...
1	1	var comment_paragraph_anchor;
2	2	var lastSelectedArea = [];
3	3	var original_paragraphs = [];
	4	+var originalArticleHeight = 0
4	5
5	6	function setPlusIfZeroComments($){
6	7	$('.comment-count').each(function(){
...	...	@@ -15,6 +16,8 @@ jQuery(document).ready(function($) {
15	16	if($('.comment_paragraph').size() < 1)
16	17	return;
17	18
	19	+ originalArticleHeight = $('.article-body').height();
	20	+
18	21	all_paragraphs = $('.comment_paragraph');
19	22	all_paragraphs.each( function(paragraph) {
20	23	var paragraph_id = $( all_paragraphs.get(paragraph) ).attr('data-paragraph');
...	...	@@ -40,6 +43,12 @@ jQuery(document).ready(function($) {
40	43	return false;
41	44	});
42	45
	46	+ //Clears all old selected_area and selected_content after submit comment
	47	+ $('[name\|=commit]').click(function(){
	48	+ $('.selected_area').val("");
	49	+ $('.selected_content').val("");
	50	+ });
	51	+
43	52	$('#cancel-comment').die();
44	53	$(document.body).on("click", '#cancel-comment', function(){
45	54	$("div.side-comment").hide();
...	...	@@ -51,7 +60,7 @@ jQuery(document).ready(function($) {
51	60	div.addClass('opened');
52	61	}
53	62	}
54		-
	63	+
55	64	rangy.init();
56	65	cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
57	66	//Add marked text bubble
...	...	@@ -60,14 +69,27 @@ jQuery(document).ready(function($) {
60	69	<div align="center" class="triangle-right" >Comentar</div>\
61	70	</a>');
62	71
	72	+ function resizeArticle(paragraphId){
	73	+ var commentHeigh = $('#side_comment_' + paragraphId).height();
	74	+ if(commentHeigh > 0){
	75	+ $('.article-body').height(originalArticleHeight + commentHeigh + 50);
	76	+ }else{
	77	+ $('.article-body').height(originalArticleHeight);
	78	+ }
	79	+ }
63	80
64	81	$('.side-comments-counter').click(function(){
65	82	var paragraphId = $(this).data('paragraph');
66	83	hideAllCommentsExcept(paragraphId);
67	84	hideAllSelectedAreasExcept(paragraphId);
	85	+ if($('.comment-paragraph-slide-left').size()==0){
	86	+ $('.article-body').addClass('comment-paragraph-slide-left');
	87	+ $('#side_comment_' + paragraphId).show();
	88	+ }else{
	89	+ $('.article-body').removeClass('comment-paragraph-slide-left');
	90	+ $('.side-comment').hide();
	91	+ }
68	92	$('#comment-bubble').hide();
69		- $('#side_comment_' + paragraphId).toggle();
70		- $('#side_comment_' + paragraphId).find().toggle();
71	93	//Loads the comments
72	94	var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
73	95	$.ajax({
...	...	@@ -76,12 +98,16 @@ jQuery(document).ready(function($) {
76	98	}).done(function() {
77	99	var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
78	100	button.click();
	101	+ resizeArticle(paragraphId);
79	102	});
80	103	});
81	104
82	105
83	106	$('#comment-bubble').click(function(event){
84	107	$(this).hide();
	108	+ if($('.comment-paragraph-slide-left').size()==0){
	109	+ $('.article-body').addClass('comment-paragraph-slide-left');
	110	+ }
85	111	$("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
86	112	var url = $("#comment-bubble").data('url');
87	113	var paragraphId = $("#comment-bubble").data("paragraphId");
...	...	@@ -93,6 +119,7 @@ jQuery(document).ready(function($) {
93	119	}).done(function() {
94	120	var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
95	121	button.click();
	122	+ resizeArticle(paragraphId);
96	123	});
97	124	});
98	125
...	...	@@ -101,7 +128,7 @@ jQuery(document).ready(function($) {
101	128	paragraph = $(this).data('paragraph');
102	129	if(paragraph != clickedParagraph){
103	130	$(this).hide();
104		- $(this).find().hide();
	131	+ //$(this).find().hide();
105	132	}
106	133	});
107	134	}
...	...	@@ -139,6 +166,11 @@ jQuery(document).ready(function($) {
139	166	$('.comment_paragraph').mouseup(function(event) {
140	167
141	168	$('#comment-bubble').hide();
	169	+ if($('.comment-paragraph-slide-left').size() > 0){
	170	+ $('.article-body').removeClass('comment-paragraph-slide-left');
	171	+ $('.side-comment').hide();
	172	+ //$('.side-comment').find().hide();
	173	+ }
142	174
143	175	//Don't do anything if there is no selected text
144	176	if (getSelectionText().length == 0) {
...	...	@@ -164,9 +196,9 @@ jQuery(document).ready(function($) {
164	196	} catch(e) {
165	197	return;
166	198	}
	199	+ form = $('#page-comment-form-' + paragraphId).find('form');
167	200
168	201	//Register the area the has been selected at input.selected_area
169		- form = $('#page-comment-form-' + paragraphId).find('form');
170	202	if (form.find('input.selected_area').length === 0){
171	203	$('<input>').attr({
172	204	class: 'selected_area',
...	...	@@ -177,8 +209,20 @@ jQuery(document).ready(function($) {
177	209	}else{
178	210	form.find('input.selected_area').val(selected_area)
179	211	}
	212	+ //Register the content being selected at input.comment_paragraph_selected_content
	213	+ var selected_content = getSelectionText();
	214	+ if(selected_content.length > 0)
	215	+ if (form.find('input.selected_content').length === 0){
	216	+ $('<input>').attr({
	217	+ class: 'selected_content',
	218	+ type: 'hidden',
	219	+ name: 'comment[comment_paragraph_selected_content]',
	220	+ value: selected_content
	221	+ }).appendTo(form)
	222	+ }else{
	223	+ form.find('input.selected_content').val(selected_content)
	224	+ }
180	225	rootElement.focus();
181		-
182	226	});
183	227
184	228	function processAnchor(){
...	...
...	...	@@ -7,7 +7,7 @@ div.article-comments-list-more{
7	7	}
8	8
9	9	.popBox_comment_paragraph {
10		- position: absolute;
	10	+/* position: absolute;*/
11	11	z-index: 2;
12	12	background: #cccccc;
13	13	width: 60px;
...	...	@@ -34,9 +34,6 @@ div.article-comments-list-more{
34	34
35	35	.comment_paragraph{
36	36	padding: 0px;
37		- position: relative;
38		- left: -20px;
39		- width: 450px;
40	37	font-weight: bold;
41	38	text-align: justify;
42	39	}
...	...	@@ -92,12 +89,10 @@ div[class^='comments_list_toggle_paragraph_'] {
92	89	border-color: #ccc;
93	90	padding: 5px;
94	91	background-color: whitesmoke;
95		- width: 270px;
	92	+ width: 300px;
96	93	}
97	94
98	95	div[class^='comment-paragraph-loading-'] {
99		- position: relative;
100		- left: 470px;
101	96	z-index: 99;
102	97	}
103	98
...	...	@@ -167,6 +162,8 @@ div[class^='comment-paragraph-loading-'] {
167	162	padding: 0;
168	163	width: 100%;
169	164	text-align: left;
	165	+ overflow: visible;
	166	+ line-break: loose;
170	167	}
171	168	.side-comment .comment-text p {
172	169	margin: 0;
...	...	@@ -188,7 +185,7 @@ div[class^='comment-paragraph-loading-'] {
188	185	padding-left: 25px;
189	186	}
190	187	#article .side-comment .comment-picture {
191		- width: 75%;
	188	+ width: 100%;
192	189	height: auto;
193	190	}
194	191	#article .side-comment .article-comment .comment-details > h4 {
...	...	@@ -212,6 +209,7 @@ div[class^='comment-paragraph-loading-'] {
212	209	bg-color: #b3b2d4;
213	210	}
214	211
	212	+/*
215	213	.comment-paragraph-rowset{
216	214	padding: 0;
217	215	margin: 0;
...	...	@@ -225,8 +223,8 @@ div[class^='comment-paragraph-loading-'] {
225	223
226	224	-webkit-flex-flow: row wrap;
227	225	justify-content: space-around;
	226	+}*/
228	227
229		-}
230	228	.comment-paragraph-comments{
231	229	background: lightblue;
232	230	padding: 5px;
...	...	@@ -235,4 +233,21 @@ div[class^='comment-paragraph-loading-'] {
235	233	color: white;
236	234	font-weight: bold;
237	235	text-align: center;
	236	+}
	237	+
	238	+.single-border{
	239	+ border-style: solid;
	240	+ border-width: 2px;
	241	+}
	242	+
	243	+.comment-paragraph-group-comments{
	244	+ position: absolute;
	245	+ background-color: white;
	246	+ z-index: 9999;
	247	+}
	248	+
	249	+.comment-paragraph-slide-left{
	250	+ position: relative;
	251	+ width: 80%;
	252	+ transition: 0.6s;
238	253	}
239	254	\ No newline at end of file
...	...
1	1	require File.dirname(__FILE__) + '/../test_helper'
	2	+include ActionView::Helpers::FormTagHelper
2	3
3	4	class CommentParagraphPluginTest < ActiveSupport::TestCase
4	5
...	...	@@ -25,4 +26,13 @@ class CommentParagraphPluginTest < ActiveSupport::TestCase
25	26	assert plugin.stylesheet?
26	27	end
27	28
	29	+ should 'not add comment_paragraph_selected_area if comment_paragraph_selected_area is blank' do
	30	+ comment = Comment.new
	31	+ comment.comment_paragraph_selected_area = ""
	32	+ comment.paragraph_id = 2
	33	+ cpp = CommentParagraphPlugin.new
	34	+ prok = cpp.comment_form_extra_contents({:comment=>comment, :paragraph_id=>4})
	35	+ assert_nil /comment_paragraph_selected_area/.match(prok.call.inspect)
	36	+ end
	37	+
28	38	end
...	...
1	1	<input type="hidden" value="<%= comment.comment_paragraph_selected_area%>" class="paragraph_comment_area" />
2		-<input type="hidden" value="<%= comment.paragraph_id%>" class="paragraph_id" />
	2	+<input type="hidden" value="<%= comment.paragraph_id%>" class="paragraph_id" /><input type="hidden" value="<%= comment.comment_paragraph_selected_content%>" class="paragraph_selected_content" />
	3	+<input type="hidden" value="<%= comment.comment_paragraph_selected_content%>" class="paragraph_selected_content" />
...	...
1		-<ul class="comments comment-paragraph-rowset">
2		- <li class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
3		- <%= inner_html %>
4		- </li>
5		-
6		- <li align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
7		- <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
8		- <%= count %>
9		- </span>
10		- </li>
11		-
12		- <div align="center">
	1	+<table class="comments">
	2	+ <tr>
	3	+ <td>
	4	+ <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
	5	+ <%= inner_html %>
	6	+ </div>
	7	+ </td>
	8	+ <td>
	9	+ <div align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
	10	+ <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
	11	+ <%= count %>
	12	+ </span>
	13	+ </div>
	14	+ </td>
	15	+ <td>
	16	+<div class="comment-paragraph-group-comments">
13	17	<%=
14	18	url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
15	19	link_to_remote(
...	...	@@ -25,10 +29,9 @@
25	29	:'data-url' => url_for(url)
26	30	}
27	31	)%>
28		- </div>
29		-
30		- <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
31		- <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
	32	+
	33	+ <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
	34	+ <div class="comment-paragraph-loading-<%= paragraph_id %>">
32	35	<div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
33	36	<div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
34	37	<div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
...	...	@@ -37,7 +40,13 @@
37	40	</div>
38	41	</div>
39	42	</div>
40		- </div>
41		- </ul>
	43	+ </div>
	44	+</div>
	45	+ </td>
	46	+ </tr>
	47	+</table>
	48	+
	49	+
	50	+
42	51
43	52
...	...