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

RED-8904: factored out the scrollable bullet list in another component.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-04-09 17:45:56 +03:00
parent a1c5e43f8e
commit e2982224b3
8 changed files with 53 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.html Normal file
View File

@ -0,0 +1,5 @@
<cdk-virtual-scroll-viewport [itemSize]="LIST_ITEM_SIZE" [ngStyle]="{ height: redactedTextsAreaHeight + 'px' }">
<ul *cdkVirtualFor="let value of values">
<li>{{ value }}</li>
</ul>
</cdk-virtual-scroll-viewport>

21
apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.scss Normal file
View File

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

22
apps/red-ui/src/app/modules/file-preview/components/selected-annotations-list/selected-annotations-list.component.ts Normal file
View File

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

9
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.html
View File

@ -5,14 +5,7 @@
<div class="dialog-content redaction">
<div class="iqser-input-group" *ngIf="showList">
<label [translate]="'edit-redaction.dialog.content.redacted-text'" class="selected-text"></label>
<cdk-virtual-scroll-viewport
[itemSize]="16"
[ngStyle]="{ height: redactedTexts.length <= 5 ? 16 * redactedTexts.length + 'px' : 80 + 'px' }"
>
<ul *cdkVirtualFor="let text of redactedTexts">
<li>{{ text }}</li>
</ul>
</cdk-virtual-scroll-viewport>
<redaction-selected-annotations-list [values]="redactedTexts"></redaction-selected-annotations-list>
</div>
<div class="iqser-input-group required w-450">

21
apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.scss
View File

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

12
apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.html
View File

@ -7,16 +7,8 @@
></div>
<div class="dialog-content redaction" [class.fixed-height]="isRedacted && isImage">
<div class="iqser-input-group" *ngIf="!isImage">
<cdk-virtual-scroll-viewport
*ngIf="!!redactedTexts.length && !allRectangles"
[itemSize]="16"
[ngStyle]="{ height: redactedTexts.length <= 5 ? 16 * redactedTexts.length + 'px' : 80 + 'px' }"
>
<ul *cdkVirtualFor="let text of redactedTexts">
<li>{{ text }}</li>
</ul>
</cdk-virtual-scroll-viewport>
<div class="iqser-input-group" *ngIf="!isImage && redactedTexts.length && !allRectangles">
<redaction-selected-annotations-list [values]="redactedTexts"></redaction-selected-annotations-list>
</div>
<div *ngIf="!isManualRedaction" class="iqser-input-group w-450" [class.required]="!form.controls.type.disabled">

20
apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.scss
View File

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

2
apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
View File

@ -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],
})