diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html new file mode 100644 index 000000000..aaa3ee657 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html @@ -0,0 +1,5 @@ + + + diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.scss b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.scss new file mode 100644 index 000000000..79f0d48b8 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.scss @@ -0,0 +1,21 @@ +@use 'common-mixins'; + +cdk-virtual-scroll-viewport { + @include common-mixins.scroll-bar; +} + +:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper { + max-width: 100% !important; +} + +ul { + padding-left: 16px; +} + +li { + white-space: nowrap; + text-overflow: ellipsis; + list-style-position: inside; + overflow: hidden; + padding-right: 10px; +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts new file mode 100644 index 000000000..b3663cc17 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts @@ -0,0 +1,22 @@ +import { Component, Input } from '@angular/core'; +import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; +import { NgStyle } from '@angular/common'; + +const LIST_ITEM_SIZE = 16; +const MAX_ITEMS_DISPLAY = 5; + +@Component({ + selector: 'redaction-selected-annotations-list', + standalone: true, + imports: [CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport, NgStyle], + templateUrl: './selected-annotations-list.component.html', + styleUrl: './selected-annotations-list.component.scss', +}) +export class SelectedAnnotationsListComponent { + @Input({ required: true }) values: string[]; + protected readonly LIST_ITEM_SIZE = LIST_ITEM_SIZE; + + get redactedTextsAreaHeight() { + return this.values.length <= MAX_ITEMS_DISPLAY ? LIST_ITEM_SIZE * this.values.length : LIST_ITEM_SIZE * MAX_ITEMS_DISPLAY; + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html index 2754b2475..47979cbd3 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html @@ -5,14 +5,7 @@
- -
    -
  • {{ text }}
  • -
-
+
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss index 79f0d48b8..e69de29bb 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss @@ -1,21 +0,0 @@ -@use 'common-mixins'; - -cdk-virtual-scroll-viewport { - @include common-mixins.scroll-bar; -} - -:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper { - max-width: 100% !important; -} - -ul { - padding-left: 16px; -} - -li { - white-space: nowrap; - text-overflow: ellipsis; - list-style-position: inside; - overflow: hidden; - padding-right: 10px; -} diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html index c5af2cf10..1b2dc1399 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html @@ -7,16 +7,8 @@ >
-
- -
    -
  • {{ text }}
  • -
-
+
+
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss index a313e2031..f78a044f5 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss @@ -6,23 +6,3 @@ overflow-y: auto; } } - -cdk-virtual-scroll-viewport { - @include common-mixins.scroll-bar; -} - -:host ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper { - max-width: 100% !important; -} - -ul { - padding-left: 16px; -} - -li { - white-space: nowrap; - text-overflow: ellipsis; - list-style-position: inside; - overflow: hidden; - padding-right: 10px; -} diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts index 5a1ad98c7..95379d171 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts +++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts @@ -71,6 +71,7 @@ import { FilePreviewDialogService } from './services/file-preview-dialog.service import { ManualRedactionService } from './services/manual-redaction.service'; import { TablesService } from './services/tables.service'; import { SelectedAnnotationsTableComponent } from './components/selected-annotations-table/selected-annotations-table.component'; +import { SelectedAnnotationsListComponent } from './components/selected-annotations-list/selected-annotations-list.component'; const routes: IqserRoutes = [ { @@ -154,6 +155,7 @@ const components = [ ReplaceNbspPipe, DisableStopPropagationDirective, SelectedAnnotationsTableComponent, + SelectedAnnotationsListComponent, ], providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, TablesService], })