From d7bbf20585e32a29ac671a663b83cb4b303deec8 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Thu, 20 Jun 2024 18:59:38 +0300 Subject: [PATCH] WIP on VM/RED-8748 RED-8748 - fixed document info view --- .../document-info.component.scss | 17 +++-- .../file-workload.component.html | 64 ++++++++++--------- .../file-workload.component.scss | 13 ++-- .../file-workload/file-workload.component.ts | 2 + ...ile-preview-right-container.component.html | 2 +- .../file-preview-right-container.component.ts | 2 + .../file-preview-screen.component.ts | 22 ++++++- .../services/annotation-manager.service.ts | 2 +- apps/red-ui/src/assets/i18n/redact/de.json | 20 +----- apps/red-ui/src/assets/i18n/redact/en.json | 24 +------ apps/red-ui/src/assets/i18n/scm/de.json | 23 +------ apps/red-ui/src/assets/i18n/scm/en.json | 24 +------ apps/red-ui/src/assets/pdftron/stylesheet.css | 2 +- apps/red-ui/src/styles.scss | 9 ++- 14 files changed, 92 insertions(+), 134 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss index 38a5345f4..c066e0ebf 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss @@ -2,13 +2,20 @@ :host { display: block; - position: absolute; height: 100%; background: white; z-index: 1; width: 100%; } +.right-title > div { + display: flex; + + > iqser-circle-button:not(:last-child) { + margin-right: 2px; + } +} + .right-content { flex-direction: column; @@ -24,14 +31,6 @@ } } -.right-title > div { - display: flex; - - > iqser-circle-button:not(:last-child) { - margin-right: 2px; - } -} - .section { padding: 24px; flex-direction: column; diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html index 9ee7d1829..8b898cac9 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html @@ -1,4 +1,4 @@ - +
-
+
- -
+
+ +
- + -
- +
+ +
@@ -237,7 +239,7 @@ + + + + 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 49f308453..9d8652eb3 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 @@ -32,6 +32,10 @@ justify-content: space-between; } + .border-left { + border-left: 1px solid var(--iqser-separator); + } + .content { overflow: hidden; width: 100%; @@ -73,16 +77,13 @@ } .quick-navigation { + height: 100%; border-right: 1px solid var(--iqser-separator); min-width: var(--qiuck-navigation-width); overflow: hidden; display: flex; flex-direction: column; - &.border-left { - border-left: 1px solid var(--iqser-separator); - } - .jump { min-height: 32px; display: flex; @@ -128,3 +129,7 @@ [hidden] { display: none !important; } + +redaction-document-info { + width: var(--workload-width); +} diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts index 0887d8e04..3193df974 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts @@ -45,6 +45,7 @@ import { AnnotationsListComponent } from '../annotations-list/annotations-list.c import { PageExclusionComponent } from '../page-exclusion/page-exclusion.component'; import { PagesComponent } from '../pages/pages.component'; import { ReadonlyBannerComponent } from '../readonly-banner/readonly-banner.component'; +import { DocumentInfoComponent } from '../document-info/document-info.component'; const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape']; const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; @@ -73,6 +74,7 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; EmptyStateComponent, CapitalizePipe, NgTemplateOutlet, + DocumentInfoComponent, ], }) export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, OnDestroy { diff --git a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html index 84bf479a4..54f172f50 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html @@ -6,7 +6,7 @@ icon="red:needs-work" > - + diff --git a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts index bcfc72924..5fb96a4d5 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts @@ -7,6 +7,7 @@ import { NgIf } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; import { DocumentInfoComponent } from '../document-info/document-info.component'; import { FileWorkloadComponent } from '../file-workload/file-workload.component'; +import { getConfig } from '@iqser/common-ui'; @Component({ selector: 'redaction-file-preview-right-container', @@ -16,6 +17,7 @@ import { FileWorkloadComponent } from '../file-workload/file-workload.component' imports: [EmptyStateComponent, NgIf, TranslateModule, DocumentInfoComponent, FileWorkloadComponent], }) export class FilePreviewRightContainerComponent { + readonly isDocumine = getConfig().IS_DOCUMINE; constructor( readonly pdf: PdfViewer, readonly state: FilePreviewStateService, 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 b80779f13..dadb3656e 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 @@ -70,6 +70,7 @@ import { FilePreviewRightContainerComponent } from './components/right-container import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component'; import { FileHeaderComponent } from './components/file-header/file-header.component'; import { StructuredComponentManagementComponent } from './components/structured-component-management/structured-component-management.component'; +import { DocumentInfoService } from './services/document-info.service'; @Component({ templateUrl: './file-preview-screen.component.html', @@ -143,6 +144,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni private readonly _readableRedactionsService: ReadableRedactionsService, private readonly _dossierTemplatesService: DossierTemplatesService, private readonly _multiSelectService: MultiSelectService, + private readonly _documentInfoService: DocumentInfoService, ) { super(); effect(() => { @@ -181,6 +183,11 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this._stampService.stampPDF().then(); } }); + + effect(() => { + this._documentInfoService.shown(); + this.#updateViewerPosition(); + }); } get changed() { @@ -332,7 +339,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } async ngOnInit(): Promise { - document.getElementById('viewer').classList.add(this.isDocumine ? 'documine-viewer' : 'redaction-viewer'); + this.#updateViewerPosition(); const file = this.state.file(); if (!file) { @@ -782,4 +789,17 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni isPageExcluded: this.state.file().isPageExcluded(this.pdf.currentPage()), }; } + + #updateViewerPosition() { + if (this.isDocumine) { + if (this._documentInfoService.shown()) { + document.getElementById('viewer').classList.add('document-info'); + } else { + document.getElementById('viewer').classList.remove('document-info'); + } + document.getElementById('viewer').classList.add('documine-viewer'); + return; + } + document.getElementById('viewer').classList.add('redaction-viewer'); + } } diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts index 2d9efa7cd..a2457e199 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts @@ -186,7 +186,7 @@ export class REDAnnotationManager { } async #toggleHiddenAnnotation(annotation: Annotation, hide = false) { - if (bool(annotation.getCustomData('skipped'))) { + if (bool(annotation?.getCustomData('skipped'))) { const fileId = urlFileId(); const hideSkipped = getLocalStorageDataByFileId(fileId, HIDE_SKIPPED); if (hideSkipped || this.isHidden(annotation.Id)) { diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json index b1979d2a8..beadc0231 100644 --- a/apps/red-ui/src/assets/i18n/redact/de.json +++ b/apps/red-ui/src/assets/i18n/redact/de.json @@ -1625,7 +1625,6 @@ "dossier-state": "Dossier-Status", "dossier-templates": "Dossier-Vorlagen", "empty": "Leer", - "filter-by": "Filter:", "needs-work": "Annotationen", "people": "Dossier-Mitglieder" }, @@ -1688,9 +1687,7 @@ "title": "SMTP-Konto konfigurieren" }, "help-mode": { - "bottom-text": "Hilfemodus", "clicking-anywhere-on": "Klicken Sie auf eine beliebige Stelle, um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, verändert sich der Mauszeiger. So erkennen Sie, dass ein Element anklickbar ist.", - "instructions": "Anleitung für Hilfemodus öffnen", "options": { "do-not-show-again": "Nicht mehr anzeigen" }, @@ -2202,7 +2199,6 @@ "title": "Berichte", "upload-document": "Dokument hochladen" }, - "reset-filters": "Zurücksetzen", "reset-password-dialog": { "actions": { "cancel": "Abbrechen", @@ -2317,16 +2313,10 @@ }, "title": "Authentifizierung aktivieren" }, - "table-header": { - "selected-count": "{count} ausgewählt" - }, "tenant-resolve": { "contact-administrator": "Workspace vergessen? Bitte wenden Sie sich an Ihren Administrator.", "header": { - "first-time": "Melden Sie sich zum ersten Mal bei einem Workspace an", - "join-another-domain": "Oder treten Sie einem andren Workspace bei", "no-role-log-out": "Keine Benutzerrolle zugewiesen. Bitten Sie Ihren Admin, Ihnen eine Rolle zuzuweisen, und versuchen Sie es dann noch einmal.", - "sign-in-previous-domain": "Melden Sie sich bei einem bereits verwendeten Workspace an", "youre-logged-out": "Sie wurden erfolgreich abgemeldet." }, "input-placeholder": "Ihr Workspace" @@ -2549,13 +2539,5 @@ }, "watermark-is-used": "Dieses Wasserzeichen wird bereits verwendet. Möchten Sie es dennocht löschen?" }, - "workflow": { - "selection": { - "all": "Alle", - "count": "{count} ausgewählt", - "none": "Keiner", - "select": "Auswählen" - } - }, "yesterday": "Gestern" -} \ No newline at end of file +} diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json index 1882eee2f..6e890120f 100644 --- a/apps/red-ui/src/assets/i18n/redact/en.json +++ b/apps/red-ui/src/assets/i18n/redact/en.json @@ -1602,7 +1602,6 @@ } }, "filter-menu": { - "filter-options": "Filter options", "filter-types": "Filter", "label": "Filter", "pages-without-annotations": "Only pages without annotations", @@ -1625,7 +1624,6 @@ "dossier-state": "Dossier state", "dossier-templates": "Dossier templates", "empty": "Empty", - "filter-by": "Filter by:", "needs-work": "Workload", "people": "Dossier member(s)" }, @@ -1688,9 +1686,7 @@ "title": "Configure SMTP account" }, "help-mode": { - "bottom-text": "Help mode", "clicking-anywhere-on": "Click anywhere on the screen to display the interactive elements. When you hover over an interactive element, the mouse cursor changes to show the element is clickable.", - "instructions": "Open help mode instructions", "options": { "do-not-show-again": "Do not show again" }, @@ -2202,7 +2198,6 @@ "title": "Reports", "upload-document": "Upload a document" }, - "reset-filters": "Reset", "reset-password-dialog": { "actions": { "cancel": "Cancel", @@ -2317,16 +2312,10 @@ }, "title": "Enable authentication" }, - "table-header": { - "selected-count": "{count} selected" - }, "tenant-resolve": { "contact-administrator": "Cannot remember the workspace? Please contact your administrator.", "header": { - "first-time": "Sign in for the first time to a workspace", - "join-another-domain": "Or join another workspace", "no-role-log-out": "User role missing. Please ask your administrator to assign roles before logging in again.", - "sign-in-previous-domain": "Sign in to a previously used workspace", "youre-logged-out": "You have successfully been logged out." }, "input-placeholder": "Your workspace" @@ -2409,9 +2398,6 @@ "question": "Choose how to proceed:", "title": "The dictionary already has entries." }, - "upload-file": { - "upload-area-text": "Click or drag & drop anywhere on this area..." - }, "upload-status": { "dialog": { "actions": { @@ -2549,13 +2535,5 @@ }, "watermark-is-used": "This watermark is already in use. Do you still want to delete it?" }, - "workflow": { - "selection": { - "all": "All", - "count": "{count} selected", - "none": "None", - "select": "Select" - } - }, "yesterday": "Yesterday" -} \ No newline at end of file +} diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json index 591a262d3..01ca0da8c 100644 --- a/apps/red-ui/src/assets/i18n/scm/de.json +++ b/apps/red-ui/src/assets/i18n/scm/de.json @@ -1625,7 +1625,6 @@ "dossier-state": "Dossier state", "dossier-templates": "Regelsätze", "empty": "Leer", - "filter-by": "Filter:", "needs-work": "Arbeitsvorrat", "people": "Dossier-Mitglied(er)" }, @@ -1688,9 +1687,7 @@ "title": "SMTP-Konto konfigurieren" }, "help-mode": { - "bottom-text": "Hilfe-Modus", "clicking-anywhere-on": "Klicken Sie auf eine beliebige Stelle des Bildschirms um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, verändert sich der Mauszeiger, um Ihnen zu zeigen, ob ein Element interaktiv ist.", - "instructions": "Hilfe-Modus-Anleitungen öffnen", "options": { "do-not-show-again": "Do not show again" }, @@ -2202,7 +2199,6 @@ "title": "Berichte", "upload-document": "Ein Dokument hochladen" }, - "reset-filters": "Zurücksetzen", "reset-password-dialog": { "actions": { "cancel": "Abbrechen", @@ -2317,16 +2313,10 @@ }, "title": "Authentifizierung aktivieren" }, - "table-header": { - "selected-count": "{count} selected" - }, "tenant-resolve": { "contact-administrator": "Cannot remember the workspace? Please contact your administrator.", "header": { - "first-time": "Sign in for the first time to a workspace", - "join-another-domain": "Or join another workspace", "no-role-log-out": "User role missing. Please ask your administrator to assign roles before logging in again.", - "sign-in-previous-domain": "Sign in to a previously used workspace", "youre-logged-out": "You have successfully been logged out." }, "input-placeholder": "your workspace" @@ -2409,9 +2399,6 @@ "question": "Wählen Sie, wie Sie fortfahren möchten:", "title": "Das Wörterbuch hat bereits Einträge!" }, - "upload-file": { - "upload-area-text": "Click or drag & drop anywhere on this area..." - }, "upload-status": { "dialog": { "actions": { @@ -2549,13 +2536,5 @@ }, "watermark-is-used": "This watermark is already in use, are you sure you want to delete it?" }, - "workflow": { - "selection": { - "all": "Alle", - "count": "{count} ausgewählt", - "none": "Keiner", - "select": "Wählen" - } - }, "yesterday": "Gestern" -} \ No newline at end of file +} diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json index 8c62be31a..132e96d9c 100644 --- a/apps/red-ui/src/assets/i18n/scm/en.json +++ b/apps/red-ui/src/assets/i18n/scm/en.json @@ -1602,7 +1602,6 @@ } }, "filter-menu": { - "filter-options": "Filter options", "filter-types": "Filter", "label": "Filter", "pages-without-annotations": "Only pages without annotations", @@ -1625,7 +1624,6 @@ "dossier-state": "Dossier state", "dossier-templates": "Dossier templates", "empty": "Empty", - "filter-by": "Filter by:", "needs-work": "Workload", "people": "Dossier member(s)" }, @@ -1688,9 +1686,7 @@ "title": "Configure SMTP Account" }, "help-mode": { - "bottom-text": "Help mode", "clicking-anywhere-on": " Clicking anywhere on the screen will show you which areas are interactive. Hovering an interactive area will change the mouse cursor to let you know if the element is interactive.", - "instructions": "Open help mode instructions", "options": { "do-not-show-again": "Do not show again" }, @@ -2202,7 +2198,6 @@ "title": "Reports", "upload-document": "Upload a document" }, - "reset-filters": "Reset", "reset-password-dialog": { "actions": { "cancel": "Cancel", @@ -2317,16 +2312,10 @@ }, "title": "Enable authentication" }, - "table-header": { - "selected-count": "{count} selected" - }, "tenant-resolve": { "contact-administrator": "Cannot remember the workspace? Please contact your administrator.", "header": { - "first-time": "Sign in for the first time to a workspace", - "join-another-domain": "Or join another workspace", "no-role-log-out": "User role missing. Please ask your administrator to assign roles before logging in again.", - "sign-in-previous-domain": "Sign in to a previously used workspace", "youre-logged-out": "You have successfully been logged out." }, "input-placeholder": "your workspace" @@ -2409,9 +2398,6 @@ "question": "Choose how you want to proceed:", "title": "The dictionary already has entries!" }, - "upload-file": { - "upload-area-text": "Click or drag & drop anywhere on this area..." - }, "upload-status": { "dialog": { "actions": { @@ -2549,13 +2535,5 @@ }, "watermark-is-used": "This watermark is already in use, are you sure you want to delete it?" }, - "workflow": { - "selection": { - "all": "All", - "count": "{count} selected", - "none": "None", - "select": "Select" - } - }, "yesterday": "Yesterday" -} \ No newline at end of file +} diff --git a/apps/red-ui/src/assets/pdftron/stylesheet.css b/apps/red-ui/src/assets/pdftron/stylesheet.css index 03050f66e..294ad5c91 100644 --- a/apps/red-ui/src/assets/pdftron/stylesheet.css +++ b/apps/red-ui/src/assets/pdftron/stylesheet.css @@ -57,7 +57,7 @@ button.Button[data-element='LOAD_ALL_ANNOTATIONS'] > img[src='/ui/assets/icons/g } .MainHeader { - height: 36px !important; + height: 37px !important; } .footer { diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index 732d5843b..205a6afba 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -187,6 +187,13 @@ body { ); height: calc(100% - calc(var(--iqser-top-bar-height) + 50px)); bottom: 0; - right: calc(var(--qiuck-navigation-width) + 2px); + right: calc(var(--qiuck-navigation-width) + 3px); position: absolute; + + &.document-info { + width: calc( + 100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--workload-width) - 3px + ); + right: calc(var(--workload-width) + 1px); + } }