themeconfig.slint

import { VerticalBox, HorizontalBox, ScrollView } from "std-widgets.slint";
import {Theme, JsonTheme} from "globals.slint";

export global ThemeCallbacks {
    pure callback theme-changed(int, JsonTheme);

    in property<[JsonTheme]> themes;
}

component ThemeBar inherits Rectangle {
    in property<color> acc-color: Theme.accent;
    in property<color> bg-color: Theme.background;
    in property<color> txt-color: Theme.foreground;
    in property<string> name: "Pomotroid";
    in-out property<bool> selected: false;
    callback select;

    width: 80%;
    height: 50px;
    background: root.bg-color;
    border-radius: 5px;

    thm-ta := TouchArea {
        clicked => { root.select();}
    }

    accent := Rectangle {
        x: 0;
        height: 100%;
        background: root.acc-color;
        width: 1%;
    }
    Text {
        x: parent.width * 0.05;
        horizontal-alignment: left;
        text: root.name;
        color: root.txt-color;
        font-size: 11pt;
    }
    Image {
        x: parent.width - 10px - self.width;
        source: @image-url("../assets/icons/check.svg");
        height: 50%;
        visible: parent.selected;
        colorize: Theme.accent;
    }
}
export component ThemePage inherits Rectangle {
    background: Theme.background-light;
    in-out property<int> active-theme: Theme.theme-idx;
    in property<[JsonTheme]> themes: ThemeCallbacks.themes;

    VerticalBox {
        ScrollView {
            VerticalBox {
                Text {
                    text: "Themes";
                    font-size: 11pt;
                    horizontal-alignment: center;
                }

                for disp-theme[idx] in root.themes : ThemeBar {
                    acc-color: disp-theme.accent;
                    bg-color: disp-theme.background;
                    txt-color: disp-theme.foreground;
                    name: disp-theme.name;
                    selected: root.active-theme == idx;

                    select => {
                        ThemeCallbacks.theme-changed(idx, disp-theme);
                    }
                }
            }
        }
    }
}