slint/demos/printerdemo_mcu/ui/home_page.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { DemoPalette, Page, PushButton } from "./common.slint";
import { CopyPage } from "./copy_page.slint";
import { ScanPage } from "./scan_page.slint";
import { PrinterQueueView } from "./printer_queue.slint";

component ActionButton inherits Rectangle {
    in property <image> icon <=> img.source;
    in property <string> text <=> label.text;

    callback clicked;

    VerticalLayout {
        spacing: 4px;

        Rectangle {
            border-radius: 12px;
            border-width: 3px;
            border-color: DemoPalette.control-outline-color;
            background: DemoPalette.printer-action-background-color;

            img := Image {
                x: (parent.width / 2) - (self.width / 2);
                y: (parent.height / 2) - (self.height / 2);
                width: self.source.width * 1px / 2;
                height: self.source.height * 1px / 2;
                colorize: DemoPalette.text-foreground-color;
            }
        }

        label := Text {
            font-size: DemoPalette.base-font-size * 1.2;
            font-weight: 800;
            horizontal-alignment: center;
            color: DemoPalette.text-foreground-color;
        }
    }

    TouchArea { clicked => { root.clicked() } }
}

export component HomePage inherits Page {
    in-out property <length> header-row-height: 40px / 2;
    in-out property <length> button-spacing: 8px;
    in-out property <length> button-width: 127px / 2;
    in-out property <length> button-height: root.button-width + 20px;
    in-out property <int> current-subpage: 0;

    header: "Printer";

    for action[idx] in [
        { name: "Copy", icon: @image-url("images/copy.svg") },
        { name: "Scan", icon: @image-url("images/scan.svg") },

    ]: ActionButton {
        clicked => { root.current-subpage = idx + 1; }
        x: mod(idx, 1) * (root.button-width + root.button-spacing) + root.button-spacing;
        y: floor(idx / 1) * (root.button-height + root.button-spacing)
           + root.header-row-height
           + /* top-padding of printer queue */ 18px; // align with the first item of the printer queue
        width: root.button-width;
        height: root.button-height;
        icon: action.icon;
        text: action.name;
    }

    queue-view := PrinterQueueView {
        x: root.button-width + root.button-spacing * 2;
        width: parent.width - self.x;
    }

    ScanPage {
        back => { root.current-subpage = 0 }
        x: root.current-subpage == 2 ? 0 : parent.width + parent.x + 2px;
        animate x { duration: 125ms; easing: ease; }
    }

    CopyPage {
        back => { root.current-subpage = 0 }
        x: root.current-subpage == 1 ? 0 : parent.width + parent.x + 2px;
        animate x { duration: 125ms; easing: ease; }
    }
}