Download as
Browse Code »

Commit 9bf4d4610f3a017f8cab341e0e5db0bf86632e6b

Authored by Victor Costa
Committed by Michel Felipe
1 parent 65c6a4ac
Exists in master and in 26 other branches activities_block, btn-new-post, cosmetic_changes_people_and_communities_block, edit-blocks, edit-header-footer, env-tags-block, forgot_password, layout_support, list_articles_on_blog, loading-indicator-component, login_modal, login_modal_improve, person_info_block, profile-article-resolvers, profile-blocks-sass, profile_description_block_component, profile_page_improvements, recent-activities, remove-article-confirmation, skin-small-change, staging, tags-block, theme-skin-yellow, translations, updated_signup_page, users_profile_page

Improve layout of comment paragraph plugin

Showing 12 changed files with 109 additions and 31 deletions   Show diff stats
bower.json
  Diff comments   View file @9bf4d46
... ... @@ -36,6 +36,7 @@
36 36 "angular-load": "^0.4.1",
37 37 "angular-translate-interpolation-messageformat": "^2.10.0",
38 38 "angular-bind-html-compile": "^1.2.1",
  39 + "angular-click-outside": "^2.7.1",
39 40 "ng-ckeditor": "^0.2.1",
40 41 "ckeditor": "^4.5.8"
41 42 },
... ...
src/app/article/comment/comment.html
  Diff comments   View file @9bf4d46
... ... @@ -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
  Diff comments   View file @9bf4d46
... ... @@ -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
  Diff comments   View file @9bf4d46
... ... @@ -17,7 +17,8 @@ let noosferoApp: any = bundle(&quot;noosferoApp&quot;, MainComponent, [&quot;ngAnimate&quot;, &quot;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
  Diff comments   View file @9bf4d46
... ... @@ -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
  Diff comments   View file @9bf4d46
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
  Diff comments   View file @9bf4d46
  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
  Diff comments   View file @9bf4d46
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
  Diff comments   View file @9bf4d46
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
  Diff comments   View file @9bf4d46
1 1 {
2   - "comment-paragraph-pluging.activate": "Activate paragraph comments",
3   - "comment-paragraph-pluging.deactivate": "Deactivate paragraph comments"
  2 + "comment-paragraph-plugin.title": "Paragraph Comments"
4 3 }
... ...
src/plugins/comment_paragraph/languages/pt.json
  Diff comments   View file @9bf4d46
1 1 {
2   - "comment-paragraph-pluging.activate": "Ativar comentários por parágrafo",
3   - "comment-paragraph-pluging.deactivate": "Desativar comentários por parágrafo"
  2 + "comment-paragraph-plugin.title": "Comentários por Parágrafo"
4 3 }
... ...
src/plugins/comment_paragraph/side-comments/side-comments.scss
  Diff comments   View file @9bf4d46
... ... @@ -5,6 +5,9 @@ comment-paragraph-side-comments {
5 5 &.media {
6 6 border-top: 0;
7 7 }
  8 + .comments {
  9 + margin-left: 0;
  10 + }
8 11 }
9 12 }
10 13 }
... ...