Pull request #29: Rework comments

Merge in RED/ui from comments to master

* commit '1ab6edd01fbbc9cc041ab430cb715fe8002b8d17':
  Rework comments

apps/red-ui/src/app/components/comments/comments.component.html

@@ -1,29 +1,49 @@
 <div class="comments" *ngIf="annotation.manual">
-    <ng-container *ngFor="let comment of annotation.comments; let idx = index">
+    <ng-container *ngIf="expanded">
-        <div class="comment" *ngIf="idx < 2 || expanded">
+        <div *ngFor="let comment of annotation.comments; let idx = index" class="comment">
-            <div class="comment-icon">
+            <div
-                <mat-icon svgIcon="red:comment"></mat-icon>
+                class="comment-icon"
+                [class.red]="isCommentOwner(comment)"
+                [class.comment-owner]="isCommentOwner(comment)"
+            >
+                <mat-icon
+                    [svgIcon]="isCommentOwner(comment) ? 'red:comment-fill' : 'red:comment'"
+                ></mat-icon>
             </div>
-            <div class="trash-icon red" (click)="deleteComment(comment)">
+            <div
+                class="trash-icon red"
+                (click)="deleteComment(comment)"
+                [class.comment-owner]="isCommentOwner(comment)"
+            >
                 <mat-icon svgIcon="red:trash"></mat-icon>
             </div>
 
-            <!--            <div class="trash-icon" *ngIf="!canDeleteComment(comment)">-->
+            <div>
-            <!--                <mat-icon svgIcon="red:comment"></mat-icon>-->
+                <div class="owner">{{ getOwnerName(comment) }}</div>
-            <!--            </div>-->
+                <div>{{ comment.text }}</div>
-            <div>{{ comment.text }}</div>
+            </div>
         </div>
     </ng-container>
 
-    <div *ngIf="more" (click)="toggleSeeMore($event)" class="see-more">
+    <div (click)="toggleExpandComments($event)" class="all-caps-label">
-        <span>{{ expanded ? '-' : '+' }}</span>
+        {{
-        <span [translate]="'comments.show-' + (expanded ? 'less' : 'more')"></span>
+            expanded
+                ? translateService.instant('comments.hide-comments')
+                : translateService.instant(
+                      annotation.comments.length === 1 ? 'comments.comment' : 'comments.comments',
+                      { count: annotation.comments.length }
+                  )
+        }}
     </div>
 
     <form [formGroup]="commentForm" (submit)="addComment()">
         <div class="red-input-group">
-            <input formControlName="comment" name="comment" type="text" />
+            <input
-            <mat-icon svgIcon="red:check-alt" class="check-icon" (click)="addComment()"></mat-icon>
+                formControlName="comment"
+                name="comment"
+                type="text"
+                [placeholder]="translateService.instant('comments.add-comment')"
+            />
         </div>
     </form>
 </div>

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 {
+        .red {
-                color: $primary;
+            color: $primary;
-            }
         }
 
         &:hover {
-            .comment-icon {
+            .comment-icon.comment-owner {
                 display: none;
             }
-            .trash-icon {
+            .trash-icon.comment-owner {
                 display: initial;
             }
         }
     }
 
-    .see-more {
+    .all-caps-label {
-        margin-left: 24px;
+        margin-left: 26px;
-        text-decoration: underline;
     }
 }

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 {
+    public toggleExpandComments($event: MouseEvent): void {
-        return this.annotation?.comments?.length > 2;
-    }
-
-    public toggleSeeMore($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);
+    }
 }

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',

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;

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",
+        "comment": "{{count}} comment",
-        "show-less": "Show Less"
+        "comments": "{{count}} comments",
+        "add-comment": "Add a comment",
+        "hide-comments": "Hide comments"
     },
     "unassigned": "Unassigned",
     "under-review": "Under review",

apps/red-ui/src/assets/icons/general/comment-fill.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>A3E6003E-4D04-4848-8D81-41796CEA5098</title>
+    <g id="Comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02.-Show-More/Less" transform="translate(-1159.000000, -306.000000)">
+            <g id="Group-3" transform="translate(1159.000000, 306.000000)" fill="currentColor" fill-rule="nonzero">
+                <g id="Group-3">
+                    <path d="M7,12.8947368 C6.718,12.8947368 6.342,12.8947368 5.966,12.8026316 L5.684,12.8026316 L2.3,14 L2.3,10.9605263 L2.018,10.6842105 C0.984,9.48684211 0.42,8.01315789 0.42,6.44736842 C0.42,2.85526316 3.334,0 7,0 C10.666,0 13.58,2.85526316 13.58,6.44736842 C13.58,10.0394737 10.666,12.8947368 7,12.8947368 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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;
+        font-size: 13px;
-        line-height: 14px;
+        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 {