vitBackButton

src/app/app.module.ts

@@ -36,10 +36,12 @@ import { TestInfoComponent } from './pages/test/test-info/test-info.component';
 import { ListPageComponent } from './pages/layout/list-page/list-page.component';
 import { QuestionForRespondentComponent } from './pages/test/question-for-respondent/question-for-respondent.component';
 import { AnswerComponent } from './pages/test/question-for-respondent/answer/answer.component';
+import { BackButtonComponent } from './shared/components/back-button/back-button.component';
 import { ListPageItemComponent } from './pages/layout/list-page-item/list-page-item.component';
 import { TestMenuComponent } from './pages/all-tests/test-menu/test-menu.component';
 import { LoginPageRespondentComponent } from './pages/login-page-respondent/login-page-respondent.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -70,9 +72,10 @@ import { LoginPageRespondentComponent } from './pages/login-page-respondent/logi
     ListPageComponent,
     QuestionForRespondentComponent,
     AnswerComponent,
+    BackButtonComponent,
     ListPageItemComponent,
     TestMenuComponent
-  ],
+],
   imports: [
     BrowserModule,
     AppRoutingModule,

src/app/shared/components/back-button/back-button.component.html

@@ -0,0 +1 @@
+<button *ngIf="shoudShowSelf" class="back-button" (click)="handleClick($event)" >Back</button>

src/app/shared/components/back-button/back-button.component.scss

@@ -0,0 +1,18 @@
+@import 'src/assets/styles/colors';
+@import 'src/assets/styles/fonts';
+
+.back-button {
+  text-decoration: none;
+  vertical-align: top;
+  padding: 0 25px;
+  line-height: 61px;
+  height: 100%;
+  background-color: #dbcd0f;
+  font-family: $font-main;
+  font-size: 20px;
+  color: #ffffff;
+  border: none;
+  text-align: center;
+  display: inline-block;
+  cursor: pointer;
+}

src/app/shared/components/back-button/back-button.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'pt-back-button',
+  templateUrl: './back-button.component.html',
+  styleUrls: ['./back-button.component.scss'],
+
+})
+export class BackButtonComponent implements OnInit {
+
+  get shoudShowSelf(): boolean {
+    return this.route.snapshot.url[0].path !== 'all-tests';
+  }
+
+  constructor(private location: Location, private route: ActivatedRoute) { }
+
+  ngOnInit() {
+  }
+
+  handleClick(event) {
+    event.stopPropagation();
+
+    this.location.back();
+  }
+}

src/app/shared/components/header/navigation-buttons/navigation-buttons.component.html

@@ -1,4 +1,5 @@
 <nav class="menu">
+    <pt-back-button></pt-back-button>
     <a class="menu__item" routerLinkActive="active" routerLink="/admin/all-tests">All tests</a>
     <a class="menu__item" routerLinkActive="active" routerLink="/admin/all-activations">Activations</a>
     <a class="menu__item" routerLinkActive="active" routerLink="/admin/all-respondents">All Respondents</a>

src/app/shared/components/modal/modal.component.html

@@ -1,3 +1,9 @@
 <div class="modal">
-  the very best modal
+  <h1>A Custom Modal!</h1>
+  <p>
+  Write your text here
+  </p>
+  <div class="modal-body">
+    <button (click)="closeModal($event);">X</button>
+  </div>
 </div>

src/app/shared/components/modal/modal.component.scss

@@ -1,14 +1,18 @@
 @import 'src/assets/styles/colors';
 
 .modal {
-  display: block;
-  background-color: $white;
-  top: 50%;
-  left: 50%;
-  position:fixed;
-  width:40em;
-  height:30em;
-  margin-top: -15em;
-  margin-left: -20em;
-  border: 1px solid #ccc;
-}
+    display: block;
+    background-color: $white;
+    top: 50%;
+    left: 50%;
+    position:fixed;
+    width:40em;
+    height:30em;
+    margin-top: -15em;
+    margin-left: -20em;
+    border: 1px solid #ccc;
+  }
+.modal-body {
+  margin-left: 37em;
+
+}

src/app/shared/components/modal/modal.component.ts

@@ -37,7 +37,9 @@ export class ModalComponent implements OnInit {
             this.isOpened = false;
         }
     }
-
+  @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(evt: KeyboardEvent) {
+    this.isOpened = false;
+  }
 
     ngOnInit() {
     }