From 4b876c39b7875cc308c6f4d2f99caa810d100f5b Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Mon, 4 Apr 2016 11:06:03 -0300
Subject: [PATCH] Improve layout of post comment component

---
 src/app/article/article-default-view-component.spec.ts              |  6 ++++--
 src/app/article/comment/comments.component.spec.ts                  |  7 ++++---
 src/app/article/comment/post-comment/post-comment.component.spec.ts |  4 +++-
 src/app/article/comment/post-comment/post-comment.component.ts      |  8 ++++++--
 src/app/article/comment/post-comment/post-comment.html              | 15 ++++++++++++---
 src/app/article/comment/post-comment/post-comment.scss              | 22 ++++++++++++++++++++++
 src/languages/en.json                                               |  1 +
 src/languages/pt.json                                               |  1 +
 8 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 src/app/article/comment/post-comment/post-comment.scss

diff --git a/src/app/article/article-default-view-component.spec.ts b/src/app/article/article-default-view-component.spec.ts
index 2ea2258..ec15d31 100644
--- a/src/app/article/article-default-view-component.spec.ts
+++ b/src/app/article/article-default-view-component.spec.ts
@@ -27,7 +27,8 @@ describe("Components", () => {
                 providers: [
                     helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
                     helpers.provideFilters("translateFilter"),
-                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
                 ]
             })
             class ArticleContainerComponent {
@@ -64,7 +65,8 @@ describe("Components", () => {
                 providers: [
                     helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
                     helpers.provideFilters("translateFilter"),
-                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
                 ]
             })
             class ArticleContainerComponent {
diff --git a/src/app/article/comment/comments.component.spec.ts b/src/app/article/comment/comments.component.spec.ts
index d3a3dfe..a190788 100644
--- a/src/app/article/comment/comments.component.spec.ts
+++ b/src/app/article/comment/comments.component.spec.ts
@@ -18,11 +18,12 @@ describe("Components", () => {
             .and.returnValue(helpers.mocks.promiseResultTemplate({ data: comments }));
 
         let providers = [
-            new Provider('CommentService', { useValue: commentService }),
-            new Provider('NotificationService', { useValue: helpers.mocks.notificationService })
+            helpers.createProviderToValue('CommentService', commentService),
+            helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+            helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
         ].concat(helpers.provideFilters("translateFilter"));
 
-        let properties = { article: { id: 1 }, parent: null };
+        let properties = { article: { id: 1 }, parent: <any>null };
         function createComponent() {
             return helpers.quickCreateComponent({
                 providers: providers,
diff --git a/src/app/article/comment/post-comment/post-comment.component.spec.ts b/src/app/article/comment/post-comment/post-comment.component.spec.ts
index b981aca..498a42b 100644
--- a/src/app/article/comment/post-comment/post-comment.component.spec.ts
+++ b/src/app/article/comment/post-comment/post-comment.component.spec.ts
@@ -11,9 +11,11 @@ describe("Components", () => {
         beforeEach(angular.mock.module("templates"));
 
         let commentService = jasmine.createSpyObj("commentService", ["createInArticle"]);
+        let user = {};
         let providers = [
             new Provider('CommentService', { useValue: commentService }),
-            new Provider('NotificationService', { useValue: helpers.mocks.notificationService })
+            new Provider('NotificationService', { useValue: helpers.mocks.notificationService }),
+            new Provider('SessionService', { useValue: helpers.mocks.sessionWithCurrentUser(user) })
         ].concat(helpers.provideFilters("translateFilter"));
 
         @Component({ selector: 'test-container-component', directives: [PostCommentComponent], template: htmlTemplate, providers: providers })
diff --git a/src/app/article/comment/post-comment/post-comment.component.ts b/src/app/article/comment/post-comment/post-comment.component.ts
index 1bbc5eb..3a3b2b0 100644
--- a/src/app/article/comment/post-comment/post-comment.component.ts
+++ b/src/app/article/comment/post-comment/post-comment.component.ts
@@ -1,12 +1,13 @@
 import { Inject, Input, Component } from 'ng-forward';
 import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service";
 import { NotificationService } from "../../../shared/services/notification.service";
+import { SessionService } from "../../../login";
 
 @Component({
     selector: 'noosfero-post-comment',
     templateUrl: 'app/article/comment/post-comment/post-comment.html'
 })
-@Inject(CommentService, NotificationService, "$scope")
+@Inject(CommentService, NotificationService, "$scope", SessionService)
 export class PostCommentComponent {
 
     public static EVENT_COMMENT_RECEIVED = "comment.received";
@@ -15,8 +16,11 @@ export class PostCommentComponent {
     @Input() parent: noosfero.Comment;
 
     comment = <noosfero.Comment>{};
+    private currentUser: noosfero.User;
 
-    constructor(private commentService: CommentService, private notificationService: NotificationService, private $scope: ng.IScope) { }
+    constructor(private commentService: CommentService, private notificationService: NotificationService, private $scope: ng.IScope, private session: SessionService) {
+        this.currentUser = this.session.currentUser();
+    }
 
     save() {
         if (this.parent && this.comment) {
diff --git a/src/app/article/comment/post-comment/post-comment.html b/src/app/article/comment/post-comment/post-comment.html
index 5d4f1b9..642680e 100644
--- a/src/app/article/comment/post-comment/post-comment.html
+++ b/src/app/article/comment/post-comment/post-comment.html
@@ -1,6 +1,15 @@
-<form>
+<form class="clearfix post-comment">
   <div class="form-group">
-    <textarea class="form-control custom-control" rows="3" ng-model="ctrl.comment.body"></textarea>
+    <div class="comment media">
+      <div class="media-left">
+        <a ui-sref="main.profile.home({profile: ctrl.currentUser.person.identifier})">
+          <noosfero-profile-image [profile]="ctrl.currentUser.person"></noosfero-profile-image>
+        </a>
+      </div>
+      <div class="media-body">
+        <textarea class="form-control custom-control" rows="1" ng-model="ctrl.comment.body" placeholder="{{'comment.post.placeholder' | translate}}"></textarea>
+        <button ng-show="ctrl.comment.body" type="submit" class="btn btn-default pull-right ng-hide" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
+      </div>
+    </div>
   </div>
-  <button type="submit" class="btn btn-default" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
 </form>
diff --git a/src/app/article/comment/post-comment/post-comment.scss b/src/app/article/comment/post-comment/post-comment.scss
new file mode 100644
index 0000000..88b3816
--- /dev/null
+++ b/src/app/article/comment/post-comment/post-comment.scss
@@ -0,0 +1,22 @@
+.comments {
+  .post-comment {
+    .media {
+      border-top: 2px solid #F3F3F3;
+      .media-left {
+        padding: 10px 0;
+      }
+      .media-body {
+        background-color: transparent;
+      }
+      button {
+        margin-top: 10px;
+        &.ng-hide-add {
+          animation: 0.5s lightSpeedOut ease;
+        }
+        &.ng-hide-remove {
+          animation: 0.5s lightSpeedIn ease;
+        }
+      }
+    }
+  }
+}
diff --git a/src/languages/en.json b/src/languages/en.json
index ef47462..c5bcc1f 100644
--- a/src/languages/en.json
+++ b/src/languages/en.json
@@ -31,5 +31,6 @@
   "notification.http_error.401.message": "Unauthorized",
   "notification.http_error.500.message": "Server error",
   "comment.post": "Post a comment",
+  "comment.post.placeholder": "Join the discussion...",
   "comment.reply": "reply"
 }
diff --git a/src/languages/pt.json b/src/languages/pt.json
index c0f4277..7236d81 100644
--- a/src/languages/pt.json
+++ b/src/languages/pt.json
@@ -31,5 +31,6 @@
   "notification.http_error.401.message": "Não autorizado",
   "notification.http_error.500.message": "Erro no servidor",
   "comment.post": "Commentar",
+  "comment.post.placeholder": "Participe da discussão...",
   "comment.reply": "responder"
 }
--
libgit2 0.21.2