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

Pull request #23: Comments

Browse Source 
Merge in RED/ui from comments to master

* commit '48064bf0d12e186c383af9463f584330b630b5d2':
  fixed missing method
  fixed lint err
  Comments for annotations viewer
This commit is contained in:
Timo Bejan 2020-11-01 20:34:28 +01:00
commit 716a7aaf4c
14 changed files with 194 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@ -4,7 +4,7 @@ root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true

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

@ -60,6 +60,7 @@ import { MatNativeDateModule } from '@angular/material/core';
import { MatInputModule } from '@angular/material/input';
import { ProjectMemberGuard } from './auth/project-member-guard.service';
import { HumanizePipe } from './utils/humanize.pipe';
import { CommentsComponent } from './components/comments/comments.component';
import { ManualAnnotationDialogComponent } from './dialogs/manual-redaction-dialog/manual-annotation-dialog.component';
import { FileNotAvailableOverlayComponent } from './screens/file/file-not-available-overlay/file-not-available-overlay.component';
import { ToastComponent } from './components/toast/toast.component';
@ -90,6 +91,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
AnnotationIconComponent,
AuthErrorComponent,
HumanizePipe,
CommentsComponent,
HumanizePipe,
ToastComponent,
FileNotAvailableOverlayComponent,
FilterComponent

25
apps/red-ui/src/app/components/comments/comments.component.html Normal file
View File

@ -0,0 +1,25 @@
<div class="comments">
<ng-container *ngFor="let comment of comments; let idx = index">
<div class="comment" *ngIf="idx < 2 || expanded">
<div class="comment-icon">
<mat-icon svgIcon="red:comment"></mat-icon>
</div>
<div class="trash-icon" (click)="deleteComment(comment)">
<mat-icon svgIcon="red:trash"></mat-icon>
</div>
<div>{{ comment }}</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>
<!-- <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>-->
<!-- </div>-->
<!-- </form>-->
</div>

58
apps/red-ui/src/app/components/comments/comments.component.scss Normal file
View File

@ -0,0 +1,58 @@
@import '../../../assets/styles/red-variables';
.comments {
display: flex;
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;
mat-icon {
width: 14px;
height: 16px;
}
.comment-icon {
color: $grey-5;
display: initial;
}
.trash-icon {
color: $primary;
display: none;
}
&:hover {
.comment-icon {
display: none;
}
.trash-icon {
display: initial;
}
}
}
.see-more {
margin-left: 24px;
text-decoration: underline;
}
}

41
apps/red-ui/src/app/components/comments/comments.component.ts Normal file
View File

@ -0,0 +1,41 @@
import { ChangeDetectorRef, Component, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'redaction-comments',
templateUrl: './comments.component.html',
styleUrls: ['./comments.component.scss']
})
export class CommentsComponent {
@Input() public comments: string[] = [];
public expanded = false;
public commentForm: FormGroup;
constructor(
private readonly _changeDetectorRef: ChangeDetectorRef,
private readonly _formBuilder: FormBuilder
) {
this.commentForm = this._formBuilder.group({
comment: ['', Validators.required]
});
}
public get more(): boolean {
return this.comments.length > 2;
}
public toggleSeeMore($event: MouseEvent): void {
$event.stopPropagation();
this.expanded = !this.expanded;
this._changeDetectorRef.detectChanges();
}
public addComment(): void {
console.log(`Adding comment "${this.commentForm.value.comment}"...`);
this.commentForm.reset();
}
public deleteComment(comment: string): void {
console.log(`Deleting comment "${comment}"...`);
}
}

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

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

56
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -99,8 +99,8 @@
class="pages"
[class.activePanel]="pagesPanelActive"
tabindex="0"
(keyup)="$event.preventDefault()"
(keydown)="$event.preventDefault()"
(keyup)="preventArrowDefault($event)"
(keydown)="preventArrowDefault($event)"
#quickNavigation
>
<div
@ -119,8 +119,8 @@
[class.activePanel]="!pagesPanelActive"
#annotationsElement
tabindex="1"
(keyup)="$event.preventDefault()"
(keydown)="$event.preventDefault()"
(keyup)="preventArrowDefault($event)"
(keydown)="preventArrowDefault($event)"
>
<div *ngFor="let page of displayedPages">
<div class="page-separator" attr.anotation-page-header="{{ page }}">
@ -137,32 +137,36 @@
[ngClass]="{ active: selectedAnnotation?.id === annotation.id }"
(click)="selectAnnotation(annotation)"
>
<redaction-annotation-icon
[typeValue]="
appStateService.getDictionaryTypeValueForAnnotation(annotation)
"
></redaction-annotation-icon>
<div class="flex-1">
<div>
<strong>{{ annotation.superType | humanize }}</strong>
<div class="details">
<redaction-annotation-icon
[typeValue]="
appStateService.getDictionaryTypeValueForAnnotation(
annotation
)
"
></redaction-annotation-icon>
<div class="flex-1">
<div>
<strong>{{ annotation.superType | humanize }}</strong>
</div>
<div *ngIf="annotation.dictionary">
<strong><span translate="dictionary"></span>: </strong
>{{ annotation.dictionary | humanize }}
</div>
<div *ngIf="annotation.content">
<strong><span translate="content"></span>: </strong
>{{ annotation.content }}
</div>
</div>
<div *ngIf="annotation.dictionary">
<strong><span translate="dictionary"></span>: </strong
>{{ annotation.dictionary | humanize }}
</div>
<div *ngIf="annotation.content">
<strong><span translate="content"></span>: </strong
>{{ annotation.content }}
</div>
<div *ngFor="let comment of annotation.comments">
<strong><span translate="comment"></span>:</strong>
{{ comment }}
<div class="page-number">
{{ annotation.pageNumber }}
</div>
</div>
<div class="page-number">
{{ annotation.pageNumber }}
</div>
<redaction-comments
[comments]="annotation.comments"
></redaction-comments>
<div
class="annotation-actions"

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

@ -87,9 +87,15 @@ redaction-pdf-viewer {
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
border-left: 2px solid transparent;
.details {
display: flex;
gap: 10px;
}
redaction-annotation-icon {
margin-top: 6px;
}

15
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -30,6 +30,8 @@ import { AnnotationDrawService } from '../service/annotation-draw.service';
import { AnnotationProcessingService } from '../service/annotation-processing.service';
import { FilterModel } from '../../../common/filter/model/filter.model';
const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@Component({
selector: 'redaction-file-preview-screen',
templateUrl: './file-preview-screen.component.html',
@ -262,10 +264,11 @@ export class FilePreviewScreenComponent implements OnInit {
}
@HostListener('window:keyup', ['$event'])
handleKeyEvent($event: KeyboardEvent) {
const keyArray = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
if (!keyArray.includes($event.key) || this._dialogRef?.getState() === MatDialogState.OPEN) {
public handleKeyEvent($event: KeyboardEvent) {
if (
!KEY_ARRAY.includes($event.key) ||
this._dialogRef?.getState() === MatDialogState.OPEN
) {
return;
}
@ -413,4 +416,8 @@ export class FilePreviewScreenComponent implements OnInit {
);
this._changeDetectorRef.detectChanges();
}
preventArrowDefault($event: KeyboardEvent) {
$event.preventDefault();
}
}

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

@ -550,6 +550,10 @@
"label": "You are not allowed to access that page."
}
},
"comments": {
"show-more": "Show More",
"show-less": "Show Less"
},
"unassigned": "Unassigned",
"under-review": "Under review",
"under-approval": "Under approval",

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

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>comments</title>
<g id="comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M50,0 C25,0 5,20 5,45 C5,55.5 8.5,65 15,73 L15,100 L44,89.5 C46.5,90 48,90 50,90 C75,90 95,70 95,45 C95,20 75,0 50,0 Z M50,80 C48.5,80 46.5,80 44.5,79.5 L43,79.5 L25,86 L25,69.5 L23.5,68 C18,61.5 15,53.5 15,45 C15,25.5 30.5,10 50,10 C69.5,10 85,25.5 85,45 C85,64.5 69.5,80 50,80 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 675 B

4
apps/red-ui/src/assets/icons/general/trash.svg
View File

@ -2,6 +2,6 @@
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>trash</title>
<g id="trash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M85,10 L65,10 L65,0 L35,0 L35,10 L15,10 C12,10 10,12 10,15 C10,18 12,20 15,20 L15,85 C15,93.5 21.5,100 30,100 L70,100 C78.5,100 85,93.5 85,85 L85,20 C88,20 90,18 90,15 C90,12 88,10 85,10 Z M75,85 C75,88 73,90 70,90 L30,90 C27,90 25,88 25,85 L25,20 L75,20 L75,85 Z" id="Shape" fill="#283241" fill-rule="nonzero"></path>
<path d="M85,10 L65,10 L65,0 L35,0 L35,10 L15,10 C12,10 10,12 10,15 C10,18 12,20 15,20 L15,85 C15,93.5 21.5,100 30,100 L70,100 C78.5,100 85,93.5 85,85 L85,20 C88,20 90,18 90,15 C90,12 88,10 85,10 Z M75,85 C75,88 73,90 70,90 L30,90 C27,90 25,88 25,85 L25,20 L75,20 L75,85 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 646 B

After

Width:  |  Height:  |  Size: 652 B

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

@ -24,7 +24,6 @@
textarea,
mat-select {
box-sizing: border-box;
width: 322px;
padding-left: 11px;
padding-right: 11px;
border: 1px solid $grey-5;

7
apps/red-ui/src/assets/styles/red-mixins.scss
View File

@ -5,8 +5,11 @@
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@if $lines == 1 {
text-overflow: ellipsis;
white-space: nowrap;
}
}
@mixin no-scroll-bar {