diff --git a/apps/red-ui/src/app/components/comments/comments.component.html b/apps/red-ui/src/app/components/comments/comments.component.html index 053d2f670..89ea4aa86 100644 --- a/apps/red-ui/src/app/components/comments/comments.component.html +++ b/apps/red-ui/src/app/components/comments/comments.component.html @@ -1,29 +1,49 @@
- -
-
- + +
+
+
-
+
- - - -
{{ comment.text }}
+
+
{{ getOwnerName(comment) }}
+
{{ comment.text }}
+
-
- {{ expanded ? '-' : '+' }} - +
+ {{ + expanded + ? translateService.instant('comments.hide-comments') + : translateService.instant( + annotation.comments.length === 1 ? 'comments.comment' : 'comments.comments', + { count: annotation.comments.length } + ) + }}
- - +
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 ee4689c48..697e524ca 100644 --- a/apps/red-ui/src/app/components/comments/comments.component.scss +++ b/apps/red-ui/src/app/components/comments/comments.component.scss @@ -5,27 +5,14 @@ flex-direction: column; gap: 10px; - form { - position: relative; - - .check-icon { - width: 14px; - height: 40px; - color: $grey-1; - position: absolute; - right: 10px; - opacity: 0.7; - - &:hover { - opacity: 1; - } - } - } - .comment { display: flex; gap: 12px; + .owner { + opacity: 0.7; + } + mat-icon { width: 14px; height: 16px; @@ -38,24 +25,23 @@ .trash-icon { display: none; + } - &.red { - color: $primary; - } + .red { + color: $primary; } &:hover { - .comment-icon { + .comment-icon.comment-owner { display: none; } - .trash-icon { + .trash-icon.comment-owner { display: initial; } } } - .see-more { - margin-left: 24px; - text-decoration: underline; + .all-caps-label { + margin-left: 26px; } } 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 ae89765a1..fcdd07db3 100644 --- a/apps/red-ui/src/app/components/comments/comments.component.ts +++ b/apps/red-ui/src/app/components/comments/comments.component.ts @@ -5,6 +5,7 @@ import { ManualAnnotationService } from '../../screens/file/service/manual-annot import { AnnotationWrapper } from '../../screens/file/model/annotation.wrapper'; import { UserService } from '../../user/user.service'; import { AppStateService } from '../../state/app-state.service'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'redaction-comments', templateUrl: './comments.component.html', @@ -16,6 +17,7 @@ export class CommentsComponent { public commentForm: FormGroup; constructor( + public readonly translateService: TranslateService, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _appStateService: AppStateService, private readonly _formBuilder: FormBuilder, @@ -27,12 +29,11 @@ export class CommentsComponent { }); } - public get more(): boolean { - return this.annotation?.comments?.length > 2; - } - - public toggleSeeMore($event: MouseEvent): void { + public toggleExpandComments($event: MouseEvent): void { $event.stopPropagation(); + if (!this.annotation.comments.length) { + return; + } this.expanded = !this.expanded; this._changeDetectorRef.detectChanges(); } @@ -48,6 +49,7 @@ export class CommentsComponent { id: commentResponse.commentId, user: this._userService.userId }); + this.expanded = true; }); } this.commentForm.reset(); @@ -58,10 +60,17 @@ export class CommentsComponent { .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; + } }); } - canDeleteComment(comment: Comment) { + public isCommentOwner(comment: Comment): boolean { return comment.user === this._userService.userId; } + + public getOwnerName(comment: Comment): string { + return this._userService.getNameForId(comment.user); + } } diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 81d515fe0..7e3f45e22 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -21,6 +21,7 @@ export class IconsModule { 'check', 'close', 'comment', + 'comment-fill', 'document', 'double-chevron-right', 'download', 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 524b79e46..d070af005 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 @@ -81,7 +81,8 @@ redaction-pdf-viewer { .annotation { border-bottom: 1px solid $separator; padding: 10px; - font-size: 12px; + font-size: 11px; + line-height: 14px; cursor: pointer; position: relative; display: flex; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 8f5e5094d..77adc8130 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -275,8 +275,10 @@ "access-denied": "You are not allowed to access that page." }, "comments": { - "show-more": "Show More", - "show-less": "Show Less" + "comment": "{{count}} comment", + "comments": "{{count}} comments", + "add-comment": "Add a comment", + "hide-comments": "Hide comments" }, "unassigned": "Unassigned", "under-review": "Under review", diff --git a/apps/red-ui/src/assets/icons/general/comment-fill.svg b/apps/red-ui/src/assets/icons/general/comment-fill.svg new file mode 100644 index 000000000..1079f62e8 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/comment-fill.svg @@ -0,0 +1,13 @@ + + + A3E6003E-4D04-4848-8D81-41796CEA5098 + + + + + + + + + + diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss index 872c6546c..a31e35e9e 100644 --- a/apps/red-ui/src/assets/styles/red-input.scss +++ b/apps/red-ui/src/assets/styles/red-input.scss @@ -28,8 +28,8 @@ padding-right: 11px; border: 1px solid $grey-5; font-family: Inter, sans-serif; - font-size: 11px; - line-height: 14px; + font-size: 13px; + line-height: 18px; background-color: #ffffff; border-radius: 8px; outline: none; @@ -39,6 +39,11 @@ &:focus { border-color: $grey-1; } + + &::placeholder { + color: $grey-1; + opacity: 0.7; + } } mat-select {