mail/ui/dialogs/rendering-info-dialog.slint

import { HorizontalBox, VerticalBox } from "std-widgets.slint";
import { Button } from "../components/button.slint";
import { TypeScale } from "../typography.slint";

// Explains the browser fallback without hiding the privacy implications of
// attaching real-world email HTML to a public issue.
export component RenderingInfoDialog inherits Rectangle {
    in-out property <bool> open: false;
    in property <bool> compact: false;
    // Mail view keeps a reading pane, and so this dialog, for each layout.
    // Only the one on screen takes focus, since the window drops keys aimed
    // at a hidden element.
    in property <bool> shown: true;
    in property <color> accent;
    in property <color> accent-soft;
    in property <color> border;
    in property <color> body-color;
    in property <color> muted-color;
    in property <color> surface;
    in property <color> title-color;
    callback copy-source;
    callback report-issue;
    private property <int> selected-action: 2;

    visible: root.open;
    background: #00000088;
    z: 1000;
    accessible-role: groupbox;
    accessible-label: @tr("About email rendering");

    function close() {
        root.open = false;
    }

    function activate-selected() {
        if root.selected-action == 0 {
            root.close();
        } else if root.selected-action == 1 {
            root.copy-source();
        } else {
            root.report-issue();
        }
    }

    function take-focus() {
        if root.open && root.shown {
            dialog-focus.focus();
        }
    }

    changed shown => { root.take-focus(); }

    changed open => {
        if root.open {
            root.selected-action = 2;
            root.take-focus();
        }
    }

    // Treat this as a modal decision surface; only an explicit close action or
    // Escape dismisses it, so an accidental scrim click does not lose context.
    TouchArea { enabled: root.open; }

    panel := Rectangle {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        // Wide enough for the actions, which longer translations widen.
        width: min(max(540px, rendering-actions.preferred-width + (root.compact ? 40px : 48px)), parent.width - 32px);
        height: max(root.compact ? 368px : 312px, rendering-content.preferred-height);
        border-radius: root.compact ? 12px : 14px;
        border-width: 1px;
        border-color: root.border;
        background: root.surface;
        drop-shadow-blur: 24px;
        drop-shadow-offset-y: 8px;
        drop-shadow-color: #00000055;
        clip: true;

        dialog-focus := FocusScope {
            key-pressed(event) => {
                if event.text == Key.Escape {
                    root.close();
                    return accept;
                }
                if event.text == Key.Tab {
                    root.selected-action = event.modifiers.shift
                        ? (root.selected-action == 0 ? 2 : root.selected-action - 1)
                        : (root.selected-action == 2 ? 0 : root.selected-action + 1);
                    return accept;
                }
                if event.text == Key.Return || event.text == Key.Space {
                    root.activate-selected();
                    return accept;
                }
                reject
            }

            rendering-content := VerticalBox {
                padding-top: 24px;
                padding-right: root.compact ? 20px : 24px;
                padding-bottom: 20px;
                padding-left: root.compact ? 20px : 24px;
                spacing: 14px;

                HorizontalBox {
                    height: 48px;
                    spacing: 12px;
                    Rectangle {
                        width: 44px;
                        height: 44px;
                        border-radius: 22px;
                        background: root.accent-soft;
                        Image {
                            x: 12px;
                            y: 12px;
                            width: 20px;
                            height: 20px;
                            source: @image-url("../icons/lucide/outline/info.svg");
                            colorize: root.accent;
                            image-fit: contain;
                            accessible-role: none;
                        }
                    }
                    Text {
                        text: @tr("About email rendering");
                        color: root.title-color;
                        font-size: TypeScale.heading-large;
                        font-weight: 700;
                        vertical-alignment: center;
                        overflow: elide;
                    }
                }

                Text {
                    height: max(root.compact ? 80px : 48px, self.preferred-height);
                    text: @tr("Flectar Mail uses a completely new email renderer built in Rust. It is still in its early stages, so some emails may not render correctly.");
                    color: root.body-color;
                    font-size: TypeScale.body;
                    wrap: word-wrap;
                    vertical-alignment: top;
                }

                Rectangle {
                    height: max(root.compact ? 96px : 72px, help-note.preferred-height + 20px);
                    border-radius: 8px;
                    border-width: 1px;
                    border-color: root.border;
                    background: root.accent-soft;
                    help-note := Text {
                        x: 12px;
                        y: 10px;
                        width: parent.width - 24px;
                        height: parent.height - 20px;
                        text: @tr("Want to help us fix this email? Copy its HTML source and include it in a GitHub issue. Remove private or sensitive information before submitting it.");
                        color: root.body-color;
                        font-size: TypeScale.secondary;
                        wrap: word-wrap;
                        vertical-alignment: center;
                    }
                }

                Rectangle { vertical-stretch: 1; }

                rendering-actions := HorizontalBox {
                    height: 36px;
                    spacing: 8px;
                    Button {
                        width: max(root.compact ? 64px : 76px, self.content-width);
                        height: 36px;
                        text: @tr("Close");
                        selected: root.selected-action == 0;
                        clicked => { root.close(); }
                    }
                    Rectangle { horizontal-stretch: 1; }
                    Button {
                        width: max(root.compact ? 104px : 112px, self.content-width);
                        height: 36px;
                        text: @tr("Copy source");
                        selected: root.selected-action == 1;
                        clicked => {
                            root.selected-action = 1;
                            root.copy-source();
                        }
                    }
                    Button {
                        width: max(root.compact ? 118px : 112px, self.content-width);
                        height: 36px;
                        text: @tr("Report issue");
                        primary: true;
                        selected: root.selected-action == 2;
                        clicked => {
                            root.selected-action = 2;
                            root.report-issue();
                        }
                    }
                }
            }
        }
    }
}