slint/examples/printerdemo_mcu/ui/printer_queue.slint

// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { DemoPalette, PushButton } from "./common.slint";

export struct PrinterQueueItem := {
    status: string, // WAITING..., PRINTING
    progress: int,
    title: string,
    owner: string,
    pages: int,
    size: string, // number instead and format in .slint?
    submission-date: string
}

export global PrinterQueue := {
    callback start-job(string);
    callback cancel-job(int);
    callback pause-job(int);

    property <[PrinterQueueItem]> printer-queue: [
        { status: "PRINTING", progress: 63, title: "Slint-Demo.jpeg", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
        { status: "WAITING...", title: "Adressliste.docx", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
        { status: "WAITING...", title: "210106-FinalPresentation.pdf", owner: "info@slint-ui.com", pages: 6, size: "143kb", submission-date: "11:41 25/01/21" },
    ];
}


PrintQueueDetailsLabel := Text {
    font-weight: 500;
    color: DemoPalette.control-foreground;
    horizontal-stretch: 0;
    font-size: DemoPalette.base-font-size * 0.9375;
}

PrintQueueSeparator := Rectangle {
    height: 1px;
    border-width: 1px;
    border-color: #BDC0D1;
    horizontal-stretch: 2;
}

PrintDetails := GridLayout {
    property <PrinterQueueItem> queue-item;
    spacing: 3px;

    Row {
        PrintQueueDetailsLabel {
            text: "Owner";
        }
        Text {
            text: queue-item.owner;
            color: DemoPalette.secondary-foreground-color;
            overflow: elide;
            horizontal-stretch: 1;
            font-size: DemoPalette.base-font-size * 0.9375;
        }
    }
    Row {
        PrintQueueSeparator {
            colspan: 2;
        }
    }
    Row {
        PrintQueueDetailsLabel {
            text: "Pages";
        }
        Text {
            text: queue-item.pages;
            color: DemoPalette.secondary-foreground-color;
            overflow: elide;
            horizontal-stretch: 1;
            font-size: DemoPalette.base-font-size * 0.9375;
        }
    }
    Row {
        PrintQueueSeparator {
            colspan: 2;
        }
    }
    Row {
        PrintQueueDetailsLabel {
            text: "Size";
        }
        Text {
            text: queue-item.pages;
            color: DemoPalette.secondary-foreground-color;
            overflow: elide;
            horizontal-stretch: 1;
            font-size: DemoPalette.base-font-size * 0.9375;
        }
    }
    Row {
        PrintQueueSeparator {
            colspan: 2;
        }
    }
    Row {
        PrintQueueDetailsLabel {
            text: "Submitted";
        }
        Text {
            text: queue-item.submission-date;
            color: DemoPalette.secondary-foreground-color;
            overflow: elide;
            horizontal-stretch: 1;
            font-size: DemoPalette.base-font-size * 0.9375;
        }
    }
}

NarrowPrintQueueElement := Rectangle {
    property <PrinterQueueItem> queue-item;
    callback cancel-job();

    border-color: DemoPalette.control-outline-color;
    border-radius: 6px;
    border-width: 1px;
    background: DemoPalette.printer-queue-item-background-color;
    clip: true;

    property <bool> expanded;
    property <float> expanded-opacity: 0;

    height: always-visible.min-height + layout.padding * 2;
    states [
        expanded when expanded : {
            height: layout.min-height;
            expanded-opacity: 1;
        }
    ]
    transitions [
        in expanded : {
            animate height { duration: 200ms; easing: ease; }
            animate expanded-opacity { duration: 200ms; }
        }
        out expanded : {
            animate height { duration: 200ms; easing: ease; }
            animate expanded-opacity { duration: 200ms; }
        }
    ]

    TouchArea {
        clicked => {
            expanded = !expanded;
        }
    }

    Rectangle {
        height: 100%;
        layout := VerticalLayout {
            padding: root.border-radius;
            spacing: 4px;
            alignment: start;

            always-visible := VerticalLayout {
                padding: 0;
                spacing: parent.spacing;

                Text {
                    // TODO: text-transform: uppercase
                    text: {
                        if (queue-item.status == "PRINTING") {
                        "\{queue-item.progress}% - \{queue-item.status}"
                        } else {
                            queue-item.status
                        }
                    }
                    color: DemoPalette.status-label-text-color;
                    font-size: DemoPalette.base-font-size * 0.75;
                    font-weight: 800;
                    letter-spacing: 1.26px;
                }

                Text {
                    text: queue-item.title;
                    overflow: elide;
                    color: DemoPalette.text-foreground-color;
                    font-weight: 800;
                    font-size: DemoPalette.base-font-size * 1.125;
                }
            }

            if (expanded || expanded-opacity > 0) : PrintDetails {
                padding: 0px;
                padding-bottom: root.border-radius / 2;
                queue-item: root.queue-item;
                opacity: expanded-opacity;
            }

            if (expanded || expanded-opacity > 0) : HorizontalLayout {
                Rectangle {
                    horizontal-stretch: 0;
                    width: 10%;
                }
                PushButton {
                    opacity: expanded-opacity;
                    text: "Delete";
                    icon: @image-url("images/delete.svg");
                    clicked => { cancel-job(); }
                }
                Rectangle {
                    horizontal-stretch: 0;
                    width: 10%;
                }
            }
        }
    }
}

NarrowPrinterQueueList := Flickable {
    VerticalLayout {
        alignment: start;
        padding: 0px;
        spacing: 6px;

        for queue-item[idx] in PrinterQueue.printer-queue: NarrowPrintQueueElement {
            width: root.width;
            queue-item: queue-item;
            cancel-job => {
                PrinterQueue.cancel-job(idx)
            }
        }
    }
}

export PrinterQueueView := Rectangle {

    border-radius: 18px;
    background: DemoPalette.night-mode ? DemoPalette.printer-action-background-color : #F4F6FF;

    VerticalLayout {
        padding: 6px;
        spacing: 6px;

        queue-list := NarrowPrinterQueueList { }
    }
}