From 800e255949a10b0656b308d7966e3610a84e586c Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Mon, 18 Apr 2016 10:35:45 -0300
Subject: [PATCH] Limit comments identation and display replied comment in tooltip

---
 src/app/article/comment/comment-reply-tooltip.html |  3 +++
 src/app/article/comment/comment.component.ts       |  2 ++
 src/app/article/comment/comment.html               | 12 +++++++-----
 src/app/article/comment/comment.scss               | 16 ++++++++++++++++
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 src/app/article/comment/comment-reply-tooltip.html

diff --git a/src/app/article/comment/comment-reply-tooltip.html b/src/app/article/comment/comment-reply-tooltip.html
new file mode 100644
index 0000000..6348c60
--- /dev/null
+++ b/src/app/article/comment/comment-reply-tooltip.html
@@ -0,0 +1,3 @@
+<div class="reply-tooltip">
+  <noosfero-comment [comment]="ctrl.comment.reply_of" [article]="ctrl.article" [display-actions]="false" [display-replies]="false"></noosfero-comment>
+</div>
diff --git a/src/app/article/comment/comment.component.ts b/src/app/article/comment/comment.component.ts
index a6092f5..c3094c0 100644
--- a/src/app/article/comment/comment.component.ts
+++ b/src/app/article/comment/comment.component.ts
@@ -9,6 +9,8 @@ export class CommentComponent {
 
     @Input() comment: noosfero.CommentViewModel;
     @Input() article: noosfero.Article;
+    @Input() displayActions = true;
+    @Input() displayReplies = true;
 
     showReply() {
         return this.comment && this.comment.__show_reply === true;
diff --git a/src/app/article/comment/comment.html b/src/app/article/comment/comment.html
index 0b40fce..893d5d1 100644
--- a/src/app/article/comment/comment.html
+++ b/src/app/article/comment/comment.html
@@ -9,7 +9,7 @@
       <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
         <h4 class="media-heading">{{ctrl.comment.author.name}}</h4>
       </a>
-      <span class="reply-of" ng-if="ctrl.comment.reply_of">
+      <span class="reply-of" ng-if="ctrl.comment.reply_of" uib-tooltip-template="'app/article/comment/comment-reply-tooltip.html'">
         <i class="fa fa-fw fa-mail-forward"></i>
         <span class="author">{{ctrl.comment.reply_of.author.name}}</span>
       </span>
@@ -17,9 +17,11 @@
     </div>
     <div class="title">{{ctrl.comment.title}}</div>
     <div class="body">{{ctrl.comment.body}}</div>
-    <a href="#" (click)="ctrl.reply()" class="small text-muted">
-      {{"comment.reply" | translate}}
-    </a>
+    <div class="actions" ng-if="ctrl.displayActions">
+      <a href="#" (click)="ctrl.reply()" class="small text-muted">
+        {{"comment.reply" | translate}}
+      </a>
+    </div>
   </div>
-  <noosfero-comments [show-form]="ctrl.showReply()" [article]="ctrl.article" [parent]="ctrl.comment"></noosfero-comments>
+  <noosfero-comments [show-form]="ctrl.showReply" [article]="ctrl.article" [parent]="ctrl.comment" ng-if="ctrl.displayReplies"></noosfero-comments>
 </div>
diff --git a/src/app/article/comment/comment.scss b/src/app/article/comment/comment.scss
index 3b7350e..246c178 100644
--- a/src/app/article/comment/comment.scss
+++ b/src/app/article/comment/comment.scss
@@ -39,8 +39,24 @@
         font-size: 1.7em;
       }
     }
+    // Limit identation of replies
     .comments {
       margin-left: 30px;
+      .comments .comments {
+        margin-left: 0px;
+        .comment {
+          margin-left: 0px;
+        }
+      }
+    }
+    .tooltip-inner {
+      max-width: 350px;
+      text-align: left;
+      .reply-tooltip {
+        .comment {
+          margin: 5px;
+        }
+      }
     }
   }
 }
--
libgit2 0.21.2