diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index d149bb06b..0bb1ec524 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -1,30 +1,94 @@ -
-
-
-
-
- - -
+
+
+
+
+ +
-
-
- {{appStateService.activeFile?.filename}} +
+ + +
+ +
+
+ + +
+ +
+
+
Edit
+
Delete
+
View
+
+ +
+
+
+ Annotations +
+
+ Info +
+
+
+ Annotations content +
+
+ + +
+
645
+
9
+
+ +
+ + + Assign Reviewer +
+ +
+ Added on +
+
+ 22 Sep. 2020, 12:15 PM +
+ +
+ Added by +
+
+ Timo Bejan +
+ +
+ Last modified on +
+
+ 22 Sep. 2020, 12:15 PM +
-
-
- -
- diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss index 5501ba1d8..4d3c0137c 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss @@ -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; + } +} diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index d0bd0c2e4..4547503ce 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -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; + } } diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss index 3cf8bf021..b422b059c 100644 --- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss +++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss @@ -6,6 +6,5 @@ } .viewer { - width: 100%; - height: calc(100vh - 122px) + height: 100%; } diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index 3f33cf2c6..00fe7ff0a 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -1,4 +1,4 @@ -
+
@@ -15,7 +15,7 @@
-
+
{{'projects.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }} diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 575db46ca..89477b61b 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -1,4 +1,4 @@ -
+
@@ -19,7 +19,7 @@
-
+
{{'project-overview.table-header.title.label'| translate:{ length: appStateService.projectFiles?.length || 0 } }} diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index 893b28e27..c626ee8f2 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -24,14 +24,6 @@ } .project-details-container { - .actions-row { - display: flex; - - > div { - padding: 10px; - } - } - .description { font-size: 13px; line-height: 18px; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index d4f289e75..fa41f5aef 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -273,6 +273,17 @@ "label": "Requested project: {{projectId}} does not exist! Back to Project Listing. " } }, + "file-preview": { + "annotated": { + "label": "Annotated" + }, + "redacted": { + "label": "Redacted" + }, + "download-redacted": { + "label": "Download Redacted" + } + }, "initials-avatar": { "unassigned": { "label": "Unassigned" diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index 232f4784a..75f893978 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -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 { diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss index bf40dd5fe..69bb40bbf 100644 --- a/apps/red-ui/src/assets/styles/red-text-styles.scss +++ b/apps/red-ui/src/assets/styles/red-text-styles.scss @@ -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 { diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index 684280ec9..b7e8da0e5 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/apps/red-ui/src/assets/styles/red-variables.scss @@ -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);