diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html index a47798615..86c807318 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.html @@ -1,19 +1,12 @@ - - - - - - - - - - - -
- -
+
+ @for (column of _columns(); track column.label) { +
{{ column.label }}
+ } + @for (row of _data(); track $index) { + @for (cell of row; track cell.label) { +
{{ cell.label }} -
+ + } + } + diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss index ebcb45852..e3e006557 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.scss @@ -1,74 +1,39 @@ @use 'common-mixins'; -table { +.table { padding: 0 13px; - max-width: 100%; - min-width: 100%; - border-spacing: 0; + display: grid; + overflow-x: hidden; + overflow-y: auto; + @include common-mixins.scroll-bar; - tbody { - padding-top: 2px; - overflow-y: auto; - display: block; - @include common-mixins.scroll-bar; + .col { + position: sticky; + top: 0; + z-index: 1; + background: white; } - tr { - max-width: 100%; - min-width: 100%; - display: table; + .cell { + text-align: start; + white-space: nowrap; + text-overflow: ellipsis; + list-style-position: inside; + overflow: hidden; - th { - label { - opacity: 0.7; - font-weight: normal; - } - } - - th, - td { - &:first-child:not(.w-50) { - width: 25%; - } - max-width: 0; - text-align: start; - - white-space: nowrap; - text-overflow: ellipsis; - list-style-position: inside; - overflow: hidden; - - padding-right: 8px; - } - - th:last-child, - td:last-child { - max-width: 0; - width: 50%; - padding-right: 0; - } + padding-right: 8px; + line-height: 1.5; } } -tbody tr:nth-child(odd) { - td { - background-color: var(--iqser-alt-background); - } +.background { + background-color: var(--iqser-alt-background); } .hide { visibility: hidden; } -.w-50 { - max-width: 0; - min-width: 50%; - - &.hide { - display: none; - } -} - .bold { font-weight: bold; } diff --git a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts index bc8018123..dd2f567b3 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/selected-annotations-table/selected-annotations-table.component.ts @@ -5,9 +5,10 @@ export interface ValueColumn { label: string; hide?: boolean; bold?: boolean; + width?: string; } -const TABLE_ROW_SIZE = 18; +const TABLE_ROW_SIZE = 20; const MAX_ITEMS_DISPLAY = 10; @Component({ @@ -18,12 +19,33 @@ const MAX_ITEMS_DISPLAY = 10; styleUrl: './selected-annotations-table.component.scss', }) export class SelectedAnnotationsTableComponent { - readonly columns = input.required(); - readonly data = input.required(); - readonly staticColumns = input(false); + readonly defaultColumnWidth = input(false); - readonly redactedTextsAreaHeight = computed(() => - this.data().length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this.data().length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY, + readonly columns = input.required(); + readonly _columns = computed(() => this.columns().filter(item => !this.defaultColumnWidth() || !item.hide)); + + readonly data = input.required(); + readonly _data = computed(() => this.data().map(item => item.filter(cell => !this.defaultColumnWidth() || !cell.hide))); + + readonly redactedTextsAreaHeight = computed( + () => + (this._data().length <= MAX_ITEMS_DISPLAY ? TABLE_ROW_SIZE * this._data().length : TABLE_ROW_SIZE * MAX_ITEMS_DISPLAY) + + TABLE_ROW_SIZE, ); - readonly shouldApplyHalfWidth = computed(() => this.columns().filter(column => !column.hide).length === 2); + + readonly gridConfig = computed(() => ({ + height: `${this.redactedTextsAreaHeight()}px`, + 'grid-template-columns': !this.defaultColumnWidth() ? this.#computeCustomColumnWidths() : this.#getDefaultColumnWidth(), + 'grid-template-rows': `repeat(${this._data().length + 1}, ${TABLE_ROW_SIZE}px)`, + })); + + #computeCustomColumnWidths() { + return this._columns() + .map(column => column.width ?? `auto`) + .join(' '); + } + + #getDefaultColumnWidth() { + return `repeat(${this._columns().length}, 1fr)`; + } } 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 58636d2b0..00afb75cc 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 @@ -11,7 +11,7 @@ diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html index 9a34be925..cdf6b9936 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html @@ -7,7 +7,7 @@ } diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html index 7acc288cc..5c7d34dd2 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.html @@ -7,7 +7,7 @@ diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html index 57a5a3655..67b718ed6 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html @@ -10,7 +10,7 @@ diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts index 8b6812666..972fd64ba 100644 --- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts @@ -111,11 +111,12 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent< readonly selectedOption = toSignal(this.form.get('option').valueChanges.pipe(map(value => value.value))); readonly isFalsePositive = computed(() => this.selectedOption() === RemoveRedactionOptions.FALSE_POSITIVE); readonly tableColumns = computed(() => [ - { label: 'Value' }, - { label: 'Type' }, + { label: 'Value', width: '25%' }, + { label: 'Type', width: '25%' }, { label: 'Context', hide: !this.isFalsePositive(), + width: '50%', }, ]); diff --git a/apps/red-ui/src/app/modules/shared/components/approve-warning-details/approve-warning-details.component.scss b/apps/red-ui/src/app/modules/shared/components/approve-warning-details/approve-warning-details.component.scss index 668a18134..7b5d3cd12 100644 --- a/apps/red-ui/src/app/modules/shared/components/approve-warning-details/approve-warning-details.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/approve-warning-details/approve-warning-details.component.scss @@ -1,8 +1,13 @@ @use 'common-mixins'; +:host { + height: 250px; +} + .scrollable { + margin-bottom: 8px; overflow-y: auto; - max-height: calc(5 * 50px); + max-height: 240px; @include common-mixins.scroll-bar; padding-left: 2px; diff --git a/apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.html b/apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.html index bae0d9986..47b99ddf9 100644 --- a/apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.html +++ b/apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.html @@ -1,8 +1,4 @@ {{ filename() }} - + diff --git a/apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.ts b/apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.ts index 9726e2900..42e8e1a68 100644 --- a/apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/warning-details-panel/warning-details-panel.component.ts @@ -16,7 +16,6 @@ import { TranslateService } from '@ngx-translate/core'; styleUrl: './warning-details-panel.component.scss', }) export class WarningDetailsPanelComponent { - readonly #translateService = inject(TranslateService); readonly warnings = input(); readonly filename = input(); readonly openByDefault = input(); @@ -24,14 +23,20 @@ export class WarningDetailsPanelComponent { { label: 'Value' }, { label: 'Type' }, { label: 'Page' }, - { label: 'Warning Reason' }, + { + label: 'Warning Reason', + width: '40%', + }, ]); + readonly #translateService = inject(TranslateService); readonly tableData = computed(() => this.warnings().map(warning => [ { label: warning.value, bold: true }, { label: warning.type }, { label: warning.pages.join(',') }, - { label: this.#translateService.instant(approvalWarningReasonTranslations[warning.warningType]) }, + { + label: this.#translateService.instant(approvalWarningReasonTranslations[warning.warningType]), + }, ]), ); } diff --git a/libs/common-ui b/libs/common-ui index c71a4995a..835cb7820 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit c71a4995a63e4886bc23a8a8cea7d02d7560c2aa +Subproject commit 835cb7820e2100ff1125939f4c2766f06e9c09a6