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

RED-9885: fixed resize bar behavior & style.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-12-12 17:47:56 +02:00
parent 13797f1fb3
commit c81ad67844
2 changed files with 66 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,9 +58,9 @@ redaction-pdf-viewer.hidden {
} }
.resize { .resize {
background: #444857; background: var(--iqser-grey-4);
height: 100%; height: 100%;
width: 14px; width: 10px;
cursor: col-resize; cursor: col-resize;
position: relative; position: relative;
z-index: 10; z-index: 10;
@ -74,7 +74,7 @@ redaction-pdf-viewer.hidden {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 3px; width: 3px;
height: 15px; height: 15px;
border-inline: 1px solid #fff; border-inline: 1px solid var(--iqser-grey-1);
} }
@media only screen and (max-width: 1015px) { @media only screen and (max-width: 1015px) {

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

@ -122,6 +122,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
readonly fileId = this.state.fileId; readonly fileId = this.state.fileId;
readonly dossierId = this.state.dossierId; readonly dossierId = this.state.dossierId;
readonly resizeHandle = viewChild<ElementRef>('resize'); readonly resizeHandle = viewChild<ElementRef>('resize');
#overlayElement: HTMLDivElement | null = null;
constructor( constructor(
readonly pdf: PdfViewer, readonly pdf: PdfViewer,
@ -177,16 +178,13 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
this._fileDataService.loadAnnotations(file).then(); this._fileDataService.loadAnnotations(file).then();
} }
effect( effect(() => {
() => { if (this._documentViewer.loaded()) {
if (this._documentViewer.loaded()) { this._pageRotationService.clearRotations();
this._pageRotationService.clearRotations(); this._viewerHeaderService.disable(ROTATION_ACTION_BUTTONS);
this._viewerHeaderService.disable(ROTATION_ACTION_BUTTONS); this.viewerReady().then();
this.viewerReady().then(); }
} });
},
{ allowSignalWrites: true },
);
effect(() => { effect(() => {
this.state.updateExcludedPagesStyle(); this.state.updateExcludedPagesStyle();
@ -252,10 +250,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
onDragStart(event: CdkDragStart) { onDragStart(event: CdkDragStart) {
event.event.preventDefault(); event.event.preventDefault();
if (!this.isDocumine) return; if (!this.isDocumine) return;
const contentInnerElement = document.body.getElementsByClassName('content-inner').item(0) as HTMLElement; this.#createDragOverlay();
if (contentInnerElement) {
contentInnerElement.classList.add('dragging');
}
} }
onDragMove(event: CdkDragMove) { onDragMove(event: CdkDragMove) {
@ -269,10 +264,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
onDragEnd(event: CdkDragEnd) { onDragEnd(event: CdkDragEnd) {
event.event.preventDefault(); event.event.preventDefault();
if (!this.isDocumine) return; if (!this.isDocumine) return;
const contentInnerElement = document.body.getElementsByClassName('content-inner').item(0) as HTMLElement; this.#removeDragOverlay();
if (contentInnerElement) {
contentInnerElement.classList.remove('dragging');
}
} }
deleteEarmarksOnViewChange$() { deleteEarmarksOnViewChange$() {
@ -311,7 +303,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
handleEscInsideViewer($event: KeyboardEvent) { handleEscInsideViewer($event: KeyboardEvent) {
$event.preventDefault(); $event.preventDefault();
if (!!this._annotationManager.selected[0]) { if (this._annotationManager.selected[0]) {
const doesHaveWrapper = this._fileDataService.find(this._annotationManager.selected[0]?.Id); const doesHaveWrapper = this._fileDataService.find(this._annotationManager.selected[0]?.Id);
if (!doesHaveWrapper) { if (!doesHaveWrapper) {
this._annotationManager.delete(this._annotationManager.selected[0]?.Id); this._annotationManager.delete(this._annotationManager.selected[0]?.Id);
@ -332,24 +324,17 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
@Bind() @Bind()
handleViewerClick(event: MouseEvent) { handleViewerClick(event: MouseEvent) {
this._ngZone.run(() => { this._ngZone.run(() => {
if (event.isTrusted) { if (!event.isTrusted) return;
const clickedElement = event.target as HTMLElement; const clickedElement = event.target as HTMLElement;
const actionIconClicked = ANNOTATION_ACTION_ICONS.some(action => const actionIconClicked = ANNOTATION_ACTION_ICONS.some(action => (clickedElement as HTMLImageElement).src?.includes(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;
const actionClicked = ANNOTATION_ACTIONS.some(action => clickedElement.getAttribute('aria-label')?.includes(action)); if (clickedElement.querySelector('#selectionrect') || clickedElement.id === `pageWidgetContainer${this.pdf.currentPage()}`) {
if (this._multiSelectService.active() && !actionIconClicked && !actionClicked) { if (!this._annotationManager.selected.length) {
if ( this._multiSelectService.deactivate();
clickedElement.querySelector('#selectionrect') ||
clickedElement.id === `pageWidgetContainer${this.pdf.currentPage()}`
) {
if (!this._annotationManager.selected.length) {
this._multiSelectService.deactivate();
}
} else {
this._multiSelectService.deactivate();
}
} }
} else {
this._multiSelectService.deactivate();
} }
}); });
} }
@ -471,7 +456,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
} }
#getPixelsInPercentage(pixels: number) { #getPixelsInPercentage(pixels: number) {
return (pixels / window.screen.width) * 100; return (pixels / document.body.getBoundingClientRect().width) * 100;
} }
async #updateViewMode(): Promise<void> { async #updateViewMode(): Promise<void> {
@ -902,32 +887,30 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
const components = this._componentLogService.all; const components = this._componentLogService.all;
const filteredComponentIds = untracked(this.state.componentReferenceIds); const filteredComponentIds = untracked(this.state.componentReferenceIds);
if (filteredComponentIds && annotationFilters) { if (!filteredComponentIds || !annotationFilters) return annotationFilters;
const filteredComponentIdsSet = new Set(filteredComponentIds);
const references = new Set<string>(); const filteredComponentIdsSet = new Set(filteredComponentIds);
for (const component of components) {
for (const componentValue of component.componentValues) { const references = new Set<string>();
for (const reference of componentValue.entityReferences) { for (const component of components) {
if (filteredComponentIdsSet.has(reference.id)) { for (const componentValue of component.componentValues) {
references.add(reference.type); 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() { #updateViewerPosition() {
@ -942,4 +925,27 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
} }
document.getElementById('viewer')?.classList?.add('redaction-viewer'); 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;
}
} }