slint/demos/home-automation/ui/components/appliance.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Palette, Measurements, Colors } from "../common.slint";
import { AppState } from "../appState.slint";
import { HaText } from "general/haText.slint";

export component Appliance {
    in property <brush> background: #b5b5b5;
    in property <string> name;
    in property <string> id;
    in property <int> index;
    in property <bool> full-screen: false;
    in property <length> image-size: self.width;
    in property <string> time-remaining: "00:00 hrs";
    in property <image> appliance-image: @image-url("../images/microwave.jpg");
    property <color> text-color: Palette.appliance-background;
    tile := Rectangle {
        clip: true;
        background: Palette.appliance-background;
        border-radius: Measurements.tile-radius;
        Rectangle {
            clip: true;
            min-width: tile.width;
            max-width: tile.width;
            height: tile.height / 2;
            x: 0;
            y: tile.height - self.height;
            // border-radius: Measurements.tile-radius;
            background: Palette.appliance-alternate-background;
            if (root.width > Measurements.small-width-tile): Image {
                width: parent.width;
                height: image-size;
                y: -80px;
                image-fit: cover;
                source: appliance-image;
            }
        }

        VerticalLayout {
            padding: (tile.height > Measurements.small-height-tile) ? 36px : 18px;
            width: 100%;
            height: 100%;
            alignment: start;
            HaText {
                text: "Appliance";
                font-size: 16pt;
                font-weight: 400;
                color: Palette.appliance-alternate-foreground;
            }

            HaText {
                text: root.name;
                font-size: 20pt;
                font-weight: 400;
                color: Palette.appliance-foreground;
            }

            Rectangle {
                height: 10px;
            }

            VerticalLayout {
                spacing: -10px;
                HaText {
                    text: "Time Remaining: ";
                    font-size: 16pt;
                    font-weight: 400;
                    color: Palette.appliance-foreground;
                }

                HaText {
                    text: root.time-remaining;
                    font-size: 30pt;
                    font-weight: 500;
                    color: Palette.appliance-foreground;
                }
            }
        }
    }
}