slint/examples/printerdemo/ui/printer_queue.60

/* LICENSE BEGIN
    This file is part of the SixtyFPS Project -- https://sixtyfps.io
    Copyright (c) 2020 Olivier Goffart <olivier.goffart@sixtyfps.io>
    Copyright (c) 2020 Simon Hausmann <simon.hausmann@sixtyfps.io>

    SPDX-License-Identifier: GPL-3.0-only
    This file is also available under commercial licensing terms.
    Please contact info@sixtyfps.io for more information.
LICENSE END */

import { DemoPalette, PrinterQueueItem, PushButton, DemoText } from "./common.60";

PrintQueueDetailsLabel := DemoText {
    font-weight: 500;
    color: DemoPalette.control_foreground;
    horizontal-stretch: 0;
}

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";
        }
        DemoText {
            text: queue_item.owner;
            color: DemoPalette.secondary_foreground_color;
            overflow: elide;
            horizontal-stretch: 1;
        }
    }
    Row {
        PrintQueueSeparator {
            colspan: 2;
        }
    }
    Row {
        PrintQueueDetailsLabel {
            text: "Pages";
        }
        DemoText {
            text: queue_item.pages;
            color: DemoPalette.secondary_foreground_color;
            overflow: elide;
            horizontal-stretch: 1;
        }
    }
    Row {
        PrintQueueSeparator {
            colspan: 2;
        }
    }
    Row {
        PrintQueueDetailsLabel {
            text: "Size";
        }
        DemoText {
            text: queue_item.pages;
            color: DemoPalette.secondary_foreground_color;
            overflow: elide;
            horizontal-stretch: 1;
        }
    }
    Row {
        PrintQueueSeparator {
            colspan: 2;
        }
    }
    Row {
        PrintQueueDetailsLabel {
            text: "Submitted";
        }
        DemoText {
            text: queue_item.submission_date;
            color: DemoPalette.secondary_foreground_color;
            overflow: elide;
            horizontal-stretch: 1;
        }
    }
}

NarrowPrintQueueElement := Rectangle {
    property <PrinterQueueItem> queue_item;

    border-color: DemoPalette.control_outline_color;
    border-radius: 14px;
    border-width: 2px;
    background: DemoPalette.printer_queue_item_background_color;

    property <bool> expanded;

    VerticalLayout {
        padding: root.border_radius;
        spacing: 4px;

        DemoText {
            // 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.56px;
        }

        DemoText {
            text: queue_item.title;
            overflow: elide;
            color: DemoPalette.text_foreground_color;
            font-weight: 800;
            font-size: DemoPalette.base_font_size * 1.125;
        }

        if (expanded): PrintDetails {
            padding: 0px;
            padding-bottom: root.border-radius / 2;
            queue_item: root.queue_item;
        }

        if (expanded): HorizontalLayout {
            Rectangle {
                horizontal-stretch: 0;
                width: 10%;
            }
            PushButton {
                text: "More";
            }
            Rectangle {
                horizontal-stretch: 0;
                width: 10%;
            }
        }
    }

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

NarrowPrinterQueueList := Flickable {
    property <[PrinterQueueItem]> printer_queue;
    viewport_height: 2000px; /* FIXME: the flickable needs to learn its viewport height from the layout */
    viewport_width: width;

    VerticalLayout {
        alignment: start;
        padding: 0px;
        spacing: 13.5px;

        for queue_item[idx] in root.printer_queue: NarrowPrintQueueElement {
            width: root.width;
            queue_item: queue_item;
        }
    }
}

ProgressBar := Rectangle {
    property <int> progress;

    // FIXME: The intermediate rectangle is needed to allow the surrounding
    // layout to freely resize the progress bar without affecting the design-intended
    // height of 6px. The alternative of specifying a `maximum-height: 6px` will unfortunately
    // also affect the width calculation and make it vanish altogether.
    Rectangle {
        y: parent.height / 2 - 3px;
        height: 6px;

        border-radius: 3px;
        background: DemoPalette.neutral_box;

        Rectangle {
            width: max(6px, progress * parent.width / 100);
            border-radius: parent.border-radius;
            background: DemoPalette.control_foreground;
        }
    }
}

WidePrintQueueElement := Rectangle {
    callback cancel_job();
    callback pause_job();

    property <PrinterQueueItem> queue_item;

    border-color: DemoPalette.neutral_box;
    border-radius: 14px;
    border-width: 2px;
    background: DemoPalette.printer_queue_item_background_color;

    GridLayout {
        padding: parent.border_radius;
        spacing: 0px;

        Row {
            VerticalLayout {
                colspan: 2;
                horizontal-stretch: 1;
                padding: 0px;
                spacing: 0px;

                HorizontalLayout {
                    DemoText {
                        // 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.56px;
                    }
                    ProgressBar {
                        progress: queue_item.progress;
                    }
                }

                DemoText {
                    text: queue_item.title;
                    color: DemoPalette.text_foreground_color;
                    overflow: elide;
                    font-weight: 800;
                    font-size: DemoPalette.base_font_size * 1.125;
                }
            }

            Rectangle {
                width: 0%;
            }

            Rectangle {
                width: 12.5%;
            }

            PrintDetails {
                colspan: 2;
                rowspan: 3;

                padding: 0px;
                padding-bottom: root.border-radius / 2;
                queue_item: root.queue_item;
            }
        }

        Row {
            Rectangle {
                colspan: 2;
                height: 0%;
            }
        }

        Row {
            HorizontalLayout {
                colspan: 2;
                spacing: 14px;
                padding: 0px;
                horizontal-stretch: 1;

                PushButton {
                    text: "Pause";
                    icon: @image-url("images/pause.svg");
                    clicked => { pause_job(); }
                }
                PushButton {
                    primary: false;
                    text: "Delete";
                    icon: @image-url("images/delete.svg");
                    clicked => { cancel_job(); }
                }
            }
        }
    }
}

export WidePrinterQueueList := Flickable {
    callback cancel_job(int);
    callback pause_job(int);
    property <[PrinterQueueItem]> printer_queue;
    viewport_height: 2000px; /* FIXME: the flickable needs to learn its viewport height from the layout */

    VerticalLayout {
        alignment: start;
        padding: 0px;
        spacing: 13.5px;

        for queue_item[idx] in root.printer_queue: WidePrintQueueElement {
            queue_item: queue_item;
            cancel_job => { root.cancel_job(idx) }
            pause_job => { root.pause_job(idx) }
        }
    }
}

export PrinterQueue := Rectangle {
    property <[PrinterQueueItem]> printer_queue <=> queue_list.printer_queue;

    border-radius: 27px;
    background: DemoPalette.night_mode ? DemoPalette.printer_action_background_color : #F4F6FF;

    VerticalLayout {
        alignment: start;
        padding: 16px;
        spacing: 16px;

        DemoText {
            text: "Printing-Queue";
            color: DemoPalette.text_foreground_color;
            font-size: DemoPalette.base_font_size * 1.5;
            font-weight: 700;
        }

        queue_list := NarrowPrinterQueueList {
            width: root.width - 2*parent.padding; // FIXME why do we need this? bug in layout?
        }
    }
}