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 {
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) {

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 dossierId = this.state.dossierId;
readonly resizeHandle = viewChild<ElementRef>('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<void> {
@ -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<string>();
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<string>();
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;
}
}