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

Pull request #128: Annotation list fixes

Browse Source 
Merge in RED/ui from RED-1178 to master

* commit '6e271b884494e91e92aef410182ad3744b78a24d':
  Annotation list fixes
This commit is contained in:
Timo Bejan 2021-03-18 08:55:04 +01:00
commit 86c724b7d9
2 changed files with 61 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -250,39 +250,41 @@
<div
(click)="annotationClicked(annotation)"
class="annotation-wrapper"
*ngFor="let annotation of displayedAnnotations[activeViewerPage]?.annotations"
[class.active]="annotationIsSelected(annotation)"
attr.annotation-id="{{ annotation.id }}"
attr.annotation-page="{{ activeViewerPage }}"
class="annotation"
[class.removed]="annotation.isChangeLogRemoved"
[class.active]="annotationIsSelected(annotation)"
>
<redaction-hidden-action (action)="logAnnotation(annotation)" [requiredClicks]="2">
<div class="details">
<redaction-type-annotation-icon [annotation]="annotation"></redaction-type-annotation-icon>
<div class="flex-1">
<div>
<strong>{{ annotation.typeLabel | translate }}</strong>
</div>
<div *ngIf="annotation.dictionary && annotation.dictionary !== 'manual'">
<strong
><span>{{ annotation.descriptor | translate }}</span
>: </strong
>{{ annotation.dictionary | humanize: false }}
</div>
<div *ngIf="annotation.content && !annotation.isHint">
<strong><span translate="content"></span>: </strong>{{ annotation.content }}
<div class="active-marker"></div>
<div class="annotation" [class.removed]="annotation.isChangeLogRemoved">
<redaction-hidden-action (action)="logAnnotation(annotation)" [requiredClicks]="2">
<div class="details">
<redaction-type-annotation-icon [annotation]="annotation"></redaction-type-annotation-icon>
<div class="flex-1">
<div>
<strong>{{ annotation.typeLabel | translate }}</strong>
</div>
<div *ngIf="annotation.dictionary && annotation.dictionary !== 'manual'">
<strong
><span>{{ annotation.descriptor | translate }}</span
>: </strong
>{{ annotation.dictionary | humanize: false }}
</div>
<div *ngIf="annotation.content && !annotation.isHint">
<strong><span translate="content"></span>: </strong>{{ annotation.content }}
</div>
</div>
<redaction-annotation-actions
(annotationsChanged)="annotationsChangedByReviewAction($event)"
[annotation]="annotation"
[canPerformAnnotationActions]="canPerformAnnotationActions"
[viewer]="activeViewer"
></redaction-annotation-actions>
</div>
<redaction-annotation-actions
(annotationsChanged)="annotationsChangedByReviewAction($event)"
[annotation]="annotation"
[canPerformAnnotationActions]="canPerformAnnotationActions"
[viewer]="activeViewer"
></redaction-annotation-actions>
</div>
</redaction-hidden-action>
<redaction-comments [annotation]="annotation"></redaction-comments>
</redaction-hidden-action>
<redaction-comments [annotation]="annotation"></redaction-comments>
</div>
</div>
</div>
</div>

54
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -87,31 +87,45 @@
.annotations {
overflow: hidden;
width: 100%;
height: 100%;
height: calc(100% - 32px);
.annotation {
border-bottom: 1px solid $separator;
padding: 10px 21px 10px 6px;
font-size: 11px;
line-height: 14px;
cursor: pointer;
.annotation-wrapper {
display: flex;
flex-direction: column;
border-left: 4px solid transparent;
border-bottom: 1px solid $separator;
&.removed {
text-decoration: line-through;
color: $grey-7;
.active-marker {
min-width: 4px;
min-height: 100%;
}
.details {
&.active {
.active-marker {
background-color: $primary;
}
}
.annotation {
padding: 10px 21px 10px 6px;
font-size: 11px;
line-height: 14px;
cursor: pointer;
display: flex;
position: relative;
}
flex-direction: column;
redaction-type-annotation-icon {
margin-top: 6px;
margin-right: 10px;
&.removed {
text-decoration: line-through;
color: $grey-7;
}
.details {
display: flex;
position: relative;
}
redaction-type-annotation-icon {
margin-top: 6px;
margin-right: 10px;
}
}
&:hover {
@ -121,10 +135,6 @@
display: flex;
}
}
&.active {
border-left: 4px solid $primary;
}
}
&:hover {