From c81ad67844eee505ee1c0606edc6618e80fbe0e5 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Thu, 12 Dec 2024 17:47:56 +0200 Subject: [PATCH] RED-9885: fixed resize bar behavior & style. --- .../file-preview-screen.component.scss | 6 +- .../file-preview-screen.component.ts | 120 +++++++++--------- 2 files changed, 66 insertions(+), 60 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss index 3ccbdf1e1..8dfc6eb59 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss @@ -58,9 +58,9 @@ redaction-pdf-viewer.hidden { } .resize { - background: #444857; + background: var(--iqser-grey-4); height: 100%; - width: 14px; + width: 10px; cursor: col-resize; position: relative; z-index: 10; @@ -74,7 +74,7 @@ redaction-pdf-viewer.hidden { transform: translate(-50%, -50%); width: 3px; height: 15px; - border-inline: 1px solid #fff; + border-inline: 1px solid var(--iqser-grey-1); } @media only screen and (max-width: 1015px) { diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts index 33a23038f..4c3506752 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts @@ -122,6 +122,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni readonly fileId = this.state.fileId; readonly dossierId = this.state.dossierId; readonly resizeHandle = viewChild('resize'); + #overlayElement: HTMLDivElement | null = null; constructor( readonly pdf: PdfViewer, @@ -177,16 +178,13 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this._fileDataService.loadAnnotations(file).then(); } - effect( - () => { - if (this._documentViewer.loaded()) { - this._pageRotationService.clearRotations(); - this._viewerHeaderService.disable(ROTATION_ACTION_BUTTONS); - this.viewerReady().then(); - } - }, - { allowSignalWrites: true }, - ); + effect(() => { + if (this._documentViewer.loaded()) { + this._pageRotationService.clearRotations(); + this._viewerHeaderService.disable(ROTATION_ACTION_BUTTONS); + this.viewerReady().then(); + } + }); effect(() => { this.state.updateExcludedPagesStyle(); @@ -252,10 +250,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni onDragStart(event: CdkDragStart) { event.event.preventDefault(); if (!this.isDocumine) return; - const contentInnerElement = document.body.getElementsByClassName('content-inner').item(0) as HTMLElement; - if (contentInnerElement) { - contentInnerElement.classList.add('dragging'); - } + this.#createDragOverlay(); } onDragMove(event: CdkDragMove) { @@ -269,10 +264,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni onDragEnd(event: CdkDragEnd) { event.event.preventDefault(); if (!this.isDocumine) return; - const contentInnerElement = document.body.getElementsByClassName('content-inner').item(0) as HTMLElement; - if (contentInnerElement) { - contentInnerElement.classList.remove('dragging'); - } + this.#removeDragOverlay(); } deleteEarmarksOnViewChange$() { @@ -311,7 +303,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni handleEscInsideViewer($event: KeyboardEvent) { $event.preventDefault(); - if (!!this._annotationManager.selected[0]) { + if (this._annotationManager.selected[0]) { const doesHaveWrapper = this._fileDataService.find(this._annotationManager.selected[0]?.Id); if (!doesHaveWrapper) { this._annotationManager.delete(this._annotationManager.selected[0]?.Id); @@ -332,24 +324,17 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni @Bind() handleViewerClick(event: MouseEvent) { this._ngZone.run(() => { - if (event.isTrusted) { - const clickedElement = event.target as HTMLElement; - const actionIconClicked = ANNOTATION_ACTION_ICONS.some(action => - (clickedElement as HTMLImageElement).src?.includes(action), - ); - const actionClicked = ANNOTATION_ACTIONS.some(action => clickedElement.getAttribute('aria-label')?.includes(action)); - if (this._multiSelectService.active() && !actionIconClicked && !actionClicked) { - if ( - clickedElement.querySelector('#selectionrect') || - clickedElement.id === `pageWidgetContainer${this.pdf.currentPage()}` - ) { - if (!this._annotationManager.selected.length) { - this._multiSelectService.deactivate(); - } - } else { - this._multiSelectService.deactivate(); - } + if (!event.isTrusted) return; + const clickedElement = event.target as HTMLElement; + const actionIconClicked = ANNOTATION_ACTION_ICONS.some(action => (clickedElement as HTMLImageElement).src?.includes(action)); + const actionClicked = ANNOTATION_ACTIONS.some(action => clickedElement.getAttribute('aria-label')?.includes(action)); + if (!this._multiSelectService.active() || actionIconClicked || actionClicked) return; + if (clickedElement.querySelector('#selectionrect') || clickedElement.id === `pageWidgetContainer${this.pdf.currentPage()}`) { + if (!this._annotationManager.selected.length) { + this._multiSelectService.deactivate(); } + } else { + this._multiSelectService.deactivate(); } }); } @@ -471,7 +456,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } #getPixelsInPercentage(pixels: number) { - return (pixels / window.screen.width) * 100; + return (pixels / document.body.getBoundingClientRect().width) * 100; } async #updateViewMode(): Promise { @@ -902,32 +887,30 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni const components = this._componentLogService.all; const filteredComponentIds = untracked(this.state.componentReferenceIds); - if (filteredComponentIds && annotationFilters) { - const filteredComponentIdsSet = new Set(filteredComponentIds); + if (!filteredComponentIds || !annotationFilters) return annotationFilters; - const references = new Set(); - for (const component of components) { - for (const componentValue of component.componentValues) { - for (const reference of componentValue.entityReferences) { - if (filteredComponentIdsSet.has(reference.id)) { - references.add(reference.type); - } + const filteredComponentIdsSet = new Set(filteredComponentIds); + + const references = new Set(); + for (const component of components) { + for (const componentValue of component.componentValues) { + for (const reference of componentValue.entityReferences) { + if (filteredComponentIdsSet.has(reference.id)) { + references.add(reference.type); } } } - - return annotationFilters - .map(filter => { - const filteredChildren = filter.children.filter(c => references.has(c.label.replace(/ /g, '_').toLowerCase())); - if (filteredChildren.length) { - return { ...filter, children: filteredChildren }; - } - return null; - }) - .filter(f => f !== null); } - return annotationFilters; + return annotationFilters + .map(filter => { + const filteredChildren = filter.children.filter(c => references.has(c.label.replace(/ /g, '_').toLowerCase())); + if (filteredChildren.length) { + return { ...filter, children: filteredChildren }; + } + return null; + }) + .filter(f => f !== null); } #updateViewerPosition() { @@ -942,4 +925,27 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } document.getElementById('viewer')?.classList?.add('redaction-viewer'); } + + #createDragOverlay() { + if (this.#overlayElement || document.body.contains(this.#overlayElement)) { + return; + } + + this.#overlayElement = document.createElement('div'); + this.#overlayElement.style.position = 'fixed'; + this.#overlayElement.style.top = '0'; + this.#overlayElement.style.left = '0'; + this.#overlayElement.style.width = '100%'; + this.#overlayElement.style.height = '100%'; + this.#overlayElement.style.zIndex = '9999'; + this.#overlayElement.style.background = 'transparent'; + this.#overlayElement.style.pointerEvents = 'all'; + document.body.appendChild(this.#overlayElement); + } + + #removeDragOverlay() { + if (!this.#overlayElement || !document.body.contains(this.#overlayElement)) return; + document.body.removeChild(this.#overlayElement); + this.#overlayElement = null; + } }