indicatrix-cut 0.7.2

Desktop faceting-design editor: library browsing, spectral 3D rendering, material retargeting, and a solid inspection view.
import { Theme } from "../theme.slint";
import { HelpModel } from "../models/help.slint";

// The small round "?" button a panel carries. A click opens the manual at `topic`, a
// topic id from `HelpTopics` (`models/help.slint`):
//
//     HelpButton { topic: HelpTopics.tier-form; }
//
// It is a plain 20 px circle by default; `diameter` makes it larger. It takes keyboard
// focus (Tab) and answers Space and Enter like a button.
export component HelpButton inherits Rectangle {
    in property <string> topic;
    // What the tooltip says; name the panel when it helps ("Open the manual page on the tier form").
    in property <string> hint: "Open the manual for this part of the program";
    in property <length> diameter: 20px;

    width: root.diameter;
    height: root.diameter;
    border-radius: root.diameter / 2;
    background: help_touch.has-hover ? Theme.surface-control-hover : Theme.surface-control;
    border-width: help_focus.has-focus ? 2px : 1px;
    border-color: help_focus.has-focus ? Theme.accent-cyan : Theme.border-control;

    accessible-role: AccessibleRole.button;
    accessible-label: "Help: " + root.hint;
    accessible-action-default => { HelpModel.open_topic(root.topic); }

    Tooltip { text: @markdown("\{root.hint}"); }

    help_focus := FocusScope {
        key-pressed(event) => {
            if event.text == Key.Space || event.text == Key.Return {
                HelpModel.open_topic(root.topic);
                return accept;
            }
            return reject;
        }
    }

    Image {
        source: @image-url("../icons/help.svg");
        colorize: Theme.text-secondary;
        width: root.diameter * 0.65;
        height: root.diameter * 0.65;
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        image-fit: contain;
    }

    help_touch := TouchArea {
        mouse-cursor: pointer;
        clicked => { HelpModel.open_topic(root.topic); }
    }
}

// A text button for the help window's toolbar and the glossary dialog's footer. `primary`
// fills it with the accent colour; an inactive button is dimmed and ignores clicks.
export component HelpToolButton inherits Rectangle {
    in property <string> label;
    // One plain sentence: what the button does. Shown as the tooltip and read after the label.
    in property <string> hint;
    in property <bool> active: true;
    in property <bool> primary: false;
    callback clicked();

    height: 28px;
    width: max(64px, tool_label.preferred-width + 24px);
    border-radius: Theme.radius-sm;
    opacity: root.active ? 1.0 : 0.45;
    background: root.primary
        ? (tool_touch.has-hover && root.active ? Theme.accent-cyan-hover : Theme.accent-cyan)
        : (tool_touch.has-hover && root.active ? Theme.surface-control-hover : Theme.surface-control);
    border-width: tool_focus.has-focus ? 2px : 1px;
    border-color: tool_focus.has-focus ? Theme.border-accent : (root.primary ? Theme.accent-cyan : Theme.border-control);

    accessible-role: AccessibleRole.button;
    accessible-label: root.label;
    accessible-description: root.hint;
    accessible-enabled: root.active;
    accessible-action-default => {
        if root.active {
            root.clicked();
        }
    }

    if root.hint != "": Tooltip { text: @markdown("\{root.hint}"); }

    tool_focus := FocusScope {
        enabled: root.active;
        key-pressed(event) => {
            if event.text == Key.Space || event.text == Key.Return {
                root.clicked();
                return accept;
            }
            return reject;
        }
    }

    tool_label := Text {
        text: root.label;
        font-size: 12px;
        font-weight: 600;
        color: root.primary ? Theme.text-on-accent : Theme.text-primary;
        horizontal-alignment: center;
        vertical-alignment: center;
    }

    tool_touch := TouchArea {
        enabled: root.active;
        mouse-cursor: pointer;
        clicked => { root.clicked(); }
    }
}