#31 Add about modal window (#47)

src/src/app/about/about.component.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

src/src/app/about/about.component.html

@@ -0,0 +1,44 @@
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+  Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+  nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+  tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+  nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+  inceptos himenaeos.
+</p>
+
+<p>
+  Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur
+  tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas
+  mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas
+  porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.
+  Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
+</p>
+
+<p>
+  Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque
+  volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent
+  per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna
+  non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
+  turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a
+  tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
+  Suspendisse in justo eu magna luctus suscipit. Sed lectus.
+</p>
+
+<p>
+  Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra
+  auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
+  ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+  Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi
+  sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis
+  laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue.
+  Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur
+  sit amet mauris.
+</p>
+
+<p>
+  Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia
+  sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam.
+  Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit
+  amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
+</p>

src/src/app/about/about.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.css'],
+})
+export class AboutComponent {}

src/src/app/about/index.ts

@@ -0,0 +1 @@
+export * from './about.component';

src/src/app/app.module.ts

@@ -6,6 +6,7 @@ import { HeaderPanelComponent } from './header-panel/header-panel.component'
 import { FooterComponent } from './footer/footer.component'
 import { RightSidebarComponent } from './right-sidebar/right-sidebar.component'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { ModalModule } from 'src/app/modal';
 
 import { MapsModule } from './main/maps.module';
 import { MatButtonModule } from '@angular/material/button';
@@ -33,6 +34,7 @@ import { GoogleMapsConfigModule } from 'src/app/google-maps';
     MatFormFieldModule,
     MatInputModule,
     MatMenuModule,
+    ModalModule,
     GoogleMapsConfigModule.forRoot(environment.googleMapApiKey),
   ],
   providers: [],

src/src/app/header-panel/header-panel.component.html

@@ -3,7 +3,7 @@
     <img src="assets/img/logo.svg" alt="logo">
   </div>
   <div class="header-container-right">
-    <button mat-button>
+    <button mat-button (click)="openAboutModal()">
       <mat-icon>info</mat-icon>
       <span>О проекте</span>
     </button>

src/src/app/header-panel/header-panel.component.ts

@@ -1,9 +1,17 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AboutComponent } from 'src/app/about';
+import { ModalService } from 'src/app/modal';
 
 @Component({
   selector: 'app-header-panel',
   templateUrl: './header-panel.component.html',
   styleUrls: ['./header-panel.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HeaderPanelComponent {}
+export class HeaderPanelComponent {
+  constructor(private readonly _modal: ModalService) {}
+
+  openAboutModal() {
+    this._modal.openModal(AboutComponent, 'О проекте');
+  }
+}

src/src/app/main/main.lazy-loaded.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { GoogleMapsModule } from '@angular/google-maps';
 import { RouterModule } from '@angular/router';
+import { AboutComponent } from 'src/app/about';
 import { DateSliderModule } from 'src/app/date-slider';
 
 import { GoogleMapComponent } from './components/google-map/google-map.component';
@@ -10,7 +11,7 @@ import { routes } from './main.routes';
 import { MapsModule } from './maps.module';
 
 @NgModule({
-  declarations: [MainComponent, GoogleMapComponent],
+  declarations: [AboutComponent, MainComponent, GoogleMapComponent],
   imports: [
     CommonModule,
     GoogleMapsModule,

src/src/app/main/maps.module.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+
 import { GoogleMapViewConfig } from './models/google-map-view-config';
 import { GoogleMapViewConfigService } from './services/google-map-view-config.service';
 

src/src/app/modal/index.ts

@@ -0,0 +1,4 @@
+export * from './modal.module';
+export * from './modal.service';
+export * from './modal/modal.component';
+export * from './models/modal-data';

src/src/app/modal/modal.module.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MatDialogConfig,
+  MatDialogModule,
+  MAT_DIALOG_DEFAULT_OPTIONS,
+} from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ModalComponent } from './modal/modal.component';
+
+@NgModule({
+  declarations: [ModalComponent],
+  imports: [CommonModule, MatButtonModule, MatDialogModule, MatIconModule],
+  providers: [
+    {
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
+      useValue: <MatDialogConfig>{
+        autoFocus: true,
+        hasBackdrop: true,
+        panelClass: 'app-modal',
+      },
+    },
+  ],
+})
+export class ModalModule {}

src/src/app/modal/modal.service.ts

@@ -0,0 +1,26 @@
+import { ComponentType } from '@angular/cdk/overlay';
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+
+import { ModalComponent } from './modal/modal.component';
+import { ModalData } from './models/modal-data';
+
+@Injectable({ providedIn: 'root' })
+export class ModalService {
+  constructor(private readonly _modal: MatDialog) {}
+
+  openModal<InnerComponentType>(
+    component: ComponentType<InnerComponentType>,
+    title?: string
+  ): Observable<boolean> {
+    const dialogRef = this._modal.open(ModalComponent, <MatDialogConfig>{
+      data: <ModalData<InnerComponentType>>{
+        component,
+        title,
+      },
+    });
+
+    return dialogRef.afterClosed();
+  }
+}

src/src/app/modal/modal/modal.component.css

@@ -0,0 +1,21 @@
+:host {
+  display: contents;
+}
+
+.close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+
+  color: var(--close-icon-color);
+}
+
+.close-icon {
+  --close-button-icon-size: 35px;
+
+  font-size: var(--close-button-icon-size);
+  line-height: var(--close-button-icon-size);
+  width: var(--close-button-icon-size);
+  height: var(--close-button-icon-size);
+}

src/src/app/modal/modal/modal.component.html

@@ -0,0 +1,11 @@
+<button class="close-button" mat-icon-button [mat-dialog-close]="true">
+  <mat-icon class="close-icon">cancel</mat-icon>
+</button>
+
+<ng-container *ngIf="hasTitle != null">
+  <h2 mat-dialog-title>{{ title }}</h2>
+</ng-container>
+
+<mat-dialog-content>
+  <ng-template #content></ng-template>
+</mat-dialog-content>

src/src/app/modal/modal/modal.component.ts

@@ -0,0 +1,45 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ComponentFactoryResolver,
+  Inject,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+import { ModalData } from '../models/modal-data';
+
+@Component({
+  selector: 'app-modal',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css'],
+})
+export class ModalComponent<InnerComponentType> implements AfterViewInit {
+  title?: string;
+
+  get hasTitle() {
+    return Boolean(this.title);
+  }
+
+  @ViewChild('content', { static: true, read: ViewContainerRef })
+  private readonly _containerRef!: ViewContainerRef;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    private readonly _data: ModalData<InnerComponentType>,
+    private readonly _resolver: ComponentFactoryResolver
+  ) {
+    this.title = this._data.title;
+  }
+
+  ngAfterViewInit() {
+    const factory = this._resolver.resolveComponentFactory(
+      this._data.component
+    );
+
+    this._containerRef.createComponent(factory);
+  }
+}

src/src/app/modal/models/modal-data.ts

@@ -0,0 +1,6 @@
+import { ComponentType } from '@angular/cdk/portal';
+
+export interface ModalData<InnerComponentType> {
+  component: ComponentType<InnerComponentType>;
+  title?: string;
+}

src/src/styles.css

@@ -1,2 +1,12 @@
+@import 'styles/colors.css';
+
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
+
+.app-modal {
+  position: absolute !important;
+}

src/src/styles/colors.css

@@ -0,0 +1,3 @@
+:root {
+  --close-icon-color: #796363;
+}