From 43d3ae8d949357e6ea4c4f758f2b4736bbe248f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 4 Apr 2022 15:09:57 +0300 Subject: [PATCH] Annotations list scrollbar fix --- .../annotation-details.component.scss | 2 +- .../annotations-list.component.scss | 17 +++++++++++ .../annotations-list.component.ts | 29 +++++++++++++++---- .../file-workload.component.html | 1 - .../file-workload.component.scss | 15 ++-------- .../src/assets/styles/red-components.scss | 2 +- libs/common-ui | 2 +- 7 files changed, 47 insertions(+), 21 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss index fec173f04..39f778b05 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss @@ -4,7 +4,7 @@ display: flex; position: absolute; top: 6px; - right: 8px; + right: 19px; } .popover { diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss index 8d1dcbc2c..fa13bdb37 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss @@ -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 { diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts index e6876ac9b..8a9a75a27 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts @@ -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; @@ -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 { diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html index 98e3023c0..a46926f4a 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html @@ -162,7 +162,6 @@ [hidden]="excludedPagesService.shown$ | async" class="annotations" id="annotations-list" - iqserHasScrollbar tabindex="1" > diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss index fc8f05483..c024f5406 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss @@ -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; } } diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index 29cb5e9ed..06e080399 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -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; diff --git a/libs/common-ui b/libs/common-ui index 6c0823a94..45dacb0b5 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 6c0823a94da5b33af366c693ccd94a0f3f37f7ce +Subproject commit 45dacb0b5ce69f64297791b63ba45c084c87e6bf