asusctl/rog-control-center/ui/widgets/common.slint

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

export component RogItem inherits Rectangle {
    background: Palette.control-background;
    border-color: Palette.border;
    border-width: 3px;
    border-radius: 10px;
    min-height: 48px;
    max-height: 56px;
}

export component SystemSlider inherits RogItem {
    in property <string> title;
    in property <string> text;
    in-out property <float> value;
    in-out property <float> minimum;
    in-out property <float> maximum;
    callback released(int);

    in-out property <string> help_text;
    in-out property <bool> has_reset: false;
    callback cb_do_reset();

    HorizontalLayout {
        HorizontalLayout {
            width: 40%;
            alignment: LayoutAlignment.stretch;
            padding-left: 10px;
            TouchArea {
                clicked => {
                    slider.value += 1;
                    if slider.value > slider.maximum {
                        slider.value = slider.minimum;
                    }
                }
                HorizontalLayout {
                    spacing: 6px;
                    Text {
                        font-size: 16px;
                        vertical-alignment: TextVerticalAlignment.center;
                        color: Palette.control-foreground;
                        text <=> root.text;
                    }

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

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

        help_popup := PopupWindow {
            x: help.x - self.width + help.width - 10px;
            y: help.y - self.height + help.height - 10px;
            Rectangle {
                drop-shadow-blur: 10px;
                drop-shadow-color: black;
                border-radius: 10px;
                border-color: Palette.accent-background;
                background: Palette.background;
                Dialog {
                    title <=> root.title;
                    VerticalBox {
                        Text {
                            max-width: 420px;
                            font-size: 18px;
                            wrap: TextWrap.word-wrap;
                            horizontal-alignment: TextHorizontalAlignment.center;
                            text <=> root.title;
                        }

                        Rectangle {
                            height: 1px;
                            border-color: black;
                            border-width: 1px;
                        }

                        Text {
                            max-width: 420px;
                            font-size: 16px;
                            wrap: TextWrap.word-wrap;
                            text <=> root.help_text;
                        }
                    }

                    StandardButton {
                        kind: ok;
                    }
                }
            }
        }

        help := HorizontalBox {
            if (help_text != ""): StandardButton {
                kind: StandardButtonKind.help;
                clicked => {
                    help_popup.show();
                }
            }
        }

        reset_popup := PopupWindow {
            x: reset.x - self.width + reset.width;
            y: reset.y - self.height + reset.height;
            Rectangle {
                drop-shadow-blur: 10px;
                drop-shadow-color: black;
                border-radius: 10px;
                border-color: Palette.accent-background;
                background: Palette.background;
                Dialog {
                    Text {
                        max-width: 420px;
                        font-size: 16px;
                        wrap: TextWrap.word-wrap;
                        text: @tr("confirm_reset" => "Are you sure you want to reset this?");
                    }

                    StandardButton {
                        kind: ok;
                        clicked => {
                            root.cb_do_reset();
                        }
                    }

                    StandardButton {
                        kind: cancel;
                    }
                }
            }
        }

        reset := HorizontalBox {
            if (has_reset): StandardButton {
                kind: StandardButtonKind.reset;
                clicked => {
                    reset_popup.show();
                }
            }
        }
    }
}

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

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

export component SystemToggleInt inherits RogItem {
    in property <string> text;
    // in-out property <bool> checked;
    in-out property <int> checked_int;
    callback toggled(int);
    HorizontalLayout {
        spacing: 6px;
        HorizontalLayout {
            alignment: LayoutAlignment.start;
            padding-left: 10px;
            Text {
                font-size: 16px;
                vertical-alignment: TextVerticalAlignment.center;
                color: Palette.control-foreground;
                text <=> root.text;
            }
        }

        HorizontalLayout {
            alignment: LayoutAlignment.end;
            padding-right: 20px;
            Switch {
                checked: root.checked_int != 0;
                toggled => {
                    root.checked_int = self.checked ? 1 : 0;
                    root.toggled(root.checked_int);
                }
            }
        }
    }
}

export component SystemToggleVert inherits RogItem {
    in property <string> text;
    in-out property <bool> checked;
    callback toggled(bool);
    min-height: 86px;
    VerticalLayout {
        alignment: LayoutAlignment.space-around;
        padding-top: 8px;
        Text {
            font-size: 16px;
            vertical-alignment: TextVerticalAlignment.bottom;
            horizontal-alignment: TextHorizontalAlignment.center;
            color: Palette.control-foreground;
            text <=> root.text;
        }

        HorizontalLayout {
            alignment: LayoutAlignment.center;
            padding-bottom: 10px;
            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 {
        HorizontalLayout {
            alignment: LayoutAlignment.start;
            padding-left: 10px;
            Text {
                font-size: 16px;
                vertical-alignment: TextVerticalAlignment.center;
                color: Palette.control-foreground;
                text <=> root.text;
            }
        }

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

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: Palette.accent-background;
            background: Palette.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: Palette.control-foreground;
                            font-size: 32px;
                            font-weight: 900;
                        }

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

                    StandardButton {
                        kind: ok;
                    }

                    StandardButton {
                        kind: cancel;
                    }

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

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