diff --git a/frontend/src/app/components/modal/modal.component.ts b/frontend/src/app/components/modal/modal.component.ts index 4c854ce..47c9eb8 100644 --- a/frontend/src/app/components/modal/modal.component.ts +++ b/frontend/src/app/components/modal/modal.component.ts @@ -2,6 +2,7 @@ import { Component, ChangeDetectionStrategy, output, + input, signal, AfterViewInit, OnDestroy, @@ -22,8 +23,20 @@ import { ModalStateService } from '../../services/modal-state.service'; class="modal" [class.active]="active()" (click)="onBackdropClick($event)" + (keydown.enter)="onBackdropClick($any($event))" + tabindex="-1" > -
+ @@ -31,19 +44,35 @@ import { ModalStateService } from '../../services/modal-state.service'; styles: ` @import '../../../library/main'; - section.modal { + /* Keep the component host out of parent flex/grid flow. Parent containers + apply spacing to direct children, so relying on the fixed child alone can + still let become a layout item when it mounts. */ + :host { position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; z-index: 10000; + display: block; + margin: 0 !important; + } + + section.modal { + position: absolute; + inset: 0; @include center-child(); padding: var(--large-padding); box-sizing: border-box; - background: $background-gradient; + background: rgba(255, 248, 248, 0.94); transition: opacity 300ms; opacity: 1; + overflow-y: auto; + + @media (max-width: $mobile-width) { + padding: var(--medium-padding); + } + + @media (max-height: $min-height) { + align-items: flex-start; + } &:not(.active) { opacity: 0; @@ -57,6 +86,8 @@ import { ModalStateService } from '../../services/modal-state.service'; `, }) export class ModalComponent implements AfterViewInit, OnDestroy { + readonly labelledBy = input(null); + readonly describedBy = input(null); readonly close = output(); // The active signal starts false; AfterViewInit flips it true on next tick @@ -65,7 +96,6 @@ export class ModalComponent implements AfterViewInit, OnDestroy { private readonly dialogRef = viewChild>('dialog'); private previousFocus: HTMLElement | null = null; - private escListener!: (e: KeyboardEvent) => void; private readonly modalState = inject(ModalStateService); ngAfterViewInit(): void { diff --git a/frontend/src/app/components/modal/page-settings.component.ts b/frontend/src/app/components/modal/page-settings.component.ts deleted file mode 100644 index ab6ebc7..0000000 --- a/frontend/src/app/components/modal/page-settings.component.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { - Component, - ChangeDetectionStrategy, - input, - output, - OnInit, - inject, - signal, -} from '@angular/core'; -import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'; -import { Page } from '../../models'; -import { ToggleComponent } from '../shared/toggle/toggle.component'; - -export interface PageSettingsResult { - name: string; - hide_create_tower_button: boolean; - keep_tasks_open: boolean; -} - -@Component({ - selector: 'lt-page-settings', - standalone: true, - imports: [ReactiveFormsModule, ToggleComponent], - changeDetection: ChangeDetectionStrategy.OnPush, - template: ` -
-
-

{{ page() ? 'Page settings' : 'New page' }}

-
- -
- - -
- -
- -
- -
- - - - @if (page()) { - - } -
- `, - styles: ` - @import '../../../library/main'; - - :host { - @include card(); - width: 66vw; - max-width: 400px; - @media (max-width: $mobile-width) { width: 300px; } - box-sizing: border-box; - padding: var(--large-padding); - position: relative; - box-shadow: $shadow; - @include inner-spacing(var(--large-padding)); - display: block; - - .header { - @include center-child(); - - .exit { - position: absolute; - left: var(--large-padding); - @include exit(); - } - } - - input[type='text'] { - text-align: center; - } - - .toggle-row { - display: flex; - justify-content: center; - } - - button { - display: block; - } - } - `, -}) -export class PageSettingsComponent implements OnInit { - readonly page = input(null); - readonly save = output(); - readonly delete = output(); - readonly close = output(); - - private readonly fb = inject(FormBuilder); - - form = this.fb.group({ - name: ['', [Validators.required, Validators.maxLength(200)]], - }); - - hideCreateTowerButton = signal(false); - readonly keepTasksOpen = signal(false); - - ngOnInit(): void { - const p = this.page(); - if (p) { - this.form.patchValue({ name: p.name }); - this.hideCreateTowerButton.set(p.hide_create_tower_button); - this.keepTasksOpen.set(p.keep_tasks_open); - } - } - - onSubmit(): void { - if (this.form.invalid) return; - const v = this.form.value; - this.save.emit({ - name: v.name ?? '', - hide_create_tower_button: this.hideCreateTowerButton(), - keep_tasks_open: this.keepTasksOpen(), - }); - } -} diff --git a/frontend/src/app/components/modal/settings.component.ts b/frontend/src/app/components/modal/settings.component.ts index c428d64..9d044ce 100644 --- a/frontend/src/app/components/modal/settings.component.ts +++ b/frontend/src/app/components/modal/settings.component.ts @@ -16,9 +16,6 @@ export interface UpdatePagePayload { keep_tasks_open: boolean; } -const UUIDV4_RE = - /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i; - @Component({ selector: 'lt-settings', standalone: true, @@ -26,7 +23,7 @@ const UUIDV4_RE = changeDetection: ChangeDetectionStrategy.OnPush, template: `
- +

Settings

@if (page()) { @@ -36,26 +33,30 @@ const UUIDV4_RE = - +
+ - + +
- - - +
+ +
@if (tower()) { + + } @else { + } `, @@ -55,30 +57,45 @@ export interface TowerSettingsResult { @include card(); width: 66vw; max-width: 400px; - @media (max-width: $mobile-width) { width: 300px; } + @media (max-width: $mobile-width) { + width: 88vw; + max-width: 88vw; + padding: var(--medium-padding); + } box-sizing: border-box; padding: var(--large-padding); + padding-top: calc(var(--large-padding) + var(--medium-padding)); position: relative; box-shadow: $shadow; - @include inner-spacing(var(--large-padding)); display: block; - .header { - @include center-child(); - - .exit { - position: absolute; - left: var(--large-padding); - @include exit(); - } + .exit { + position: absolute; + top: var(--medium-padding); + right: var(--medium-padding); + @include exit(); } - input[type='text'] { + form { + @include inner-spacing(var(--large-padding)); + } + + .title-input { + @include title-text(); text-align: center; + width: 100%; + background: transparent; + border: 0; } button { display: block; + // Stay full-width on mobile, but switch to flex so forms.scss's + // bottom-alignment keeps the underline hugging the label in the 42px + // tap target (plain block centres the text and strands the underline). + @media (max-width: $mobile-width) { + display: flex; + } } } `, @@ -90,6 +107,7 @@ export class TowerSettingsComponent implements OnInit { readonly close = output(); private readonly fb = inject(FormBuilder); + private readonly destroyRef = inject(DestroyRef); form = this.fb.group({ name: ['', [Validators.required, Validators.maxLength(200)]], @@ -102,17 +120,38 @@ export class TowerSettingsComponent implements OnInit { if (t) { this.form.patchValue({ name: t.name }); this.currentColor = { ...t.base_color }; + + // Edit mode: persist name changes as they happen. Wire this up *after* + // the initial patchValue so seeding the form doesn't fire a save. + this.form.valueChanges + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe(() => this.autoSave()); } } onColorChange(color: HslColor): void { this.currentColor = color; + // In edit mode the picker is a live control — commit each change. + if (this.tower()) this.autoSave(); } onSubmit(): void { + // Only the create flow reaches here via its Submit button; edit mode + // auto-saves (and Enter on the single field is a harmless redundant save). + this.tryEmitSave(); + } + + private autoSave(): void { + this.tryEmitSave(); + } + + private tryEmitSave(): void { if (this.form.invalid) return; - const v = this.form.value; - this.save.emit({ name: v.name ?? '', base_color: this.currentColor }); + this.emitSave(); + } + + private emitSave(): void { + this.save.emit({ name: this.form.value.name ?? '', base_color: this.currentColor }); } }