Reformat code

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();
+    }
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+<div class="header">
+  <div class="exit" (click)="modalService.cancel()"></div>
+  <h1>Settings</h1>
+</div>
+
+<div>
+  <!-- wrapper for easier styling -->
+  <app-toggle
+    [beforeText]="'Hide create tower button'"
+    [afterText]="'Show create tower button'"
+    [default]="!dataService.active.userData?.hideCreateTowerButton"
+    (value)="dataService.active.userData.hideCreateTowerButton = !$event"
+  ></app-toggle>
+</div>
+<!-- wrapper for easier styling -->
+
+<p *ngIf="dataService.active?.towers.length == 5">There can be a maximum of <strong>5</strong> towers on each page.</p>
+
+<button (click)="deletePage()">Delete current page</button>

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

@@ -0,0 +1,34 @@
+@import '../../../../../styles';
+
+:host {
+  @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();
+    }
+  }
+
+  p {
+    font-size: var(--medium-font-size);
+  }
+}