mail/ui/dialogs/attachment-preview-dialog.slint

import { HorizontalBox, StyleMetrics, VerticalBox } from "std-widgets.slint";
import { MailAttachments } from "../models.slint";
import { DocumentPreview, TextPreview } from "../components/document-preview.slint";
import { ToolbarIconButton } from "../components/controls.slint";
import { AppTheme } from "../design-system.slint";
import { TypeScale } from "../typography.slint";
import { WindowChrome, WindowControlsClearance } from "../window-chrome.slint";

export component AttachmentPreviewDialog inherits Rectangle {
    in property <bool> compact: false;
    visible: MailAttachments.open;
    background: #00000088; z: 2000;
    accessible-role: groupbox; accessible-label: MailAttachments.name;
    changed visible => { if root.visible { keys.focus(); } }
    TouchArea {}
    // The desktop panel stays below integrated window controls.
    private property <length> controls-inset: WindowChrome.controls-visible && !root.compact ? WindowChrome.band-height : 0px;
    panel := Rectangle {
        x: (parent.width - self.width) / 2;
        y: root.controls-inset + (parent.height - root.controls-inset - self.height) / 2;
        width: root.compact ? parent.width : min(1000px, parent.width - 48px);
        height: root.compact ? parent.height : parent.height - root.controls-inset - 48px;
        background: AppTheme.surface; border-radius: root.compact ? 0px : 12px;
        keys := FocusScope {
            key-pressed(event) => {
                if event.text == Key.Escape { MailAttachments.command("close", ""); return accept; }
                return reject;
            }
            VerticalBox {
                padding: root.compact ? 12px : 20px; spacing: 12px;
                Rectangle {
                    height: header-row.preferred-height;
                    // The full-window compact preview can sit under the window controls.
                    header-clearance := WindowControlsClearance { width: parent.width; height: parent.height; }
                    header-row := HorizontalBox {
                        padding-left: max(StyleMetrics.layout-padding, header-clearance.leading);
                        padding-right: max(StyleMetrics.layout-padding, header-clearance.trailing);
                        Text { text: MailAttachments.name; color: AppTheme.heading; font-size: TypeScale.title; overflow: elide; horizontal-stretch: 1; }
                        ToolbarIconButton { compact: root.compact; icon: @image-url("../icons/lucide/outline/download.svg"); icon-color: AppTheme.secondary; tooltip-text: @tr("Download"); interactive: !MailAttachments.busy; clicked => { MailAttachments.command("download-current", ""); } }
                        ToolbarIconButton { compact: root.compact; icon: @image-url("../icons/lucide/outline/x.svg"); icon-color: AppTheme.secondary; tooltip-text: @tr("Close"); clicked => { MailAttachments.command("close", ""); } }
                    }
                }
                if MailAttachments.is-image : DocumentPreview {
                    compact: root.compact; source: MailAttachments.image; busy: MailAttachments.busy;
                    page: MailAttachments.page; pages: MailAttachments.pages;
                    raster-zoom: MailAttachments.pages > 0 ? 2 : 1; document-revision: MailAttachments.revision;
                    render-page(page, zoom) => { MailAttachments.command("page", "" + page); }
                }
                if !MailAttachments.is-image : TextPreview { compact: root.compact; text: MailAttachments.text; }
                Text { text: MailAttachments.busy ? @tr("Loading preview…") : MailAttachments.status; wrap: word-wrap; color: AppTheme.secondary; }
            }
        }
    }
}