comment_paragraph: improve layout and usability

Victor Costa
1 parent 1fc7ae9f
Showing 3 changed files with 136 additions and 91 deletions Show diff stats
public/comment_paragraph_macro.js
public/style.css
views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
@@ -29,7 +29,7 @@ jQuery(document).ready(function($) {
     // on press ESC key...
     if (e.which == 27) {
       // closing side comment box
-      $("div.side-comment").hide();
+      hideCommentBox();
     }
   });
@@ -51,9 +51,16 @@ jQuery(document).ready(function($) {
   $('#cancel-comment').die();
   $(document.body).on("click", '#cancel-comment', function(){
-    $("div.side-comment").hide();
+    hideCommentBox();
+    return false;
   });
+  function hideCommentBox() {
+    $("div.side-comment").hide();
+    $('.article-body').removeClass('comment-paragraph-slide-left');
+    $('.comments').removeClass('selected');
+  }
+
   function showBox(div){
     if(div.hasClass('closed')) {
       div.removeClass('closed');
@@ -65,31 +72,19 @@ jQuery(document).ready(function($) {
   cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
   //Add marked text bubble
   $("body").append('\
-      <a id="comment-bubble" style="width:90px;text-decoration: none">\
+      <a id="comment-bubble">\
           <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();
+    hideCommentBox();
+    $(this).closest('.comments').addClass('selected');
+    $('.article-body').addClass('comment-paragraph-slide-left');
+    $('#side_comment_' + paragraphId).show();
+    $('#comment-bubble').removeClass('visible');
     //Loads the comments
     var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
     $.ajax({
@@ -98,7 +93,6 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
-      resizeArticle(paragraphId);
     });
   });
@@ -108,7 +102,6 @@ jQuery(document).ready(function($) {
     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");
     hideAllCommentsExcept(paragraphId);
@@ -119,7 +112,6 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
-      resizeArticle(paragraphId);
     });
   });
@@ -142,8 +134,6 @@ jQuery(document).ready(function($) {
     });
   }
-  $("#comment-bubble").hide();
-
   function getSelectionText() {
     var text = "";
     if (window.getSelection) {
@@ -157,19 +147,15 @@ jQuery(document).ready(function($) {
   function setCommentBubblePosition(posX, posY) {
     $("#comment-bubble").css({
       top: (posY - 80),
-      left: (posX - 70),
-      position:'absolute'
+      left: (posX - 70)
     });
   }
   //highlight area from the paragraph
   $('.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();
+      hideCommentBox();
     }
     //Don't do anything if there is no selected text
@@ -185,7 +171,7 @@ jQuery(document).ready(function($) {
     var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
     $("#comment-bubble").data("url", url);
     $("#comment-bubble").data("paragraphId", paragraphId);
-    $("#comment-bubble").show();
+    $("#comment-bubble").addClass('visible');
     var rootElement = $(this).get(0);
+#comment-bubble.visible {
+  visibility: visible;
+}
+#comment-bubble {
+  transition: top 0.15s ease-in-out;
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 90px;
+  text-decoration: none;
+  visibility: hidden;
+}
+
 div.article-comments-list-more{
   width: 100%;
-  height: 30px;
   text-align: center;
   font-size: 20px;
   margin-bottom: 5px;
 }
 .popBox_comment_paragraph {
-/*  position: absolute;*/
   z-index: 2;
   background: #cccccc;
   width: 60px;
@@ -33,9 +44,8 @@ div.article-comments-list-more{
 }
 .comment_paragraph{
-  padding: 0px;
-  font-weight: bold;
-  text-align: justify;
+  display: table-cell;
+  width: 97%;
 }
 .triangle-right {
@@ -45,13 +55,14 @@ div.article-comments-list-more{
   color:#fff;
   background:#075698; /* default background for browsers without gradient support */
   /* css3 */
-  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
-  background:-moz-linear-gradient(#2e88c4, #075698);
-  background:-o-linear-gradient(#2e88c4, #075698);
-  background:linear-gradient(#2e88c4, #075698);
+  background:-webkit-gradient(linear, 0 0, 0 100%, from(#ababab), to(#424242));
+  background:-moz-linear-gradient(#ABABAB, #424242);
+  background:-o-linear-gradient(#ABABAB, #424242);
+  background: linear-gradient(#ABABAB, #424242);
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
+  font-weight: bold;
 }
 .triangle-right:after {
@@ -61,7 +72,7 @@ div.article-comments-list-more{
   left: 50px;
   border-width: 20px 0 0 20px;
   border-style: solid;
-  border-color: #075698 transparent;
+  border-color: #424242 transparent;
   display: block;
   width: 0;
 }
@@ -83,6 +94,8 @@ div.article-comments-list-more{
   width: 150px;
   right: 0;
   top: 0;
+  zoom: 0.8;
+  -moz-transform: scale(0.8);
 }
 .side-comment .comment-created-at{display: none;}
@@ -93,10 +106,10 @@ div.article-comments-list-more{
 div[class^='comments_list_toggle_paragraph_'] {
  border-style: solid;
  border-width: 1px;
- border-color: #ccc;
+ border-color: #e7e7e7;
  padding: 5px;
  background-color: whitesmoke;
- width: 300px;
+ width: 280px;
 }
 div[class^='comment-paragraph-loading-'] {
@@ -109,6 +122,13 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
 .side-comment{
   z-index: 199;
+  box-shadow: 0px 0px 20px #b8b8b8;
+}
+
+.side-comments-counter-container {
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 10px;
 }
 .side-comments-counter {
@@ -116,26 +136,43 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   width: 20px;
   height: 19px;
   padding: 0px;
-  background: #b3b2d4;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
+  background: #b5b5b5;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   cursor: pointer;
   z-index: 1;
+  display: inline-block;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+  opacity: 0.7;
 }
-.side-comments-counter:hover{
-  color: white;
+.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 {
+  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;
   bottom: -9px;
-  left: 8px;
+  left: 5px;
   border-style: solid;
-  border-width: 12px 5px 0;
-  border-color: #b3b2d4 transparent;
+  border-width: 10px 5px 0;
+  border-color: #bdbdbd transparent;
   display: block;
   width: 0;
 }
@@ -145,7 +182,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   top: 3px;
 }
-.article-comment-inner {border-bottom: 1px solid #ddd;}
+.article-comment-inner {border-bottom: 1px solid #ececec;}
 #article .side-comment .comment-replies .article-comment{background: white; border: 0px; border-top: 1px solid #ddd;}
@@ -157,6 +194,10 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
 #article .side-comment .article-comments-list {
   margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 400px;
+  border-bottom: 1px solid rgb(240, 240, 240);
 }
 #article .side-comment .article-comments-list .article-comment {
   margin: 0;
@@ -170,6 +211,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   width: 98%;
   text-align: justify;
   overflow:  visible;
+  color: rgb(107, 107, 107);
 }
 .side-comment .comment-text p {
   margin: 0;
@@ -183,6 +225,8 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   left: 36px;
   line-height: 0;
   font-weight: bold;
+  font-size: 12px;
+  color: rgb(80, 80, 80);
 }
 .side-comment .comment-wrapper-1 {
   margin-left: 36px;
@@ -193,6 +237,8 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
 #article .side-comment .comment-picture {
   width: 100%;
   height: auto;
+  margin-top: 8px;
+  max-width: none;
 }
 #article .side-comment .article-comment .comment-details > h4 {
   display: none;
@@ -215,21 +261,9 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   bg-color: #b3b2d4;
 }
-/*
-.comment-paragraph-rowset{
-  padding: 0;
-  margin: 0;
-  list-style: none;
-
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-
-  -webkit-flex-flow: row wrap;
-  justify-content: space-around;
-}*/
+.side-comment textarea {
+  height: 50px;
+}
 .comment-paragraph-comments{
   background: lightblue;
@@ -246,14 +280,43 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   border-width: 2px;
 }
+.comment-paragraph-slide-left .comments {
+  position: relative;
+  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: 0px;
   background-color: white;
-  z-index: 9999;
+  z-index: 199;
 }
-.comment-paragraph-slide-left{
+.article-body.comment-paragraph-slide-left {
   position: relative;
   width: 80%;
-  transition: 0.6s;
+}
+.article-body {
+  width: 100%;
+  transition: width 0.3s ease-in-out;
+}
+
+.comment-paragraph-plugin .post_comment_box {
+  text-align: center;
+  padding: 5px 5px 0 5px;
+}
+.comment-paragraph-plugin .comment-details .menu-submenu {
+  right: 21px;
+  top: -1px;
+}
+
+.comment-paragraph-plugin .comment_reply.post_comment_box form {
+  padding-left: 0;
+  padding-right: 10px;
+  margin-left: -36px;
 }
-<table class="comments">
-  <tr>
-    <td>
-      <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>">
-        <%= inner_html %>
-      </div>
-    </td>
-    <td>
-      <div  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_uuid %>"  data-paragraph="<%= paragraph_uuid %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
-        <span id="comment-count-<%= paragraph_uuid %>" class='comment-count'>
-          <%= count %>
-        </span>
-      </div>
-    </td>
-    <td>
+<div class="comment-paragraph-plugin comments">
+  <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>">
+    <%= inner_html %>
+  </div>
+  <div class="side-comments-counter-container">
+    <div class="side-comments-counter" id="side_comments_counter_<%= paragraph_uuid %>"  data-paragraph="<%= paragraph_uuid %>">
+      <span id="comment-count-<%= paragraph_uuid %>" class='comment-count'>
+        <%= count %>
+      </span>
+    </div>
+  </div>
 <div class="comment-paragraph-group-comments">
      <%=
        url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_uuid => paragraph_uuid, :article_id => article_id}
@@ -33,7 +29,9 @@
   <div class="side-comment" id="side_comment_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>" style="display:none">
      <div class="comment-paragraph-loading-<%= paragraph_uuid %>">
        <div class="comments_list_toggle_paragraph_<%= paragraph_uuid %>" >
-         <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_uuid %>"></div>
+         <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_uuid %>">
+           <div class="loading"></div>
+         </div>
          <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_uuid %>_more"></div>
          <div id="page-comment-form-<%= paragraph_uuid %>" class='post_comment_box closed'>
            <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_uuid => paragraph_uuid}%>
@@ -42,9 +40,7 @@
      </div>
   </div>
 </div>
-    </td>
-  </tr>
-</table>
+</div>