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

FIle preview details tabs

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-09 02:13:49 +03:00
parent 55fd25aa71
commit 2c4aa1c0b4
7 changed files with 142 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,65 @@
</div>
<div class="right-fixed-container">
test
<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>

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

@ -1,8 +1,8 @@
@import "../../../../assets/styles/red-variables.scss";
redaction-pdf-viewer {
position: absolute;
width: calc(100vw - 379px);
width: calc(100vw - #{$right-container-width});
height: calc(100vh - 110px);
top: 110px;
@ -11,3 +11,48 @@ redaction-pdf-viewer {
}
}
.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;
}
}

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;

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

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