From 4babb0b1df16b8f152ac137740773cccfda3005b Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Wed, 21 Jan 2015 15:46:36 -0300
Subject: [PATCH] comment_paragraph: improve layout and usability

---
 plugins/comment_paragraph/public/comment_paragraph_macro.js                                  | 13 ++-----------
 plugins/comment_paragraph/public/style.css                                                   | 27 ++++++++++++++++++++++-----
 plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb |  6 ++++--
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/plugins/comment_paragraph/public/comment_paragraph_macro.js b/plugins/comment_paragraph/public/comment_paragraph_macro.js
index 86ccb31..1ea4e06 100644
--- a/plugins/comment_paragraph/public/comment_paragraph_macro.js
+++ b/plugins/comment_paragraph/public/comment_paragraph_macro.js
@@ -58,6 +58,7 @@ jQuery(document).ready(function($) {
   function hideCommentBox() {
     $("div.side-comment").hide();
     $('.article-body').removeClass('comment-paragraph-slide-left');
+    $('.comments').removeClass('selected');
   }
 
   function showBox(div){
@@ -75,20 +76,12 @@ 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);
     hideCommentBox();
+    $(this).closest('.comments').addClass('selected');
     $('.article-body').addClass('comment-paragraph-slide-left');
     $('#side_comment_' + paragraphId).show();
     $('#comment-bubble').removeClass('visible');
@@ -100,7 +93,6 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
-      resizeArticle(paragraphId);
     });
   });
 
@@ -120,7 +112,6 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
-      resizeArticle(paragraphId);
     });
   });
 
diff --git a/plugins/comment_paragraph/public/style.css b/plugins/comment_paragraph/public/style.css
index 88d20c3..777d8be 100644
--- a/plugins/comment_paragraph/public/style.css
+++ b/plugins/comment_paragraph/public/style.css
@@ -134,7 +134,7 @@ div[class^='comment-paragraph-loading-'] {
   width: 20px;
   height: 19px;
   padding: 0px;
-  background: #b8b8b8;
+  background: #b5b5b5;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
@@ -144,15 +144,25 @@ div[class^='comment-paragraph-loading-'] {
   font-weight: bold;
   color: white;
   text-align: center;
+  opacity: 0.7;
 }
 
-.side-comments-counter:hover{
+.comment-paragraph-plugin .loading {
+  height: 40px;
+  background-position: center 0;
+}
+
+.side-comments-counter:hover {
   background-color: rgb(117, 192, 117);
 }
-.side-comments-counter:hover:after{
+.side-comments-counter:hover:after {
   border-color: rgb(117, 192, 117) transparent;
 }
 
+.comments.selected .side-comments-counter, .comments.selected .side-comments-counter:after {
+  opacity: 1;
+}
+
 .side-comments-counter:after {
   content: "";
   position: absolute;
@@ -182,6 +192,9 @@ div[class^='comment-paragraph-loading-'] {
 
 #article .side-comment .article-comments-list {
   margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 400px;
 }
 #article .side-comment .article-comments-list .article-comment {
   margin: 0;
@@ -269,12 +282,16 @@ div[class^='comment-paragraph-loading-'] {
   display: table;
 }
 
+.comments .comment_paragraph:hover, .comments.selected .comment_paragraph {
+  background-color: rgb(236, 236, 236);
+}
+
 .comment-paragraph-group-comments{
   position: absolute;
   right: -296px;
-  top: 12px;
+  top: 0px;
   background-color: white;
-  z-index: 9999;
+  z-index: 199;
 }
 
 .article-body.comment-paragraph-slide-left {
diff --git a/plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb b/plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
index 2fd3474..1cad3b9 100644
--- a/plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
+++ b/plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -1,4 +1,4 @@
-<div class="comments">
+<div class="comment-paragraph-plugin comments">
   <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
     <%= inner_html %>
   </div>
@@ -29,7 +29,9 @@
   <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" id="comments_list_paragraph_<%= paragraph_id %>">
+           <div class="loading"></div>
+         </div>
          <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
          <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
            <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
--
libgit2 0.21.2