diff --git a/.editorconfig b/.editorconfig index 6e87a003d..9b7352176 100644 --- a/.editorconfig +++ b/.editorconfig @@ -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 diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 0207ecd0b..31bd05c6d 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -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 diff --git a/apps/red-ui/src/app/components/comments/comments.component.html b/apps/red-ui/src/app/components/comments/comments.component.html new file mode 100644 index 000000000..6ffdc1bdb --- /dev/null +++ b/apps/red-ui/src/app/components/comments/comments.component.html @@ -0,0 +1,25 @@ +
+ +
+
+ +
+
+ +
+
{{ comment }}
+
+ + +
+ {{ expanded ? '-' : '+' }} + +
+ + + + + + + +
diff --git a/apps/red-ui/src/app/components/comments/comments.component.scss b/apps/red-ui/src/app/components/comments/comments.component.scss new file mode 100644 index 000000000..fe36f7832 --- /dev/null +++ b/apps/red-ui/src/app/components/comments/comments.component.scss @@ -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; + } +} diff --git a/apps/red-ui/src/app/components/comments/comments.component.ts b/apps/red-ui/src/app/components/comments/comments.component.ts new file mode 100644 index 000000000..d40c32d5d --- /dev/null +++ b/apps/red-ui/src/app/components/comments/comments.component.ts @@ -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}"...`); + } +} diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index cb5cd2894..6493a7f9a 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -20,6 +20,7 @@ export class IconsModule { 'calendar', 'check', 'close', + 'comment', 'document', 'double-chevron-right', 'download', diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index 1c3d4e9ef..61c3f2114 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -99,8 +99,8 @@ class="pages" [class.activePanel]="pagesPanelActive" tabindex="0" - (keyup)="$event.preventDefault()" - (keydown)="$event.preventDefault()" + (keyup)="preventArrowDefault($event)" + (keydown)="preventArrowDefault($event)" #quickNavigation >
@@ -137,32 +137,36 @@ [ngClass]="{ active: selectedAnnotation?.id === annotation.id }" (click)="selectAnnotation(annotation)" > - -
-
- {{ annotation.superType | humanize }} +
+ +
+
+ {{ annotation.superType | humanize }} +
+
+ : {{ annotation.dictionary | humanize }} +
+
+ : {{ annotation.content }} +
-
- : {{ annotation.dictionary | humanize }} -
-
- : {{ annotation.content }} -
-
- : - {{ comment }} + +
+ {{ annotation.pageNumber }}
-
- {{ annotation.pageNumber }} -
+
+ + comments + + + + diff --git a/apps/red-ui/src/assets/icons/general/trash.svg b/apps/red-ui/src/assets/icons/general/trash.svg index 254482033..6ade89287 100644 --- a/apps/red-ui/src/assets/icons/general/trash.svg +++ b/apps/red-ui/src/assets/icons/general/trash.svg @@ -2,6 +2,6 @@ trash - + - \ No newline at end of file + diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss index c008f4544..872c6546c 100644 --- a/apps/red-ui/src/assets/styles/red-input.scss +++ b/apps/red-ui/src/assets/styles/red-input.scss @@ -24,7 +24,6 @@ textarea, mat-select { box-sizing: border-box; - width: 322px; padding-left: 11px; padding-right: 11px; border: 1px solid $grey-5; diff --git a/apps/red-ui/src/assets/styles/red-mixins.scss b/apps/red-ui/src/assets/styles/red-mixins.scss index 8930792e3..d011a9dd1 100644 --- a/apps/red-ui/src/assets/styles/red-mixins.scss +++ b/apps/red-ui/src/assets/styles/red-mixins.scss @@ -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 {