96 lines
3 KiB
HTML
96 lines
3 KiB
HTML
<section #container>
|
|
<div class="card placeholder"></div>
|
|
<div
|
|
*ngFor="let i of range({ max: blocks.length })"
|
|
(click)="$event.stopPropagation(); scrollToChild(i + 1)"
|
|
class="card {{ i + 1 === activeChild ? 'active' : '' }} {{
|
|
i + 2 === activeChild || i === activeChild ? 'near-active' : ''
|
|
}}"
|
|
>
|
|
<div class="mask"></div>
|
|
|
|
<div class="header">
|
|
<div class="exit" (click)="modalService.cancel()"></div>
|
|
<div class="block" [ngStyle]="{ 'background-color': tower.getColorOfBlock(editedValues[i]) | color }"></div>
|
|
<h1>View item</h1>
|
|
</div>
|
|
|
|
<div class="select-add-container">
|
|
<app-select-add
|
|
class="select"
|
|
[disabled]="!editMode"
|
|
[options]="tower.tags"
|
|
[default]="editedValues[i].tag"
|
|
[alwaysDropShadow]="true"
|
|
[onlyShadowBorder]="true"
|
|
[placeholder]="'Tag this item…'"
|
|
(value)="editedValues[i].tag = $event"
|
|
></app-select-add>
|
|
</div>
|
|
|
|
<textarea
|
|
[disabled]="!editMode"
|
|
placeholder="Write a description here…"
|
|
[(ngModel)]="editedValues[i].description"
|
|
></textarea>
|
|
|
|
<div>
|
|
<app-toggle
|
|
[beforeText]="'This task hasn\'t been finished yet'"
|
|
[afterText]="'Goal already accomplished'"
|
|
[default]="blocks[i].isDone"
|
|
[disabled]="!editMode"
|
|
(value)="editedValues[i].isDone = $event"
|
|
></app-toggle>
|
|
</div>
|
|
|
|
<div class="bottom">
|
|
<button class="{{ editMode && i + 1 === activeChild ? '' : 'hidden' }}" (click)="submitChange()"></button>
|
|
<div class="edit {{ editMode && i + 1 === activeChild ? 'active' : '' }}" (click)="editMode = !editMode">
|
|
<img src="assets/pen.svg" alt="edit" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
(click)="$event.stopPropagation(); scrollToChild(blocks.length + 1)"
|
|
class="card {{ blocks.length + 1 === activeChild ? 'active' : '' }} {{
|
|
blocks.length === activeChild ? 'near-active' : ''
|
|
}} "
|
|
>
|
|
<div class="mask"></div>
|
|
|
|
<div class="header">
|
|
<div class="exit" (click)="modalService.cancel()"></div>
|
|
<h1>Create an item</h1>
|
|
</div>
|
|
|
|
<div class="select-add-container">
|
|
<app-select-add
|
|
class="select"
|
|
[options]="tower.tags"
|
|
[default]="tower.tags.length ? tower.tags[0] : null"
|
|
[alwaysDropShadow]="true"
|
|
[onlyShadowBorder]="true"
|
|
[placeholder]="'Tag this item…'"
|
|
(value)="top(editedValues).tag = $event"
|
|
></app-select-add>
|
|
</div>
|
|
|
|
<textarea placeholder="Write a description here…" [(ngModel)]="top(editedValues).description"></textarea>
|
|
|
|
<div>
|
|
<app-toggle
|
|
[beforeText]="'This task hasn\'t been finished yet'"
|
|
[afterText]="'Goal already accomplished'"
|
|
[default]="onlyDone"
|
|
(value)="top(editedValues).isDone = $event"
|
|
></app-toggle>
|
|
</div>
|
|
|
|
<div class="bottom">
|
|
<button (click)="submitAdd()" [disabled]="!top(editedValues).tag">Create and exit</button>
|
|
</div>
|
|
</div>
|
|
<div class="card placeholder"></div>
|
|
</section>
|