andras/life-towers
andras/life-towers
Watch
1
0
Fork
You've already forked life-towers
 0
Code Issues Pull requests 10 Projects Releases Packages 1 Wiki Activity Actions

Add rename page functionality

Browse source
This commit is contained in:
Andras Schmelczer 2019-09-08 16:10:33 +02:00
commit 3a1accaae1
5 changed files with 201 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/components/modal/modal.component.html
View file

@ -1,9 +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>
<section class="{{ modalService.active ? 'active' : '' }}" [ngSwitch]="modalService.active?.type">
<app-create-block (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.createBlock"></app-create-block>
<app-edit-block (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.editBlock"></app-edit-block>
<app-remove-block (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.removeBlock"></app-remove-block>
<app-remove-tower (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.removeTower"></app-remove-tower>
<app-settings (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.settings"></app-settings>
<app-get-started (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.getStarted"></app-get-started>
<app-remove-page (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.removePage"></app-remove-page>
</section>

8
src/app/components/modal/modal.component.scss
View file

@ -1,13 +1,13 @@
@import '../../../styles';
main {
section {
position: absolute;
top: 0;
left: 0;
z-index: 10000;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 10000;
@include center-child();

10
src/app/components/modal/modal.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component } from '@angular/core';
import { ModalService, ModalType } from '../../services/modal.service';
@Component({
@ -7,14 +7,18 @@ import { ModalService, ModalType } from '../../services/modal.service';
styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
// Needed for accessing the enum from html.
ModalType = ModalType;
constructor(public modalService: ModalService) {
constructor(public modalService: ModalService, private changeDetectionRef: ChangeDetectorRef) {
window.addEventListener('keydown', (event: KeyboardEvent) => {
if (event.key === 'Escape') {
this.modalService.cancel();
}
});
/*window.addEventListener('resize', (_: UIEvent) => {
console.log('resize');
this.changeDetectionRef.markForCheck();
});*/
}
}

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

@ -2,7 +2,6 @@
:host {
@include card();
box-shadow: $shadow;
width: 66vw;
max-width: 400px;
@ -12,7 +11,9 @@
box-sizing: border-box;
padding: var(--large-padding);
position: relative;
box-shadow: $shadow;
@include inner-spacing(var(--large-padding));

2
src/app/components/modal/modals/settings/settings.component.scss
View file

@ -4,7 +4,7 @@
@include card();
width: 66vw;
max-width: 500px;
max-width: 400px;
@media (max-width: $mobile-width) {
width: 300px;
}