Commit 9bf4d4610f3a017f8cab341e0e5db0bf86632e6b
Committed by
Michel Felipe
1 parent
65c6a4ac
Exists in
master
and in
26 other branches
Improve layout of comment paragraph plugin
Showing
12 changed files
with
109 additions
and
31 deletions
Show diff stats
bower.json
src/app/article/comment/comment.html
... | ... | @@ -9,6 +9,10 @@ |
9 | 9 | <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})"> |
10 | 10 | <h4 class="media-heading">{{ctrl.comment.author.name}}</h4> |
11 | 11 | </a> |
12 | + <span class="reply-of" ng-if="ctrl.comment.reply_of"> | |
13 | + <i class="fa fa-fw fa-mail-forward"></i> | |
14 | + <span class="author">{{ctrl.comment.reply_of.author.name}}</span> | |
15 | + </span> | |
12 | 16 | <span class="date" am-time-ago="ctrl.comment.created_at | dateFormat"></span> |
13 | 17 | </div> |
14 | 18 | <div class="title">{{ctrl.comment.title}}</div> | ... | ... |
src/app/article/comment/comment.scss
... | ... | @@ -5,6 +5,7 @@ |
5 | 5 | @extend .text-muted; |
6 | 6 | @extend .small; |
7 | 7 | margin-left: 8px; |
8 | + font-size: 12px; | |
8 | 9 | } |
9 | 10 | .title { |
10 | 11 | font-weight: bold; |
... | ... | @@ -13,7 +14,18 @@ |
13 | 14 | min-width: 40px; |
14 | 15 | } |
15 | 16 | .media-body { |
16 | - padding: 0 10px 10px 10px; | |
17 | + padding: 0 10px 10px 0; | |
18 | + .reply-of { | |
19 | + font-size: 12px; | |
20 | + color: #B5B5B5; | |
21 | + margin-left: 5px; | |
22 | + i { | |
23 | + font-size: 10px; | |
24 | + } | |
25 | + } | |
26 | + h4 { | |
27 | + font-size: 16px; | |
28 | + } | |
17 | 29 | } |
18 | 30 | noosfero-profile-image { |
19 | 31 | img { | ... | ... |
src/app/index.ts
... | ... | @@ -17,7 +17,8 @@ let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCoo |
17 | 17 | "ui.router", "ui.bootstrap", "toastr", "ngCkeditor", |
18 | 18 | "angular-bind-html-compile","angularMoment", "angular.filter", "akoenig.deckgrid", |
19 | 19 | "angular-timeline", "duScroll", "oitozero.ngSweetAlert", |
20 | - "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish(); | |
20 | + "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad", | |
21 | + "angular-click-outside"]).publish(); | |
21 | 22 | |
22 | 23 | NoosferoApp.angularModule = noosferoApp; |
23 | 24 | ... | ... |
src/plugins/comment_paragraph/allow-comment/allow-comment.component.ts
... | ... | @@ -15,6 +15,7 @@ export class AllowCommentComponent { |
15 | 15 | @Input() paragraphUuid: string; |
16 | 16 | @Input() article: noosfero.Article; |
17 | 17 | commentsCount: number; |
18 | + display = false; | |
18 | 19 | |
19 | 20 | constructor(private $scope: ng.IScope, |
20 | 21 | private commentParagraphEventService: CommentParagraphEventService, |
... | ... | @@ -34,4 +35,11 @@ export class AllowCommentComponent { |
34 | 35 | return this.article.setting.comment_paragraph_plugin_activate; |
35 | 36 | } |
36 | 37 | |
38 | + showParagraphComments() { | |
39 | + this.display = true; | |
40 | + } | |
41 | + | |
42 | + hideParagraphComments() { | |
43 | + this.display = false; | |
44 | + } | |
37 | 45 | } | ... | ... |
src/plugins/comment_paragraph/allow-comment/allow-comment.html
1 | -<div class="paragraph-content" ng-bind-html="ctrl.content"></div> | |
2 | -<div ng-if="ctrl.isActivated()" class="actions"> | |
3 | - <a href="#" popover-placement="bottom" popover-trigger="outsideClick" | |
4 | - uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'" | |
5 | - ng-click="ctrl.loadComments()"> | |
6 | - <i class="fa fa-fw fa-comments"></i> <span class="count">{{ctrl.commentsCount}}</span> | |
7 | - </a> | |
1 | +<div class="paragraph" ng-class="{'active' : ctrl.display}"> | |
2 | + <div class="paragraph-content" ng-bind-html="ctrl.content" ng-class="{'active' : ctrl.display}"></div> | |
3 | + <div ng-if="ctrl.isActivated()" class="actions"> | |
4 | + <a href="#" popover-placement="right-top" popover-trigger="none" | |
5 | + uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'" | |
6 | + (click)="ctrl.showParagraphComments()" popover-is-open="ctrl.display"> | |
7 | + <div class="arrow_box" ng-class="{'active' : ctrl.display}"> | |
8 | + <span class="count">{{ctrl.commentsCount > 0 ? ctrl.commentsCount : '+'}}</span> | |
9 | + </div> | |
10 | + </a> | |
11 | + </div> | |
8 | 12 | </div> | ... | ... |
src/plugins/comment_paragraph/allow-comment/allow-comment.scss
1 | +$balloon-selected-color: #50BF68; | |
2 | +$balloon-color: #c4c4c4; | |
3 | + | |
1 | 4 | comment-paragraph-plugin-allow-comment { |
2 | - .paragraph-content { | |
3 | - width: 94%; | |
4 | - display: inline-block; | |
5 | - } | |
6 | - .actions { | |
7 | - width: 4%; | |
8 | - display: inline-block; | |
9 | - vertical-align: top; | |
5 | + .paragraph { | |
6 | + width: 100%; | |
7 | + &.active { | |
8 | + width: 80%; | |
9 | + } | |
10 | 10 | .popover { |
11 | - width: 100%; | |
11 | + &.right > .arrow { | |
12 | + } | |
13 | + } | |
14 | + .paragraph-content { | |
15 | + width: 95%; | |
16 | + display: inline-block; | |
12 | 17 | } |
13 | - .count { | |
14 | - font-size: 14px; | |
15 | - font-weight: bold; | |
16 | - color: rgb(99, 170, 204); | |
18 | + .actions { | |
19 | + width: 3%; | |
20 | + display: inline-block; | |
21 | + vertical-align: top; | |
22 | + margin-left: 10px; | |
23 | + .popover { | |
24 | + width: 100%; | |
25 | + max-width: 330px; | |
26 | + } | |
27 | + .count { | |
28 | + font-size: 14px; | |
29 | + font-weight: bold; | |
30 | + color: white; | |
31 | + text-align: center; | |
32 | + width: 100%; | |
33 | + display: inline-block; | |
34 | + } | |
35 | + .arrow_box { | |
36 | + position: relative; | |
37 | + background: $balloon-color; | |
38 | + margin-top: 5px; | |
39 | + width: 25px; | |
40 | + border-radius: 2px; | |
41 | + &:after { | |
42 | + top: 100%; | |
43 | + left: 50%; | |
44 | + border: solid transparent; | |
45 | + content: " "; | |
46 | + position: absolute; | |
47 | + pointer-events: none; | |
48 | + border-color: rgba(196, 196, 196, 0); | |
49 | + border-top-color: $balloon-color; | |
50 | + border-width: 6px; | |
51 | + margin-left: -6px; | |
52 | + } | |
53 | + &:hover, &.active { | |
54 | + background: $balloon-selected-color; | |
55 | + &:after { | |
56 | + border-top-color: $balloon-selected-color; | |
57 | + } | |
58 | + } | |
59 | + } | |
17 | 60 | } |
18 | 61 | } |
19 | 62 | } | ... | ... |
src/plugins/comment_paragraph/allow-comment/popover.html
1 | -<comment-paragraph-side-comments [article]="ctrl.article" [paragraph-uuid]="ctrl.paragraphUuid"></comment-paragraph-side-comments> | |
1 | +<comment-paragraph-side-comments id="side-comments-{{ctrl.paragraphUuid}}" click-outside="ctrl.hideParagraphComments()" [article]="ctrl.article" [paragraph-uuid]="ctrl.paragraphUuid"></comment-paragraph-side-comments> | ... | ... |
src/plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html
1 | -<a href='#' class="btn btn-default btn-xs" (click)="ctrl.activateCommentParagraph()" | |
2 | - ng-show="!ctrl.article.setting.comment_paragraph_plugin_activate">{{"comment-paragraph-pluging.activate" | translate}}</a> | |
3 | -<a href='#' class="btn btn-default btn-xs" (click)="ctrl.deactivateCommentParagraph()" | |
4 | - ng-show="ctrl.article.setting.comment_paragraph_plugin_activate">{{"comment-paragraph-pluging.deactivate" | translate}}</a> | |
1 | +<a href='#' class="btn btn-default btn-xs comment-paragraph-activate" (click)="ctrl.activateCommentParagraph()" | |
2 | + ng-if="!ctrl.article.setting.comment_paragraph_plugin_activate"> | |
3 | + <i class="fa fa-fw fa-plus"></i> {{"comment-paragraph-plugin.title" | translate}} | |
4 | +</a> | |
5 | +<a href='#' class="btn btn-default btn-xs comment-paragraph-deactivate" (click)="ctrl.deactivateCommentParagraph()" | |
6 | + ng-if="ctrl.article.setting.comment_paragraph_plugin_activate"> | |
7 | + <i class="fa fa-fw fa-minus"></i> {{"comment-paragraph-plugin.title" | translate}} | |
8 | +</a> | ... | ... |
src/plugins/comment_paragraph/languages/en.json
src/plugins/comment_paragraph/languages/pt.json