From e8c98be687719b086e6f779e0a28c07fc0fc3a63 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Mon, 25 Nov 2024 18:19:43 +0200 Subject: [PATCH 1/3] RED-9885 - wip --- .../file-workload.component.scss | 2 + ...ctured-component-management.component.scss | 1 + .../file-preview-screen.component.html | 8 +- .../file-preview-screen.component.scss | 26 +++++ .../file-preview-screen.component.ts | 106 +++++++++++++----- apps/red-ui/src/assets/config/config.json | 10 +- 6 files changed, 119 insertions(+), 34 deletions(-) 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 78536d529..30ce46369 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 @@ -23,6 +23,7 @@ } .annotations-wrapper { + background-color: white; display: flex; flex: 1; overflow: hidden; @@ -45,6 +46,7 @@ &.documine-width { width: calc(var(--documine-workload-content-width) - 55px); border-right: 1px solid var(--iqser-separator); + background: white; z-index: 1; .workload-separator { diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss index ffc3f5364..c99b62a2b 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss @@ -23,6 +23,7 @@ mat-icon { } .components-container { + background: white; display: flex; flex-direction: column; font-size: 12px; diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html index 41b9e50a3..25a712301 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html @@ -3,14 +3,18 @@
-
-
+
+
+ @if (isDocumine) { +
+ } +
('resize'); + readonly container = viewChild('container'); + drag = false; + moveX = 0; protected readonly isDocumine = getConfig().IS_DOCUMINE; @ViewChild('annotationFilterTemplate', { read: TemplateRef, @@ -243,6 +242,30 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni ); } + @Bind() + mouseDown(event: MouseEvent) { + if (!this.isDocumine) return; + this.drag = true; + } + + @Bind() + mouseMove(event: MouseEvent) { + 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); + + document.body.style.setProperty('--structured-component-management-width', newLeftWidth); + event.preventDefault(); + } + + @Bind() + mouseUp(event: MouseEvent) { + if (!this.isDocumine) return; + this.drag = false; + } + deleteEarmarksOnViewChange$() { const isChangingFromEarmarksViewMode$ = this._viewModeService.viewMode$.pipe( pairwise(), @@ -266,12 +289,24 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni 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(); } @@ -355,6 +390,15 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni 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(); @@ -430,6 +474,14 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni ); } + #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)}%`; + } + async #updateViewMode(): Promise { const viewMode = untracked(this._viewModeService.viewMode); this._logger.info(`[PDF] Update ${viewMode} view mode`); diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json index deb14e6da..2ccc6f6d1 100644 --- a/apps/red-ui/src/assets/config/config.json +++ b/apps/red-ui/src/assets/config/config.json @@ -1,9 +1,9 @@ { "ADMIN_CONTACT_NAME": null, "ADMIN_CONTACT_URL": null, - "API_URL": "https://dan1.iqser.cloud", + "API_URL": "https://frontend2.iqser.cloud", "APP_NAME": "RedactManager", - "IS_DOCUMINE": false, + "IS_DOCUMINE": true, "RULE_EDITOR_DEV_ONLY": false, "AUTO_READ_TIME": 3, "BACKEND_APP_VERSION": "4.4.40", @@ -13,13 +13,13 @@ "MAX_RETRIES_ON_SERVER_ERROR": 3, "OAUTH_CLIENT_ID": "redaction", "OAUTH_IDP_HINT": null, - "OAUTH_URL": "https://dan1.iqser.cloud/auth", + "OAUTH_URL": "https://frontend2.iqser.cloud/auth", "RECENT_PERIOD_IN_HOURS": 24, "SELECTION_MODE": "structural", "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview", "ANNOTATIONS_THRESHOLD": 1000, - "THEME": "redact", - "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/", + "THEME": "scm", + "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/", "AVAILABLE_NOTIFICATIONS_DAYS": 30, "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60, "NOTIFICATIONS_THRESHOLD": 1000, From fd76d110d48b38e6d3cb748ded18f3acef01ce78 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Wed, 27 Nov 2024 16:28:47 +0200 Subject: [PATCH 2/3] RED-9885: implemented resize file-preview components. --- .../dossier-overview-screen.component.html | 2 +- .../file-workload.component.html | 2 +- .../file-preview-screen.component.html | 14 +++- .../file-preview-screen.component.scss | 10 ++- .../file-preview-screen.component.ts | 68 ++++++------------- libs/common-ui | 2 +- 6 files changed, 38 insertions(+), 60 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html index 63002d513..7317dccec 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html @@ -56,7 +56,7 @@
-
+
{{ '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 }} } } diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html index 25a712301..8a8a8057c 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html @@ -3,7 +3,7 @@
-
+
@if (isDocumine) { -
+
} -
('resize'); - readonly container = viewChild('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 { diff --git a/libs/common-ui b/libs/common-ui index ae0eebcc6..72e760fff 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit ae0eebcc6feceba4fe5c930d79eadd9b9a60b7e9 +Subproject commit 72e760fff8bc1adb72969b1e6e6971cdb88d55fe From 86deaceade48b22c699ca6e180bdcea6a52b96f7 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Wed, 27 Nov 2024 16:31:58 +0200 Subject: [PATCH 3/3] RED-9885: removed unused class, reset the config file to redact. --- .../file-preview/file-preview-screen.component.html | 2 +- apps/red-ui/src/assets/config/config.json | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html index 8a8a8057c..b9223722d 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html @@ -4,7 +4,7 @@
-
+