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

Merge branch 'RED-9885' into 'master'

Browse Source 
Resolve RED-9885

Closes RED-9885

See merge request redactmanager/red-ui!728
This commit is contained in:
Valentin-Gabriel Mihai 2024-11-27 15:36:10 +01:00
commit 9ef4ba4af5
8 changed files with 93 additions and 30 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 }}
}
}

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

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

1
apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
View File

@ -23,6 +23,7 @@ mat-icon {
}
.components-container {
background: white;
display: flex;
flex-direction: column;
font-size: 12px;

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

@ -11,7 +11,19 @@
[dictionaries]="state.dictionaries"
></redaction-structured-component-management>
</div>
@if (isDocumine) {
<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()"

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

@ -1,5 +1,9 @@
.content-inner {
position: absolute;
&.dragging {
pointer-events: none !important;
}
}
.content-container {
@ -53,6 +57,26 @@ redaction-pdf-viewer.hidden {
visibility: hidden;
}
.resize {
background: #444857;
height: 100%;
width: 14px;
cursor: col-resize;
position: relative;
z-index: 10;
user-select: none;
}
.resize::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3px;
height: 15px;
border-inline: 1px solid #fff;
}
@media only screen and (max-width: 1015px) {
.label {
display: none;

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

@ -1,9 +1,21 @@
import { ActivatedRouteSnapshot, NavigationExtras, Router, RouterLink } from '@angular/router';
import { ChangeDetectorRef, Component, effect, NgZone, OnDestroy, OnInit, TemplateRef, untracked, ViewChild } from '@angular/core';
import { ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
effect,
ElementRef,
NgZone,
OnDestroy,
OnInit,
TemplateRef,
untracked,
viewChild,
ViewChild,
} from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { ComponentCanDeactivate } from '@guards/can-deactivate.guard';
import {
CircleButtonComponent,
CircleButtonTypes,
ConfirmOption,
ConfirmOptions,
@ -12,20 +24,11 @@ import {
ErrorService,
getConfig,
IConfirmationDialogData,
IqserAllowDirective,
IqserDialog,
LoadingService,
Toaster,
} from '@iqser/common-ui';
import {
copyLocalStorageFiltersValues,
Filter,
FilterService,
IFilter,
INestedFilter,
NestedFilter,
processFilters,
} from '@iqser/common-ui/lib/filtering';
import { copyLocalStorageFiltersValues, FilterService, INestedFilter, NestedFilter, processFilters } from '@iqser/common-ui/lib/filtering';
import { AutoUnsubscribe, Bind, bool, List, OnAttach, OnDetach } from '@iqser/common-ui/lib/utils';
import { AnnotationWrapper } from '@models/file/annotation.wrapper';
import { ManualRedactionEntryTypes, ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
@ -68,12 +71,7 @@ import { ViewModeService } from './services/view-mode.service';
import { RedactTextData } from './utils/dialog-types';
import { MultiSelectService } from './services/multi-select.service';
import { NgIf } from '@angular/common';
import { ViewSwitchComponent } from './components/view-switch/view-switch.component';
import { ProcessingIndicatorComponent } from '@shared/components/processing-indicator/processing-indicator.component';
import { UserManagementComponent } from './components/user-management/user-management.component';
import { TranslateModule } from '@ngx-translate/core';
import { InitialsAvatarComponent } from '@common-ui/users';
import { FileActionsComponent } from '../shared-dossiers/components/file-actions/file-actions.component';
import { FilePreviewRightContainerComponent } from './components/right-container/file-preview-right-container.component';
import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
import { FileHeaderComponent } from './components/file-header/file-header.component';
@ -82,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',
@ -90,27 +89,22 @@ import { ComponentLogService } from '@services/entity-services/component-log.ser
standalone: true,
imports: [
NgIf,
ViewSwitchComponent,
ProcessingIndicatorComponent,
UserManagementComponent,
TranslateModule,
InitialsAvatarComponent,
CircleButtonComponent,
IqserAllowDirective,
FileActionsComponent,
DisableStopPropagationDirective,
RouterLink,
FilePreviewRightContainerComponent,
TypeFilterComponent,
FileHeaderComponent,
StructuredComponentManagementComponent,
CdkDrag,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
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');
protected readonly isDocumine = getConfig().IS_DOCUMINE;
@ViewChild('annotationFilterTemplate', {
read: TemplateRef,
@ -243,6 +237,32 @@ 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');
}
}
onDragMove(event: CdkDragMove) {
if (!this.isDocumine) return;
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);
this.resizeHandle().nativeElement.style.transform = 'none';
}
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');
}
}
deleteEarmarksOnViewChange$() {
const isChangingFromEarmarksViewMode$ = this._viewModeService.viewMode$.pipe(
pairwise(),
@ -430,6 +450,10 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
);
}
#getPixelsInPercentage(pixels: number) {
return (pixels / window.screen.width) * 100;
}
async #updateViewMode(): Promise<void> {
const viewMode = untracked(this._viewModeService.viewMode);
this._logger.info(`[PDF] Update ${viewMode} view mode`);

2
libs/common-ui

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