diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.html new file mode 100644 index 000000000..45ab7299d --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.html @@ -0,0 +1,23 @@ + +
+ + + +
+ + +
+ +
+ + Redaction based on ceva mai lung care să vină pe 2 rânduri +
+
+
+
+
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.scss new file mode 100644 index 000000000..1d0cf5aa6 --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.scss @@ -0,0 +1,51 @@ +@use 'variables'; + +.popover { + width: 260px; + padding: 10px; + border-radius: 3px; + background-color: variables.$grey-1; + color: variables.$white; + + mat-icon { + color: variables.$white; + flex-shrink: 0; + } + + span { + padding-left: 8px; + font-size: 11px; + line-height: 14px; + } +} + +.chip { + height: 24px; + + &:hover { + background-color: variables.$grey-6; + border-radius: 12px; + + mat-icon { + opacity: 1; + } + } + + mat-icon { + opacity: 50%; + margin-left: 3px; + margin-right: 3px; + + &:first-of-type { + margin-left: 8px; + } + + &:last-of-type { + margin-right: 8px; + } + } +} + +mat-icon { + width: 10px; +} diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.ts new file mode 100644 index 000000000..e2462212a --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotation-source/annotation-source.component.ts @@ -0,0 +1,35 @@ +import { Component, Input } from '@angular/core'; +import { AnnotationWrapper } from '@models/file/annotation.wrapper'; + +interface Source { + readonly icon: string; + readonly show: boolean; +} + +@Component({ + selector: 'redaction-annotation-source', + templateUrl: './annotation-source.component.html', + styleUrls: ['./annotation-source.component.scss'] +}) +export class AnnotationSourceComponent { + @Input() annotation: AnnotationWrapper; + isPopoverOpen = false; + readonly sources: readonly Source[] = [ + { + icon: 'red:dictionary', + show: true + }, + { + icon: 'red:ai', + show: true + }, + { + icon: 'red:rule', + show: true + } + ]; + + get hasSourcesToShow(): boolean { + return this.sources.length && this.sources.some(source => source.show) + } +} diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.html index 24afbeede..c4545aa39 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.html @@ -11,7 +11,7 @@
- +
@@ -57,4 +57,6 @@
+ +
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.scss index 36523f550..60afc5027 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.scss @@ -2,6 +2,7 @@ :host { width: 100%; + position: relative; } .annotation-wrapper { @@ -87,3 +88,9 @@ } } } + +redaction-annotation-source { + position: absolute; + top: 6px; + right: 8px; +} diff --git a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts index a92fea273..4daae1ee8 100644 --- a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts +++ b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts @@ -50,6 +50,8 @@ import { DossierDetailsStatsComponent } from './components/dossier-details-stats import { SearchScreenComponent } from './screens/search-screen/search-screen.component'; import { EditDossierDeletedDocumentsComponent } from './dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component'; import { AnnotationsListComponent } from './components/file-workload/components/annotations-list/annotations-list.component'; +import { AnnotationSourceComponent } from './components/file-workload/components/annotation-source/annotation-source.component'; +import { OverlayModule } from '@angular/cdk/overlay'; const screens = [DossierListingScreenComponent, DossierOverviewScreenComponent, FilePreviewScreenComponent, SearchScreenComponent]; @@ -91,6 +93,7 @@ const components = [ DossierDetailsStatsComponent, EditDossierDeletedDocumentsComponent, AnnotationsListComponent, + AnnotationSourceComponent, ...screens, ...dialogs @@ -111,7 +114,6 @@ const services = [ @NgModule({ declarations: [...components], providers: [...services], - imports: [CommonModule, SharedModule, FileUploadDownloadModule, DossiersRoutingModule] + imports: [CommonModule, SharedModule, FileUploadDownloadModule, DossiersRoutingModule, OverlayModule] }) -export class DossiersModule { -} +export class DossiersModule {} diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index 8473e453a..3c63fcc4e 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -12,6 +12,7 @@ export class IconsModule { constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) { const icons = [ 'add', + 'ai', 'analyse', 'approved', 'arrow-right', @@ -62,6 +63,7 @@ export class IconsModule { 'reason', 'remove-from-dict', 'report', + 'rule', 'secret', 'status', 'status-collapse', diff --git a/apps/red-ui/src/assets/icons/general/ai.svg b/apps/red-ui/src/assets/icons/general/ai.svg new file mode 100644 index 000000000..34a989ee0 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/ai.svg @@ -0,0 +1,12 @@ + + + ai + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/rule.svg b/apps/red-ui/src/assets/icons/general/rule.svg new file mode 100644 index 000000000..6543b4767 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/rule.svg @@ -0,0 +1,12 @@ + + + rule + + + + + + diff --git a/libs/common-ui b/libs/common-ui index a16d1db3a..4f0d8022e 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit a16d1db3ab938dccc2c9d82c5e3d283bb857f46c +Subproject commit 4f0d8022eddb1fa3306a653883ac5b0972f75d13