diff --git a/src/app/material.module.ts b/src/app/material.module.ts index 82089ec56..5b68d78d6 100644 --- a/src/app/material.module.ts +++ b/src/app/material.module.ts @@ -1,21 +1,22 @@ +import { ScrollingModule } from '@angular/cdk/scrolling'; import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatDialogModule } from '@angular/material/dialog'; import { MatExpansionModule } from '@angular/material/expansion'; +import { MatGridListModule } from '@angular/material/grid-list'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatListModule } from '@angular/material/list'; +import { MatMenuModule } from '@angular/material/menu'; import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatSelectModule } from '@angular/material/select'; import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatTabsModule } from '@angular/material/tabs'; import { MatToolbarModule } from '@angular/material/toolbar'; -import { MatSnackBarModule } from '@angular/material/snack-bar'; -import { ScrollingModule } from '@angular/cdk/scrolling'; -import { MatGridListModule } from '@angular/material/grid-list'; import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatCheckboxModule } from '@angular/material/checkbox'; @NgModule({ exports: [ @@ -36,6 +37,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox'; MatGridListModule, MatTooltipModule, MatCheckboxModule, + MatMenuModule, ], }) export class MaterialModule {} diff --git a/src/app/services/whats-new.service.ts b/src/app/services/whats-new.service.ts index c50b621e2..c4ee5df52 100644 --- a/src/app/services/whats-new.service.ts +++ b/src/app/services/whats-new.service.ts @@ -1,5 +1,5 @@ -import { ModalWindow } from 'ngx-whats-new/lib/modal-window.interface'; import { Injectable } from '@angular/core'; +import { ModalWindow } from 'ngx-whats-new/lib/modal-window.interface'; import { BehaviorSubject } from 'rxjs'; @Injectable({ @@ -196,4 +196,12 @@ export class WhatsNewService { getModalsByVersion(version: string): ModalWindow[] { return this.modals[version] || []; } + + /** + * Returns modals with latest changes + */ + getLatestChanges(): ModalWindow[] { + const lastVersion = Object.keys(this.modals).at(-1); + return this.modals[lastVersion]; + } } diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html index 09406d1a8..58b4a89d3 100644 --- a/src/app/shared/components/header/header.component.html +++ b/src/app/shared/components/header/header.component.html @@ -8,7 +8,64 @@
-
+ + + + + + + + + + + + + + + diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts index 31eabcec9..f742ac859 100644 --- a/src/app/shared/components/header/header.component.ts +++ b/src/app/shared/components/header/header.component.ts @@ -1,5 +1,9 @@ import { Component, Input } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; import { Router } from '@angular/router'; +import { DataService } from '../../../services/data.service'; +import { WhatsNewService } from '../../../services/whats-new.service'; +import { AboutDialogComponent } from '../about-dialog/about-dialog.component'; @Component({ selector: 'app-header', @@ -9,13 +13,33 @@ import { Router } from '@angular/router'; export class HeaderComponent { /** Title of the header */ @Input() title: string; + /** Subtitle of the header */ @Input() subtitle: string; + /** Environment flag */ + isElectron = this.dataService.isElectron; + + /** Visibility flag of the "what is new" modal dialog */ + isDialogVisible$ = this.whatsNewService.dialogState$; + + /** Dialog options */ + options = this.whatsNewService.options; + + /** Modals to show for the updated version of the application */ + modals = this.whatsNewService.getLatestChanges(); + /** Creates an instance of SettingsComponent and injects angulars router module * @param router angulars router + * @param dataService + * @param whatsNewService */ - constructor(private router: Router) {} + constructor( + private router: Router, + private dataService: DataService, + private whatsNewService: WhatsNewService, + private dialog: MatDialog + ) {} /** * Navigates to the settings page @@ -23,4 +47,33 @@ export class HeaderComponent { openSettings(): void { this.router.navigate(['/settings']); } + + /** + * Opens the provided URL string in new browser window + * @param url url to open + */ + openUrl(url: string): void { + window.open(url, '_blank'); + } + + /** + * Sets the visibility flag of the modal window + * @param visible show/hide window flag + */ + setDialogVisibility(visible: boolean): void { + if (this.modals.length > 0) { + this.whatsNewService.changeDialogVisibleState(visible); + } + } + + /** + * Opens the about dialog with description and version of + * the app + */ + openAboutDialog(): void { + this.dialog.open(AboutDialogComponent, { + panelClass: 'about-dialog-overlay', + width: '600px', + }); + } } diff --git a/src/styles.scss b/src/styles.scss index c26dd3ac3..221051c76 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -64,3 +64,11 @@ textarea, .mb-10 { margin-bottom: 10px; } + +.about-dialog-overlay { + .mat-dialog-container { + text-align: center; + background: black !important; + color: #fff !important; + } +}