From f05297365f78ff4e5a50462389ccc522eed65ce0 Mon Sep 17 00:00:00 2001 From: Timo Bejan Date: Wed, 11 Nov 2020 21:34:17 +0200 Subject: [PATCH] one commit on comments --- .../file-actions/file-actions.component.html | 16 +++--- .../file-actions/file-actions.component.ts | 4 ++ .../comments/comments.component.html | 54 +++++++++---------- .../comments/comments.component.scss | 18 ++++++- .../components/comments/comments.component.ts | 40 +++++++------- .../file-preview-screen.component.scss | 1 - .../project-details.component.html | 4 +- .../project-overview-screen.component.html | 8 ++- apps/red-ui/src/assets/i18n/en.json | 31 +++++++---- .../src/assets/icons/general/add-hint.svg | 2 +- .../src/assets/icons/general/analyse.svg | 4 +- .../src/assets/icons/general/assign.svg | 4 +- .../src/assets/icons/general/calendar.svg | 8 +-- apps/red-ui/src/assets/icons/general/edit.svg | 4 +- .../src/assets/icons/general/folder.svg | 4 +- apps/red-ui/src/assets/icons/general/info.svg | 4 +- .../src/assets/icons/general/lightning.svg | 4 +- .../src/assets/icons/general/report.svg | 4 +- .../src/assets/icons/general/status.svg | 4 +- apps/red-ui/src/assets/icons/general/user.svg | 4 +- apps/red-ui/src/assets/styles/red-button.scss | 29 +++++----- .../src/assets/styles/red-tooltips.scss | 7 ++- 22 files changed, 145 insertions(+), 113 deletions(-) diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.html b/apps/red-ui/src/app/common/file-actions/file-actions.component.html index f8b498aa1..6944c5325 100644 --- a/apps/red-ui/src/app/common/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.html @@ -3,7 +3,7 @@ (click)="openDeleteFileDialog($event, fileStatus)" *ngIf="permissionsService.canDeleteFile(fileStatus)" [matTooltip]="'project-overview.delete.action' | translate" - matTooltipPosition="above" + [matTooltipPosition]="tooltipPosition" color="accent" mat-icon-button > @@ -12,7 +12,7 @@
+
+
diff --git a/apps/red-ui/src/app/components/comments/comments.component.scss b/apps/red-ui/src/app/components/comments/comments.component.scss index 697e524ca..a7efea2a6 100644 --- a/apps/red-ui/src/app/components/comments/comments.component.scss +++ b/apps/red-ui/src/app/components/comments/comments.component.scss @@ -1,9 +1,10 @@ @import '../../../assets/styles/red-variables'; -.comments { +.wrapper { display: flex; flex-direction: column; gap: 10px; + margin-top: 10px; .comment { display: flex; @@ -41,7 +42,20 @@ } } - .all-caps-label { + .comment-actions-container, + .actions-container { + display: flex; + gap: 15px; + align-items: center; + } + + .actions-container { margin-left: 26px; + gap: 5px; + + > div:not(:last-child):after { + content: '•'; + margin-left: 5px; + } } } diff --git a/apps/red-ui/src/app/components/comments/comments.component.ts b/apps/red-ui/src/app/components/comments/comments.component.ts index fcdd07db3..4f9cac5e9 100644 --- a/apps/red-ui/src/app/components/comments/comments.component.ts +++ b/apps/red-ui/src/app/components/comments/comments.component.ts @@ -15,6 +15,7 @@ export class CommentsComponent { @Input() public annotation: AnnotationWrapper; public expanded = false; public commentForm: FormGroup; + public addingComment = false; constructor( public readonly translateService: TranslateService, @@ -38,32 +39,35 @@ export class CommentsComponent { this._changeDetectorRef.detectChanges(); } + public toggleAddingComment($event?: MouseEvent): void { + $event?.stopPropagation(); + this.addingComment = !this.addingComment; + this._changeDetectorRef.detectChanges(); + } + public addComment(): void { const value = this.commentForm.value.comment; if (value) { - this._manualAnnotationService - .addComment(value, this.annotation.id) - .subscribe((commentResponse) => { - this.annotation.comments.push({ - text: value, - id: commentResponse.commentId, - user: this._userService.userId - }); - this.expanded = true; + this._manualAnnotationService.addComment(value, this.annotation.id).subscribe((commentResponse) => { + this.annotation.comments.push({ + text: value, + id: commentResponse.commentId, + user: this._userService.userId }); + this.expanded = true; + }); + this.commentForm.reset(); + this.toggleAddingComment(); } - this.commentForm.reset(); } public deleteComment(comment: Comment): void { - this._manualAnnotationService - .deleteComment(comment.id, this.annotation.id) - .subscribe(() => { - this.annotation.comments.splice(this.annotation.comments.indexOf(comment), 1); - if (!this.annotation.comments.length) { - this.expanded = false; - } - }); + this._manualAnnotationService.deleteComment(comment.id, this.annotation.id).subscribe(() => { + this.annotation.comments.splice(this.annotation.comments.indexOf(comment), 1); + if (!this.annotation.comments.length) { + this.expanded = false; + } + }); } public isCommentOwner(comment: Comment): boolean { diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss index 2058d434a..17fad29c2 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss @@ -89,7 +89,6 @@ redaction-pdf-viewer { position: relative; display: flex; flex-direction: column; - gap: 10px; border-left: 2px solid transparent; .details { diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html index ecd0adb84..99e860973 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html @@ -1,8 +1,8 @@
- -
-