Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Pull request #29: Rework comments

Browse Source 
Merge in RED/ui from comments to master

* commit '1ab6edd01fbbc9cc041ab430cb715fe8002b8d17':
  Rework comments
This commit is contained in:
Timo Bejan 2020-11-06 09:33:28 +01:00
commit cb3a72fbee
8 changed files with 87 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

36
apps/red-ui/src/app/components/comments/comments.component.scss
View File

@ -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;
}
}

21
apps/red-ui/src/app/components/comments/comments.component.ts
View File

@ -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);
}
}

1
apps/red-ui/src/app/icons/icons.module.ts
View File

@ -21,6 +21,7 @@ export class IconsModule {
'check',
'close',
'comment',
'comment-fill',
'document',
'double-chevron-right',
'download',

3
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -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;

6
apps/red-ui/src/assets/i18n/en.json
View File

@ -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",

13
apps/red-ui/src/assets/icons/general/comment-fill.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 975 B

9
apps/red-ui/src/assets/styles/red-input.scss
View File

@ -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 {