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

Make scrolling blocks usable

Browse source
This commit is contained in:
Andras Schmelczer 2019-09-15 21:32:38 +02:00
commit 32704c5561
3 changed files with 182 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/app/components/modal/modals/blocks/blocks.component.html
View file

@ -1,50 +1,63 @@
<section #container>
<div class="card transparent"></div>
<div class="card placeholder"></div>
<div
*ngFor="let i of range({ min: 1, max: blocks.length + 1 })"
(click)="$event.stopPropagation(); scrollToChild(i)"
class="card {{ i === activeChild ? 'active' : '' }}"
*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]="blocks[i - 1].tag"
[default]="editedValues[i].tag"
[alwaysDropShadow]="true"
[onlyShadowBorder]="true"
[placeholder]="'Tag this item…'"
(value)="blocks[i - 1].changeKeys({ tag: $event })"
(value)="editedValues[i].tag = $event"
></app-select-add>
</div>
<textarea
[disabled]="!editMode"
placeholder="Write a description here…"
[value]="blocks[i - 1].description"
(change)="blocks[i - 1].changeKeys({ description: $event.target.value })"
[(ngModel)]="editedValues[i].description"
></textarea>
<div>
<app-toggle
[beforeText]="'This task hasn\'t been finished yet'"
[afterText]="'Goal already accomplished'"
[default]="blocks[i - 1].isDone"
(value)="blocks[i - 1].changeKeys({ isDone: $event })"
[default]="blocks[i].isDone"
[disabled]="!editMode"
(value)="editedValues[i].isDone = $event"
></app-toggle>
</div>
<div class="edit {{ editMode ? 'active' : '' }}" (click)="editMode = !editMode">
<img src="assets/pen.svg" alt="edit" />
<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()" class="card {{ false ? 'active' : '' }}">
<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">
@ -60,22 +73,24 @@
[alwaysDropShadow]="true"
[onlyShadowBorder]="true"
[placeholder]="'Tag this item…'"
(value)="editedValues.tag = $event"
(value)="top(editedValues).tag = $event"
></app-select-add>
</div>
<textarea placeholder="Write a description here…" [(ngModel)]="editedValues.description"></textarea>
<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)="editedValues.isDone = $event"
(value)="top(editedValues).isDone = $event"
></app-toggle>
</div>
<button (click)="submitAdd()" [disabled]="!editedValues.tag">Create</button>
<div class="bottom">
<button (click)="submitAdd()" [disabled]="!top(editedValues).tag">Create and exit</button>
</div>
</div>
<div class="card transparent"></div>
<div class="card placeholder"></div>
</section>

107
src/app/components/modal/modals/blocks/blocks.component.scss
View file

@ -37,6 +37,7 @@
max-width: 400px;
@media (max-width: $mobile-width) {
width: 300px;
opacity: 1 !important;
}
box-sizing: border-box;
@ -44,13 +45,17 @@
margin: calc(var(--large-padding) / 2);
position: relative;
&.near-active {
cursor: pointer;
}
.mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
z-index: 10000;
@include card();
}
@ -59,68 +64,100 @@
margin-left: var(--large-padding);
}
&.transparent {
&.placeholder {
opacity: 0;
width: 1000px;
max-width: 1000px;
}
@include inner-spacing(var(--large-padding));
.header {
@include center-child();
position: relative;
.exit {
position: absolute;
left: var(--large-padding);
left: 0;
@include exit();
}
.block {
@include square(12px);
margin-right: 10px;
}
}
.edit {
.bottom {
height: 32px;
@media (max-width: $mobile-width) {
height: 24px;
}
position: relative;
display: inline-block;
float: right;
opacity: 0.25;
cursor: pointer;
img {
@include square(16px);
}
transition: opacity $short-animation-time;
&:before {
content: '';
display: block;
button {
margin: 0;
position: absolute;
bottom: calc(-1 * #{$line-height});
left: 0;
height: $line-height;
background-color: $text-color;
width: 0;
transition: width $long-animation-time;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
transition: opacity $short-animation-time;
&.hidden {
opacity: 0;
}
}
@media (min-width: $mobile-width) {
&:hover {
opacity: 0.5;
.edit {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0.25;
cursor: pointer;
img {
@include square(16px);
}
&:hover {
transition: opacity $short-animation-time;
&:before {
content: '';
display: block;
position: absolute;
bottom: calc(-1 * #{$line-height});
left: 0;
height: $line-height;
background-color: $text-color;
width: 0;
transition: width $long-animation-time;
}
@media (min-width: $mobile-width) {
&:hover {
opacity: 0.5;
}
&:hover {
&:before {
width: 100% !important;
}
}
}
&.active {
&:before {
width: 100% !important;
}
}
}
&.active {
&:before {
width: 100% !important;
&.active {
opacity: 1;
}
}
&.active {
opacity: 1;
}
}
}

34
src/app/components/modal/modals/blocks/blocks.component.ts
View file

@ -6,9 +6,7 @@ import { Block } from '../../../../model/block';
import { IBlock } from '../../../../interfaces/persistance/block';
import { CancelService } from '../../../../services/cancel.service';
import { range } from 'src/app/utils/range';
import { el } from '@angular/platform-browser/testing/src/browser_util';
const SWIPE_LIMIT = 0.35;
import { top } from 'src/app/utils/top';
@Component({
selector: 'app-blocks',
@ -17,10 +15,11 @@ const SWIPE_LIMIT = 0.35;
})
export class BlocksComponent implements OnInit, OnDestroy {
readonly range = range;
readonly top = top;
tower: Tower;
editedValues: Partial<IBlock>;
editedValues: Array<Partial<IBlock>>;
endOfScrollToken = 0;
editMode = false;
@ -76,13 +75,16 @@ export class BlocksComponent implements OnInit, OnDestroy {
this.onlyDone = onlyDone;
this.subscription = tower$.subscribe(value => {
this.tower = value;
setTimeout(() => this.scrollToChild(this.blocks.indexOf(startBlock) + 1, true));
});
this.editedValues = this.blocks.map(({ isDone, description, tag }) => ({ isDone, description, tag }));
this.editedValues.push({
isDone: this.onlyDone,
description: ''
});
this.editedValues = {
isDone: onlyDone,
description: ''
};
setTimeout(() =>
this.scrollToChild(startBlock ? this.blocks.indexOf(startBlock) + 1 : this.blocks.length + 1, true)
);
});
}
animateScroll() {
@ -106,8 +108,9 @@ export class BlocksComponent implements OnInit, OnDestroy {
animate(cardStyle, maskStyle, t: number) {
t = Math.min(1, Math.max(0, t));
cardStyle.opacity = (1 - t / 1.5).toString();
maskStyle.opacity = Math.pow(t, 0.5).toString();
maskStyle.display = t === 0 ? 'none' : 'block';
maskStyle.display = t <= 0.1 ? 'none' : 'block';
}
adjustPosition() {
@ -141,8 +144,13 @@ export class BlocksComponent implements OnInit, OnDestroy {
}
submitAdd() {
this.editedValues.created = new Date();
this.tower.addBlock(this.editedValues as IBlock);
top(this.editedValues).created = new Date();
this.tower.addBlock(top(this.editedValues) as IBlock);
this.modalService.submit();
}
submitChange() {
this.blocks[this.activeChild - 1].changeKeys(this.editedValues[this.activeChild - 1]);
this.modalService.submit();
}