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
@@ -36,6 +36,7 @@ @@ -36,6 +36,7 @@
36 "angular-load": "^0.4.1", 36 "angular-load": "^0.4.1",
37 "angular-translate-interpolation-messageformat": "^2.10.0", 37 "angular-translate-interpolation-messageformat": "^2.10.0",
38 "angular-bind-html-compile": "^1.2.1", 38 "angular-bind-html-compile": "^1.2.1",
  39 + "angular-click-outside": "^2.7.1",
39 "ng-ckeditor": "^0.2.1", 40 "ng-ckeditor": "^0.2.1",
40 "ckeditor": "^4.5.8" 41 "ckeditor": "^4.5.8"
41 }, 42 },
src/app/article/comment/comment.html
  Diff comments   View file @9bf4d46
@@ -9,6 +9,10 @@ @@ -9,6 +9,10 @@
9 <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})"> 9 <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
10 <h4 class="media-heading">{{ctrl.comment.author.name}}</h4> 10 <h4 class="media-heading">{{ctrl.comment.author.name}}</h4>
11 </a> 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 <span class="date" am-time-ago="ctrl.comment.created_at | dateFormat"></span> 16 <span class="date" am-time-ago="ctrl.comment.created_at | dateFormat"></span>
13 </div> 17 </div>
14 <div class="title">{{ctrl.comment.title}}</div> 18 <div class="title">{{ctrl.comment.title}}</div>
src/app/article/comment/comment.scss
  Diff comments   View file @9bf4d46
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 @extend .text-muted; 5 @extend .text-muted;
6 @extend .small; 6 @extend .small;
7 margin-left: 8px; 7 margin-left: 8px;
  8 + font-size: 12px;
8 } 9 }
9 .title { 10 .title {
10 font-weight: bold; 11 font-weight: bold;
@@ -13,7 +14,18 @@ @@ -13,7 +14,18 @@
13 min-width: 40px; 14 min-width: 40px;
14 } 15 }
15 .media-body { 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 noosfero-profile-image { 30 noosfero-profile-image {
19 img { 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,7 +17,8 @@ let noosferoApp: any = bundle(&quot;noosferoApp&quot;, MainComponent, [&quot;ngAnimate&quot;, &quot;ngCoo
17 "ui.router", "ui.bootstrap", "toastr", "ngCkeditor", 17 "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
18 "angular-bind-html-compile","angularMoment", "angular.filter", "akoenig.deckgrid", 18 "angular-bind-html-compile","angularMoment", "angular.filter", "akoenig.deckgrid",
19 "angular-timeline", "duScroll", "oitozero.ngSweetAlert", 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 NoosferoApp.angularModule = noosferoApp; 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,6 +15,7 @@ export class AllowCommentComponent {
15 @Input() paragraphUuid: string; 15 @Input() paragraphUuid: string;
16 @Input() article: noosfero.Article; 16 @Input() article: noosfero.Article;
17 commentsCount: number; 17 commentsCount: number;
  18 + display = false;
18 19
19 constructor(private $scope: ng.IScope, 20 constructor(private $scope: ng.IScope,
20 private commentParagraphEventService: CommentParagraphEventService, 21 private commentParagraphEventService: CommentParagraphEventService,
@@ -34,4 +35,11 @@ export class AllowCommentComponent { @@ -34,4 +35,11 @@ export class AllowCommentComponent {
34 return this.article.setting.comment_paragraph_plugin_activate; 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 </div> 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 comment-paragraph-plugin-allow-comment { 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 .popover { 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,6 +5,9 @@ comment-paragraph-side-comments {
5 &.media { 5 &.media {
6 border-top: 0; 6 border-top: 0;
7 } 7 }
  8 + .comments {
  9 + margin-left: 0;
  10 + }
8 } 11 }
9 } 12 }
10 } 13 }