Commit 4b876c39b7875cc308c6f4d2f99caa810d100f5b

Authored by Victor Costa
1 parent a944f06a

Improve layout of post comment component

src/app/article/article-default-view-component.spec.ts
... ... @@ -27,7 +27,8 @@ describe("Components", () => {
27 27 providers: [
28 28 helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
29 29 helpers.provideFilters("translateFilter"),
30   - helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
  30 + helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
  31 + helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
31 32 ]
32 33 })
33 34 class ArticleContainerComponent {
... ... @@ -64,7 +65,8 @@ describe("Components", () => {
64 65 providers: [
65 66 helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
66 67 helpers.provideFilters("translateFilter"),
67   - helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
  68 + helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
  69 + helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
68 70 ]
69 71 })
70 72 class ArticleContainerComponent {
... ...
src/app/article/comment/comments.component.spec.ts
... ... @@ -18,11 +18,12 @@ describe("Components", () => {
18 18 .and.returnValue(helpers.mocks.promiseResultTemplate({ data: comments }));
19 19  
20 20 let providers = [
21   - new Provider('CommentService', { useValue: commentService }),
22   - new Provider('NotificationService', { useValue: helpers.mocks.notificationService })
  21 + helpers.createProviderToValue('CommentService', commentService),
  22 + helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
  23 + helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
23 24 ].concat(helpers.provideFilters("translateFilter"));
24 25  
25   - let properties = { article: { id: 1 }, parent: null };
  26 + let properties = { article: { id: 1 }, parent: <any>null };
26 27 function createComponent() {
27 28 return helpers.quickCreateComponent({
28 29 providers: providers,
... ...
src/app/article/comment/post-comment/post-comment.component.spec.ts
... ... @@ -11,9 +11,11 @@ describe(&quot;Components&quot;, () =&gt; {
11 11 beforeEach(angular.mock.module("templates"));
12 12  
13 13 let commentService = jasmine.createSpyObj("commentService", ["createInArticle"]);
  14 + let user = {};
14 15 let providers = [
15 16 new Provider('CommentService', { useValue: commentService }),
16   - new Provider('NotificationService', { useValue: helpers.mocks.notificationService })
  17 + new Provider('NotificationService', { useValue: helpers.mocks.notificationService }),
  18 + new Provider('SessionService', { useValue: helpers.mocks.sessionWithCurrentUser(user) })
17 19 ].concat(helpers.provideFilters("translateFilter"));
18 20  
19 21 @Component({ selector: 'test-container-component', directives: [PostCommentComponent], template: htmlTemplate, providers: providers })
... ...
src/app/article/comment/post-comment/post-comment.component.ts
1 1 import { Inject, Input, Component } from 'ng-forward';
2 2 import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service";
3 3 import { NotificationService } from "../../../shared/services/notification.service";
  4 +import { SessionService } from "../../../login";
4 5  
5 6 @Component({
6 7 selector: 'noosfero-post-comment',
7 8 templateUrl: 'app/article/comment/post-comment/post-comment.html'
8 9 })
9   -@Inject(CommentService, NotificationService, "$scope")
  10 +@Inject(CommentService, NotificationService, "$scope", SessionService)
10 11 export class PostCommentComponent {
11 12  
12 13 public static EVENT_COMMENT_RECEIVED = "comment.received";
... ... @@ -15,8 +16,11 @@ export class PostCommentComponent {
15 16 @Input() parent: noosfero.Comment;
16 17  
17 18 comment = <noosfero.Comment>{};
  19 + private currentUser: noosfero.User;
18 20  
19   - constructor(private commentService: CommentService, private notificationService: NotificationService, private $scope: ng.IScope) { }
  21 + constructor(private commentService: CommentService, private notificationService: NotificationService, private $scope: ng.IScope, private session: SessionService) {
  22 + this.currentUser = this.session.currentUser();
  23 + }
20 24  
21 25 save() {
22 26 if (this.parent && this.comment) {
... ...
src/app/article/comment/post-comment/post-comment.html
1   -<form>
  1 +<form class="clearfix post-comment">
2 2 <div class="form-group">
3   - <textarea class="form-control custom-control" rows="3" ng-model="ctrl.comment.body"></textarea>
  3 + <div class="comment media">
  4 + <div class="media-left">
  5 + <a ui-sref="main.profile.home({profile: ctrl.currentUser.person.identifier})">
  6 + <noosfero-profile-image [profile]="ctrl.currentUser.person"></noosfero-profile-image>
  7 + </a>
  8 + </div>
  9 + <div class="media-body">
  10 + <textarea class="form-control custom-control" rows="1" ng-model="ctrl.comment.body" placeholder="{{'comment.post.placeholder' | translate}}"></textarea>
  11 + <button ng-show="ctrl.comment.body" type="submit" class="btn btn-default pull-right ng-hide" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
  12 + </div>
  13 + </div>
4 14 </div>
5   - <button type="submit" class="btn btn-default" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
6 15 </form>
... ...
src/app/article/comment/post-comment/post-comment.scss 0 → 100644
... ... @@ -0,0 +1,22 @@
  1 +.comments {
  2 + .post-comment {
  3 + .media {
  4 + border-top: 2px solid #F3F3F3;
  5 + .media-left {
  6 + padding: 10px 0;
  7 + }
  8 + .media-body {
  9 + background-color: transparent;
  10 + }
  11 + button {
  12 + margin-top: 10px;
  13 + &.ng-hide-add {
  14 + animation: 0.5s lightSpeedOut ease;
  15 + }
  16 + &.ng-hide-remove {
  17 + animation: 0.5s lightSpeedIn ease;
  18 + }
  19 + }
  20 + }
  21 + }
  22 +}
... ...
src/languages/en.json
... ... @@ -31,5 +31,6 @@
31 31 "notification.http_error.401.message": "Unauthorized",
32 32 "notification.http_error.500.message": "Server error",
33 33 "comment.post": "Post a comment",
  34 + "comment.post.placeholder": "Join the discussion...",
34 35 "comment.reply": "reply"
35 36 }
... ...
src/languages/pt.json
... ... @@ -31,5 +31,6 @@
31 31 "notification.http_error.401.message": "Não autorizado",
32 32 "notification.http_error.500.message": "Erro no servidor",
33 33 "comment.post": "Commentar",
  34 + "comment.post.placeholder": "Participe da discussão...",
34 35 "comment.reply": "responder"
35 36 }
... ...