diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index f0fad84c8..adee1eb04 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -42,74 +42,77 @@ import {ProjectDetailsDialogComponent} from './screens/project-overview-screen/p import {AuthModule} from "./auth/auth.module"; import {AuthGuard} from "./auth/auth.guard"; import {FileUploadModule} from "./upload/file-upload.module"; +import { FullPageLoadingIndicatorComponent } from './utils/full-page-loading-indicator/full-page-loading-indicator.component'; +import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); } @NgModule({ - declarations: [AppComponent, BaseScreenComponent, ProjectListingScreenComponent, ProjectOverviewScreenComponent, AddEditProjectDialogComponent, ConfirmationDialogComponent, FilePreviewScreenComponent, PdfViewerComponent, FileDetailsDialogComponent, ProjectDetailsDialogComponent], - imports: [ - BrowserModule, - BrowserAnimationsModule, - ReactiveFormsModule, - HttpClientModule, - AuthModule, - IconsModule, - ApiModule, - MatDialogModule, - TranslateModule.forRoot({ - loader: { - provide: TranslateLoader, - useFactory: HttpLoaderFactory, - deps: [HttpClient] - } - }), - RouterModule.forRoot([ - { - path: '', - redirectTo: 'ui/projects', - pathMatch: 'full', - }, - { - path: 'ui', - component: BaseScreenComponent, - children: [ - { - path: 'projects', - component: ProjectListingScreenComponent, - canActivate: [AuthGuard] - }, - { - path: 'projects/:projectId', - component: ProjectOverviewScreenComponent, - canActivate: [AuthGuard] - }, - { - path: 'projects/:projectId/file/:fileId', - component: FilePreviewScreenComponent, - canActivate: [AuthGuard] - } - ] - } + declarations: [AppComponent, BaseScreenComponent, ProjectListingScreenComponent, ProjectOverviewScreenComponent, AddEditProjectDialogComponent, ConfirmationDialogComponent, FilePreviewScreenComponent, PdfViewerComponent, FileDetailsDialogComponent, ProjectDetailsDialogComponent, FullPageLoadingIndicatorComponent], + imports: [ + BrowserModule, + BrowserAnimationsModule, + ReactiveFormsModule, + HttpClientModule, + AuthModule, + IconsModule, + ApiModule, + MatDialogModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [HttpClient] + } + }), + RouterModule.forRoot([ + { + path: '', + redirectTo: 'ui/projects', + pathMatch: 'full', + }, + { + path: 'ui', + component: BaseScreenComponent, + children: [ + { + path: 'projects', + component: ProjectListingScreenComponent, + canActivate: [AuthGuard] + }, + { + path: 'projects/:projectId', + component: ProjectOverviewScreenComponent, + canActivate: [AuthGuard] + }, + { + path: 'projects/:projectId/file/:fileId', + component: FilePreviewScreenComponent, + canActivate: [AuthGuard] + } + ] + } - ]), - NgpSortModule, - MatToolbarModule, - MatButtonModule, - MatMenuModule, - MatIconModule, - MatTooltipModule, - MatSnackBarModule, - MatTabsModule, - MatButtonToggleModule, - MatFormFieldModule, - ToastrModule.forRoot(), - MatSelectModule, - MatSidenavModule, - FileUploadModule, - ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}) - ], + ]), + NgpSortModule, + MatToolbarModule, + MatButtonModule, + MatMenuModule, + MatIconModule, + MatTooltipModule, + MatSnackBarModule, + MatTabsModule, + MatButtonToggleModule, + MatFormFieldModule, + ToastrModule.forRoot(), + MatSelectModule, + MatSidenavModule, + FileUploadModule, + ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}), + MatProgressSpinnerModule + ], providers: [ { provide: HTTP_INTERCEPTORS, multi: true, diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss b/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss index 6b647b1ba..78ef96973 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.scss @@ -1,52 +1 @@ @import "../../../assets/styles/red-variables"; - -.red-top-bar { - height: 61px; - width: 100%; - max-height: 61px; - display: flex; - flex-direction: column; - - .top-bar-row { - height: 60px; - display: flex; - justify-content: space-between; - padding-left: 60px; - padding-right: 60px; - - .menu { - display: flex; - align-items: center; - } - } - - .breadcrumb { - padding-left: 8px; - padding-right: 8px; - color: $yellow-1; - - mat-icon { - height: 14px; - width: 14px; - } - - } - - .divider { - height: 1px; - opacity: 0.15; - background-color: $grey-1; - } -} - -.red-content { - width: 100vw; - height: calc(100vh - 61px); - overflow: auto; - max-width: 1100px; - margin: 0 auto; - - .red-content-inner { - padding: 40px 40px; - } -} 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 c5a1a8814..000b99ffa 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,15 +1,29 @@ -
-
{{appStateService.activeFile?.filename}}
-
- - Original - Annotated - Redacted - +
+
+
+
+ + Annotated + Redacted + +
+
+
+ {{appStateService.activeFile?.filename}} +
+
+
-
- - +
+ + +
+ + + 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 e69de29bb..5501ba1d8 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 @@ -0,0 +1,18 @@ + +redaction-pdf-viewer { + position: absolute; + width: 100%; + height: 100%; + z-index: 1; + + &.visible { + z-index: 100; + } +} + +.view-container{ + width: 100%; + height: calc(100vh - 122px); + position: relative; +} + 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 8459d23f1..895537694 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 @@ -6,6 +6,7 @@ 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', @@ -23,7 +24,8 @@ export class FilePreviewScreenComponent implements OnInit { private readonly _statusControllerService: StatusControllerService, private readonly _translateService: TranslateService, private readonly _notificationService: NotificationService, - private readonly _dialog: MatDialog, + private readonly _viewerSyncService: ViewerSyncService, + private readonly _dialog: MatDialog, private readonly _router: Router, private readonly _fileUploadControllerService: FileUploadControllerService, private readonly _projectControllerService: ProjectControllerService) { @@ -36,6 +38,7 @@ export class FilePreviewScreenComponent implements OnInit { } ngOnInit(): void { + this._viewerSyncService.activateViewer('ANNOTATED'); } showDetailsDialog($event: MouseEvent) { @@ -46,4 +49,8 @@ export class FilePreviewScreenComponent implements OnInit { data: this.appStateService.activeFile }); } + + viewerChanged(value: any) { + this._viewerSyncService.activateViewer(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 beb2531bc..3cf8bf021 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 @@ -7,5 +7,5 @@ .viewer { width: 100%; - height: calc(100vh - (61px + 80px + 50px + 40px)) + height: calc(100vh - 122px) } diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts index 33a05b9bf..7a8ec21e4 100644 --- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts @@ -1,10 +1,11 @@ -import {AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {AppConfigKey, AppConfigService} from "../../../app-config/app-config.service"; import {FileStatus, FileUploadControllerService} from "@redaction/red-ui-http"; import {Observable, of} from "rxjs"; import {tap} from "rxjs/operators"; import WebViewer, {WebViewerInstance} from "@pdftron/webviewer"; import {TranslateService} from "@ngx-translate/core"; +import {ViewerSyncService} from "../service/viwer-sync.service"; export enum FileType { @@ -18,7 +19,7 @@ export enum FileType { templateUrl: './pdf-viewer.component.html', styleUrls: ['./pdf-viewer.component.scss'] }) -export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { +export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy { @Input() fileId: string; @Input() fileType: FileType; @@ -33,6 +34,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { constructor( + private readonly _viewerSyncService: ViewerSyncService, private readonly _translateService: TranslateService, private readonly _fileUploadControllerService: FileUploadControllerService, private readonly _appConfigService: AppConfigService) { @@ -44,6 +46,9 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { wvDocumentLoadedHandler(): void { this.wvInstance.setFitMode('FitWidth'); + const displayMode = this.wvInstance.docViewer.getDisplayModeManager().getDisplayMode(); + displayMode.mode = "Continuous"; + this.wvInstance.docViewer.getDisplayModeManager().setDisplayMode(displayMode); if (this.fileType === FileType.ANNOTATED) { this.wvInstance.toggleElement('notesPanel') } @@ -55,24 +60,19 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { }); } - ngOnChanges(changes: SimpleChanges): void { - if (this.wvInstance) { - this._loadFile().subscribe(data => { - this.wvInstance.loadDocument(data, {filename: this.fileStatus.filename}); - }); - } - } private _loadViewer(pdfBlob: any) { const license = this._appConfigService.getConfig(AppConfigKey.PDFTRON_LICENSE); WebViewer({ licenseKey: license, + isReadOnly: true, path: '/assets/wv-resources', }, this.viewer.nativeElement).then(instance => { this.wvInstance = instance; + this._viewerSyncService.registerViewer(this.fileType, this.wvInstance); this._configureTextPopup(); instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler) - instance.loadDocument(pdfBlob, {filename: this.fileStatus.filename}); + instance.loadDocument(pdfBlob, {filename: this.fileStatus ? this.fileStatus.filename : 'file.pdf'}); }) } @@ -106,11 +106,14 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { img: '/assets/icons/general/add.svg', title: this._translateService.instant('pdf-viewer.text-popup.actions.suggestion-redaction.label'), onClick: () => { - const selectedQuads = this.wvInstance.docViewer.getSelectedTextQuads(); - - - console.log(selectedQuads); + const selectedQuads = this.wvInstance.docViewer.getSelectedTextQuads(); + console.log(selectedQuads); } }); } + + ngOnDestroy(): void { + this._viewerSyncService.deregisterInstance(this.fileType); + } } + diff --git a/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts b/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts new file mode 100644 index 000000000..917049919 --- /dev/null +++ b/apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts @@ -0,0 +1,59 @@ +import {Injectable} from "@angular/core"; +import {WebViewerInstance} from "@pdftron/webviewer"; + +@Injectable({ + providedIn: 'root' +}) +export class ViewerSyncService { + + private _activeViewer: string; + + private _viewers: { [key: string]: WebViewerInstance } = {}; + + constructor() { + } + + + syncViewers() { + if (this._activeViewer) { + const lastScrolledViewer = this._viewers[this._activeViewer]; + if (lastScrolledViewer) { + const lastScrolledViewerScrollElement = lastScrolledViewer.docViewer.getScrollViewElement(); + const lastViewerScrollHeight = lastScrolledViewerScrollElement.scrollHeight; + const lastViewerScrollTop = lastScrolledViewerScrollElement.scrollTop; + for (const key of Object.keys(this._viewers)) { + if (key !== this._activeViewer) { + const viewerScrollElement = this._viewers[key].docViewer.getScrollViewElement(); + const viewerScrollHeight = viewerScrollElement.scrollHeight; + if (viewerScrollHeight === lastViewerScrollHeight) { + viewerScrollElement.scrollTo(viewerScrollElement.scrollLeft, lastViewerScrollTop); + } else if (viewerScrollHeight > lastViewerScrollHeight) { + let delta = viewerScrollHeight / lastViewerScrollHeight; + delta = this._roundToTwo(delta); + viewerScrollElement.scrollTo(viewerScrollElement.scrollLeft, delta * lastViewerScrollTop); + } + } + } + } + } + } + + + deregisterInstance(key: string) { + delete this._viewers[key]; + } + + registerViewer(key: string, instance: WebViewerInstance) { + this._viewers[key] = instance; + } + + activateViewer(key: string) { + this.syncViewers(); + this._activeViewer = key; + } + + + private _roundToTwo(num) { + return +(Math.round(Number(num + "e+2")) + "e-2"); + } +} 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 fa7b64eea..02dd3fff2 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,35 +1,36 @@ -
-
- -
+
+
+
+ +
-
-
-
-
-
- {{project.projectName}} +
+
+
+
+
+ {{project.projectName}} +
+
+ {{project.description}} +
+
+ {{project.date | date:'short'}} +
-
- {{project.description}} +
+ +
-
- {{project.date | date:'short'}} -
-
-
- -
-
- - +
+ diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss index 4d5a5f1ee..f3f39e181 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss @@ -1,2 +1,7 @@ @import "../../../assets/styles/red-mixins"; +:host { + max-width: 1100px; + margin: 0 auto; + padding: 20px; +} diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index 9ad30ae77..31c439ef6 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -14,6 +14,7 @@ import {AppStateService} from "../../state/app-state.service"; }) export class ProjectListingScreenComponent implements OnInit { + viewReady = false; constructor( public readonly appStateService: AppStateService, @@ -24,7 +25,7 @@ export class ProjectListingScreenComponent implements OnInit { } ngOnInit(): void { - this._reloadProjects(); + this._reloadProjects(true); } openAddProjectDialog(project?: Project): void { @@ -62,9 +63,12 @@ export class ProjectListingScreenComponent implements OnInit { }); } - private _reloadProjects() { + private _reloadProjects(initial: boolean = false) { this.appStateService.reset(); this.appStateService.loadAllProjects().subscribe(() => { + if (initial) { + this.viewReady = true; + } }); } } 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 530419e28..148fd4a80 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,67 +1,70 @@ -
+
+
-
-
{{appStateService.activeProject.projectName}}
- - -
-
-
{{appStateService.activeProject?.description}}
- - {{'project-overview.sorting.label' | translate}} - - - - {{option.label | translate}} - - - -
-
-
-
-
-
- {{fileStatus.filename}} +
+
{{appStateService.activeProject.projectName}}
+ + +
+
+
{{appStateService.activeProject?.description}}
+ + {{'project-overview.sorting.label' | translate}} + + + + {{option.label | translate}} + + + +
+
+
+
+
+
+ {{fileStatus.filename}} +
+
+ {{'project-overview.file-listing.file-entry.status.label'| translate:fileStatus}} +
+
+ {{'project-overview.file-listing.file-entry.number-of-pages.label'| translate:fileStatus}} +
+
+ {{'project-overview.file-listing.file-entry.number-of-analyses.label'| translate:fileStatus}} +
+
+ {{'project-overview.file-listing.file-entry.added.label'| translate:{added: fileStatus.added | date:'short'} }} +
+
+ {{'project-overview.file-listing.file-entry.last-updated.label'| translate:{lastUpdated: fileStatus.lastUpdated | date:'short'} }} +
-
- {{'project-overview.file-listing.file-entry.status.label'| translate:fileStatus}} +
+ +
-
- {{'project-overview.file-listing.file-entry.number-of-pages.label'| translate:fileStatus}} -
-
- {{'project-overview.file-listing.file-entry.number-of-analyses.label'| translate:fileStatus}} -
-
- {{'project-overview.file-listing.file-entry.added.label'| translate:{added: fileStatus.added | date:'short'} }} -
-
- {{'project-overview.file-listing.file-entry.last-updated.label'| translate:{lastUpdated: fileStatus.lastUpdated | date:'short'} }} -
-
-
- -
-
- + +
+ 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 f6e8ae66d..3829d5597 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 @@ -1,4 +1,6 @@ + + .listing { position: relative; height: calc(100vh - (61px + 80px + 70px + 80px)); diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index d2e97e37a..f79f200d1 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -23,6 +23,8 @@ import {FileDropOverlayService} from "../../upload/file-drop/service/file-drop-o }) export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { + viewReady = false; + @ViewChild('dropzoneComponent', {static: true}) dropZoneComponent; dragActive = false; @@ -60,7 +62,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private readonly _projectControllerService: ProjectControllerService) { this._activatedRoute.params.subscribe(params => { this.projectId = params.projectId; - this._loadProject(); + this._loadProject(true); }); } @@ -125,8 +127,11 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { }); } - private _loadProject() { + private _loadProject(initial: boolean = false) { this.appStateService.activateProject(this.projectId).subscribe(() => { + if (initial) { + this.viewReady = true; + } }); } @@ -135,7 +140,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { }); } - fileId(index, item){ + fileId(index, item) { return item.fileId; } diff --git a/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.html b/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.html new file mode 100644 index 000000000..ff96130d4 --- /dev/null +++ b/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.html @@ -0,0 +1,5 @@ +
+
+ diff --git a/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.scss b/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.scss new file mode 100644 index 000000000..f3039729c --- /dev/null +++ b/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.scss @@ -0,0 +1,24 @@ +@import "../../../assets/styles/red-variables"; + + +.full-page-load-section, .full-page-load-spinner { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.full-page-load-section { + opacity: 0.7; + background: $white; + z-index: 900; + +} + +.full-page-load-spinner { + z-index: 1000; + justify-content: center; + align-items: center; + display: flex; +} diff --git a/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.ts b/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.ts new file mode 100644 index 000000000..e166a389b --- /dev/null +++ b/apps/red-ui/src/app/utils/full-page-loading-indicator/full-page-loading-indicator.component.ts @@ -0,0 +1,12 @@ +import {Component, Input, OnInit} from '@angular/core'; + +@Component({ + selector: 'redaction-full-page-loading-indicator', + templateUrl: './full-page-loading-indicator.component.html', + styleUrls: ['./full-page-loading-indicator.component.scss'] +}) +export class FullPageLoadingIndicatorComponent { + + @Input() displayed = false; + +} 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 d69ea2959..b66c41bb2 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -22,6 +22,10 @@ html, body { justify-content: space-between; align-items: center; padding-bottom: 20px; + + &.slim { + padding-bottom: 0; + } } @@ -166,3 +170,57 @@ html, body { line-height: 14px; height: 18px; } + +.center-section { + max-width: 1100px; + margin: 0 auto; + padding: 20px; +} + + + +.red-top-bar { + height: 61px; + width: 100%; + max-height: 61px; + display: flex; + flex-direction: column; + + .top-bar-row { + height: 60px; + display: flex; + justify-content: space-between; + padding-left: 60px; + padding-right: 60px; + + .menu { + display: flex; + align-items: center; + } + } + + .breadcrumb { + padding-left: 8px; + padding-right: 8px; + color: $yellow-1; + + mat-icon { + height: 14px; + width: 14px; + } + + } + + .divider { + height: 1px; + opacity: 0.15; + background-color: $grey-1; + } +} + +.red-content { + width: 100vw; + height: calc(100vh - 61px); + overflow: auto; + +} diff --git a/tsconfig.base.json b/tsconfig.base.json index 36ec56aae..90c06d318 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -11,7 +11,7 @@ "target": "es2015", "module": "esnext", "typeRoots": ["node_modules/@types"], - "lib": ["es2017", "dom"], + "lib": ["es2019", "dom"], "skipLibCheck": true, "skipDefaultLibCheck": true, "baseUrl": ".",