Add about modal window

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,9 +3,9 @@
     <img src="assets/img/logo.svg" alt="logo">
   </div>
   <div class="header-container-right">
-    <button mat-button>
+    <button mat-button (click)="openModal(SiteSectionTypes.about)">
       <mat-icon>info</mat-icon>
-      <span>О проекте</span>
+      <span>{{ SiteSectionTypeNames.about }}</span>
     </button>
     <button mat-button>
       <mat-icon>add_location_alt</mat-icon>

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

@@ -1,9 +1,29 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AboutComponent } from 'src/app/about';
+import { SiteSectionTypeNames, SiteSectionTypes } from 'src/app/main';
+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 {
+  readonly SiteSectionTypes = SiteSectionTypes;
+  readonly SiteSectionTypeNames = SiteSectionTypeNames;
+
+  constructor(private readonly _modal: ModalService) {}
+
+  openModal(type: SiteSectionTypes) {
+    switch (type) {
+      case SiteSectionTypes.about:
+        this._modal.openModal(AboutComponent, SiteSectionTypeNames.about);
+        break;
+
+      default:
+        console.log('Unknown modal type');
+        break;
+    }
+  }
+}

src/src/app/main/constants/site-sections.ts

@@ -0,0 +1,9 @@
+export enum SiteSectionTypes {
+  about = 'about',
+}
+
+type SiteSectionTypesMap = { [key in SiteSectionTypes]: string };
+
+export const SiteSectionTypeNames: SiteSectionTypesMap = {
+  [SiteSectionTypes.about]: 'О проекте',
+};

src/src/app/main/index.ts

@@ -0,0 +1 @@
+export * from './constants/site-sections';

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

@@ -1,8 +1,8 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { GoogleMapsModule } from '@angular/google-maps';
 import { RouterModule } from '@angular/router';
 import { DateSliderModule } from 'src/app/date-slider';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 import { GoogleMapComponent } from './components/google-map/google-map.component';
 import { MainComponent } from './main.component';
@@ -12,11 +12,11 @@ import { MapsModule } from './maps.module';
 @NgModule({
   declarations: [MainComponent, GoogleMapComponent],
   imports: [
-    CommonModule,
     GoogleMapsModule,
     RouterModule.forChild(routes),
     MapsModule,
     DateSliderModule,
+    SharedModule,
   ],
 })
 export class MainLazyLoadedModule {}

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

@@ -1,10 +1,11 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { SharedModule } from 'src/app/shared';
+
 import { GoogleMapViewConfig } from './models/google-map-view-config';
 import { GoogleMapViewConfigService } from './services/google-map-view-config.service';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [SharedModule],
   providers: [
     {
       provide: GoogleMapViewConfigService,

src/src/app/modal/index.ts

@@ -0,0 +1,2 @@
+export * from './modal.module';
+export * from './modal.service';

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { AboutComponent } from 'src/app/about';
+import { SharedModule } from 'src/app/shared';
+
+import { ModalComponent } from './modal/modal.component';
+
+@NgModule({
+  declarations: [AboutComponent, ModalComponent],
+  imports: [SharedModule],
+})
+export class ModalModule {}

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

@@ -0,0 +1,28 @@
+import { ComponentType } from '@angular/cdk/overlay';
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+
+import { ModalModule } from './modal.module';
+import { ModalComponent } from './modal/modal.component';
+
+@Injectable({ providedIn: ModalModule })
+export class ModalService {
+  constructor(private readonly _modal: MatDialog) {}
+
+  openModal<T>(
+    component: ComponentType<T>,
+    title?: string
+  ): Observable<boolean> {
+    const config = <MatDialogConfig>{
+      autoFocus: true,
+      panelClass: 'app-modal',
+    };
+
+    const dialogRef = this._modal.open(ModalComponent, config);
+
+    dialogRef.componentInstance.createModalComponent(component, title);
+
+    return dialogRef.afterClosed();
+  }
+}

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

@@ -0,0 +1,17 @@
+:host {
+  display: contents;
+}
+
+.close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.close-button img {
+  --close-button-icon-size: 35px;
+
+  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">
+  <img src="assets/img/close.svg" />
+</button>
+
+<ng-container *ngIf="hasTitle != null">
+  <h2 mat-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,37 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ComponentFactoryResolver,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+
+@Component({
+  selector: 'app-modal',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css'],
+})
+export class ModalComponent {
+  title?: string;
+
+  get hasTitle() {
+    return Boolean(this.title);
+  }
+
+  @ViewChild('content', { static: true, read: ViewContainerRef })
+  private readonly _containerRef!: ViewContainerRef;
+
+  constructor(private readonly resolver: ComponentFactoryResolver) {}
+
+  createModalComponent<T>(componentType: Type<T>, title?: string) {
+    console.log(title);
+
+    const factory = this.resolver.resolveComponentFactory(componentType);
+
+    this._containerRef.createComponent(factory);
+
+    this.title = title;
+  }
+}

src/src/app/shared/index.ts

@@ -0,0 +1 @@
+export * from './shared.module';

src/src/app/shared/shared.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+
+const exportingModules = [CommonModule, MatButtonModule, MatDialogModule];
+
+@NgModule({
+  imports: [...exportingModules],
+  exports: [...exportingModules],
+})
+export class SharedModule {}

src/src/styles.css

@@ -1,2 +1,10 @@
 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;
+}