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

Pull request #5: File preview design

Browse Source 
Merge in RED/ui from file-preview to master

* commit '2c4aa1c0b45be644b6aaa96649787bbb8f1d9749':
  FIle preview details tabs
  File preview layout
This commit is contained in:
Timo Bejan 2020-10-09 10:27:59 +02:00
commit e335a50c3a
11 changed files with 188 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,94 @@
<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>
<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 class="menu right ">
<div class="heading-l clamp-1">
{{appStateService.activeFile?.filename}}
</div>
<button color="warn" mat-flat-button
translate="file-preview.download-redacted.label"></button>
</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">
<div class="actions-row">
<div>Edit</div>
<div>Delete</div>
<div>View</div>
</div>
<div class="tabs">
<div class="tabs-title-row flex-row">
<div class="tab"
[ngClass]="{ active: selectedTab === 'ANNOTATIONS'}"
(click)="selectTab('ANNOTATIONS')">
Annotations
</div>
<div class="tab"
[ngClass]="{ active: selectedTab === 'INFO'}"
(click)="selectTab('INFO')">
Info
</div>
</div>
<div class="tab-content" *ngIf="selectedTab === 'ANNOTATIONS'">
Annotations content
</div>
<div class="tab-content" *ngIf="selectedTab === 'INFO'">
<redaction-status-bar
[config]="[{ length: 1, color: 'grey', title: 'Unassigned'}]"
></redaction-status-bar>
<div class="subtitle stats-subtitle mt-20">
<div>645</div>
<div>9</div>
</div>
<div class="flex-row mt-20">
<redaction-initials-avatar size="large"></redaction-initials-avatar>
<a class="assign-reviewer">+ Assign Reviewer</a>
</div>
<div class="subheading mt-20">
Added on
</div>
<div class="subtitle mt-5">
22 Sep. 2020, 12:15 PM
</div>
<div class="subheading mt-20">
Added by
</div>
<div class="subtitle mt-5">
Timo Bejan
</div>
<div class="subheading mt-20">
Last modified on
</div>
<div class="subtitle mt-5">
22 Sep. 2020, 12:15 PM
</div>
</div>
</div>
</div>
</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>
<button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>
<mat-icon svgIcon="red:info"></mat-icon>
</button>

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

@ -1,18 +1,58 @@
@import "../../../../assets/styles/red-variables.scss";
redaction-pdf-viewer {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
width: calc(100vw - #{$right-container-width});
height: calc(100vh - 110px);
top: 110px;
&.visible {
z-index: 100;
z-index: 2;
}
}
.view-container{
width: 100%;
height: calc(100vh - 122px);
position: relative;
}
.right-fixed-container {
padding: 0;
width: calc(#{$right-container-width} - 1px);
.tabs-title-row {
border-bottom: 1px solid rgba(226,228,233,0.9);
.tab {
font-size: 13px;
font-weight: 600;
line-height: 18px;
padding: 12px;
cursor: pointer;
border-bottom: 3px solid transparent;
&:first-child {
margin-left: 2px;
}
&.active {
color: $red-1;
border-bottom: 3px solid $red-1;
}
}
}
.actions-row {
margin: $right-container-padding $right-container-padding 0;
}
.tab-content {
padding: $right-container-padding;
}
.stats-subtitle {
font-size: 13px;
line-height: 16px;
}
.assign-reviewer {
font-size: 13px;
line-height: 16px;
margin-left: 12px;
}
}

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

@ -1,12 +1,12 @@
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {FileUploadControllerService, ProjectControllerService, StatusControllerService} from "@redaction/red-ui-http";
import {TranslateService} from "@ngx-translate/core";
import {NotificationService} from "../../../notification/notification.service";
import {MatDialog} from "@angular/material/dialog";
import {AppStateService} from "../../../state/app-state.service";
import {FileDetailsDialogComponent} from "./file-details-dialog/file-details-dialog.component";
import {ViewerSyncService} from "../service/viwer-sync.service";
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FileUploadControllerService, ProjectControllerService, StatusControllerService } from '@redaction/red-ui-http';
import { TranslateService } from '@ngx-translate/core';
import { NotificationService } from '../../../notification/notification.service';
import { MatDialog } from '@angular/material/dialog';
import { AppStateService } from '../../../state/app-state.service';
import { FileDetailsDialogComponent } from './file-details-dialog/file-details-dialog.component';
import { ViewerSyncService } from '../service/viwer-sync.service';
@Component({
selector: 'redaction-file-preview-screen',
@ -17,6 +17,7 @@ export class FilePreviewScreenComponent implements OnInit {
projectId: string;
fileId: string;
public selectedTab: 'ANNOTATIONS' | 'INFO' = 'ANNOTATIONS';
private _readyViewers: string[] = [];
constructor(
@ -66,4 +67,8 @@ export class FilePreviewScreenComponent implements OnInit {
activateViewer(value: string) {
this._viewerSyncService.activateViewer(value);
}
public selectTab(value: 'ANNOTATIONS' | 'INFO') {
this.selectedTab = value;
}
}

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 } }}

8
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
View File

@ -24,14 +24,6 @@
}
.project-details-container {
.actions-row {
display: flex;
> div {
padding: 10px;
}
}
.description {
font-size: 13px;
line-height: 18px;

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"

22
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 {
@ -31,10 +31,18 @@ html, body {
.right-fixed-container {
border-left: 1px solid $grey-4;
height: 100%;
width: 330px;
padding: 24px;
width: $right-container-inside-width;
padding: $right-container-padding;
position: fixed;
right: 0;
.actions-row {
display: flex;
> div {
padding: 10px;
}
}
}
.filters {
@ -67,13 +75,17 @@ html, body {
flex: 3;
}
.mt-5 {
margin-top: 5px;
}
.mt-20 {
margin-top: 20px;
}
.table-container {
.left-container {
height: calc(100vh - 61px - 50px);
width: calc(100vw - 379px);
width: calc(100vw - #{$right-container-width});
}
.break-20 {

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

@ -8,12 +8,13 @@ button {
}
a {
color: $blue-1;
color: $red-1;
&:hover {
color: lighten($blue-1, 10%)
color: lighten($red-1, 10%)
}
cursor: pointer;
}
.heading-xl {

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

@ -15,3 +15,7 @@ $blue-1: #4875F7;
$red-1: #F65757;
$yellow-1: #FFB83B;
$green-1: #46CE7D;
$right-container-inside-width: 340px;
$right-container-padding: 16px;
$right-container-width: calc(#{$right-container-inside-width} + 2*#{$right-container-padding} + 1px);