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

Annotations list scrollbar fix

Browse Source
This commit is contained in:
Adina Țeudan 2022-04-04 15:09:57 +03:00
parent 3cf3b48295
commit 43d3ae8d94
7 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss
View File

@ -4,7 +4,7 @@
display: flex;
position: absolute;
top: 6px;
right: 8px;
right: 19px;
}
.popover {

17
apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss
View File

@ -1,8 +1,25 @@
@use 'variables';
@use 'common-mixins';
:host {
width: 100%;
position: relative;
overflow: hidden;
&:hover {
overflow-y: auto;
@include common-mixins.scroll-bar;
}
&.has-scrollbar:hover .annotation-wrapper {
.annotation {
padding-right: 5px;
}
redaction-annotation-details {
right: 8px;
}
}
}
.annotation-wrapper {

29
apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
View File

@ -1,6 +1,17 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
Output,
SimpleChanges,
TemplateRef,
} from '@angular/core';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { FilterService, IqserEventTarget } from '@iqser/common-ui';
import { FilterService, HasScrollbarDirective, IqserEventTarget } from '@iqser/common-ui';
import { MultiSelectService } from '../../services/multi-select.service';
import { AnnotationReferencesService } from '../../services/annotation-references.service';
import { UserPreferenceService } from '@services/user-preference.service';
@ -15,7 +26,7 @@ import { PdfViewer } from '../../services/pdf-viewer.service';
styleUrls: ['./annotations-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AnnotationsListComponent implements OnChanges {
export class AnnotationsListComponent extends HasScrollbarDirective implements OnChanges {
@Input() annotations: AnnotationWrapper[];
@Input() selectedAnnotations: AnnotationWrapper[];
@Input() annotationActionsTemplate: TemplateRef<unknown>;
@ -33,9 +44,13 @@ export class AnnotationsListComponent implements OnChanges {
private readonly _userPreferenceService: UserPreferenceService,
private readonly _viewModeService: ViewModeService,
private readonly _pdf: PdfViewer,
) {}
protected readonly _elementRef: ElementRef,
protected readonly _changeDetector: ChangeDetectorRef,
) {
super(_elementRef, _changeDetector);
}
ngOnChanges(changes: SimpleChanges): void {
ngOnChanges(changes?: SimpleChanges): void {
if (changes.annotations && this.annotations && !this._viewModeService.isTextHighlights) {
this.annotations = this.annotations.sort(this.annotationsPositionCompare);
}
@ -43,6 +58,10 @@ export class AnnotationsListComponent implements OnChanges {
if (this._viewModeService.isTextHighlights) {
this._updateHighlightGroups();
}
setTimeout(() => {
super.ngOnChanges();
}, 0);
}
annotationClicked(annotation: AnnotationWrapper, $event: MouseEvent): void {

1
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
View File

@ -162,7 +162,6 @@
[hidden]="excludedPagesService.shown$ | async"
class="annotations"
id="annotations-list"
iqserHasScrollbar
tabindex="1"
>
<ng-container *ngIf="activeViewerPage && !displayedAnnotations.get(activeViewerPage)?.length">

15
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
View File

@ -63,7 +63,8 @@
.annotations-wrapper {
display: flex;
height: 100%;
flex: 1;
overflow: hidden;
.content {
overflow: hidden;
@ -75,7 +76,6 @@
.quick-navigation,
.annotations {
overflow-y: scroll;
outline: none;
&.active-panel {
@ -125,21 +125,12 @@
}
.annotations {
overflow: hidden;
width: 100%;
display: flex;
flex: 1;
align-items: center;
flex-direction: column;
&:hover {
overflow-y: auto;
@include common-mixins.scroll-bar;
}
&.has-scrollbar:hover::ng-deep .annotation-wrapper .annotation {
padding-right: 5px;
}
overflow: hidden;
}
}

2
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -82,7 +82,7 @@
.workload-separator {
border-bottom: 1px solid var(--iqser-separator);
height: 32px;
min-height: 32px;
box-sizing: border-box;
padding: 0 10px;
display: flex;

2
libs/common-ui

@ -1 +1 @@
Subproject commit 6c0823a94da5b33af366c693ccd94a0f3f37f7ce
Subproject commit 45dacb0b5ce69f64297791b63ba45c084c87e6bf