62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Component, ChangeDetectionStrategy, input, output, computed } from '@angular/core';
|
|
import { Block, HslColor } from '../../models';
|
|
import { getColorOfTag } from '../../utils/color';
|
|
|
|
/**
|
|
* A block rendered as a small COLORED SQUARE (1/6 of tower width).
|
|
* Only DONE blocks appear here; pending blocks appear in the tasks accordion.
|
|
* Clicking opens the block-edit modal in the parent tower component.
|
|
*/
|
|
@Component({
|
|
selector: 'lt-block',
|
|
standalone: true,
|
|
imports: [],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label="Edit completed task"
|
|
[class.hovered]="hovered()"
|
|
[style.background-color]="color()"
|
|
(click)="clicked.emit()"
|
|
(keydown.enter)="clicked.emit()"
|
|
(keydown.space)="$event.preventDefault(); clicked.emit()"
|
|
></div>
|
|
`,
|
|
styles: `
|
|
@import '../../../library/main';
|
|
|
|
:host {
|
|
position: relative;
|
|
width: calc(100% / 6);
|
|
padding-bottom: calc(100% / 6);
|
|
|
|
div {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
transition: transform $long-animation-time;
|
|
|
|
&:hover,
|
|
&.hovered {
|
|
transform: translateY(4px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
})
|
|
export class BlockComponent {
|
|
readonly block = input.required<Block>();
|
|
readonly baseColor = input.required<HslColor>();
|
|
readonly hovered = input(false);
|
|
|
|
/** Emits when the square is clicked — parent opens the block-edit modal. */
|
|
readonly clicked = output<void>();
|
|
|
|
readonly color = computed(() => getColorOfTag(this.block().tag, this.baseColor()));
|
|
}
|