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

WIP on VM/RED-8748

Browse Source 
RED-8748 - fixed document info view
This commit is contained in:
Valentin Mihai 2024-06-20 18:59:38 +03:00
parent 6f80f5f4ad
commit d7bbf20585
14 changed files with 92 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss
View File

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

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

@ -1,4 +1,4 @@
<ng-container *ngIf="!isDocumine">
<ng-container *ngIf="!isDocumine && !documentInfoService.shown()">
<div
*ngIf="excludedPagesService.shown(); else selectAndFilter"
class="right-title heading"
@ -73,37 +73,39 @@
</div>
<div class="annotations-wrapper" [class.documine-direction]="isDocumine">
<div
#quickNavigation
(keydown)="preventKeyDefault($event)"
(keyup)="preventKeyDefault($event)"
[class.active-panel]="pagesPanelActive"
[class.border-left]="isDocumine"
class="quick-navigation"
tabindex="0"
>
<div [class.border-left]="isDocumine">
<div
(click)="scrollQuickNavFirst()"
[class.disabled]="pdf.currentPage() === 1"
[matTooltip]="'file-preview.quick-nav.jump-first' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
#quickNavigation
*ngIf="!(documentInfoService.shown() && isDocumine); else documentInfo"
(keydown)="preventKeyDefault($event)"
(keyup)="preventKeyDefault($event)"
[class.active-panel]="pagesPanelActive"
class="quick-navigation"
tabindex="0"
>
<mat-icon svgIcon="iqser:nav-first"></mat-icon>
</div>
<div
(click)="scrollQuickNavFirst()"
[class.disabled]="pdf.currentPage() === 1"
[matTooltip]="'file-preview.quick-nav.jump-first' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
>
<mat-icon svgIcon="iqser:nav-first"></mat-icon>
</div>
<redaction-pages (click)="pagesPanelActive = true" [pages]="displayedPages"></redaction-pages>
<redaction-pages (click)="pagesPanelActive = true" [pages]="displayedPages"></redaction-pages>
<div
(click)="scrollQuickNavLast()"
[class.disabled]="pdf.currentPage() === state.file()?.numberOfPages"
[matTooltip]="'file-preview.quick-nav.jump-last' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
>
<mat-icon svgIcon="iqser:nav-last"></mat-icon>
<div
(click)="scrollQuickNavLast()"
[class.disabled]="pdf.currentPage() === state.file()?.numberOfPages"
[matTooltip]="'file-preview.quick-nav.jump-last' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
>
<mat-icon svgIcon="iqser:nav-last"></mat-icon>
</div>
</div>
</div>
@ -237,7 +239,7 @@
<ng-template #annotationsFilter>
<iqser-popup-filter
*ngIf="documentInfoService.hidden()"
*ngIf="documentInfoService.hidden() || isDocumine"
[actionsTemplate]="annotationFilterActionTemplate"
[attr.help-mode-key]="'workload_filter'"
[fileId]="state.file()?.id"
@ -245,3 +247,7 @@
[secondaryFiltersSlug]="'secondaryFilters'"
></iqser-popup-filter>
</ng-template>
<ng-template #documentInfo>
<redaction-document-info id="document-info"></redaction-document-info>
</ng-template>

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

@ -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);
}

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

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

2
apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html
View File

@ -6,7 +6,7 @@
icon="red:needs-work"
></iqser-empty-state>
<redaction-document-info *ngIf="documentInfoService.shown()" id="document-info"></redaction-document-info>
<redaction-document-info *ngIf="documentInfoService.shown() && !isDocumine" id="document-info"></redaction-document-info>
<redaction-file-workload *ngIf="!file.excluded"></redaction-file-workload>
</ng-container>

2
apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts
View File

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

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

@ -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<void> {
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');
}
}

2
apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
View File

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

20
apps/red-ui/src/assets/i18n/redact/de.json
View File

@ -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": "<b>Klicken Sie auf eine beliebige Stelle,</b> um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, <b>verändert sich der Mauszeiger</b>. 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? <b>Bitte wenden Sie sich an Ihren Administrator.</b>",
"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"
}
}

24
apps/red-ui/src/assets/i18n/redact/en.json
View File

@ -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": "<b>Click anywhere on the screen </b> to display the interactive elements. When you hover over an interactive element, <b> the mouse cursor changes</b> 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? <b>Please contact your administrator.</b>",
"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"
}
}

23
apps/red-ui/src/assets/i18n/scm/de.json
View File

@ -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": "<b>Klicken Sie auf eine beliebige Stelle des Bildschirms </b> um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, <b>verändert sich der Mauszeiger</b>, 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? <b>Please contact your administrator.</b>",
"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"
}
}

24
apps/red-ui/src/assets/i18n/scm/en.json
View File

@ -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": "<b> Clicking anywhere on the screen </b> will show you which areas are interactive. Hovering an interactive area will <b> change the mouse cursor </b> 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? <b>Please contact your administrator.</b>",
"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"
}
}

2
apps/red-ui/src/assets/pdftron/stylesheet.css
View File

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

9
apps/red-ui/src/styles.scss
View File

@ -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);
}
}