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

import { Button, VerticalBox } from "std-widgets.slint";
import { Theme, AppSize } from "globals.slint";
import { PageSystem, AvailableSystemProperties, SystemPageData } from "pages/system.slint";
import { SideBar } from "widgets/sidebar.slint";
import { PageAbout } from "pages/about.slint";
import { PageFans } from "pages/fans.slint";
import { PageAnime, AnimePageData } from "pages/anime.slint";
import { PageAura, AuraPageData, AuraEffect } from "pages/aura.slint";
import { PageAppSettings, AppSettingsPageData } from "pages/app_settings.slint";

export { AppSize, AuraEffect, Theme, AvailableSystemProperties, SystemPageData, AuraPageData, AnimePageData, AppSettingsPageData }

export component MainWindow inherits Window {
    default-font-family: "DejaVu Sans";
    in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];
    private property <bool> show-notif;
    private property <bool> fade-cover;
    private property <bool> toast: false;
    private property <string> toast_text: "I show when something is waiting";
    callback show_toast(string);
    show_toast(text) => {
        toast = text != "";
        toast_text = text;
    }
    callback exit-app();
    callback show-notification(bool);
    show-notification(yes) => {
        show-notif = yes;
        fade-cover = yes;
    }
    callback external_colour_change();
    external_colour_change() => {
        aura.external_colour_change();
        aura.external_colour_change();
    }
    min-height: AppSize.height;
    min-width: AppSize.width;
    background: Colors.black;
    HorizontalLayout {
        padding: 0px;
        VerticalLayout {
            side-bar := SideBar {
                title: @tr("ROG");
                model: [
                    @tr("Menu1" => "System Control"),
                    @tr("Menu2" => "Keyboard Aura"),
                    @tr("Menu3" => "AniMe Matrix"),
                    @tr("Menu4" => "Fan Curves"),
                    @tr("Menu5" => "App Settings"),
                    @tr("Menu6" => "About"),
                ];
                available: root.sidebar_items_avilable;
            }

            Button {
                max-height: 20px;
                text: "Quit";
                clicked => {
                    root.exit-app();
                }
            }
        }

        Rectangle {
            background: Colors.purple;
            if(side-bar.current-item == 0): page := PageSystem {
                width: root.width - side-bar.width;
                height: root.height + 12px;
            }

            aura := PageAura {
                width: root.width - side-bar.width;
                visible: side-bar.current-item == 1;
            }

            if(side-bar.current-item == 2): PageAnime {
                width: root.width - side-bar.width;
            }

            if(side-bar.current-item == 3): PageFans {
                width: root.width - side-bar.width;
            }

            if(side-bar.current-item == 4): PageAppSettings {
                width: root.width - side-bar.width;
            }

            if(side-bar.current-item == 5): PageAbout {
                width: root.width - side-bar.width;
            }
        }
    }

    if fade-cover: Rectangle {
        x: 0px;
        y: 0px;
        width: root.width;
        height: root.height;
        background: Colors.rgba(25,33,23,20);
        opacity: 0.7;
        TouchArea {
            height: 100%;
            width: 100%;
            clicked => {
                // toolbar-dropdown.close();
                if (show-notif) {
                    show-notif = false;
                }
                fade-cover = false;
            }
        }
    }

    if toast: Rectangle {
        x: 0px;
        y: 0px;
        width: root.width;
        height: 32px;
        opacity: 0.8;
        TouchArea {
            height: 100%;
            width: 100%;
            clicked => {
                toast = false;
            }
        }

        Rectangle {
            height: 100%;
            width: 100%;
            background: #1a043d;
            Text {
                color: Theme.text-foreground-color;
                text: root.toast_text;
            }
        }
    }

    // // TODO: or use Dialogue
    if show-notif: Rectangle {
        x: root.width / 8;
        y: root.height / 8;
        height: (root.height / 8) * 6;
        width: (root.width / 8) * 6;
        TouchArea {
            height: 100%;
            width: 100%;
            clicked => {
                show-notif = false;
                exit-app();
            }
        }

        // TODO: add properties to display
        Rectangle {
            height: 100%;
            width: 100%;
            background: Theme.neutral-box;
            Text {
                text: "Click here to exit";
            }
        }
    }
}