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

reference grey background when selected

Browse Source
This commit is contained in:
Edi Cziszter 2022-01-27 20:15:55 +02:00
parent acc67cade4
commit c9c05b920b
5 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
View File

@ -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"

9
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.html
View File

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

4
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.scss
View File

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

8
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-list/annotation-references-list.component.ts
View File

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

1
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
View File

@ -50,5 +50,6 @@
[annotation]="annotation"
[fileData]="fileData"
[file]="file"
[selectedAnnotations]="selectedAnnotations"
></redaction-annotation-references-list>
</ng-container>