asusctl/rog-control-center/ui/common_widgets.slint

import { VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
import { Theme } from "globals.slint";

export component RogItem inherits Rectangle {
        background: Theme.background-color;
        border-color: Colors.black;
        border-width: 3px;
        border-radius: 10px;
}

export component SystemSlider inherits RogItem {
    in property <string> text;
    in-out property <float> value;
    in-out property <float> minimum;
    in-out property <float> maximum;
    callback released(int);
    HorizontalLayout {
        HorizontalBox {
            width: 30%;
            alignment: LayoutAlignment.start;
            Text {
                font-size: 16px;
                vertical-alignment: TextVerticalAlignment.center;
                color: Theme.text-foreground-color;
                text <=> root.text;
            }

            Text {
                font-size: 16px;
                vertical-alignment: TextVerticalAlignment.center;
                color: Theme.text-foreground-color;
                text: ": \{Math.round(root.value)}";
            }
        }

        HorizontalBox {
            // alignment: LayoutAlignment.end;
            padding-right: 20px;
            Slider {
                maximum: root.maximum;
                minimum: root.minimum;
                value <=> root.value;
                released => {
                    root.released(Math.round(root.value))
                }
            }
        }
    }
}

export component SystemToggle inherits RogItem {
    in property <string> text;
    in-out property <bool> checked;
    callback toggled(bool);
    HorizontalLayout {
        HorizontalBox {
            alignment: LayoutAlignment.start;
            Text {
                font-size: 16px;
                vertical-alignment: TextVerticalAlignment.center;
                color: Theme.text-foreground-color;
                text <=> root.text;
            }
        }

        HorizontalBox {
            alignment: LayoutAlignment.end;
            padding-right: 20px;
            Switch {
                checked <=> root.checked;
                toggled => {
                    root.toggled(root.checked)
                }
            }
        }
    }
}

export component SystemDropdown inherits RogItem {
    in property <string> text;
    in-out property <int> current_index;
    in-out property <string> current_value;
    in-out property <[string]> model;
    callback selected(int);
    HorizontalLayout {
        HorizontalBox {
            alignment: LayoutAlignment.start;
            Text {
                font-size: 16px;
                vertical-alignment: TextVerticalAlignment.center;
                color: Theme.text-foreground-color;
                text <=> root.text;
            }
        }

        HorizontalBox {
            alignment: LayoutAlignment.end;
            padding-right: 20px;
            ComboBox {
                model <=> root.model;
                current-index <=> root.current_index;
                current-value <=> root.current_value;
                selected => {
                    root.selected(root.current_index)
                }
            }
        }
    }
}

// A variable bar that can be single or double ended
export component ValueBar inherits Rectangle {
    in property <float> value: 0.0;
    in property <float> min: 0.0;
    in property <float> max: 1.0;
    function percentage(min: float, max: float, value: float) -> float {
        if (min < 0.0 && max > 0.0) {
            // do a percentage of each half as 0-50%
            if (value >= max + min) {
                return (value - (max + min) / 2) / (max - min);
            }
            return 0.50 - (value - (min - max) / 2) / (max - min);
        }
        return (value - min) / (max - min);
    }
    function set_x(min: float, max: float, value: float, width: length) -> length {
        if (min < 0.0 && max > 0.0) {
            if (value < max + min) {
                return width / 2 - width * (percentage(min, max, value));
            }
            return width / 2;
        }
        return 0;
    }
    Rectangle {
        border-radius: 3px;
        background: Theme.neutral-box;
        Rectangle {
            x: set_x(root.min, root.max, root.value, root.width);
            width: parent.x + parent.width * percentage(root.min, root.max, root.value);
            border-radius: parent.border-radius;
            background: Theme.control-secondary;
        }

        Text {
            vertical-alignment: center;
            horizontal-alignment: center;
            text: root.value;
            font-size: root.height;
            font-weight: 900;
            color: Theme.control-foreground;
        }
    }
}

export component PopupNotification {
    in property <string> heading;
    in property <string> content;
    _p := PopupWindow {
        x: root.x;
        y: root.y;
        width: root.width;
        height: root.height;
        // TODO: add properties to display
        Rectangle {
            border-width: 2px;
            border-color: Theme.control-outline;
            background: Theme.notification-background;
            // TODO: drop shadows slow
            // drop-shadow-offset-x: 7px;
            // drop-shadow-offset-y: 7px;
            // drop-shadow-color: black;
            // drop-shadow-blur: 30px;
            VerticalLayout {
                Dialog {
                    VerticalLayout {
                        alignment: start;
                        Text {
                            text: heading;
                            color: Theme.text-foreground-color;
                            font-size: 32px;
                            font-weight: 900;
                        }

                        Text {
                            text: content;
                            color: Theme.text-foreground-color;
                            font-size: 18px;
                        }
                    }

                    StandardButton {
                        kind: ok;
                    }

                    StandardButton {
                        kind: cancel;
                    }

                    Button {
                        text: "More Info";
                        dialog-button-role: action;
                    }
                }
            }
        }
    }

    public function show() {
        _p.show();
    }
}