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

File preview layout

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-09 01:14:10 +03:00
parent deb817c782
commit 55fd25aa71
7 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,36 @@
<section [class.hidden]="!viewReady">
<div class="red-top-bar">
<div class="top-bar-row">
<div class="menu left">
<div class="btn-group">
<button class="btn-group-btn" [class.active]="activeViewer === 'ANNOTATED'" (click)="activateViewer('ANNOTATED')">Annotated
</button>
<button class="btn-group-btn" [class.active]="activeViewer === 'REDACTED'" (click)="activateViewer('REDACTED')">Redacted
</button>
</div>
</div>
<div class="menu right ">
<div class="heading-l clamp-1">
{{appStateService.activeFile?.filename}}
</div>
<section class="" [class.hidden]="!viewReady">
<div class="page-header">
<div class="flex-row">
<div class="btn-group">
<button class="btn-group-btn" [class.active]="activeViewer === 'ANNOTATED'"
(click)="activateViewer('ANNOTATED')"
translate="file-preview.annotated.label">
</button>
<button class="btn-group-btn" [class.active]="activeViewer === 'REDACTED'"
(click)="activateViewer('REDACTED')"
translate="file-preview.redacted.label">
</button>
</div>
</div>
<button color="warn" mat-flat-button
translate="file-preview.download-redacted.label"></button>
</div>
<div class="view-container">
<redaction-pdf-viewer [class.visible]="activeViewer === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
[fileStatus]="appStateService.activeFile"
(fileReady)="fileReady('ANNOTATED')"></redaction-pdf-viewer>
<redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
(fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
</div>
<div class="flex red-content-inner">
<div class="left-container">
<redaction-pdf-viewer [class.visible]="activeViewer === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
[fileStatus]="appStateService.activeFile"
(fileReady)="fileReady('ANNOTATED')"></redaction-pdf-viewer>
<redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
(fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
</div>
<div class="right-fixed-container">
test
</div>
</div>
<button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>
<mat-icon svgIcon="red:info"></mat-icon>
</button>

15
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -1,18 +1,13 @@
redaction-pdf-viewer {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
width: calc(100vw - 379px);
height: calc(100vh - 110px);
top: 110px;
&.visible {
z-index: 100;
z-index: 2;
}
}
.view-container{
width: 100%;
height: calc(100vh - 122px);
position: relative;
}

3
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss
View File

@ -6,6 +6,5 @@
}
.viewer {
width: 100%;
height: calc(100vh - 122px)
height: 100%;
}

4
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -1,4 +1,4 @@
<section class="center-section" *ngIf="viewReady">
<section *ngIf="viewReady">
<div class="page-header">
<div class="filters flex-row">
@ -15,7 +15,7 @@
<div *ngIf="appStateService.allProjects?.length === 0 " translate="projects.no-projects.label"></div>
<div class="flex red-content-inner">
<div class="table-container">
<div class="left-container">
<div class="table-header">
<span class="subheading">
{{'projects.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}

4
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -1,4 +1,4 @@
<section class="center-section" *ngIf="viewReady">
<section *ngIf="viewReady">
<div *ngIf="!appStateService.activeProject"
[innerHTML]="'project-overview.no-project.label' | translate:{projectId: projectId}"
class="heading-l"></div>
@ -19,7 +19,7 @@
</div>
<div class="flex red-content-inner">
<div class="table-container">
<div class="left-container">
<div class="table-header">
<span class="subheading">
{{'project-overview.table-header.title.label'| translate:{ length: appStateService.projectFiles?.length || 0 } }}

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

@ -273,6 +273,17 @@
"label": "Requested project: {{projectId}} does not exist! <a href='/ui/projects'>Back to Project Listing. <a/>"
}
},
"file-preview": {
"annotated": {
"label": "Annotated"
},
"redacted": {
"label": "Redacted"
},
"download-redacted": {
"label": "Download Redacted"
}
},
"initials-avatar": {
"unassigned": {
"label": "Unassigned"

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

@ -21,7 +21,7 @@ html, body {
width: 100vw;
box-sizing: border-box;
background-color: $white;
z-index: 1;
z-index: 3;
}
.red-content-inner {
@ -71,7 +71,7 @@ html, body {
margin-top: 20px;
}
.table-container {
.left-container {
height: calc(100vh - 61px - 50px);
width: calc(100vw - 379px);
}