Myx
181fedc7ec
Some checks failed
Queue Release Build / prepare (push) Successful in 30s
Deploy Web Apps / deploy (push) Successful in 7m8s
Queue Release Build / build-windows (push) Successful in 28m11s
Queue Release Build / finalize (push) Has been cancelled
Queue Release Build / build-linux (push) Has started running
86 lines
2.9 KiB
HTML
86 lines
2.9 KiB
HTML
<!--
|
|
Two presentations:
|
|
- Mobile: rendered through `app-bottom-sheet` so confirmations slide up from the bottom.
|
|
- Desktop: original centered modal with backdrop.
|
|
-->
|
|
@if (isMobile()) {
|
|
<app-bottom-sheet
|
|
[title]="title()"
|
|
[ariaLabel]="title()"
|
|
(dismissed)="cancelled.emit(undefined)"
|
|
>
|
|
<div class="px-4 pb-3 pt-1 text-sm text-muted-foreground">
|
|
<ng-content />
|
|
</div>
|
|
<div class="flex gap-2 border-t border-border p-3">
|
|
<button
|
|
(click)="cancelled.emit(undefined)"
|
|
type="button"
|
|
class="min-h-11 flex-1 rounded-lg bg-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
|
|
>
|
|
{{ cancelLabel() }}
|
|
</button>
|
|
<button
|
|
(click)="confirmed.emit(undefined)"
|
|
type="button"
|
|
class="min-h-11 flex-1 rounded-lg px-3 py-2 text-sm transition-colors"
|
|
[class.bg-primary]="variant() === 'primary'"
|
|
[class.text-primary-foreground]="variant() === 'primary'"
|
|
[class.hover:bg-primary/90]="variant() === 'primary'"
|
|
[class.bg-destructive]="variant() === 'danger'"
|
|
[class.text-destructive-foreground]="variant() === 'danger'"
|
|
[class.hover:bg-destructive/90]="variant() === 'danger'"
|
|
>
|
|
{{ confirmLabel() }}
|
|
</button>
|
|
</div>
|
|
</app-bottom-sheet>
|
|
} @else {
|
|
<!-- Backdrop -->
|
|
<div
|
|
class="fixed inset-0 z-40 bg-black/30"
|
|
(click)="cancelled.emit(undefined)"
|
|
(keydown.enter)="cancelled.emit(undefined)"
|
|
(keydown.space)="cancelled.emit(undefined)"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label="Close dialog"
|
|
></div>
|
|
|
|
<!-- Dialog -->
|
|
<div
|
|
appThemeNode="confirmDialogSurface"
|
|
class="fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-lg"
|
|
[class]="widthClass()"
|
|
>
|
|
<div class="p-4">
|
|
<h4 class="font-semibold text-foreground mb-2">{{ title() }}</h4>
|
|
<div class="text-sm text-muted-foreground">
|
|
<ng-content />
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2 p-3 border-t border-border">
|
|
<button
|
|
(click)="cancelled.emit(undefined)"
|
|
type="button"
|
|
class="flex-1 px-3 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm"
|
|
>
|
|
{{ cancelLabel() }}
|
|
</button>
|
|
<button
|
|
(click)="confirmed.emit(undefined)"
|
|
type="button"
|
|
class="flex-1 px-3 py-2 rounded-lg transition-colors text-sm"
|
|
[class.bg-primary]="variant() === 'primary'"
|
|
[class.text-primary-foreground]="variant() === 'primary'"
|
|
[class.hover:bg-primary/90]="variant() === 'primary'"
|
|
[class.bg-destructive]="variant() === 'danger'"
|
|
[class.text-destructive-foreground]="variant() === 'danger'"
|
|
[class.hover:bg-destructive/90]="variant() === 'danger'"
|
|
>
|
|
{{ confirmLabel() }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|