Reformat code

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

@@ -0,0 +1,9 @@
+<main class="{{ modalService.active ? 'active' : '' }}" [ngSwitch]="modalService.active?.type">
+  <app-create-block *ngSwitchCase="ModalType.createBlock"></app-create-block>
+  <app-edit-block *ngSwitchCase="ModalType.editBlock"></app-edit-block>
+  <app-remove-block *ngSwitchCase="ModalType.removeBlock"></app-remove-block>
+  <app-remove-tower *ngSwitchCase="ModalType.removeTower"></app-remove-tower>
+  <app-settings *ngSwitchCase="ModalType.settings"></app-settings>
+  <app-get-started *ngSwitchCase="ModalType.getStarted"></app-get-started>
+  <app-remove-page *ngSwitchCase="ModalType.removePage"></app-remove-page>
+</main>

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

@@ -0,0 +1,29 @@
+@import '../../../styles';
+
+main {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+
+  width: 100%;
+  height: 100%;
+
+  @include center-child();
+
+  padding: var(--large-padding);
+
+  box-sizing: border-box;
+
+  background: $background-gradient;
+  transition: opacity 300ms;
+
+  &:not(.active) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  button {
+    margin-top: var(--medium-padding);
+  }
+}

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ModalService, ModalType } from '../../services/modal.service';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent {
+  // Needed for accessing the enum from html.
+  ModalType = ModalType;
+
+  constructor(public modalService: ModalService) {
+    window.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        this.modalService.cancel();
+      }
+    });
+  }
+}

src/app/components/modal/modals/create-block/create-block.component.html

@@ -0,0 +1,33 @@
+<div class="header">
+  <div class="exit" (click)="modalService.cancel()"></div>
+  <h1>Create an item</h1>
+</div>
+
+<div class="select-add-container">
+  <!-- wrapper for easier styling -->
+  <app-select-add
+    class="select"
+    [options]="modalService.active.input"
+    [default]="modalService.active.input[0]"
+    [alwaysDropShadow]="true"
+    [onlyShadowBorder]="true"
+    [placeholder]="'Tag this item…'"
+    (value)="selected = $event"
+  ></app-select-add>
+</div>
+<!-- wrapper for easier styling -->
+
+<textarea placeholder="Write a description here…" [(ngModel)]="description"></textarea>
+
+<div>
+  <!-- wrapper for easier styling -->
+  <app-toggle
+    [beforeText]="'This task hasn\'t been finished yet'"
+    [afterText]="'Goal already accomplished'"
+    [default]="false"
+    (value)="isDone = $event"
+  ></app-toggle>
+</div>
+<!-- wrapper for easier styling -->
+
+<button (click)="submit()">Create</button>

src/app/components/modal/modals/create-block/create-block.component.scss

@@ -0,0 +1,29 @@
+@import '../../../../../styles';
+
+:host {
+  @include card();
+  box-shadow: $shadow;
+
+  width: 66vw;
+  max-width: 400px;
+  @media (max-width: $mobile-width) {
+    width: 300px;
+  }
+
+  box-sizing: border-box;
+  padding: var(--large-padding);
+  position: relative;
+
+  @include inner-spacing(var(--large-padding));
+
+  .header {
+    @include center-child();
+
+    .exit {
+      position: absolute;
+      left: var(--large-padding);
+
+      @include exit();
+    }
+  }
+}

src/app/components/modal/modals/create-block/create-block.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { ModalService } from '../../../../services/modal.service';
+
+@Component({
+  selector: 'app-create-block',
+  templateUrl: './create-block.component.html',
+  styleUrls: ['./create-block.component.scss']
+})
+export class CreateBlockComponent {
+  selected: string;
+  description: string = null;
+  isDone: boolean;
+
+  constructor(public modalService: ModalService) {}
+
+  submit() {
+    this.modalService.submit({
+      selected: this.selected,
+      description: this.description,
+      isDone: this.isDone
+    });
+  }
+}

src/app/components/modal/modals/edit-block/edit-block.component.html

@@ -0,0 +1,33 @@
+<div class="header">
+  <div class="exit" (click)="modalService.cancel()"></div>
+  <h1>View item</h1>
+</div>
+
+<div class="select-add-container">
+  <!-- wrapper for easier styling -->
+  <app-select-add
+    class="select"
+    [options]="modalService.active.input.options"
+    [default]="modalService.active.input.options[0]"
+    [alwaysDropShadow]="true"
+    [onlyShadowBorder]="true"
+    [placeholder]="'Tag this item…'"
+    (value)="selected = $event"
+  ></app-select-add>
+</div>
+<!-- wrapper for easier styling -->
+
+<textarea placeholder="Write a description here…" [(ngModel)]="modalService.active.input.description"></textarea>
+
+<div>
+  <!-- wrapper for easier styling -->
+  <app-toggle
+    [beforeText]="'This task hasn\'t been finished yet'"
+    [afterText]="'Goal already accomplished'"
+    [default]="modalService.active.input.isDone"
+    (value)="modalService.active.input.isDone = $event"
+  ></app-toggle>
+</div>
+<!-- wrapper for easier styling -->
+
+<button (click)="submit()">Modify</button>

src/app/components/modal/modals/edit-block/edit-block.component.scss

@@ -0,0 +1,29 @@
+@import '../../../../../styles';
+
+:host {
+  @include card();
+  box-shadow: $shadow;
+
+  width: 66vw;
+  max-width: 400px;
+  @media (max-width: $mobile-width) {
+    width: 300px;
+  }
+
+  box-sizing: border-box;
+  padding: var(--large-padding);
+  position: relative;
+
+  @include inner-spacing(var(--large-padding));
+
+  .header {
+    @include center-child();
+
+    .exit {
+      position: absolute;
+      left: var(--large-padding);
+
+      @include exit();
+    }
+  }
+}

src/app/components/modal/modals/edit-block/edit-block.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { ModalService } from '../../../../services/modal.service';
+
+@Component({
+  selector: 'app-edit-block',
+  templateUrl: './edit-block.component.html',
+  styleUrls: ['./edit-block.component.scss']
+})
+export class EditBlockComponent {
+  selected: string;
+
+  constructor(public modalService: ModalService) {}
+
+  submit() {
+    this.modalService.submit({
+      selected: this.selected,
+      description: this.modalService.active.input.description,
+      isDone: this.modalService.active.input.isDone
+    });
+  }
+}

src/app/components/modal/modals/get-started/get-started.component.html

@@ -0,0 +1,3 @@
+<p>
+  get-started works!
+</p>

src/app/components/modal/modals/get-started/get-started.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-get-started',
+  templateUrl: './get-started.component.html',
+  styleUrls: ['./get-started.component.scss']
+})
+export class GetStartedComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/components/modal/modals/remove-block/remove-block.component.html

@@ -0,0 +1,3 @@
+<p>
+  remove-block works!
+</p>

src/app/components/modal/modals/remove-block/remove-block.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-remove-block',
+  templateUrl: './remove-block.component.html',
+  styleUrls: ['./remove-block.component.scss']
+})
+export class RemoveBlockComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/components/modal/modals/remove-page/remove-page.component.html

@@ -0,0 +1,13 @@
+<section>
+  <div class="header">
+    <div class="exit" (click)="modalService.cancel()"></div>
+    <h1>Are you sure?</h1>
+  </div>
+
+  <p>
+    You are trying to remove <strong>{{ this.modalService.active.input }}</strong
+    >.
+  </p>
+
+  <button (click)="modalService.submit()">Remove</button>
+</section>

src/app/components/modal/modals/remove-page/remove-page.component.scss

@@ -0,0 +1,30 @@
+@import '../../../../../styles';
+
+section {
+  @include card();
+
+  width: 66vw;
+  max-width: 500px;
+  @media (max-width: $mobile-width) {
+    width: 300px;
+  }
+
+  box-sizing: border-box;
+  padding: var(--large-padding);
+
+  position: relative;
+  box-shadow: $shadow;
+
+  @include inner-spacing(var(--large-padding));
+
+  .header {
+    @include center-child();
+
+    .exit {
+      position: absolute;
+      left: var(--large-padding);
+
+      @include exit();
+    }
+  }
+}

src/app/components/modal/modals/remove-page/remove-page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ModalService } from '../../../../services/modal.service';
+
+@Component({
+  selector: 'app-remove-page',
+  templateUrl: './remove-page.component.html',
+  styleUrls: ['./remove-page.component.scss']
+})
+export class RemovePageComponent {
+  constructor(public modalService: ModalService) {}
+}

src/app/components/modal/modals/remove-tower/remove-tower.component.html

@@ -0,0 +1,16 @@
+<section>
+  <div class="header">
+    <div class="exit" (click)="modalService.cancel()"></div>
+    <h1>Are you sure?</h1>
+  </div>
+
+  <p>
+    You are trying to remove
+    <span [ngStyle]="{ color: modalService.active.input.baseColor.toString() }">{{
+      modalService.active.input.name ? modalService.active.input.name : 'an unnamed tower'
+    }}</span
+    >.
+  </p>
+
+  <button (click)="modalService.submit()">Remove</button>
+</section>

src/app/components/modal/modals/remove-tower/remove-tower.component.scss

@@ -0,0 +1,30 @@
+@import '../../../../../styles';
+
+section {
+  @include card();
+
+  width: 66vw;
+  max-width: 500px;
+  @media (max-width: $mobile-width) {
+    width: 300px;
+  }
+
+  box-sizing: border-box;
+  padding: var(--large-padding);
+
+  position: relative;
+  box-shadow: $shadow;
+
+  @include inner-spacing(var(--large-padding));
+
+  .header {
+    @include center-child();
+
+    .exit {
+      position: absolute;
+      left: var(--large-padding);
+
+      @include exit();
+    }
+  }
+}