80 lines
2.7 KiB
HTML
80 lines
2.7 KiB
HTML
<!-- eslint-disable @angular-eslint/template/button-has-type, @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/prefer-ngsrc -->
|
|
@if (lightboxAttachment()) {
|
|
<div
|
|
class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm"
|
|
(click)="closeLightbox()"
|
|
(contextmenu)="openImageContextMenu($event, lightboxAttachment()!)"
|
|
(keydown.escape)="closeLightbox()"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="relative max-h-[90vh] max-w-[90vw]"
|
|
(click)="$event.stopPropagation()"
|
|
>
|
|
<img
|
|
[src]="lightboxAttachment()!.objectUrl"
|
|
[alt]="lightboxAttachment()!.filename"
|
|
class="max-h-[90vh] max-w-[90vw] rounded-lg object-contain shadow-2xl"
|
|
(contextmenu)="openImageContextMenu($event, lightboxAttachment()!); $event.stopPropagation()"
|
|
/>
|
|
<div class="absolute right-3 top-3 flex gap-2">
|
|
<button
|
|
(click)="downloadAttachment(lightboxAttachment()!)"
|
|
class="rounded-lg bg-black/60 p-2 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
|
|
title="Download"
|
|
>
|
|
<ng-icon
|
|
name="lucideDownload"
|
|
class="h-5 w-5"
|
|
/>
|
|
</button>
|
|
<button
|
|
(click)="closeLightbox()"
|
|
class="rounded-lg bg-black/60 p-2 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
|
|
title="Close"
|
|
>
|
|
<ng-icon
|
|
name="lucideX"
|
|
class="h-5 w-5"
|
|
/>
|
|
</button>
|
|
</div>
|
|
<div class="absolute bottom-3 left-3 right-3 flex items-center justify-between">
|
|
<div class="rounded-lg bg-black/60 px-3 py-1.5 backdrop-blur-sm">
|
|
<span class="text-sm text-white">{{ lightboxAttachment()!.filename }}</span>
|
|
<span class="ml-2 text-xs text-white/60">{{ formatBytes(lightboxAttachment()!.size) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (imageContextMenu()) {
|
|
<app-context-menu
|
|
[x]="imageContextMenu()!.positionX"
|
|
[y]="imageContextMenu()!.positionY"
|
|
(closed)="closeImageContextMenu()"
|
|
>
|
|
<button
|
|
(click)="copyImageToClipboard(imageContextMenu()!.attachment); closeImageContextMenu()"
|
|
class="context-menu-item-icon"
|
|
>
|
|
<ng-icon
|
|
name="lucideCopy"
|
|
class="h-4 w-4 text-muted-foreground"
|
|
/>
|
|
Copy Image
|
|
</button>
|
|
<button
|
|
(click)="downloadAttachment(imageContextMenu()!.attachment); closeImageContextMenu()"
|
|
class="context-menu-item-icon"
|
|
>
|
|
<ng-icon
|
|
name="lucideDownload"
|
|
class="h-4 w-4 text-muted-foreground"
|
|
/>
|
|
Save Image
|
|
</button>
|
|
</app-context-menu>
|
|
}
|