Commit 4b876c39b7875cc308c6f4d2f99caa810d100f5b
1 parent
a944f06a
Exists in
master
and in
28 other branches
Improve layout of post comment component
Showing
8 changed files
with
53 additions
and
11 deletions
Show diff stats
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("Components", () => { |
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> | ... | ... |
... | ... | @@ -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
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 | } | ... | ... |