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

Quick navigation list items

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-15 03:28:54 +03:00
parent 8a0281aac3
commit bfca1865dd
7 changed files with 80 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
View File

@ -10,7 +10,7 @@ export class InitialsAvatarComponent implements OnInit {
public username: string;
@Input()
public color: 'red-white' | 'gray-red' | 'gray-dark' = 'gray-dark';
public color = 'lightgray-dark';
@Input()
public size: 'small' | 'large' = 'small';

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

@ -58,20 +58,26 @@
[ngClass]="{ active: item.pageNumber === activeViewerPage }"
(click)="selectPage(item.pageNumber)"
>
<div class="page-number">Page {{ item.pageNumber }}</div>
<div class="stats-subtitle subtitle mt-5">
<div *ngIf="item.redactions" class="center">
<mat-icon svgIcon="red:secret"></mat-icon>
{{item.redactions}} Redactions
</div>
<div *ngIf="item.hints" class="center">
<mat-icon svgIcon="red:idea"></mat-icon>
{{item.hints}} Hints
</div>
<div *ngIf="item.hints" class="center">
<mat-icon svgIcon="red:info"></mat-icon>
{{item.ignore}} Ignore
</div>
<div class="page-number subtitle">{{ item.pageNumber }}</div>
<div *ngIf="item.hints" class="page-stats subtitle">
<div class="oval darkgray-white x-small">H</div>
{{item.hints}}
</div>
<div *ngIf="item.redactions" class="page-stats subtitle">
<div class="square darkgray-white x-small">R</div>
{{item.redactions}}
</div>
<div *ngIf="item.comments" class="page-stats subtitle">
<div class="oval darkgray-white x-small">C</div>
{{item.comments}}
</div>
<div *ngIf="item.requests" class="page-stats subtitle">
<div class="oval red-white x-small">S</div>
{{item.requests}}
</div>
<div *ngIf="item.ignore" class="page-stats subtitle">
<div class="oval lightgray-white x-small">I</div>
{{item.ignore}}
</div>
</div>
</div>

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

@ -105,6 +105,9 @@ redaction-pdf-viewer {
}
.page-navigation {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
border-bottom: 1px solid $separator;
padding: 14px;
@ -115,7 +118,19 @@ redaction-pdf-viewer {
}
.page-number {
font-weight: 600;
border: 1px solid $separator;
padding: 7px;
margin-right: 3px;
width: 14px;
text-align: center;
}
.page-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
opacity: 1;
}
&.active {

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

@ -45,7 +45,14 @@ export class FilePreviewScreenComponent implements OnInit {
public fileId: string;
public annotations: Annotations.Annotation[] = [];
public selectedAnnotation: Annotations.Annotation;
public quickNavigation: { pageNumber: number, redactions: number, hints: number, ignore: number; }[] = [];
public quickNavigation: {
pageNumber: number,
hints: number,
redactions: number,
comments: number;
suggestions: number,
ignore: number;
}[] = [];
private _manualRedactionEntry: ManualRedactionEntry;
@ -137,7 +144,7 @@ export class FilePreviewScreenComponent implements OnInit {
const pageNumber = annotation.getPageNumber();
let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber);
if (!el) {
el = { pageNumber, redactions: 0, hints: 0, ignore: 0 };
el = { pageNumber, redactions: 0, hints: 0, ignore: 0, comments: 0, suggestions: 0 };
this.quickNavigation.push(el);
}
if (annotation.Id.startsWith('hint:')) {

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

@ -57,7 +57,7 @@
</div>
<div class="flex-1">
<redaction-initials-avatar [username]="user.name"
color="gray-red"
color="lightgray-red"
withName="true"
></redaction-initials-avatar>
</div>

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

@ -120,7 +120,7 @@
<div class="owner flex-row mt-20">
<redaction-initials-avatar [username]="user.name"
size="large"
color="gray-red"
color="lightgray-red"
withName="true"
></redaction-initials-avatar>
</div>
@ -136,10 +136,10 @@
<redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>
</div>
<div class="member">
<div class="oval large">+2</div>
<div class="oval large white-dark">+2</div>
</div>
<div class="member">
<div class="oval red large">+</div>
<div class="oval red-white large">+</div>
</div>
</div>
</div>

42
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -1,44 +1,62 @@
@import "red-variables";
.oval {
.oval, .square {
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
height: 24px;
width: 24px;
border-radius: 12px;
font-size: 10px;
border: 1px solid #E2E4E9;
letter-spacing: 0;
line-height: 12px;
text-align: center;
text-transform: uppercase;
font-family: Inter, sans-serif;
border: none;
&.large {
height: 32px;
width: 32px;
border-radius: 16px;
font-size: 13px;
}
&.gray-dark {
background-color: $grey-4;
border: none;
&.x-small {
height: 16px;
width: 16px;
font-size: 11px;
line-height: 14px;
}
&.gray-red {
&.lightgray-dark {
background-color: $grey-4;
}
&.lightgray-red {
background-color: $grey-4;
color: $red-1;
border: none;
}
&.darkgray-white {
background-color: $grey-1;
color: $white;
}
&.lightgray-white {
background-color: $grey-5;
color: $white;
}
&.red-white {
background-color: $red-1;
color: $white;
border: none;
}
&.white-dark {
border: 1px solid #E2E4E9;
}
}
.oval {
border-radius: 50%;
}
.stats-subtitle {