Limit comments identation and display replied comment in tooltip

Victor Costa · Michel Felipe
1 parent 4840baa9
Showing 4 changed files with 28 additions and 5 deletions Show diff stats
src/app/article/comment/comment-reply-tooltip.html
src/app/article/comment/comment.component.ts
src/app/article/comment/comment.html
src/app/article/comment/comment.scss
@@ -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>
@@ -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;
@@ -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>
@@ -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;
+        }
+      }
     }
   }
 }
@@ -0,0 +1,3 @@		@@ -0,0 +1,3 @@
	1	+<div class="reply-tooltip">
	2	+ <noosfero-comment [comment]="ctrl.comment.reply_of" [article]="ctrl.article" [display-actions]="false" [display-replies]="false"></noosfero-comment>
	3	+</div>
	@@ -9,6 +9,8 @@ export class CommentComponent {		@@ -9,6 +9,8 @@ export class CommentComponent {
9		9
10	@Input() comment: noosfero.CommentViewModel;	10	@Input() comment: noosfero.CommentViewModel;
11	@Input() article: noosfero.Article;	11	@Input() article: noosfero.Article;
		12	+ @Input() displayActions = true;
		13	+ @Input() displayReplies = true;
12		14
13	showReply() {	15	showReply() {
14	return this.comment && this.comment.__show_reply === true;	16	return this.comment && this.comment.__show_reply === true;
	@@ -39,8 +39,24 @@		@@ -39,8 +39,24 @@
39	font-size: 1.7em;	39	font-size: 1.7em;
40	}	40	}
41	}	41	}
		42	+ // Limit identation of replies
42	.comments {	43	.comments {
43	margin-left: 30px;	44	margin-left: 30px;
		45	+ .comments .comments {
		46	+ margin-left: 0px;
		47	+ .comment {
		48	+ margin-left: 0px;
		49	+ }
		50	+ }
		51	+ }
		52	+ .tooltip-inner {
		53	+ max-width: 350px;
		54	+ text-align: left;
		55	+ .reply-tooltip {
		56	+ .comment {
		57	+ margin: 5px;
		58	+ }
		59	+ }
44	}	60	}
45	}	61	}
46	}	62	}