From c9c05b920bd4802932ab6b7c79e41ff4c9b9d8d5 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Thu, 27 Jan 2022 20:15:55 +0200
Subject: [PATCH] reference grey background when selected

---
 .../annotation-actions/annotation-actions.component.html | 4 ++--
 .../annotation-references-list.component.html            | 9 +++++++--
 .../annotation-references-list.component.scss            | 4 ----
 .../annotation-references-list.component.ts              | 8 ++++++--
 .../annotations-list/annotations-list.component.html     | 1 +
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 6ce94bc3e..90a83df7a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
@@ -88,8 +88,8 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="this.annotationReferencesService.show(annotations[0])"
-            *ngIf="annotations[0].reference.length !== 0 && !multiSelectService.isActive"
+            (action)="annotationReferencesService.show(annotations[0])"
+            *ngIf="annotations[0].reference.length && !multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
index 0c8b1c976..a5a00454a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
         </div>
         <div class="annotations-container flex">
-            <div class="annotation-container">
+            <div [style.background-color]="isSelected(annotation.id) ? 'var(--iqser-grey-8)' : ''" class="annotation-container">
                 <div class="annotation-card-container flex">
                     <redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
                     <redaction-annotation-references-page-indicator
@@ -16,7 +16,12 @@
                     ></redaction-annotation-references-page-indicator>
                 </div>
             </div>
-            <div (click)="referenceClicked.emit(reference)" *ngFor="let reference of annotationReferences" class="annotation-container">
+            <div
+                (click)="referenceClicked.emit(reference)"
+                *ngFor="let reference of annotationReferences"
+                [style.background-color]="isSelected(reference.id) ? 'var(--iqser-grey-8)' : ''"
+                class="annotation-container"
+            >
                 <div class="annotation-card-container flex">
                     <redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
                     <redaction-annotation-references-page-indicator
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
index 5ce1707f2..3731b49ac 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
@@ -22,10 +22,6 @@
             width: 100%;
             border-top: 1px solid rgba(226, 228, 233, 0.9);
 
-            &:first-child {
-                background-color: var(--iqser-grey-8);
-            }
-
             &:not(:first-child) {
                 cursor: pointer;
             }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
index 892e6be51..b759f0d94 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
@@ -14,8 +14,8 @@ export class AnnotationReferencesListComponent implements OnChanges {
     @Input() annotation: AnnotationWrapper;
     @Input() file: File;
     @Input() fileData: FileDataModel;
-    @Output()
-    readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
+    @Input() selectedAnnotations: AnnotationWrapper[];
+    @Output() readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
     annotationReferences: AnnotationWrapper[];
 
     constructor(readonly annotationReferencesService: AnnotationReferencesService) {}
@@ -23,4 +23,8 @@ export class AnnotationReferencesListComponent implements OnChanges {
     ngOnChanges(): void {
         this.annotationReferences = this.fileData.allAnnotations.filter(a => this.annotation.reference.includes(a.annotationId));
     }
+
+    isSelected(annotationId: string): boolean {
+        return this.selectedAnnotations.some(a => a.annotationId === annotationId);
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index 8f11088a1..77df13518 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
@@ -50,5 +50,6 @@
         [annotation]="annotation"
         [fileData]="fileData"
         [file]="file"
+        [selectedAnnotations]="selectedAnnotations"
     ></redaction-annotation-references-list>
 </ng-container>