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

Color Scheme update

Browse Source
This commit is contained in:
Timo Bejan 2020-10-08 11:07:42 +03:00
parent 05a474e707
commit f340b487de
8 changed files with 90 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,11 +2,12 @@
<div class="red-top-bar">
<div class="top-bar-row">
<div class="menu left">
<mat-button-toggle-group #group="matButtonToggleGroup" name="type" value="ANNOTATED"
(change)="viewerChanged(group.value)">
<mat-button-toggle value="ANNOTATED">Annotated</mat-button-toggle>
<mat-button-toggle value="REDACTED">Redacted</mat-button-toggle>
</mat-button-toggle-group>
<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">
@ -17,13 +18,11 @@
</div>
<div class="view-container">
<redaction-pdf-viewer [class.visible]="group.value === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
<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]="group.value === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
(fileReady)="fileReady('REDACTED')">
[fileStatus]="appStateService.activeFile">
</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>

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

@ -51,10 +51,6 @@ export class FilePreviewScreenComponent implements OnInit {
});
}
viewerChanged(value: any) {
this._viewerSyncService.activateViewer(value);
}
fileReady(viewer: string) {
this._readyViewers.push(viewer);
}
@ -62,4 +58,12 @@ export class FilePreviewScreenComponent implements OnInit {
get viewReady() {
return this._readyViewers.length >= 2;
}
get activeViewer() {
return this._viewerSyncService.activeViewer;
}
activateViewer(value: string) {
this._viewerSyncService.activateViewer(value);
}
}

16
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -29,9 +29,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('viewer', {static: true}) viewer: ElementRef;
wvInstance: WebViewerInstance;
_annotatedFileData: Blob;
_originalFileData: Blob;
_redactedFileData: Blob;
_fileData: Blob;
constructor(
@ -82,20 +80,20 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
let fileObs$: Observable<any>;
switch (this.fileType) {
case FileType.ANNOTATED:
fileObs$ = this._annotatedFileData ? of(this._annotatedFileData) : this._fileUploadControllerService.downloadAnnotatedFile(this.fileId, true, 'body').pipe(tap(data => {
this._annotatedFileData = data;
fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadAnnotatedFile(this.fileId, true, 'body').pipe(tap(data => {
this._fileData = data;
}));
break;
case FileType.REDACTED:
fileObs$ = this._redactedFileData ? of(this._redactedFileData) : this._fileUploadControllerService.downloadRedactedFile(this.fileId, true, 'body').pipe(tap(data => {
this._redactedFileData = data;
fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadRedactedFile(this.fileId, true, 'body').pipe(tap(data => {
this._fileData = data;
}));
break;
case FileType.ORIGINAL:
default:
fileObs$ = this._originalFileData ? of(this._originalFileData) : this._fileUploadControllerService.downloadOriginalFile(this.fileId, true, 'body')
fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadOriginalFile(this.fileId, true, 'body')
.pipe(tap(data => {
this._originalFileData = data;
this._fileData = data;
}));
break;
}

4
apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts
View File

@ -52,6 +52,10 @@ export class ViewerSyncService {
this._activeViewer = key;
}
get activeViewer(){
return this._activeViewer;
}
private _roundToTwo(num) {
return +(Math.round(Number(num + "e+2")) + "e-2");

35
apps/red-ui/src/assets/styles/red-controls.scss Normal file
View File

@ -0,0 +1,35 @@
@import "red-variables";
.btn-group {
display: flex;
flex-direction: row;
.btn-group-btn {
color: $accent;
background: $white;
font-family: 'Inter', sans-serif;
font-size: 13px;
letter-spacing: 0;
line-height: 14px;
padding: 10px 14px;
transition: color 0.25s ease-in-out;
outline: none;
border: none;
&:hover {
color: $black;
}
&.active {
color: $light;
background: $primary;
border-radius: 17px;
}
&.active:hover {
color: $grey-3;
}
}
}

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

@ -3,27 +3,27 @@
@include mat-core();
$grey-1-palette: (
$primary-palette: (
default: $red-1,
lighter: lighten($red-1, 30%),
darker: darken($red-1, 30%),
text: $red-1,
contrast: (
default: $light,
lighter: $light,
darker: $light
)
);
$secondary-palette: (
default: $grey-1,
lighter: lighten($grey-1, 30%),
darker: darken($grey-1, 30%),
text: $grey-1,
contrast: (
default: $white,
lighter: $white,
darker: $white
)
);
$grey-2-palette: (
default: $grey-2,
lighter: lighten($grey-2, 30%),
darker: darken($grey-2, 30%),
text: $grey-2,
contrast: (
default: $grey-1,
lighter: $grey-1,
darker: $grey-1
default: $light,
lighter: $light,
darker: $light
)
);
@ -33,14 +33,14 @@ $red-palette: (
darker: darken($red-1, 30%),
text: $red-1,
contrast: (
default: $white,
lighter: $white,
darker: $white
default: $light,
lighter: $light,
darker: $light
)
);
$gn-next-primary: mat-palette($grey-1-palette, default, lighter, darker, text);
$gn-next-secondary: mat-palette($grey-2-palette, default, lighter, darker, text);
$gn-next-primary: mat-palette($primary-palette, default, lighter, darker, text);
$gn-next-secondary: mat-palette($secondary-palette, default, lighter, darker, text);
$gn-next-warning: mat-palette($red-palette, default, lighter, darker, text);
$gn-next-mat-theme: mat-light-theme((

1
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -7,3 +7,4 @@
@import "red-dialog";
@import "red-input";
@import "red-media-queries";
@import "red-controls";

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

@ -1,6 +1,11 @@
$white: #FFF;
$black: #000;
$primary: #DD4D50;
$accent: #283241;
$light: #FFF;
$dark: #000;
$grey-1: #283241;
$grey-2: #ECECEE;
$grey-3: #aaacb3;