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

RED-9885: implemented resize file-preview components.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-11-27 16:28:47 +02:00
parent 21f67651ff
commit fd76d110d4
6 changed files with 38 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html
View File

@ -56,7 +56,7 @@
</iqser-workflow>
</div>
<div *ngIf="dossierAttributes$ | async" [class.collapsed]="collapsedDetails" class="right-container">
<div *ngIf="dossierAttributes$ | async" [class.collapsed]="collapsedDetails" class="right-container with-transition">
<redaction-dossier-details
(toggleCollapse)="collapsedDetails = !collapsedDetails"
[dossierAttributes]="dossierAttributes"

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

@ -172,7 +172,7 @@
translate="file-preview.tabs.annotations.reset"
></a>
{{ 'file-preview.tabs.annotations.the-filters' | translate }}
} @else if (state.componentReferenceIds?.length === 0) {
} @else if (state.componentReferenceIds()?.length === 0) {
{{ 'file-preview.tabs.annotations.no-annotations' | translate }}
}
}

14
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
View File

@ -3,7 +3,7 @@
<div class="overlay-shadow"></div>
<div class="content-inner" #container>
<div class="content-inner">
<div class="content-container" [class.documine-content-container]="isDocumine">
<redaction-structured-component-management
*ngIf="isDocumine"
@ -12,10 +12,18 @@
></redaction-structured-component-management>
</div>
@if (isDocumine) {
<div class="resize" #resize></div>
<div
class="resize"
#resize
cdkDrag
(cdkDragStarted)="onDragStart($event)"
(cdkDragMoved)="onDragMove($event)"
(cdkDragEnded)="onDragEnd($event)"
cdkDragLockAxis="x"
cdkDragBoundary=".content-inner"
></div>
}
<!-- Here comes PDF Viewer-->
<div class="right-container" [class.documine-container]="isDocumine">
<redaction-file-preview-right-container
[iqserDisableStopPropagation]="state.isEditingReviewer()"

10
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
View File

@ -1,14 +1,13 @@
.content-inner {
position: absolute;
&.dragging {
pointer-events: none !important;
}
}
.content-container {
position: relative;
&.documine-content-container {
width: calc(var(--structured-component-management-width) + 14px);
transition: width 0.5s ease-in-out;
}
}
.right-container {
@ -45,7 +44,6 @@
&.documine-container {
width: calc(100% - var(--structured-component-management-width));
transition: width 0.5s ease-in-out;
}
}

68
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
View File

@ -1,6 +1,5 @@
import { ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
@ -81,6 +80,7 @@ import { DocumentInfoService } from './services/document-info.service';
import { RectangleAnnotationDialog } from './dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component';
import { ANNOTATION_ACTION_ICONS, ANNOTATION_ACTIONS } from './utils/constants';
import { ComponentLogService } from '@services/entity-services/component-log.service';
import { CdkDrag, CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
@Component({
templateUrl: './file-preview-screen.component.html',
@ -95,21 +95,16 @@ import { ComponentLogService } from '@services/entity-services/component-log.ser
TypeFilterComponent,
FileHeaderComponent,
StructuredComponentManagementComponent,
CdkDrag,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FilePreviewScreenComponent
extends AutoUnsubscribe
implements OnInit, OnDestroy, OnAttach, OnDetach, AfterViewInit, ComponentCanDeactivate
{
export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate {
readonly circleButtonTypes = CircleButtonTypes;
readonly roles = Roles;
readonly fileId = this.state.fileId;
readonly dossierId = this.state.dossierId;
readonly resizeHandle = viewChild<ElementRef>('resize');
readonly container = viewChild<ElementRef>('container');
drag = false;
moveX = 0;
protected readonly isDocumine = getConfig().IS_DOCUMINE;
@ViewChild('annotationFilterTemplate', {
read: TemplateRef,
@ -242,28 +237,30 @@ export class FilePreviewScreenComponent
);
}
@Bind()
mouseDown(event: MouseEvent) {
onDragStart(event: CdkDragStart) {
event.event.preventDefault();
if (!this.isDocumine) return;
this.drag = true;
const contentInnerElement = document.body.getElementsByClassName('content-inner').item(0) as HTMLElement;
if (contentInnerElement) {
contentInnerElement.classList.add('dragging');
}
}
@Bind()
mouseMove(event: MouseEvent) {
onDragMove(event: CdkDragMove) {
if (!this.isDocumine) return;
if (!this.drag) return;
if (this.#getPixelsInPercentage(event.screenX) <= this.#getPixelsInPercentage(250)) return;
this.moveX = event.screenX;
const newLeftWidth = this.#convertPixelsToPercent(this.moveX - this.resizeHandle().nativeElement.getBoundingClientRect().width / 2);
const e = event.event as MouseEvent;
const newLeftWidth = `${this.#getPixelsInPercentage(e.clientX - this.resizeHandle().nativeElement.style.width / 2)}%`;
document.body.style.setProperty('--structured-component-management-width', newLeftWidth);
event.preventDefault();
this.resizeHandle().nativeElement.style.transform = 'none';
}
@Bind()
mouseUp(event: MouseEvent) {
onDragEnd(event: CdkDragEnd) {
event.event.preventDefault();
if (!this.isDocumine) return;
this.drag = false;
const contentInnerElement = document.body.getElementsByClassName('content-inner').item(0) as HTMLElement;
if (contentInnerElement) {
contentInnerElement.classList.remove('dragging');
}
}
deleteEarmarksOnViewChange$() {
@ -289,24 +286,12 @@ export class FilePreviewScreenComponent
super.ngOnDetach();
this.pdf.instance.UI.hotkeys.off('esc');
this.pdf.instance.UI.iframeWindow.document.removeEventListener('click', this.handleViewerClick);
this.resizeHandle().nativeElement.removeEventListener('mousedown', this.mouseDown);
this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousedown', this.mouseDown);
this.container().nativeElement.removeEventListener('mousemove', this.mouseMove);
this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousemove', this.mouseMove);
this.container().nativeElement.removeEventListener('mouseup', this.mouseUp);
this.pdf.instance.UI.iframeWindow.document.removeEventListener('mouseup', this.mouseUp);
this._changeRef.markForCheck();
}
ngOnDestroy() {
this.pdf.instance.UI.hotkeys.off('esc');
this.pdf.instance.UI.iframeWindow.document.removeEventListener('click', this.handleViewerClick);
this.resizeHandle().nativeElement.removeEventListener('mousedown', this.mouseDown);
this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousedown', this.mouseDown);
this.container().nativeElement.removeEventListener('mousemove', this.mouseMove);
this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousemove', this.mouseMove);
this.container().nativeElement.removeEventListener('mouseup', this.mouseUp);
this.pdf.instance.UI.iframeWindow.document.removeEventListener('mouseup', this.mouseUp);
super.ngOnDestroy();
}
@ -390,15 +375,6 @@ export class FilePreviewScreenComponent
this.pdf.instance.UI.iframeWindow.document.addEventListener('click', this.handleViewerClick);
}
ngAfterViewInit() {
this.resizeHandle().nativeElement.addEventListener('mousedown', this.mouseDown);
this.pdf.instance.UI.iframeWindow.document.addEventListener('mousedown', this.mouseDown);
this.container().nativeElement.addEventListener('mousemove', this.mouseMove);
this.pdf.instance.UI.iframeWindow.document.addEventListener('mousemove', this.mouseMove);
this.container().nativeElement.addEventListener('mouseup', this.mouseUp);
this.pdf.instance.UI.iframeWindow.document.addEventListener('mouseup', this.mouseUp);
}
async openRectangleAnnotationDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {
const file = this.state.file();
@ -475,11 +451,7 @@ export class FilePreviewScreenComponent
}
#getPixelsInPercentage(pixels: number) {
return Math.round((100 - ((window.screen.width - pixels) / window.screen.width) * 100 + Number.EPSILON) * 100) / 100;
}
#convertPixelsToPercent(pixels: number) {
return `${this.#getPixelsInPercentage(pixels)}%`;
return (pixels / window.screen.width) * 100;
}
async #updateViewMode(): Promise<void> {

2
libs/common-ui

@ -1 +1 @@
Subproject commit ae0eebcc6feceba4fe5c930d79eadd9b9a60b7e9
Subproject commit 72e760fff8bc1adb72969b1e6e6971cdb88d55fe