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

separate annotation card component in list

Browse Source
This commit is contained in:
Edi Cziszter 2022-01-10 17:16:37 +02:00
parent 0d15cf694d
commit b89f4a3f78
8 changed files with 66 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,22 @@
<div class="details">
<redaction-type-annotation-icon [annotation]="annotation" [file]="file"></redaction-type-annotation-icon>
<div class="flex-1">
<div>
<strong>{{ annotation.typeLabel | translate }}</strong>
</div>
<div *ngIf="annotation?.type !== 'manual'">
<strong>
<span>{{ annotation.descriptor | translate }}</span
>: </strong
>{{ annotation.type | humanize: false }}
</div>
<div *ngIf="annotation.shortContent && !annotation.isHint">
<strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
</div>
</div>
<div class="active-icon-marker-container">
<iqser-round-checkbox *ngIf="(multiSelectService.active$ | async) && isSelected" [active]="true"></iqser-round-checkbox>
</div>
</div>

13
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss Normal file
View File

@ -0,0 +1,13 @@
.details {
display: flex;
position: relative;
}
.active-icon-marker-container {
min-width: 20px;
}
redaction-type-annotation-icon {
margin-top: 6px;
margin-right: 10px;
}

17
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component, Input } from '@angular/core';
import { AnnotationWrapper } from '../../../../../../models/file/annotation.wrapper';
import { File } from '@red/domain';
import { MultiSelectService } from '../../services/multi-select.service';
@Component({
selector: 'redaction-annotation-card',
templateUrl: './annotation-card.component.html',
styleUrls: ['./annotation-card.component.scss'],
})
export class AnnotationCardComponent {
@Input() annotation: AnnotationWrapper;
@Input() file: File;
@Input() isSelected = false;
constructor(readonly multiSelectService: MultiSelectService) {}
}

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

@ -1,6 +1,6 @@
<div class="content-container">
<div class="dialog references-dialog">
<div class="references-header">
<div class="references-header flex space-between">
<div class="small-label">X REFERENCES</div>
<iqser-circle-button (action)="closeDialog.emit(false)" icon="iqser:close"></iqser-circle-button>
</div>

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

@ -1,8 +1,11 @@
.references-dialog {
position: fixed;
right: 350px;
margin: 0;
right: 370px;
top: 165px;
.references-header {
padding: 13px 13px 0 13px;
align-items: center;
}
}

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

@ -11,31 +11,13 @@
<div class="active-bar-marker"></div>
<div [class.removed]="annotation.isChangeLogRemoved" class="annotation">
<div [matTooltip]="annotation.content" class="details" matTooltipPosition="above">
<redaction-type-annotation-icon [annotation]="annotation" [file]="file"></redaction-type-annotation-icon>
<div class="flex-1">
<div>
<strong>{{ annotation.typeLabel | translate }}</strong>
</div>
<div *ngIf="annotation?.type !== 'manual'">
<strong>
<span>{{ annotation.descriptor | translate }}</span
>: </strong
>{{ annotation.type | humanize: false }}
</div>
<div *ngIf="annotation.shortContent && !annotation.isHint">
<strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
</div>
</div>
<div class="active-icon-marker-container">
<iqser-round-checkbox
*ngIf="(multiSelectService.active$ | async) && isSelected(annotation.annotationId)"
[active]="true"
></iqser-round-checkbox>
</div>
</div>
<redaction-annotation-card
[annotation]="annotation"
[file]="file"
[isSelected]="isSelected(annotation.annotationId)"
[matTooltip]="annotation.content"
matTooltipPosition="above"
></redaction-annotation-card>
<div class="actions-wrapper">
<div

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

@ -16,10 +16,6 @@
min-height: 100%;
}
.active-icon-marker-container {
min-width: 20px;
}
&.active {
&:not(.lower-height) .active-bar-marker {
background-color: variables.$primary;
@ -40,11 +36,6 @@
color: variables.$grey-7;
}
.details {
display: flex;
position: relative;
}
.actions-wrapper {
display: flex;
justify-content: space-between;
@ -74,11 +65,6 @@
}
}
}
redaction-type-annotation-icon {
margin-top: 6px;
margin-right: 10px;
}
}
&:hover,

2
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
View File

@ -21,6 +21,7 @@ import { ViewSwitchComponent } from './components/view-switch/view-switch.compon
import { UserManagementComponent } from './components/user-management/user-management.component';
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';
const routes: Routes = [
{
@ -48,6 +49,7 @@ const routes: Routes = [
UserManagementComponent,
AcceptRecommendationDialogComponent,
AnnotationReferencesDialogComponent,
AnnotationCardComponent,
],
imports: [
RouterModule.forChild(routes),