LibrePCB

import { Data, EditorCommand } from "../api.slint";

export component MenuSeparator inherits Rectangle {
    height: 10px;

    Rectangle {
        y: parent.height / 2;
        width: parent.width - 14px;
        height: 1px;
        background: Data.theme.base-border;
    }
}

export component MenuItem inherits Rectangle {
    in property <EditorCommand> cmd;
    in property <string> text: cmd.text;
    in property <string> shortcuts: cmd.shortcut;
    in property <string> status-tip: cmd.status-tip;
    in property <image> icon: {
        if checkable {
            if checked {
                @image-url("../../../font-awesome/svgs/regular/square-check.svg")
            } else {
                @image-url("../../../font-awesome/svgs/regular/square.svg")
            }
        } else {
            cmd.icon
        }
    };
    in property <angle> icon-rotation: 0deg;
    in property <color> icon-color: text-color;
    in property <bool> enabled: true;
    in property <bool> checkable: false;
    in property <bool> checked: false;
    in property <bool> default: false;
    property <color> text-color: enabled ? Data.theme.control-text : Data.theme.control-text-disabled;

    callback clicked;

    height: 25px;
    background: {
        if ta.has-hover {
            Data.theme.control-hovered
        } else {
            transparent
        }
    };

    // Accessibility
    accessible-role: button;
    accessible-checkable: checkable;
    accessible-checked: checked;
    accessible-description: status-tip;
    accessible-enabled: enabled;
    accessible-label: text;
    accessible-action-default => {
        ta.clicked();
    }

    HorizontalLayout {
        padding-left: 5px;
        padding-right: 8px;
        padding-top: 2px;
        padding-bottom: 2px;
        spacing: 3px;

        Rectangle {
            property <bool> checkable-custom-icon: checkable && checked && (icon.width > 0);

            width: self.height;
            background: checkable-custom-icon ? Data.theme.control-checked : transparent;
            border-radius: 5px;
            border-width: checkable-custom-icon ? 1px : 0;
            border-color: Data.theme.control-border;

            Image {
                width: 80%;
                height: self.width;
                colorize: icon-color;
                image-fit: contain;
                vertical-alignment: center;
                horizontal-alignment: center;
                transform-rotation: icon-rotation;
                source: icon;
                accessible-role: none;
            }
        }

        text-txt := Text {
            vertical-alignment: center;
            font-size: 13px;
            font-weight: default ? 600 : 400;
            color: text-color;
            text: text;
            accessible-role: none;
        }

        shortcuts-txt := Text {
            width: max(self.preferred-width, 80px);
            horizontal-alignment: right;
            vertical-alignment: center;
            font-size: 12px;
            font-weight: 300;
            color: text-color;
            text: shortcuts;
            accessible-role: none;
        }
    }

    ta := TouchArea {
        enabled: enabled;

        changed has-hover => {
            if !root.status-tip.is-empty {
                if self.has-hover {
                    Data.status-tip = root.status-tip;
                } else {
                    Data.status-tip = "";
                }
            }
        }

        clicked => {
            // The click may destroy this element without calling the
            // has-hover handler anymore, so we clear the status tip
            // manually to be on the safe side.
            if !root.status-tip.is-empty {
                Data.status-tip = "";
            }
            root.clicked();
        }
    }
}

export component MenuPopup inherits PopupWindow {
    width: self.preferred-width;
    height: self.preferred-height;

    Rectangle {
        background: Data.theme.control;
        border-color: Data.theme.control-border;
        border-width: 1px;

        VerticalLayout {
            padding: 1px;

            @children
        }
    }
}

export component MenuOverlay inherits Rectangle {
    in property <length> opening-width: 0;

    width: self.preferred-width;
    height: self.preferred-height;
    background: Data.theme.control;
    border-color: Data.theme.control-border;
    border-width: 1px;

    // The touch area is important to intercept and ignore any clicks
    // on disabled menu items or on menu separators, to avoid those
    // clicks from propagating to the elements underneath the menu.
    ta := TouchArea {
        VerticalLayout {
            padding: 1px;

            @children
        }
    }

    // Ugly hack to hide the borders between the main menu item and this
    // popup, to making the menu item look "connected" with the menu.
    // One of the border comes from the menu item (thus y=-1px), the other
    // comes from this popup (this height=2px).
    if opening-width > 0: Rectangle {
        x: 1px;
        y: -1px;
        width: opening-width - 2px;
        height: 2px;
        background: root.background;
    }
}