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

UI rework - pdf viwer and loading

Browse Source
This commit is contained in:
Timo Bejan 2020-10-08 10:47:53 +03:00
parent 07022c5264
commit 5e981b3e30
4 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -1,4 +1,4 @@
<section>
<section [class.hidden]="!viewReady">
<div class="red-top-bar">
<div class="top-bar-row">
<div class="menu left">
@ -18,12 +18,17 @@
<div class="view-container">
<redaction-pdf-viewer [class.visible]="group.value === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
[fileStatus]="appStateService.activeFile"></redaction-pdf-viewer>
[fileStatus]="appStateService.activeFile"
(fileReady)="fileReady('ANNOTATED')"></redaction-pdf-viewer>
<redaction-pdf-viewer [class.visible]="group.value === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
[fileStatus]="appStateService.activeFile"></redaction-pdf-viewer>
(fileReady)="fileReady('REDACTED')">
[fileStatus]="appStateService.activeFile">
</redaction-pdf-viewer>
</div>
<button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>
<mat-icon svgIcon="red:info"></mat-icon>
</button>
</section>
<redaction-full-page-loading-indicator [displayed]="!viewReady"></redaction-full-page-loading-indicator>

9
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -17,6 +17,7 @@ export class FilePreviewScreenComponent implements OnInit {
projectId: string;
fileId: string;
private _readyViewers: string[] = [];
constructor(
public readonly appStateService: AppStateService,
@ -53,4 +54,12 @@ export class FilePreviewScreenComponent implements OnInit {
viewerChanged(value: any) {
this._viewerSyncService.activateViewer(value);
}
fileReady(viewer: string) {
this._readyViewers.push(viewer);
}
get viewReady() {
return this._readyViewers.length >= 2;
}
}

6
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -1,4 +1,4 @@
import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Output, ViewChild, EventEmitter} from '@angular/core';
import {AppConfigKey, AppConfigService} from "../../../app-config/app-config.service";
import {FileStatus, FileUploadControllerService} from "@redaction/red-ui-http";
import {Observable, of} from "rxjs";
@ -24,6 +24,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() fileId: string;
@Input() fileType: FileType;
@Input() fileStatus: FileStatus;
@Output() fileReady = new EventEmitter();
@ViewChild('viewer', {static: true}) viewer: ElementRef;
wvInstance: WebViewerInstance;
@ -73,7 +74,8 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
this._configureTextPopup();
instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'});
})
this.fileReady.emit();
});
}
private _loadFile(): Observable<any> {

5
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -178,7 +178,6 @@ html, body {
}
.red-top-bar {
height: 61px;
width: 100%;
@ -224,3 +223,7 @@ html, body {
overflow: auto;
}
.hidden {
display: none;
}