page indicator and click event on reference
This commit is contained in:
Edi Cziszter
parent
23d79a00e2
commit
7759cdd018
@ -1,6 +1,8 @@
|
||||
.details {
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.active-icon-marker-container {
|
||||
|
||||
@ -1,20 +1,35 @@
|
||||
<div class="content-container">
|
||||
<div class="dialog references-dialog">
|
||||
<div class="references-header flex">
|
||||
<div class="small-label">X REFERENCES</div>
|
||||
<iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
|
||||
</div>
|
||||
<div class="annotations-container flex">
|
||||
<div class="annotation-container" [style.background-color]="'var(--iqser-grey-8)'">
|
||||
<div class="annotation-card-container">
|
||||
<redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
|
||||
<ng-container *ngIf="annotationReferences">
|
||||
<div class="content-container">
|
||||
<div class="dialog references-dialog">
|
||||
<div class="references-header flex">
|
||||
<div class="small-label">
|
||||
{{ annotationReferences.length }} {{ annotationReferences.length === 1 ? 'REFERENCE' : 'REFERENCES' }}
|
||||
</div>
|
||||
<iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
|
||||
</div>
|
||||
<div class="annotation-container" *ngFor="let reference of annotationReferences">
|
||||
<div class="annotation-card-container">
|
||||
<redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
|
||||
<div class="annotations-container flex">
|
||||
<div class="annotation-container" [style.background-color]="'var(--iqser-grey-8)'">
|
||||
<div class="annotation-card-container flex">
|
||||
<redaction-annotation-card [annotation]="annotation" [file]="file"></redaction-annotation-card>
|
||||
<redaction-annotation-references-page-indicator
|
||||
[number]="annotation.pageNumber"
|
||||
></redaction-annotation-references-page-indicator>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="annotation-container"
|
||||
*ngFor="let reference of annotationReferences"
|
||||
(click)="referenceClicked.emit(reference)"
|
||||
[style.cursor]="'pointer'"
|
||||
>
|
||||
<div class="annotation-card-container flex">
|
||||
<redaction-annotation-card [annotation]="reference" [file]="file"></redaction-annotation-card>
|
||||
<redaction-annotation-references-page-indicator
|
||||
[number]="reference.pageNumber"
|
||||
></redaction-annotation-references-page-indicator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
top: 165px;
|
||||
|
||||
.references-header {
|
||||
padding: 13px 13px 0 13px;
|
||||
padding: 8px 8px 8px 13px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -18,10 +18,12 @@
|
||||
|
||||
.annotation-container {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(226, 228, 233, 0.9);
|
||||
border-top: 1px solid rgba(226, 228, 233, 0.9);
|
||||
|
||||
.annotation-card-container {
|
||||
padding: 11px 16px 16px 10px;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
|
||||
import { AnnotationReferencesService } from '../../services/annotation-references.service';
|
||||
import { File } from '@red/domain';
|
||||
@ -10,11 +10,13 @@ import { FileDataModel } from '@models/file/file-data.model';
|
||||
templateUrl: './annotation-references-dialog.component.html',
|
||||
styleUrls: ['./annotation-references-dialog.component.scss'],
|
||||
})
|
||||
export class AnnotationReferencesDialogComponent implements OnInit {
|
||||
export class AnnotationReferencesDialogComponent implements OnInit, OnChanges {
|
||||
@Input()
|
||||
annotation: AnnotationWrapper;
|
||||
@Input()
|
||||
file: File;
|
||||
@Output()
|
||||
readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
|
||||
fileData: FileDataModel;
|
||||
annotationReferences: AnnotationWrapper[];
|
||||
|
||||
@ -24,11 +26,19 @@ export class AnnotationReferencesDialogComponent implements OnInit {
|
||||
) {}
|
||||
|
||||
async ngOnInit(): Promise<void> {
|
||||
await this.setReferences();
|
||||
}
|
||||
|
||||
async ngOnChanges(changes: SimpleChanges): Promise<void> {
|
||||
await this.setReferences();
|
||||
}
|
||||
|
||||
async setReferences(): Promise<void> {
|
||||
await this._loadFileData(this.file);
|
||||
this.annotationReferences = this.fileData.allAnnotations.filter(a => this.annotation.reference.includes(a.annotationId));
|
||||
}
|
||||
|
||||
private async _loadFileData(file: File): Promise<void | boolean> {
|
||||
private async _loadFileData(file: File): Promise<void> {
|
||||
const fileData = await this._fileDownloadService.loadDataFor(file, this.fileData).toPromise();
|
||||
|
||||
if (file.isPending) {
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="page-number-wrapper">
|
||||
<mat-icon [svgIcon]="'red:page'"></mat-icon>
|
||||
<div class="text">
|
||||
{{ number }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
.page-number-wrapper {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
|
||||
mat-icon {
|
||||
width: 27px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'redaction-annotation-references-page-indicator',
|
||||
templateUrl: './annotation-references-page-indicator.component.html',
|
||||
styleUrls: ['./annotation-references-page-indicator.component.scss'],
|
||||
})
|
||||
export class AnnotationReferencesPageIndicatorComponent {
|
||||
@Input() number;
|
||||
}
|
||||
@ -48,4 +48,5 @@
|
||||
*ngIf="annotationReferencesService.annotation$ | async as annotation"
|
||||
[annotation]="annotation"
|
||||
[file]="file"
|
||||
(referenceClicked)="annotationClicked($event, null)"
|
||||
></redaction-annotation-references-dialog>
|
||||
|
||||
@ -36,14 +36,14 @@ export class AnnotationsListComponent implements OnChanges {
|
||||
}
|
||||
|
||||
annotationClicked(annotation: AnnotationWrapper, $event: MouseEvent): void {
|
||||
if (($event.target as IqserEventTarget).localName === 'input') {
|
||||
if (($event?.target as IqserEventTarget)?.localName === 'input') {
|
||||
return;
|
||||
}
|
||||
this.pagesPanelActive.emit(false);
|
||||
if (this.isSelected(annotation.annotationId)) {
|
||||
this.deselectAnnotations.emit([annotation]);
|
||||
} else {
|
||||
if (this.canMultiSelect && ($event.ctrlKey || $event.metaKey) && this.selectedAnnotations.length > 0) {
|
||||
if (this.canMultiSelect && ($event?.ctrlKey || $event?.metaKey) && this.selectedAnnotations.length > 0) {
|
||||
this.multiSelectService.activate();
|
||||
}
|
||||
this.selectAnnotations.emit([annotation]);
|
||||
|
||||
@ -22,6 +22,7 @@ import { UserManagementComponent } from './components/user-management/user-manag
|
||||
import { AnnotationReferencesDialogComponent } from './components/annotation-references-dialog/annotation-references-dialog.component';
|
||||
import { AcceptRecommendationDialogComponent } from './dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
|
||||
import { AnnotationCardComponent } from './components/annotation-card/annotation-card.component';
|
||||
import { AnnotationReferencesPageIndicatorComponent } from './components/annotation-references-page-indicator/annotation-references-page-indicator.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
@ -50,6 +51,7 @@ const routes: Routes = [
|
||||
AcceptRecommendationDialogComponent,
|
||||
AnnotationReferencesDialogComponent,
|
||||
AnnotationCardComponent,
|
||||
AnnotationReferencesPageIndicatorComponent,
|
||||
],
|
||||
imports: [
|
||||
RouterModule.forChild(routes),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user