-
+
-
-
-
-
-
-
-
@@ -75,7 +60,8 @@
[default]="tower.tags.length ? tower.tags[0] : null"
[alwaysDropShadow]="true"
[onlyShadowBorder]="true"
- [placeholder]="'Tag this item…'"
+ [placeholder]="'Set a category…'"
+ [newValuePlaceholder]="'Add a category…'"
(value)="top(editedValues).tag = $event"
>
diff --git a/src/app/components/modal/modals/blocks/blocks.component.scss b/src/app/components/modal/modals/blocks/blocks.component.scss
index 845e0ab..31ff1ca 100644
--- a/src/app/components/modal/modals/blocks/blocks.component.scss
+++ b/src/app/components/modal/modals/blocks/blocks.component.scss
@@ -70,8 +70,8 @@
&.placeholder {
opacity: 0 !important;
- width: 1000px;
- max-width: 1000px;
+ width: 60vw;
+ max-width: 60vw;
}
@include inner-spacing(var(--large-padding));
diff --git a/src/app/components/modal/modals/blocks/blocks.component.ts b/src/app/components/modal/modals/blocks/blocks.component.ts
index 7662cc7..7132b5e 100644
--- a/src/app/components/modal/modals/blocks/blocks.component.ts
+++ b/src/app/components/modal/modals/blocks/blocks.component.ts
@@ -1,4 +1,14 @@
-import { ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ EventEmitter,
+ HostListener,
+ OnDestroy,
+ OnInit,
+ Output,
+ ViewChild
+} from '@angular/core';
import { ModalService } from '../../../../services/modal.service';
import { Tower } from '../../../../model/tower';
import { Observable } from 'rxjs/internal/Observable';
@@ -16,20 +26,30 @@ import { top } from 'src/app/utils/top';
export class BlocksComponent implements OnInit, OnDestroy {
readonly range = range;
readonly top = top;
-
tower: Tower;
-
editedValues: Array>;
-
endOfScrollToken = 0;
- editMode = false;
activeChild: number;
scrollMayEnd = true;
-
onlyDone: boolean;
-
@ViewChild('container') container: ElementRef;
- private subscription;
+
+ private intervalID: number;
+
+ constructor(
+ public modalService: ModalService,
+ private cancelService: CancelService,
+ private changeDetector: ChangeDetectorRef,
+ private component: ElementRef
+ ) {
+ window.addEventListener('resize', this.onScroll.bind(this));
+ }
+
+ @Output() save: EventEmitter<() => void> = new EventEmitter();
+
+ get blocks(): Array {
+ return this.tower.blocks.filter(b => b.isDone === this.onlyDone);
+ }
@HostListener('click') cancel() {
this.cancelService.cancelAll();
@@ -45,28 +65,13 @@ export class BlocksComponent implements OnInit, OnDestroy {
}
@HostListener('scroll') onScroll() {
- console.log('scrolling');
-
- this.animateScroll();
const newToken = ++this.endOfScrollToken;
setTimeout(() => {
if (newToken === this.endOfScrollToken && this.scrollMayEnd) {
this.adjustPosition();
}
- }, 120);
- }
-
- constructor(
- public modalService: ModalService,
- private cancelService: CancelService,
- private changeDetector: ChangeDetectorRef,
- private component: ElementRef
- ) {
- window.addEventListener('resize', this.onScroll.bind(this));
- }
-
- get blocks(): Array {
- return this.tower.blocks.filter(b => b.isDone === this.onlyDone);
+ }, 150);
+ this.animateScroll();
}
ngOnInit() {
@@ -76,18 +81,31 @@ export class BlocksComponent implements OnInit, OnDestroy {
startBlock
}: { tower$: Observable; onlyDone: boolean; startBlock: Block } = this.modalService.active.input;
- this.onlyDone = onlyDone;
- this.subscription = tower$.subscribe(value => {
- this.tower = value;
- this.editedValues = this.blocks.map(({ isDone, description, tag }) => ({ isDone, description, tag }));
- this.editedValues.push({
- isDone: this.onlyDone,
- description: ''
- });
+ this.save.emit(() => this.submitChange());
- setTimeout(() =>
- this.scrollToChild(startBlock ? this.blocks.indexOf(startBlock) + 1 : this.blocks.length + 1, true)
- );
+ this.intervalID = setInterval(() => this.changeDetector.detectChanges(), 1000);
+
+ this.onlyDone = onlyDone;
+ const subscription = tower$.subscribe(value => {
+ if (value) {
+ this.tower = value;
+ this.editedValues = this.blocks.map(({ isDone, description, tag, created }) => ({
+ isDone,
+ description,
+ tag,
+ created
+ }));
+ this.editedValues.push({
+ tag: this.tower.tags.length ? this.tower.tags[0] : null,
+ isDone: this.onlyDone,
+ description: ''
+ });
+
+ setTimeout(() => {
+ this.scrollToChild(startBlock ? this.blocks.indexOf(startBlock) + 1 : this.blocks.length + 1, true);
+ subscription.unsubscribe();
+ });
+ }
});
}
@@ -113,7 +131,6 @@ export class BlocksComponent implements OnInit, OnDestroy {
animate(cardStyle, maskStyle, t: number) {
t = Math.min(2, Math.max(0, t));
cardStyle.opacity = (1.33 * (1 - t / 2)).toString();
- console.log(1 - t / 2);
t = Math.min(1, Math.max(0, t));
maskStyle.opacity = Math.pow(t, 0.5).toString();
maskStyle.display = t <= 0.05 ? 'none' : 'block';
@@ -124,30 +141,25 @@ export class BlocksComponent implements OnInit, OnDestroy {
return;
}
- console.log('adjusting position');
-
const c = this.component.nativeElement;
const middle =
[...this.container.nativeElement.children]
.slice(1, -1)
.map(element => Math.abs(element.offsetLeft - c.scrollLeft + element.clientWidth / 2 - window.innerWidth / 2))
- .map((value, index) =>
- Math.abs(index + 1 - this.activeChild) === 1 ? Math.abs(value - window.innerWidth / 4) : value
- )
+ .map((value, index) => (Math.abs(index + 1 - this.activeChild) === 1 ? Math.abs(value - 100) : value))
.reduce(
(middleIndex, current, currentIndex, list) => (list[middleIndex] < current ? middleIndex : currentIndex),
0
) + 1;
this.scrollToChild(middle);
- this.changeDetector.markForCheck();
}
scrollToChild(index: number, instantly?: boolean) {
this.activeChild = index;
- console.log('scrolling to', index);
const element = this.container.nativeElement.children[index];
+
this.component.nativeElement.scrollTo({
left: element.offsetLeft - (window.innerWidth / 2 - element.clientWidth / 2),
behavior: instantly ? 'auto' : 'smooth'
@@ -157,17 +169,15 @@ export class BlocksComponent implements OnInit, OnDestroy {
submitAdd() {
top(this.editedValues).created = new Date();
this.tower.addBlock(top(this.editedValues) as IBlock);
- this.modalService.submit();
+ this.cancelService.cancelAll();
}
submitChange() {
- this.blocks[this.activeChild - 1].changeKeys(this.editedValues[this.activeChild - 1]);
+ this.blocks.forEach((b, i) => b.changeKeys(this.editedValues[i]));
this.modalService.submit();
}
ngOnDestroy() {
- if (this.subscription) {
- this.subscription.unsubscribe();
- }
+ clearInterval(this.intervalID);
}
}
diff --git a/src/app/components/pages/page/page.component.ts b/src/app/components/pages/page/page.component.ts
index eec9723..12e4664 100644
--- a/src/app/components/pages/page/page.component.ts
+++ b/src/app/components/pages/page/page.component.ts
@@ -40,9 +40,7 @@ export class PageComponent implements OnInit {
if (value) {
this.towers = value.towers.map((t, index) => {
if (index < this.towers.length) {
- if (this.towers[index].getValue() !== t) {
- this.towers[index].next(t);
- }
+ this.towers[index].next(t);
return this.towers[index];
}
return new BehaviorSubject(t);
diff --git a/src/app/components/pages/page/tower/block/block.component.ts b/src/app/components/pages/page/tower/block/block.component.ts
index c3a60b4..c2c0807 100644
--- a/src/app/components/pages/page/tower/block/block.component.ts
+++ b/src/app/components/pages/page/tower/block/block.component.ts
@@ -12,7 +12,7 @@ export class BlockComponent {
@Input() block: ColoredBlock;
@Input() tower$: Observable;
- constructor(private modalService: ModalService, private changeDetection: ChangeDetectorRef) {}
+ constructor(private modalService: ModalService) {}
async handleClick() {
try {
@@ -23,8 +23,6 @@ export class BlockComponent {
});
} catch {
// pass
- } finally {
- this.changeDetection.markForCheck();
}
}
}
diff --git a/src/app/components/pages/page/tower/tower.component.ts b/src/app/components/pages/page/tower/tower.component.ts
index 91186e6..e7717db 100644
--- a/src/app/components/pages/page/tower/tower.component.ts
+++ b/src/app/components/pages/page/tower/tower.component.ts
@@ -4,6 +4,7 @@ import { ModalService } from '../../../../services/modal.service';
import { Observable } from 'rxjs/internal/Observable';
import { Range } from '../../../../interfaces/range';
import { top } from '../../../../utils/top';
+import { CancelService } from '../../../../services/cancel.service';
type StyledBlock = ColoredBlock & { style: { [p: string]: string }; shouldDraw: boolean; cssClass: string };
@@ -35,10 +36,13 @@ export class TowerComponent implements OnInit {
return this.styledBlocks.filter(b => b.shouldDraw);
}
- public constructor(private modalService: ModalService, private changeDetection: ChangeDetectorRef) {}
+ public constructor(private modalService: ModalService, private changeDetection: ChangeDetectorRef) {
+ console.log('oo');
+ }
ngOnInit() {
this.tower$.subscribe(value => {
+ console.log(this.tower, value);
if (value) {
this.styledBlocks = value.coloredBlocks
.filter(b => b.isDone)
@@ -65,13 +69,17 @@ export class TowerComponent implements OnInit {
const lastBlock = top(this.styledBlocks);
if (lastBlock) {
lastBlock.style = { transform: 'translateY(500%)', opacity: '0' };
- setTimeout(() => this.makeBlockDescend(lastBlock), 0);
+ setTimeout(() => {
+ this.makeBlockDescend(lastBlock);
+ this.changeDetection.markForCheck();
+ }, 0);
}
}
}
this.tasks = value.coloredBlocks.filter(block => !block.isDone);
this.tower = value;
+ this.changeDetection.markForCheck();
}
});
@@ -112,8 +120,6 @@ export class TowerComponent implements OnInit {
});
} catch {
// pass
- } finally {
- this.changeDetection.markForCheck();
}
}
}
diff --git a/src/app/components/shared/select-add/select-add.component.html b/src/app/components/shared/select-add/select-add.component.html
index 3ff9840..2a8b98f 100644
--- a/src/app/components/shared/select-add/select-add.component.html
+++ b/src/app/components/shared/select-add/select-add.component.html
@@ -1,8 +1,5 @@
-
-
+
+
@@ -27,7 +24,7 @@
diff --git a/src/app/components/shared/select-add/select-add.component.scss b/src/app/components/shared/select-add/select-add.component.scss
index bc105ac..9920d6f 100644
--- a/src/app/components/shared/select-add/select-add.component.scss
+++ b/src/app/components/shared/select-add/select-add.component.scss
@@ -5,12 +5,6 @@ $inner-padding: var(--medium-padding);
width: 100%;
position: relative;
- &.disabled {
- .top {
- cursor: not-allowed !important;
- }
- }
-
.top,
.bottom {
padding: $inner-padding;
diff --git a/src/app/components/shared/select-add/select-add.component.ts b/src/app/components/shared/select-add/select-add.component.ts
index 6c336e5..e8d622c 100644
--- a/src/app/components/shared/select-add/select-add.component.ts
+++ b/src/app/components/shared/select-add/select-add.component.ts
@@ -8,18 +8,15 @@ import { CancelService } from '../../../services/cancel.service';
})
export class SelectAddComponent {
@Input() placeholder = 'Add a new value…';
+ @Input() newValuePlaceholder = 'Add a value…';
@Input() maxItemCount = 7;
@Input() options: string[];
@Input() alwaysDropShadow = false;
@Input() onlyShadowBorder = false;
@Input() editable = false;
- @Input() disabled = false;
@Input() set default(value: string) {
this.selected = value;
- if (value) {
- this.value.emit(value);
- }
}
backgroundHeight: string;
diff --git a/src/app/components/shared/toggle/toggle.component.html b/src/app/components/shared/toggle/toggle.component.html
index 6a3d19f..6873dcd 100644
--- a/src/app/components/shared/toggle/toggle.component.html
+++ b/src/app/components/shared/toggle/toggle.component.html
@@ -1,7 +1,7 @@
-